more css and animations

assets/scss/main.scss

@@ -0,0 +1,169 @@
+: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

@@ -0,0 +1,20 @@
+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,6 +24,8 @@ 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" %}}
 
-UK-based software engineer with experience in __fintech__. 
+🇬🇧 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,7 +18,6 @@
       [<a href="{{ .Site.Params.commit }}/{{ .GitInfo.Hash }}">{{ .GitInfo.AbbreviatedHash }}</a>]
     {{ end }}
 
-    <img src="/images/andy.png" width="80px" />
-    <span style="color: #b0b0b0">©</span>
+    <img src="/images/andy.png" width="80px" class="footer-logo" />
   </section>
 </footer>

layouts/shortcodes/avatar.html

@@ -1 +1,3 @@
-<img src="{{ .Get 0 }}" style="border-radius: 50%; width: 40rem; margin-left: auto; margin-right: auto; display: block;"/>
+<div class="avatar">
+    <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,62 +1,13 @@
 <div>
-    <div style="
-        border: 50px black;
-        position: relative; 
-        background-size: cover; 
-        background-position: 50%; 
-        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>
+    <div class="box-link">
+        <span aria-hidden="true"></span>
+        <img loading="lazy" alt="" src="{{ .Get "src" }}">
+        <div>
+            <p style="font-size:30px;">
+                <a href="{{ .Get "href" }}">{{ .Get "title" }}</a>
             </p>{{if isset .Params "caption" }}
-            <p style="
-            color: white; 
-            text-align: center; 
-            font-family: monospace; 
-            margin: auto;
-            margin-top: 20px;
-            text-shadow: 0px 1px black;">{{ .Get "caption" }}</p>{{end}}
+            <p style="font-family: monospace;
+                margin-top: 20px;">{{ .Get "caption" }}</p>{{end}}
         </div>
     </div>
 </div>