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;
-        margin-bottom: 50px;
-        margin-right: 5%;
-        margin-left: 5%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        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;
     }
 }
 
@@ -167,3 +181,86 @@
 .footer-logo:hover {
     filter: contrast(0%) drop-shadow(7px 7px 5px grey);
 }
+
+///////////////////////
+//    ART GRID
+///////////////////////
+
+.art-grid {
+    --shift: 5px;
+    --duration: 0.2s;
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+
+    & > figure > img {
+        border: 5px solid black;
+        @include shadowed;
+    }
+
+    & > .art-col-2 {
+        grid-column: span 2;
+    }
+
+    & > .art-col-3 {
+        grid-column: span 3;
+    }
+
+    & > .art-row-2 {
+        grid-row: span 2;
+    }
+
+    & > .art-row-3 {
+        grid-row: span 3;
+    }
+}
+
+.art-home-grid {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    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) {
+    .art-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .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/art/_index.md

@@ -2,7 +2,12 @@
 title: 'Art'
 ---
 
+<div class="art-home-grid">
+
 {{% image-box-link src="/art/animal/gorilla-baby.jpg" href="/art/animal" title="Animals" %}}
-{{% image-box-link src="/art/portrait/skull.jpg" href="/art/portrait" title="Portraits" %}}
+{{% image-box-link src="/art/portrait/updown.jpg" href="/art/portrait" title="Portraits" %}}
 {{% image-box-link src="/art/sketchbook/flowers.jpg" href="/art/sketchbook" title="Sketchbook" %}}
-{{% image-box-link src="/art/life/brown-white.jpg" href="/art/life" title="Life" %}}
+{{% image-box-link src="/art/life/brown-white.jpg" href="/art/life" title="Life" %}}
+{{% image-box-link src="/art/portrait/skull.jpg" href="/art/digital" title="Digital" %}}
+
+</div>

content/art/animal/index.md

@@ -2,8 +2,14 @@
 title: 'Animals'
 ---
 
-{{< figure src="zu.jpg" >}}
-{{< figure src="zu-charcoal.jpg" >}}
-{{< figure src="orangutan.jpg" >}}
-{{< figure src="gorilla-baby.jpg" >}}
-{{< figure src="chimp.jpg" >}}
+{{< art-grid >}}
+
+    {{< figure src="zu.jpg" >}}
+    {{< figure src="zu-charcoal.jpg" class="art-col-2" >}}
+    {{< figure src="orangutan.jpg" >}}
+    {{< figure src="gorilla-baby.jpg" >}}
+    {{< figure src="dali.png" >}}
+    {{< figure src="chimp.jpg" >}}
+    {{< figure src="chimp.png" >}}
+
+{{< /art-grid >}}

content/art/digital/index.md

@@ -0,0 +1,12 @@
+---
+title: 'Digital'
+---
+
+{{< art-grid >}}
+
+    {{< figure src="/art/portrait/skull.jpg" >}}
+    {{< figure src="tilt.png" >}}
+    {{< figure src="/images/holo-avatar.jpg" >}}
+    {{< figure src="arms-up.png" >}}
+
+{{< /art-grid >}}

content/art/life/index.md

@@ -2,7 +2,13 @@
 title: 'Life'
 ---
 
-{{< figure src="bikini.jpg" >}}
-{{< figure src="brown-white.jpg" >}}
-{{< figure src="grey.jpg" >}}
-{{< figure src="red-blue.jpg" >}}
+{{< art-grid >}}
+
+    {{< figure src="bikini.jpg" >}}
+    {{< figure src="brown-white.jpg" class="art-col-2" >}}
+    {{< figure src="grey.jpg" >}}
+    {{< figure src="red-blue.jpg" >}}
+    {{< figure src="blue.png" >}}
+    {{< figure src="ink-pencil.png" >}}
+
+{{< /art-grid >}}

content/art/portrait/index.md

@@ -2,10 +2,17 @@
 title: 'Portrait'
 ---
 
-{{< figure src="freddie.jpg" >}}
-{{< figure src="girlskull.jpg" >}}
-{{< figure src="head-back.jpg" >}}
-{{< figure src="self.jpg" >}}
-{{< figure src="skull.jpg" >}}
-{{< figure src="tyler.jpg" >}}
-{{< figure src="updown.jpg" >}}
+{{< art-grid >}}
+
+    {{< figure src="freddie.jpg" >}}
+    {{< figure src="girlskull.jpg" >}}
+    {{< figure src="head-back.jpg" >}}
+    {{< figure src="self.jpg" >}}
+    {{< figure src="/art/sketchbook/line-face.jpg" >}}
+    {{< figure src="/art/sketchbook/bran.jpg" >}}
+    {{< figure src="/art/sketchbook/mushroom.jpg" >}}
+    {{< figure src="skull.jpg" >}}
+    {{< figure src="tyler.jpg" >}}
+    {{< figure src="updown.jpg" >}}
+
+{{< /art-grid >}}

content/art/sketchbook/index.md

@@ -2,13 +2,20 @@
 title: 'Sketchbook'
 ---
 
-{{< figure src="blindfold.jpg" >}}
-{{< figure src="bran.jpg" >}}
-{{< figure src="buildings.jpg" >}}
-{{< figure src="flowers.jpg" >}}
-{{< figure src="grey.jpg" >}}
-{{< figure src="hand-muscle.jpg" >}}
-{{< figure src="line-face.jpg" >}}
-{{< figure src="mushroom.jpg" >}}
-{{< figure src="smoke.jpg" >}}
-{{< figure src="spindly.jpg" >}}
+{{< art-grid >}}
+
+    {{< figure src="blindfold.jpg" >}}
+    {{< figure src="bran.jpg" >}}
+    {{< figure src="buildings.jpg" >}}
+    {{< figure src="flowers.jpg" >}}
+    {{< figure src="grey.jpg" >}}
+    {{< figure src="hand-muscle.jpg" >}}
+    {{< figure src="ok.png" >}}
+    {{< figure src="music.png" class="art-col-2" >}}
+    {{< figure src="line-face.jpg" >}}
+    {{< figure src="mushroom.jpg" >}}
+    {{< figure src="kawagawa.png" >}}
+    {{< figure src="smoke.jpg" >}}
+    {{< figure src="spindly.jpg" >}}
+
+{{< /art-grid >}}

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/art-grid.html

@@ -0,0 +1,3 @@
+<div class="art-grid">
+    {{ .Inner }}
+</div>

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;
-                margin-top: 20px;">{{ .Get "caption" }}</p>{{end}}
+            <p style="font-family: monospace;">{{ .Get "caption" }}</p>{{end}}
         </div>
     </div>
 </div>