Merged from the next branch for the new site v5.1

config.toml

@@ -4,8 +4,10 @@ title = 'Gianmarco Gargiulo'
 theme = 'hugo-casper3'
 
 [params]
-  description = "I'm a 19 years old UI Designer, Photographer and Artist."
+  description = "I'm an artist, designer, photographer and libre advocate."
   favicon = "/favicon.ico"
+  #logo = "/logo.png"
+  navlogo = "/navlogo.png"
 
 [menu]
   [[menu.main]]

content/socialbg.svg

@@ -1,87 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="3840"
-   height="2160"
-   viewBox="0 0 1016 571.5"
-   version="1.1"
-   id="svg5"
-   inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
-   sodipodi:docname="socialbg.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview7"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:pageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:document-units="px"
-     showgrid="false"
-     inkscape:zoom="0.34453125"
-     inkscape:cx="1893.8776"
-     inkscape:cy="1010.068"
-     inkscape:window-width="1908"
-     inkscape:window-height="997"
-     inkscape:window-x="6"
-     inkscape:window-y="6"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs2">
-    <linearGradient
-       inkscape:collect="always"
-       id="linearGradient973">
-      <stop
-         style="stop-color:#eb4034;stop-opacity:0.2"
-         offset="0"
-         id="stop969" />
-      <stop
-         style="stop-color:#eb4034;stop-opacity:0"
-         offset="1"
-         id="stop971" />
-    </linearGradient>
-    <linearGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient973"
-       id="linearGradient975"
-       x1="753.97491"
-       y1="109.4361"
-       x2="753.6554"
-       y2="-66.578423"
-       gradientUnits="userSpaceOnUse" />
-    <mask
-       maskUnits="userSpaceOnUse"
-       id="mask1631">
-      <rect
-         style="fill:#eb4034;fill-opacity:1;stroke:none;stroke-width:0.676669"
-         id="rect1633"
-         width="1016"
-         height="571.5"
-         x="-7.1054274e-15"
-         y="7.1054274e-15"
-         mask="none" />
-    </mask>
-  </defs>
-  <g
-     inkscape:label="Livello 1"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <path
-       style="fill:url(#linearGradient975);stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
-       d="m 166.95268,-5.3756612 c 0,0 259.26048,111.6601612 567.05545,114.4247912 307.79497,2.76463 300.42267,-62.664857 300.42267,-62.664857 0,0 11.0585,-67.886918 -3.6862,-57.135596 C 1016,0 166.95268,-5.3756612 166.95268,-5.3756612 Z"
-       id="path869"
-       mask="none" />
-    <path
-       id="rect1509"
-       mask="none"
-       style="fill:#eb4034;fill-opacity:1;stroke:none;stroke-width:0.676669"
-       d="M 0,0 V 571.49999 H 1016 V 70.100112 C 987.6553,88.516776 915.8481,110.68245 734.0079,109.04916 466.68274,106.64803 236.21694,22.190527 180.16833,0 Z" />
-  </g>
-</svg>

themes/hugo-casper3/assets/scss/custom.scss

@@ -37,6 +37,24 @@ blinkbig {
 
 .intro-image {
   border-radius: 6px;
+  display: block;
+  margin-left: auto;
+}
+
+/* FONTS */
+
+@font-face {
+  font-family: "Mustica Pro";
+  src: url("fonts/MusticaPro-SemiBold.otf") format("opentype");
+  font-weight: normal;
+  font-style: normal
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("fonts/Roboto-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal
 }
 
 /* ISSO CSS */

themes/hugo-casper3/assets/scss/main.scss

@@ -142,7 +142,7 @@ body,html{
 }
 body{
     color:#e5e5e5;
-    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
+    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,"Roboto",Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
     font-size:1.6rem;
     line-height:1.6em;
     font-weight:400;
@@ -344,12 +344,12 @@ body{
     margin-top:64px;
     padding-bottom:12px;
     color:#fff;
-    background:#090a0b no-repeat 50%;
+    background:#090a0b no-repeat 20%;
     background-size:cover
 }
 .site-header-background:before{
     bottom:0;
-    background:rgba(0,0,0,.18)
+    background:rgba(0,0,0,0)
 }
 .site-header-background:after,.site-header-background:before{
     content:"";
@@ -363,7 +363,7 @@ body{
 .site-header-background:after{
     bottom:auto;
     height:140px;
-    background:linear-gradient(rgba(0,0,0,.15),transparent)
+    background:linear-gradient(rgba(0,0,0,0),transparent)
 }
 .site-header-background.no-image:after,.site-header-background.no-image:before{
     display:none
@@ -373,7 +373,18 @@ body{
     display:flex;
     flex-direction:column;
     justify-content:center;
-    align-items:center;
+    align-items:left;
+    padding:6vw 3vw;
+    min-height:200px;
+    max-height:340px;
+    margin-top:230px
+}
+.site-header-content-list{
+    z-index:100;
+    display:flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items:left;
     padding:6vw 3vw;
     min-height:200px;
     max-height:340px
@@ -382,10 +393,10 @@ body{
     z-index:10;
     margin:0 0 0 -2px;
     padding:0;
+    font-family:"Mustica Pro","Roboto",sans-serif;
     font-size:5rem;
     line-height:1em;
-    font-weight:600;
+    font-weight:600
-    white-space:nowrap
 }
 .site-logo{
     max-height:55px
@@ -394,6 +405,7 @@ body{
     z-index:10;
     margin:0;
     padding:5px 0;
+    font-family:"Mustica Pro","Roboto",sans-serif;
     font-size:2.1rem;
     line-height:1.4em;
     font-weight:400;
@@ -403,14 +415,14 @@ body{
     z-index:1000
 }
 .site-home-header .site-header-background{
-    margin-top:0
+    margin-top:0;
+    height:900px
 }
 .site-home-header .site-header-content{
     padding:5vw 3vw 6vw
 }
 .site-home-header .site-title{
     font-size:5.5rem;
-    text-align:center
 }
 .site-home-header .site-description{
     font-size:2.2rem;
@@ -468,7 +480,7 @@ body{
     justify-content:space-between;
     align-items:flex-start;
     height:64px;
-    font-size:1.3rem
+    font-size:1.5rem
 }
 .site-nav,.site-nav-left{
     display:flex;
@@ -483,7 +495,6 @@ body{
     padding:10px 0 80px;
     font-weight:500;
     letter-spacing:.2px;
-    text-transform:uppercase;
     white-space:nowrap;
     -ms-overflow-scrolling:touch
 }
@@ -538,7 +549,9 @@ body{
     margin:0 0 0 -12px;
     padding:0;
     list-style:none;
-    transition:all 1s cubic-bezier(.19,1,.22,1)
+    transition:all 1s cubic-bezier(.19,1,.22,1);
+    font-family:"Mustica Pro","Roboto",sans-serif;
+    margin-top:-2px
 }
 .nav li{
     display:block;
@@ -707,7 +720,6 @@ body{
     margin:0 0 40px;
     padding:0 20px 40px;
     min-height:220px;
-    border-bottom:1px solid #525252;
     background-size:cover
 }
 .post-card-image-link{
@@ -728,7 +740,7 @@ body{
     color:#e5e5e5
 }
 .post-card-content-link:hover{
-    text-decoration:none
+    text-decoration:underline
 }
 .post-card-header{
     margin:15px 0 0
@@ -750,7 +762,8 @@ body{
 .post-card-title{
     margin:0 0 .4em;
     line-height:1.15em;
-    transition:color .2s ease-in-out
+    transition:color .2s ease-in-out;
+    font-family:"Mustica Pro","Roboto",sans-serif
 }
 .no-image .post-card-title{
     margin-top:0
@@ -763,7 +776,7 @@ body{
 .post-card-excerpt{
     max-width:56em;
     color:#e5e5e5;
-    font-family:Roboto,serif
+    font-family:"Mustica Pro","Roboto",serif
 }
 .post-card-excerpt p{
     margin-bottom:1em
@@ -851,7 +864,7 @@ body{
     font-weight:600
 }
 .post-card-byline-date{
-    font-size:1.2rem
+    font-size:1.3rem
 }
 .post-card-byline-date .bull{
     display:inline-block;
@@ -984,12 +997,13 @@ body{
 }
 .post-full-title{
     margin:0 0 .2em;
-    color:#e5e5e5
+    color:#e5e5e5;
+    font-family:"Mustica Pro","Roboto",sans-serif
 }
 .post-full-custom-excerpt{
-    margin:20px 0 0;
+    margin:0px 0 0;
     color:#e5e5e5;
-    font-family:Roboto,serif;
+    font-family:"Mustica Pro","Roboto",serif;
     font-size:2.3rem;
     line-height:1.4em;
     font-weight:300
@@ -1017,8 +1031,8 @@ body{
     margin:0 auto;
     padding:0 170px 6vw;
     min-height:230px;
-    font-family:Roboto;
+    font-family:"Roboto";
-    font-size:2rem;
+    font-size:1.7rem;
     line-height:1.6em;
     background:#1e1e1e
 }
@@ -1186,7 +1200,7 @@ body{
 }
 .post-full-content h1,.post-full-content h2,.post-full-content h3,.post-full-content h4,.post-full-content h5,.post-full-content h6{
     color:#e5e5e5;
-    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif
+    font-family:"Mustica Pro","Roboto",sans-serif
 }
 .post-full-content h1{
     margin:.5em 0 .4em;
@@ -1259,7 +1273,7 @@ body{
     padding:.4em 1em .9em;
     border:0;
     color:#e5e5e5;
-    font-family:Roboto,serif;
+    font-family:"Mustica Pro","Roboto",serif;
     font-size:3.2rem;
     line-height:1.35em;
     text-align:center
@@ -1348,7 +1362,7 @@ body{
     width:auto;
     border-spacing:0;
     border-collapse:collapse;
-    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
+    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,"Roboto",Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
     font-size:1.6rem;
     white-space:nowrap;
     vertical-align:top;
@@ -1399,7 +1413,7 @@ body{
 .post-full-byline-meta{
     margin:0px 0 0;
     color:#e5e5e5;
-    font-size:1.2rem;
+    font-size:1.4rem;
     line-height:1.2em;
     letter-spacing:.2px
 }
@@ -1723,11 +1737,11 @@ body{
 .read-next-card-header h3{
     margin:0;
     color:hsla(0,0%,100%,.6);
-    font-size:1.2rem;
+    font-family:Mustica Pro;
+    font-size:2rem;
     line-height:1em;
     font-weight:300;
-    letter-spacing:.4px;
+    letter-spacing:.4px
-    text-transform:uppercase
 }
 .read-next-card-header h3 a{
     color:#fff;
@@ -1861,7 +1875,7 @@ body{
 .post-full-content figcaption{
     margin:1em 0 0;
     color:#5d7179;
-    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
+    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,"Roboto",Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
     font-size:75%;
     line-height:1.5em;
     text-align:center
@@ -1925,7 +1939,7 @@ body{
 .post-full-content .kg-bookmark-container{
     display:flex;
     min-height:148px;
-    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
+    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,"Roboto",Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
     border-radius:3px
 }
 .post-full-content .kg-bookmark-container,.post-full-content .kg-bookmark-container:hover{
@@ -2310,7 +2324,7 @@ body{
     margin:0 auto 50px;
     max-width:650px;
     color:#fff;
-    font-family:Roboto,serif;
+    font-family:"Roboto",serif;
     font-size:2.4rem;
     line-height:1.3em;
     font-weight:300;
@@ -2428,7 +2442,7 @@ body{
         opacity:.9
     }
     .site-header-background:before{
-        background:rgba(0,0,0,.6)
+        background:rgba(0,0,0,0)
     }
     .post-feed{
         background:#191b1f

themes/hugo-casper3/layouts/_default/baseof.html

@@ -34,14 +34,26 @@
         <footer class="site-footer outer">
             <div class="site-footer-content inner">
                 <section class="copyright"><a href="/">🄯 2016 – {{ now.Format "2006" }} {{ .Site.Title }}</a></section>
+                <a href="/">
+                    <figure>
                 <img src="/gmgpin.gif"></img>
+                    </figure>
+                </a>
                 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
                     <figure>
                         <img src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png">
                     </figure>
                 </a>
+                <a href="https://debian.org">
+                    <figure>
                 <img src="/debianpin.gif"></img>
+                    </figure>
+                </a>
+                <a href="https://www.gnu.org/licenses/agpl-3.0.html">
+                    <figure>
                 <img src="/agpl3pin.gif"></img>
+                    </figure>
+                </a>
                 <nav class="site-footer-nav">
                     <a href="/tos">Terms of Service</a>
                     <a href="https://git.gianmarco.gg/gianmarco/gmgsite">Source Code</a>

themes/hugo-casper3/layouts/_default/list.html

@@ -6,7 +6,7 @@
     {{- partial "site-header.html" $ -}}
 
     {{- partial "header-background.html" $ -}}
-        <div class="inner site-header-content">
+        <div class="inner site-header-content-list">
             <h1 class="site-title">{{ .Title }}</h1>
             <h2 class="site-description">
                 {{ if .Param "description" }}

themes/hugo-casper3/layouts/_default/single.html

@@ -40,10 +40,10 @@
                                 <span class="byline-reading-count"><span class="bull">&bull;</span> <svg xmlns="http://www.w3.org/2000/svg" class="mr-1" width="16" height="16" viewBox="0 2 24 24" stroke-width="1.5" fill="currentColor" stroke-linecap="round" stroke-linejoin="round">
         <path d="M19 1l-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"/>
       </svg> {{ .WordCount }} words</span>
-                            </div>
+
-                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 2 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16z"/></svg> Tags:&nbsp;&nbsp;{{ range (.GetTerms "tags") }}
+                            <span class="bull">&bull;</span> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 2 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16z"/></svg>&nbsp;&nbsp;{{ range (.GetTerms "tags") }}
             <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>&nbsp;&nbsp;
-        {{ end }}
+        {{ end }}</div>
                         </section>
                         {{ end }}
 

themes/hugo-casper3/layouts/index.html

@@ -8,15 +8,17 @@
         <div class="inner">
             {{- partial "site-nav.html" . -}}
             <div class="site-header-content">
-                <img class="intro-image" src="/me.png" width=200px />
                 <h1 class="site-title">
                     {{ if $.Site.Params.logo }}
                         <img class="site-logo" src="{{ $.Site.Params.logo }}" alt="{{ .Site.Title }}" />
                     {{ else }}
-                        ‣ {{ $.Site.Title }} <blinkbig> </blinkbig>
+                        Hi, I'm <font color="#EB4034">{{ $.Site.Title }}</font>.
                     {{ end }}
                 </h1>
-                <h2 class="site-description">{{ $.Site.Params.description }}</h2>
+                <h2 class="site-description">I'm an <font color="#EB4034">artist</font>, <font color="#0171FF">designer</font>, <font color="#03B000">photographer</font> and <font color="#FFB002">libre advocate</font>.</h2>
+
+                <!-- This is the old way of getting the description, I had to hardcode it in order to apply color. -->
+                <!-- <h2 class="site-description">{{ $.Site.Params.description }}</h2> -->
 
             </div>
         </div>

themes/hugo-casper3/layouts/partials/post-card.html

@@ -28,7 +28,9 @@
 
             <footer class="post-card-meta">
                         <span class="post-card-byline-date"><time datetime="{{ .context.Date.Format "2006-31-01" }}">{{ .context.Date.Format "2 January 2006" }}</time>
-                            <span class="bull">&bull;</span> {{ .context.ReadingTime }} min read</span>
+                            <span class="bull">&bull;</span> {{ .context.ReadingTime }} min read <span class="bull">&bull;</span> {{ range (.context.GetTerms "tags") }}
+            <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>&nbsp;&nbsp;
+        {{ end }}</span>
                 </footer>
     
         </div>

themes/hugo-casper3/layouts/partials/site-nav.html

@@ -1,11 +1,10 @@
 <nav class="site-nav">
     <div class="site-nav-left">
-        {{ if eq $.Site.Params.logo "thisshouldfail" }}
+            {{ if $.Site.Params.navlogo }}
-            <a class="site-nav-logo" href="/"><img src="{{ $.Site.Params.logo }}" alt="{{ $.Site.Title }}" /></a>
+            <a class="site-nav-logo" href="/"><img src="{{ $.Site.Params.navlogo }}" alt="{{ $.Site.Title }}" /></a>
-        {{ else }}
+            {{ else }}
             <a class="site-nav-logo" href="/">‣ {{ $.Site.Title }} <blink> ⁣⁣</blink></a>
-        {{ end }}
+            {{ end }}
-        
         <div class="site-nav-content">
             <ul class="nav" role="menu">
                 {{ range $.Site.Menus.main }}