assets/scss/main.scss

@@ -1,169 +0,0 @@
-:root {
-    // --shadow-colour: #828282;
-    --shadow-colour: #3f0aff;
-}
-
-
-///////////////////////
-//      AVATAR
-///////////////////////
-
-.avatar {
-
-    img {
-        --shift: 20px;
-        --transition-time: 1s;
-
-        border-style: solid;
-        border-width: 7px;
-        border-color: black;
-
-        // filter: drop-shadow(var(--shift) 8px 1px var(--shadow-colour));
-        // translate: calc(var(--shift) * -1) calc(var(--shift) * -1);
-
-        @media (prefers-reduced-motion: no-preference) { 
-            // transition: filter, translate;
-            // transition-duration: 1s;
-            // transition-timing-function: ease-in-out;
-
-            animation: shift-avatar 3s ease-in-out infinite alternate backwards;
-
-            @keyframes shift-avatar {
-                from { 
-                    filter: drop-shadow(0px 0px 0px var(--shadow-colour)); 
-                    translate: none;
-                }
-                to {
-                    filter: drop-shadow(var(--shift) 8px 1px var(--shadow-colour));
-                    translate: calc(var(--shift) * -1) calc(var(--shift) * -1);
-                }
-            }
-        }
-    }
-
-    @media (prefers-reduced-motion: no-preference) { 
-        img:hover {
-            filter: none;
-            translate: none;
-            // animation-play-state: paused;
-        }
-    }
-}
-
-@media only screen and (max-width: 768px) {
-    .avatar img {
-        --shift: 1px;
-        border-width: 5px;
-    }
-}
-
-///////////////////////
-//     BOX LINK
-///////////////////////
-
-.box-link {
-    --shift: 8px;
-    --border-radius: 10px;
-
-    position: relative;
-    width: 100%; 
-    display: flex; 
-    justify-content: center;
-    margin-top: 20px;
-    margin-bottom: 20px;
-
-    translate: calc(var(--shift) * -1) calc(var(--shift) * -1);
-
-    @media (prefers-reduced-motion: no-preference) { 
-        transition: translate;
-        transition-duration: 0.25s;
-        transition-timing-function: ease-in-out;
-
-        animation: shift-image 0.3s backwards;
-        @keyframes shift-image {
-            from { translate: none; }
-            to { translate: calc(var(--shift) * -1) calc(var(--shift) * -1); }
-        }
-    }
-
-    span {
-        border-radius: var(--border-radius);
-        opacity: .5; 
-        background-color: black; 
-        position: absolute; 
-        top: 0; left: 0; bottom: 0; right: 0; 
-        z-index: 0; 
-    }
-
-    img {
-        /* object-position:38% 50%;  */
-        z-index: -1; 
-        position: absolute; 
-        top: 0; left: 0; bottom: 0; right: 0; 
-        margin: 0; 
-        padding: 0; 
-        width: 100%; height: 100%; 
-        overflow: hidden;
-        object-fit: cover;
-        border: 4px solid black;
-        border-radius: var(--border-radius);
-        box-shadow: var(--shift) var(--shift) 1px var(--shadow-colour);
-
-        @media (prefers-reduced-motion: no-preference) { 
-            transition: box-shadow;
-            transition-duration: 0.25s;
-            transition-timing-function: ease-in-out;
-            animation: shift-shadow 0.3s backwards;
-            @keyframes shift-shadow {
-                from { box-shadow: none; }
-                to { box-shadow: var(--shift) var(--shift) 1px var(--shadow-colour); }
-            }
-        }
-    }
-
-    @media (prefers-reduced-motion: no-preference) { 
-        &:hover {
-            translate: none;
-
-            img {
-                box-shadow: none;
-            }
-        }
-    }
-
-    div {
-        z-index: 0;
-        margin-top: 50px;
-        margin-bottom: 50px;
-        margin-right: 5%;
-        margin-left: 5%;
-    }
-
-    p {
-        color: white;
-        margin: auto;
-        text-align: center !important;
-        text-shadow: 0px 2px black;
-    }
-
-    a {
-        color: white;
-        cursor: pointer;
-        text-align: center !important;
-        text-underline-offset: 3px;
-        text-decoration-skip-ink: all;
-    }
-}
-
-///////////////////////
-//   FOOTER LOGO
-///////////////////////
-
-.footer-logo {
-    filter: contrast(100%);
-    transition: filter 1s ease-in-out;
-}
-
-.footer-logo:hover {
-    filter: contrast(0%) drop-shadow(7px 7px 5px grey);
-}

assets/scss/reset.scss

@@ -1,20 +0,0 @@
-html {
-    hanging-punctuation: first last;
-}
-
-
-h1, h2, h3, h4, h5, h6 {
-    text-wrap: balance;
-}
-
-p {
-    max-width: 75ch;
-    text-wrap: pretty;
-}
-
-@media screen and (prefers-reduced-motion: no-preference) { 
-    :has(:target) {
-        scroll-behavior: smooth;
-        scroll-padding-top: 3rem;
-    }
-}

config.toml

@@ -24,8 +24,6 @@ paginate = 40
   avatarurl = "images/avatar.jpg"
   hideColorSchemeToggle = true
 
-  customSCSS = ["scss/reset.scss", "scss/main.scss"]
-
 [[params.social]]
   name = "Mastodon"
   icon = "fa-brands fa-mastodon fa-2x"

content/about.md

@@ -5,7 +5,7 @@ date: 2020-12-25T00:04:40+00:00
 
 {{% avatar "/images/holo-avatar.jpg" %}}
 
-🇬🇧 software engineer with experience in __fintech__. 
+UK-based software engineer with experience in __fintech__. 
 
 [__Award-winning__](/dev-engineering/#awards), __first-class__ __masters__ [electronic engineering](/dev-engineering) graduate & previous __Disney__ intern
 

layouts/partials/footer.html

@@ -18,6 +18,7 @@
       [<a href="{{ .Site.Params.commit }}/{{ .GitInfo.Hash }}">{{ .GitInfo.AbbreviatedHash }}</a>]
     {{ end }}
 
-    <img src="/images/andy.png" width="80px" class="footer-logo" />
+    <img src="/images/andy.png" width="80px" />
+    <span style="color: #b0b0b0">©</span>
   </section>
 </footer>

layouts/shortcodes/avatar.html

@@ -1,3 +1 @@
-<div class="avatar">
+<img src="{{ .Get 0 }}" style="border-radius: 50%; width: 40rem; margin-left: auto; margin-right: auto; display: block;"/>
-    <img src="{{ .Get 0 }}" style="border-radius: 50%; width: 30rem; margin-left: auto; margin-right: auto; display: block;"/>
-</div>

layouts/shortcodes/image-box-link.html

@@ -1,13 +1,62 @@
 <div>
-    <div class="box-link">
+    <div style="
-        <span aria-hidden="true"></span>
+        border: 50px black;
-        <img loading="lazy" alt="" src="{{ .Get "src" }}">
+        position: relative; 
-        <div>
+        background-size: cover; 
-            <p style="font-size:30px;">
+        background-position: 50%; 
-                <a href="{{ .Get "href" }}">{{ .Get "title" }}</a>
+        width: 100%; 
+        display: flex; 
+        justify-content: center; 
+        align-items: center; 
+        box-sizing: border-box;
+        margin-top: 20px;
+        margin-bottom: 20px;">
+        <span aria-hidden="true" style="
+            border: none;
+            border-radius: 10px;
+            opacity: .5; 
+            background-color: black; 
+            position: absolute; 
+            top: 0; left: 0; bottom: 0; right: 0; 
+            z-index: 1; "></span>
+        <img loading="lazy" alt="" src="{{ .Get "src" }}" style="
+            /* object-position:38% 50%;  */
+            z-index: 0; 
+            position: absolute; 
+            top: 0; left: 0; bottom: 0; right: 0; 
+            margin: 0; 
+            padding: 0; 
+            width: 100%; height: 100%; 
+            object-fit: cover; 
+            outline: none; 
+            border: 4px solid black;
+            border-radius: 10px;
+            box-shadow: 5px 5px;">
+        <div style="
+            z-index: 1;
+            margin-top: 50px;
+            margin-bottom: 50px;
+            margin-right: 5%;
+            margin-left: 5%;">
+            <p style="
+                font-size:30px; color: white; 
+                margin: auto; 
+                text-align: center;
+                text-shadow: 0px 2px black;">
+                <a href="{{ .Get "href" }}"
+                 style="
+                 color: white;
+                 cursor: pointer;
+                 text-underline-offset: 3px;
+                 text-decoration-skip-ink: all;">{{ .Get "title" }}</a>
             </p>{{if isset .Params "caption" }}
-            <p style="font-family: monospace;
+            <p style="
-                margin-top: 20px;">{{ .Get "caption" }}</p>{{end}}
+            color: white; 
+            text-align: center; 
+            font-family: monospace; 
+            margin: auto;
+            margin-top: 20px;
+            text-shadow: 0px 1px black;">{{ .Get "caption" }}</p>{{end}}
         </div>
     </div>
 </div>