redoing art

assets/scss/main.scss

@@ -167,3 +167,65 @@
 .footer-logo:hover {
     filter: contrast(0%) drop-shadow(7px 7px 5px grey);
 }
+
+///////////////////////
+//    ART GRID
+///////////////////////
+
+.art-grid {
+    --shift: 5px;
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+
+    & > figure > img {
+        border: 5px solid black;
+        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: 0.2s;
+            transition-timing-function: ease-in-out;
+
+            &:hover {
+                box-shadow: 0px 0px 0px var(--shadow-colour);
+                translate: none;
+            }
+        }
+    }
+
+    & > .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: 10px;
+}
+
+@media only screen and (max-width: 768px) {
+    .art-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .art-home-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}

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/digital/skull.png" 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 >}}

layouts/shortcodes/art-grid.html

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