aboutme page mostly done, footer mostly done

content/_index.md

@@ -2,6 +2,6 @@
 Octo: octo-2.webp
 ---
 
-Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.
+***SOPHIE LEWIS*** is pellentesque luctus eros nec purus vestibulum, ut euismod dui suscipit. Quisque sollicitudin nisi nec dictum ultrices. Quisque et luctus orci. Nulla ante libero, rutrum ac euismod ut, sollicitudin non nisi. Etiam a erat nec metus facilisis sodales. Morbi porta varius purus, vel sodales odio consequat a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ut arcu at arcu euismod scelerisque. Quisque mollis at massa sit amet tempus. Phasellus nec lacus nec erat lobortis fringilla eget ut augue. Nam non est sed sem elementum varius.
 
-You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.
+Suspendisse justo massa, molestie at turpis a, posuere gravida orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam magna mi, commodo vitae ante pulvinar, suscipit mollis turpis. Duis a dui fringilla, sollicitudin nisl quis, efficitur lacus. Donec ultricies ligula nisl, id eleifend elit iaculis eget. Aenean auctor quam non lectus eleifend, ac eleifend ligula pulvinar. Aliquam sollicitudin luctus massa, quis facilisis justo fringilla id. Donec pulvinar fringilla nulla sit amet imperdiet.

content/about.md

@@ -1,6 +1,15 @@
 ---
 title: "About"
 date: 2021-08-23T05:58:05+01:00
-draft: true
+octo: octo-1.webp
 ---
 
+Quisque sollicitudin nisi nec dictum ultrices. Quisque et luctus orci. Nulla ante libero, rutrum ac euismod ut, sollicitudin non nisi. Etiam a erat nec metus facilisis sodales. Morbi porta varius purus, vel sodales odio consequat a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ut arcu at arcu euismod scelerisque. Quisque mollis at massa sit amet tempus. Phasellus nec lacus nec erat lobortis fringilla eget ut augue. Nam non est sed sem elementum varius. 
+
+Suspendisse justo massa, molestie at turpis a, posuere gravida orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam magna mi, commodo vitae ante pulvinar, suscipit mollis turpis. Duis a dui fringilla, sollicitudin nisl quis, efficitur lacus. Donec ultricies ligula nisl, id eleifend elit iaculis eget. Aenean auctor quam non lectus eleifend, ac eleifend ligula pulvinar. Aliquam sollicitudin luctus massa, quis facilisis justo fringilla id. Donec pulvinar fringilla nulla sit amet imperdiet.
+
+---
+
+{{< cv-entry dates="2012-2017" title="Quisque sollicitudin nisi nec dictum ultricesmet imperdiet." >}}
+{{< cv-entry dates="2012-2017" title="Quisque sollicitudin nisi nec dictum ultricesmet imperdiet." >}}
+{{< cv-entry dates="2012-2017" title="Quisque sollicitudin nisi nec dictum ultricesmet imperdiet." >}}

content/videos.md

@@ -10,4 +10,6 @@ draft: false
 
 *Published 14 May 2021*
 
+Quisque sollicitudin nisi nec dictum ultrices. Quisque et luctus orci.
+
 ---

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>