get in touch and footer done

README.md

@@ -1,5 +1,4 @@
 
-
 ## How to change about me headshot
 
 Add the headshot image you want to use to the `static/img` directory. Then uncomment the `headshot=` option under `[param.about]`. Set this option to the filename and only the filename.

config.toml

@@ -6,11 +6,20 @@ theme = "sophie-lewis"
 
 [params]
 navbar = ["about", "writing", "videos", "get-in-touch"]
-    [params.header]
-    name = "Sophie Lewis"
-    subtitle = "Writer, Theorist, Teacher"
-    [params.about]
-    # headshot = "headshot.png"
+
+[params.header]
+name = "Sophie Lewis"
+subtitle = "Writer, Theorist, Teacher"
+
+[params.about]
+headshot = "ossy.png"
+
+[params.social]
+# USERNAMES
+twitter="foo"
+patreon="bar"
+
+
 
 # DON'T EDIT BELOW
 

content/get-in-touch.md

@@ -1,6 +1,8 @@
 ---
 title: "Getintouch"
-date: 2021-08-23T05:59:10+01:00
-draft: true
+octo: octo-3.webp
 ---
 
+{{<getintouch text="Hire me" contact="SOPHIE@SOPHIELEWIS@GMAIL.COM">}}
+
+{{<getintouch text="Everything else" contact="SOPHIE@SOPHIELEWIS@GMAIL.COM">}}

content/videos.md

@@ -1,7 +1,6 @@
 ---
 title: "Videos"
-date: 2021-08-23T05:04:19+01:00
-draft: false
+octo: octo-3.webp
 ---
 
 {{<youtube 5liV7pbNxA8>}}

content/writing.md

@@ -1,6 +1,6 @@
 ---
 title: "Writing"
-Octo: octo-4.webp
+octo: octo-4.webp
 ---
 
 <table>

themes/sophie-lewis/assets/scss/main.scss

@@ -82,19 +82,38 @@ hr {
     iframe {
         padding-bottom: 1rem;
     }
-}
-
-#content.videos {
-    p:has(em) {
+    &.videos {
+        p:has(em) {
+            padding-bottom: 1rem;
+        }
+    }
+    &.about {
+        hr ~ p {
+            padding-bottom: 0 !important;
+        }
+    }
+    &:not(.videos):not(.getintouch) p {
+        padding-bottom: 2rem;
+    }
+    &.getintouch p {    
+        padding-bottom: 0;
+    }
+    .contact {
+        p { 
+            font-family: $sans_font;
+        }
+        .contact_text {
+            font-weight: 200;
+        }
+        .contact_details {
+            
+        }
         padding-bottom: 1rem;
     }
 }
 
-#content.about hr ~ p {
-    padding-bottom: 0 !important;
-}
-
 .headshot {
+    padding-top: 1rem;
     img {
         border-radius: 100%;
         border-width: 0.15rem;
@@ -103,10 +122,6 @@ hr {
     }
 }
 
-#content:not(.videos) p {
-    padding-bottom: 2rem;
-}
-
 #content-column {
     @media all and (max-width: 1216px) { 
         padding: 0 2rem; 
@@ -155,4 +170,10 @@ footer {
         margin-top: 0;
         margin-bottom: 0.8rem;
     }
+    .social-circles {
+        img {
+            height: 32px;
+            border-radius: 100%;
+        }
+    }
 }

themes/sophie-lewis/layouts/_default/single.html

@@ -6,7 +6,7 @@
         <div class="headshot">
           {{ $img := relURL "img/headshot_example.png" }}
           {{ if isset $.Site.Params.about "headshot" }}
-            {{ if fileExists ( printf "themes/sophie-lewis/static/img/%s" $.Site.Params.about.headshot ) }}
+            {{ if fileExists ( printf "static/img/%s" $.Site.Params.about.headshot ) }}
               {{ $img := relURL ( printf "img/%s" $.Site.Params.about.headshot )}}
               <img src='{{ $img }}'>
             {{ else }}

themes/sophie-lewis/layouts/partials/footer.html

@@ -3,7 +3,14 @@
   <div class="columns">
     <div class="column">
       <div>FIND ME AT</div>
-      <div></div>
+      <div class="social-circles">
+        {{ if isset $.Site.Params.social "twitter" }}
+          {{- partial "social-circles/twitter.html" . -}}
+        {{ end }}
+        {{ if isset $.Site.Params.social "patreon" }}
+          {{- partial "social-circles/patreon.html" . -}}
+        {{ end }}
+      </div>
     </div>
     <div class="column has-text-right">
       PRIVACY POLICY

themes/sophie-lewis/layouts/partials/social-circles/patreon.html

@@ -0,0 +1,5 @@
+<span class="social-circle patreon">
+  <a href="https://patreon.com/{{ site.Params.social.patreon }}">
+    <img src='{{ relURL "img/social/patreon.webp" }}'>
+  </a>
+</span>

themes/sophie-lewis/layouts/partials/social-circles/twitter.html

@@ -0,0 +1,5 @@
+<span class="social-circle twitter">
+  <a href="https://twitter.com/{{ site.Params.social.twitter }}">
+    <img src='{{ relURL "img/social/twitter.svg" }}'>
+  </a>
+</span>

themes/sophie-lewis/layouts/shortcodes/getintouch.html

@@ -0,0 +1,8 @@
+<div class="contact">
+  <p class="contact_text">
+    {{ .Get "text" }}
+  </p>
+  <p class="contact_details">
+    <strong>{{ .Get "contact" }}</strong>
+  </p>
+</div>