aboutme page mostly done, footer mostly done

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

@@ -0,0 +1,42 @@
+@mixin define-font-family($name, $weight, $style, $filename) {
+    font-family: $name;
+
+    src: 
+        url("../font/woff2/#{$filename}") format("woff2"),
+        url("../font/ttf/#{$filename}") format("ttf");
+    font-weight: $weight;
+    @if $style {
+        font-style: $style;
+    }
+}
+
+$sans_font: IBMPlexSans;
+$serif_font: IBMPlexSerif;
+
+@font-face {
+    @include define-font-family($sans_font, normal, italic, 'IBMPlexSans-Italic.woff2')
+}
+@font-face {
+    @include define-font-family($sans_font, normal, null, 'IBMPlexSans-Regular.woff2')
+}
+@font-face {
+    @include define-font-family($sans_font, 200, null, 'IBMPlexSans-Light.woff2')
+}
+@font-face {
+    @include define-font-family($sans_font, bold, italic, 'IBMPlexSans-BoldItalic.woff2')
+}
+@font-face {
+    @include define-font-family($sans_font, 700, null, 'IBMPlexSans-Medium.woff2')
+}
+@font-face {
+    @include define-font-family($sans_font, lighter, italic, 'IBMPlexSans-LightItalic.woff2')
+}
+@font-face {
+    @include define-font-family($serif_font, normal, italic, 'IBMPlexSerif-Italic.woff2')
+}
+@font-face {
+    @include define-font-family($serif_font, lighter, null, 'IBMPlexSerif-Light.woff2')
+}
+@font-face {
+    @include define-font-family($serif_font, lighter, italic, 'IBMPlexSerif-LightItalic.woff2')
+}

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

@@ -2,9 +2,24 @@ $section-padding: 1rem 0rem;
 $section-padding-desktop: $section-padding;
 $section-padding-large: $section-padding;
 
-$gray: #707070;
+$gray: #adadad;
+$text-colour: #1F1F1F;
+
+
 
 @import "./bulma/bulma.sass";
+@import "./font.scss";
+
+body {
+    color: $text-colour;
+}
+
+$hr-width: 0.15rem;
+$hr-color: $gray;
+hr {
+    background-color: $hr-color;
+    height: $hr-width;
+}
 
 .nav-tabs.tabs {
     li:first-of-type a {
@@ -14,17 +29,21 @@ $gray: #707070;
         justify-content: right !important;
     }
     a {
-        padding: 0.5rem;
+        padding: 0.5rem 0;
         font-size: 1.3rem;
+        color: $text-colour;
+        border-bottom-color: $hr-color;
+        border-bottom-width: $hr-width;
+        :hover {
+            border-bottom-color: $hr-color;
+        }
     }
-
     padding: 0.8rem 0;
-    
     .is-active a {
         text-decoration: underline;
         font-weight: bold;
-        color: $tabs-link-color;
-        border-bottom-color: $tabs-border-bottom-color;
+        color: $text-colour;
+        border-bottom-color: $hr-color;
     }
 }
 
@@ -37,15 +56,15 @@ $gray: #707070;
     padding-top: 8em;
 }
 
-hr {
-    background-color: $gray;
-    height: 0.1rem;
-}
-
 #content {
     font-size: 1.1rem;
-    p {
-        padding-bottom: 2rem;
+    strong,i,b,em {
+        font-family: $sans_font
+    }
+    em {
+        font-style: italic;
+        font-weight: lighter !important; 
+
     }
     table {
         table-layout: fixed;
@@ -57,11 +76,36 @@ hr {
     td {
         padding: 0.5rem 0;
     }
+    hr {
+        margin: 0.5rem 0;
+    }
     iframe {
         padding-bottom: 1rem;
     }
 }
 
+#content.videos {
+    p:has(em) {
+        padding-bottom: 1rem;
+    }
+}
+
+#content.about hr ~ p {
+    padding-bottom: 0 !important;
+}
+
+.headshot {
+    img {
+        border-radius: 100%;
+        border-width: 0.15rem;
+        border-color: $gray;
+        border-style: solid;
+    }
+}
+
+#content:not(.videos) p {
+    padding-bottom: 2rem;
+}
 
 #content-column {
     @media all and (max-width: 1216px) { 
@@ -72,4 +116,43 @@ hr {
     }
 }
 
+.title {
+    font-family: $serif_font;
+    font-style: italic;
+    font-weight: 200;
+}
 
+.subtitle {
+    font-family: $sans_font;
+    font-weight: 200;
+}
+
+p {
+    font-family: $serif_font;
+    b {
+        font-weight: normal;
+    }
+}
+
+nav,footer {
+    font-family: $sans_font;
+    font-style: italic;
+}
+
+.cv-entry {
+    padding: 1rem 0;
+    font-family: $sans_font;
+    .job-title {
+        font-weight: 400;
+    }
+    .job-date {
+        font-weight: 200;
+    }
+}
+
+footer {
+    hr {
+        margin-top: 0;
+        margin-bottom: 0.8rem;
+    }
+}

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

@@ -7,9 +7,7 @@
     <div id="content-column" class="column is-5-widescreen is-8-desktop">
       {{- partial "header.html" . -}}
       {{- partial "nav.html" . -}}
-      <div id="content" class="section">
-        {{- block "main" . }}{{- end }}
-      </div>
+      {{- block "main" . }}{{- end }}
       {{- partial "footer.html" . -}}
     </div>
     <div id="octopus" class="column is-4-widescreen is-4-desktop is-hidden-touch ">

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

@@ -1 +1,21 @@
-{{ define "main" }}{{.Content}}{{ end }}
+{{ define "main" }}
+  {{ $content_class := $.Page.Params.title | lower }}
+  {{ if eq (.Title | lower) "about" }}
+    <div class="columns">
+      <div class="column is-one-third">
+        <div class="headshot">
+          <img src='{{relURL "img/example_headshot-masterchief.png"}}'>
+        </div>
+      </div>
+      <div class="column">
+        <div id="content" class='section {{ $content_class }}'>
+          {{.Content}}
+        </div>
+      </div>
+    </div>
+  {{ else }}
+    <div id="content" class='section {{ $content_class }}'>
+      {{.Content}}
+    </div>
+  {{ end }}
+{{ end }}

themes/sophie-lewis/layouts/index.html

@@ -3,5 +3,4 @@
 {{ end }}
 
 {{ define "octo" }}
-<h1 class="">nrsnts</h1>
 {{ end }}

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

@@ -0,0 +1,12 @@
+<footer>
+  <hr>
+  <div class="columns">
+    <div class="column">
+      <div>FIND ME AT</div>
+      <div></div>
+    </div>
+    <div class="column has-text-right">
+      PRIVACY POLICY
+    </div>
+  </div>
+</footer>

themes/sophie-lewis/layouts/shortcodes/cv-entry.html

@@ -0,0 +1,4 @@
+<div class="cv-entry">
+  <div class="job-date">{{ .Get "dates" }}</div>
+  <div class="job-title">{{ .Get "title" }}</div>
+</div>

themes/sophie-lewis/static/img/Twitter social icons - circle - blue.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1B9DF0;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g id="Dark_Blue">
+	<circle class="st0" cx="200" cy="200" r="200"/>
+</g>
+<g id="Logo__x2014__FIXED">
+	<path class="st1" d="M163.4,305.5c88.7,0,137.2-73.5,137.2-137.2c0-2.1,0-4.2-0.1-6.2c9.4-6.8,17.6-15.3,24.1-25
+		c-8.6,3.8-17.9,6.4-27.7,7.6c10-6,17.6-15.4,21.2-26.7c-9.3,5.5-19.6,9.5-30.6,11.7c-8.8-9.4-21.3-15.2-35.2-15.2
+		c-26.6,0-48.2,21.6-48.2,48.2c0,3.8,0.4,7.5,1.3,11c-40.1-2-75.6-21.2-99.4-50.4c-4.1,7.1-6.5,15.4-6.5,24.2
+		c0,16.7,8.5,31.5,21.5,40.1c-7.9-0.2-15.3-2.4-21.8-6c0,0.2,0,0.4,0,0.6c0,23.4,16.6,42.8,38.7,47.3c-4,1.1-8.3,1.7-12.7,1.7
+		c-3.1,0-6.1-0.3-9.1-0.9c6.1,19.2,23.9,33.1,45,33.5c-16.5,12.9-37.3,20.6-59.9,20.6c-3.9,0-7.7-0.2-11.5-0.7
+		C110.8,297.5,136.2,305.5,163.4,305.5"/>
+</g>
+</svg>