more css changes, smarter box link

assets/scss/main.scss

@@ -3,6 +3,29 @@
     --shadow-colour: #3f0aff;
 }
 
+@mixin shadowed {
+    box-shadow: var(--shift) var(--shift) 2px var(--shadow-colour);
+    translate: calc(var(--shift) * -1) calc(var(--shift) * -1);
+
+    @media (prefers-reduced-motion: no-preference) { 
+        transition: box-shadow, translate;
+        transition-duration: var(--duration);
+        transition-timing-function: ease-in-out;
+
+        &:hover {
+            box-shadow: 0px 0px 0px var(--shadow-colour);
+            translate: none;
+        }
+    }
+}
+
+.shadowed {
+    --shift: 8px;
+    --duration: 0.2s;
+
+    @include shadowed;
+}
+
 
 ///////////////////////
 //      AVATAR
@@ -18,14 +41,7 @@
         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 {
@@ -67,10 +83,9 @@
 
     position: relative;
     width: 100%; 
+    height: 17rem;
     display: flex; 
     justify-content: center;
-    margin-top: 20px;
-    margin-bottom: 20px;
 
     translate: calc(var(--shift) * -1) calc(var(--shift) * -1);
 
@@ -131,27 +146,26 @@
         }
     }
 
-    div {
+    .text-section {
         z-index: 0;
-        margin-top: 50px;
+        display: flex;
-        margin-bottom: 50px;
+        flex-direction: column;
-        margin-right: 5%;
+        justify-content: center;
-        margin-left: 5%;
+        gap: 10px;
     }
 
     p {
         color: white;
-        margin: auto;
         text-align: center !important;
-        text-shadow: 0px 2px black;
+        text-shadow: 3px 3px 5px black;
+        margin: 0;
     }
 
-    a {
+    .center-link-text {
         color: white;
         cursor: pointer;
-        text-align: center !important;
         text-underline-offset: 3px;
-        text-decoration-skip-ink: all;
+        text-decoration-skip-ink: auto;
     }
 }
 
@@ -174,6 +188,7 @@
 
 .art-grid {
     --shift: 5px;
+    --duration: 0.2s;
     width: 100%;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
@@ -181,19 +196,7 @@
 
     & > figure > img {
         border: 5px solid black;
-        box-shadow: var(--shift) var(--shift) 2px var(--shadow-colour);
+        @include shadowed;
-        translate: calc(var(--shift) * -1) calc(var(--shift) * -1);
-
-        @media (prefers-reduced-motion: no-preference) { 
-            transition: box-shadow, translate;
-            transition-duration: 0.2s;
-            transition-timing-function: ease-in-out;
-
-            &:hover {
-                box-shadow: 0px 0px 0px var(--shadow-colour);
-                translate: none;
-            }
-        }
     }
 
     & > .art-col-2 {
@@ -217,7 +220,20 @@
     width: 100%;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    gap: 10px;
+    gap: 20px;
+}
+
+.dev-grid {
+    display: grid;
+    gap: 20px;
+}
+
+.dev-grid-col-2 {
+    grid-template-columns: repeat(2, 1fr);
+}
+
+.dev-grid-col-3 {
+    grid-template-columns: repeat(3, 1fr);
 }
 
 @media only screen and (max-width: 768px) {
@@ -228,4 +244,23 @@
     .art-home-grid {
         grid-template-columns: repeat(2, 1fr);
     }
+
+    .dev-grid {
+        grid-template-columns: repeat(1, 1fr);
+    }
+}
+
+.youtube-embed {
+    iframe {
+        --shift: 8px;
+        --duration: .2s;
+
+        width: 100%;
+        aspect-ratio: 16/9;
+        border-radius: 20px;
+
+        border: 5px solid black;
+
+        @include shadowed;
+    }
 }

content/dev-engineering/index.md

@@ -12,9 +12,11 @@ aliases:
 [![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white)](https://git.sarsoo.xyz/sarsoo/-/packages?q=&type=container)
 [![Kubernetes](https://img.shields.io/badge/kubernetes-%23326ce5.svg?style=for-the-badge&logo=kubernetes&logoColor=white)](https://git.sarsoo.xyz/sarsoo/-/packages?q=&type=helm)
 
+<div class="dev-grid dev-grid-col-2">
 {{% image-box-link src="/posts/mixonomer/PlaylistExample.png" href="/posts/mixonomer" title="Mixonomer" caption="Python + React" %}}
 
 {{% image-box-link src="/posts/selector/dashboard.png" href="/posts/selector/" title="Selector" caption="C# + TypeScript + Vue.js" %}}
+</div>
 
 # [Infrastructure]({{< relref "infra" >}})
 
@@ -26,11 +28,13 @@ Basically, Terraform creates and destroys infrastructure, Ansible manages the OS
 
 [Read More]({{< relref "infra" >}})
 
+<div class="dev-grid dev-grid-col-3">
 {{% image-box-link src="/posts/visual-search/mapSurfaceWithMax2.png" href="/posts/visual-search" title="Visual Search" caption="MATLAB" %}}
 
-{{% image-box-link src="/posts/lpss/hood_m_gram.png" href="/posts/lpss" title="Speech Synthesiser" caption="MATLAB" %}}
+{{% image-box-link src="/posts/lpss/hood_m_gram.png" href="/posts/lpss" title="Speech Synth" caption="MATLAB" %}}
 
 {{% image-box-link src="/posts/markov/StateTopology.png" href="/posts/markov" title="Hidden Markov Models" caption="Python + Numpy" %}}
+</div>
 
 # [Holoportation](/holo)
 
@@ -45,15 +49,17 @@ The holograms are captured in the form of a __point cloud__, a cluster of colour
 
 My undergraduate dissertation documented extending the [__LiveScan3D__](https://github.com/MarekKowalski/LiveScan3D) holoportation platform to allow multi-source streaming. The existing capabilities allowed a single scene to be captured in real-time and streamed elsewhere for viewing, multi-source allows multiple independent scenes to be received and composited at the same time (a many-to-one system).
 
-{{< youtube NP0aVjuk5fU >}}
+{{< youtube id=NP0aVjuk5fU autoplay=true controls=false loop=true class=youtube-embed >}}
 
 [Read More](/holo)
 
+<div class="dev-grid dev-grid-col-3">
 {{% image-box-link src="/posts/dnstp/server.png" href="/posts/dnstp" title="dnstp" caption="Rust" %}}
 
 {{% image-box-link src="/posts/draught/checkers-board.png" href="/posts/draught" title="Draught" caption="Rust + Js" %}}
 
 {{% image-box-link src="/posts/game-of-life/gameoflife1.png" href="/posts/game-of-life" title="Game of Life" caption="Rust + Js" %}}
+</div>
 
 # [Mixonomer](/mixonomer)
 

content/posts/holo/index.md

@@ -42,7 +42,7 @@ My undergraduate dissertation was tasked with extending the original software to
 
 The development works by including an ID to indicate what source a frame of footage represents.
 
-{{< youtube NP0aVjuk5fU >}}
+{{< youtube id=NP0aVjuk5fU autoplay=true controls=false loop=true class=youtube-embed >}}
 
 ###### A couple of recorded sources operating in the virtual space. A third live one is connected part way through
 

layouts/shortcodes/image-box-link.html

@@ -2,12 +2,11 @@
     <div class="box-link">
         <span aria-hidden="true"></span>
         <img loading="lazy" alt="" src="{{ .Get "src" }}">
-        <div>
+        <div class="text-section">
             <p style="font-size:30px;">
-                <a href="{{ .Get "href" }}">{{ .Get "title" }}</a>
+                <a class="center-link-text" href="{{ .Get "href" }}">{{ .Get "title" }}</a>
             </p>{{if isset .Params "caption" }}
-            <p style="font-family: monospace;
+            <p style="font-family: monospace;">{{ .Get "caption" }}</p>{{end}}
-                margin-top: 20px;">{{ .Get "caption" }}</p>{{end}}
         </div>
     </div>
 </div>