more css and animations

assets/scss/main.scss

@@ -1,3 +1,12 @@
+:root {
+    // --shadow-colour: #828282;
+    --shadow-colour: #3f0aff;
+}
+
+
+///////////////////////
+//      AVATAR
+///////////////////////
 
 .avatar {
 
@@ -9,66 +18,68 @@
         border-width: 7px;
         border-color: black;
 
-        filter: drop-shadow(var(--shift) 8px 1px #828282);
+        // filter: drop-shadow(var(--shift) 8px 1px var(--shadow-colour));
-        translate: calc(var(--shift) * -1) calc(var(--shift) * -1);
+        // translate: calc(var(--shift) * -1) calc(var(--shift) * -1);
 
-        @media screen and (prefers-reduced-motion: no-preference) { 
+        @media (prefers-reduced-motion: no-preference) { 
-            transition: filter, translate;
+            // transition: filter, translate;
-            transition-duration: 1s;
+            // transition-duration: 1s;
-            transition-timing-function: ease-in-out;
+            // transition-timing-function: ease-in-out;
 
             animation: shift-avatar 3s ease-in-out infinite alternate backwards;
 
             @keyframes shift-avatar {
-                from { filter: none; translate: none; }
+                from { 
+                    filter: drop-shadow(0px 0px 0px var(--shadow-colour)); 
+                    translate: none;
+                }
                 to {
-                    filter: drop-shadow(var(--shift) 8px 1px #828282);
+                    filter: drop-shadow(var(--shift) 8px 1px var(--shadow-colour));
                     translate: calc(var(--shift) * -1) calc(var(--shift) * -1);
                 }
             }
         }
     }
 
-    @media screen and (prefers-reduced-motion: no-preference) { 
+    @media (prefers-reduced-motion: no-preference) { 
         img:hover {
             filter: none;
             translate: none;
-            animation-play-state: paused;
+            // animation-play-state: paused;
         }
     }
 }
 
 @media only screen and (max-width: 768px) {
     .avatar img {
-        --shift: 10px;
+        --shift: 1px;
         border-width: 5px;
     }
 }
 
+///////////////////////
+//     BOX LINK
+///////////////////////
+
 .box-link {
     --shift: 8px;
     --border-radius: 10px;
 
-    // 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;
 
     translate: calc(var(--shift) * -1) calc(var(--shift) * -1);
 
-    @media screen and (prefers-reduced-motion: no-preference) { 
+    @media (prefers-reduced-motion: no-preference) { 
         transition: translate;
-        transition-duration: 0.5s;
+        transition-duration: 0.25s;
         transition-timing-function: ease-in-out;
 
-        animation: shift-image 1s backwards;
+        animation: shift-image 0.3s backwards;
         @keyframes shift-image {
             from { translate: none; }
             to { translate: calc(var(--shift) * -1) calc(var(--shift) * -1); }
@@ -76,42 +87,41 @@
     }
 
     span {
-        border: none;
         border-radius: var(--border-radius);
         opacity: .5; 
         background-color: black; 
         position: absolute; 
         top: 0; left: 0; bottom: 0; right: 0; 
-        z-index: 1; 
+        z-index: 0; 
     }
 
     img {
         /* object-position:38% 50%;  */
-        z-index: 0; 
+        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;
-        outline: none; 
         border: 4px solid black;
         border-radius: var(--border-radius);
-        box-shadow: var(--shift) var(--shift) 1px #828282;
+        box-shadow: var(--shift) var(--shift) 1px var(--shadow-colour);
 
-        @media screen and (prefers-reduced-motion: no-preference) { 
+        @media (prefers-reduced-motion: no-preference) { 
             transition: box-shadow;
-            transition-duration: 0.5s;
+            transition-duration: 0.25s;
             transition-timing-function: ease-in-out;
-            animation: shift-shadow 1s backwards;
+            animation: shift-shadow 0.3s backwards;
             @keyframes shift-shadow {
                 from { box-shadow: none; }
-                to { box-shadow: var(--shift) var(--shift) 1px #828282; }
+                to { box-shadow: var(--shift) var(--shift) 1px var(--shadow-colour); }
             }
         }
     }
 
-    @media screen and (prefers-reduced-motion: no-preference) { 
+    @media (prefers-reduced-motion: no-preference) { 
         &:hover {
             translate: none;
 
@@ -122,7 +132,7 @@
     }
 
     div {
-        z-index: 1;
+        z-index: 0;
         margin-top: 50px;
         margin-bottom: 50px;
         margin-right: 5%;
@@ -144,3 +154,16 @@
         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,7 +24,7 @@ paginate = 40
   avatarurl = "images/avatar.jpg"
   hideColorSchemeToggle = true
 
-  customSCSS = ["scss/main.scss"]
+  customSCSS = ["scss/reset.scss", "scss/main.scss"]
 
 [[params.social]]
   name = "Mastodon"

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,6 +18,6 @@
       [<a href="{{ .Site.Params.commit }}/{{ .GitInfo.Hash }}">{{ .GitInfo.AbbreviatedHash }}</a>]
     {{ end }}
 
-    <img src="/images/andy.png" width="80px" />
+    <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>