using scss, animating and transitioning

assets/scss/main.scss

@@ -0,0 +1,146 @@
+
+.avatar {
+
+    img {
+        --shift: 20px;
+        --transition-time: 1s;
+
+        border-style: solid;
+        border-width: 7px;
+        border-color: black;
+
+        filter: drop-shadow(var(--shift) 8px 1px #828282);
+        translate: calc(var(--shift) * -1) calc(var(--shift) * -1);
+
+        @media screen and (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: none; translate: none; }
+                to {
+                    filter: drop-shadow(var(--shift) 8px 1px #828282);
+                    translate: calc(var(--shift) * -1) calc(var(--shift) * -1);
+                }
+            }
+        }
+    }
+
+    @media screen and (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: 10px;
+        border-width: 5px;
+    }
+}
+
+.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) { 
+        transition: translate;
+        transition-duration: 0.5s;
+        transition-timing-function: ease-in-out;
+
+        animation: shift-image 1s backwards;
+        @keyframes shift-image {
+            from { translate: none; }
+            to { translate: calc(var(--shift) * -1) calc(var(--shift) * -1); }
+        }
+    }
+
+    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; 
+    }
+
+    img {
+        /* 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: var(--border-radius);
+        box-shadow: var(--shift) var(--shift) 1px #828282;
+
+        @media screen and (prefers-reduced-motion: no-preference) { 
+            transition: box-shadow;
+            transition-duration: 0.5s;
+            transition-timing-function: ease-in-out;
+            animation: shift-shadow 1s backwards;
+            @keyframes shift-shadow {
+                from { box-shadow: none; }
+                to { box-shadow: var(--shift) var(--shift) 1px #828282; }
+            }
+        }
+    }
+
+    @media screen and (prefers-reduced-motion: no-preference) { 
+        &:hover {
+            translate: none;
+
+            img {
+                box-shadow: none;
+            }
+        }
+    }
+
+    div {
+        z-index: 1;
+        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;
+    }
+}

config.toml

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

layouts/partials/footer.html

@@ -19,6 +19,5 @@
     {{ end }}
 
     <img src="/images/andy.png" width="80px" />
-    <span style="color: #b0b0b0">©</span>
   </section>
 </footer>

layouts/shortcodes/image-box-link.html

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