New intro text and background

config.toml

@@ -4,9 +4,9 @@ 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"
+  #logo = "/logo.png"
   navlogo = "/navlogo.png"
 
 [menu]

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

@@ -37,6 +37,8 @@ blinkbig {
 
 .intro-image {
   border-radius: 6px;
+  display: block;
+  margin-left: auto;
 }
 
 /* ISSO CSS */

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

@@ -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,6 +393,7 @@ 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;
@@ -394,6 +406,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 +416,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;
@@ -538,7 +551,8 @@ body{
     padding:0;
     list-style:none;
     transition:all 1s cubic-bezier(.19,1,.22,1);
-    font-family:Mustica Pro,Roboto,sans-serif
+    font-family:Mustica Pro,Roboto,sans-serif;
+    margin-top:-2px
 }
 .nav li{
     display:block;

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/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/header-background.html

@@ -8,7 +8,7 @@
 {{ else }}
     <style type="text/css">
         .responsive-header-img {
-            background-image: url('/introbg.svg');
+            background-image: url('/introbg_new.svg');
         }
     </style>
     <div class="outer site-header-background responsive-header-img">

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

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