add tarot grid display page

app/[slug]/layout.js

@@ -1,9 +1,9 @@
 import { getMetadata } from '@/utils/getMetadata'
+
 export async function generateMetadata({ params: { slug }}) {
     return getMetadata(slug, 'article')
 }
 
-
 export default function Layout({ children }) {
     return <>
         { children }

app/tarot-grid/layout.js

@@ -0,0 +1,11 @@
+import { getMetadata } from '@/utils/getMetadata'
+
+export async function generateMetadata({ params: { slug }}) {
+    return getMetadata(slug, 'article')
+}
+
+export default function Layout({ children }) {
+    return <>
+        { children }
+    </>
+}

app/tarot-grid/page.js

@@ -0,0 +1,19 @@
+import Header from "@/components/Header/Header";
+import Post from "@/components/Post/Post";
+import TarotGrid from "@/components/TarotGrid/TarotGrid";
+
+export default async function TarotGridPage() {
+    const slug = 'tarot-grid'
+    const meta = { title: 'Tarot Decks - Grid', tags: [ 'personal', 'occult' ] }
+    const info = {
+        inode: 0,
+    }
+
+    return <>
+        <Header slug={ slug } />
+
+        <Post slug={ slug } meta={ meta } info={ info }>
+            <TarotGrid />
+        </Post>
+    </>
+}

components/TarotDeck/TarotDeck.js

@@ -8,7 +8,7 @@ export default function TarotDeck({ deck: { name, type, deckImage, cardImage } }
         <h3 className={ styles.name }>{ name }</h3>
 
         <div className={ styles.images }>
-            { deckImage ? <img className={ styles.image } src={ deckImage } /> : <p>(no deck box)</p> }
+            { deckImage ? <img className={ styles.image } src={ deckImage } /> : <p className={ styles.noDeckBox }>(no deck box)</p> }
             <img className={ styles.image } src={ cardImage } />
         </div>
     </div>

components/TarotDeck/TarotDeck.module.scss

@@ -1,13 +1,13 @@
 @import '@/styles/breakpoints.scss';
 
 .deck {
-    margin: 0 var(--spacing-medium);
+    margin: var(--spacing-medium);
 
     display: flex;
     flex-direction: column;
     gap: var(--spacing-small);
 
-    max-width: var(--width-wide);
+    max-width: var(--width-full) !important;
 }
 
 .name {
@@ -20,20 +20,28 @@
     gap: var(--spacing-small);
     height: auto;
 
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $breakpoint-small) {
         flex-direction: row;
-        height: 400px;
+        flex-wrap: wrap;
+        // height: 400px;
     }
 }
 
 .image {
-    height: 100%;
     width: auto;
+
+    @media (min-width: $breakpoint-small) {
+        height: 400px;
+    }
 }
 
 /* .type {
     font-weight: bold;
     background: var(--color-foreground);
     color: var(--color-background);
     padding: 0 8px;
-} */
+} */
+
+.noDeckBox {
+    flex-grow: 1;
+}

components/TarotGrid/TarotGrid.js

@@ -0,0 +1,17 @@
+import styles from './TarotGrid.module.scss'
+
+import data from '@/data/tarotDecks'
+
+function Image({ caption, src }) {
+    return <figure className={ styles.imageContainer }>
+        <img className={ styles.image } src={ src } />
+
+        <figcaption className={ styles.caption }>{ caption }</figcaption>
+    </figure>
+}
+
+export default function TarotGrid() {
+    return <div className={ styles.grid }>
+        { data.map(deck => <Image caption={ deck.name } src={ deck.landscapeCardImage ?? deck.cardImage } />) }
+    </div>
+}

components/TarotGrid/TarotGrid.module.scss

@@ -0,0 +1,49 @@
+@import '@/styles/breakpoints.scss';
+
+.grid {
+    max-width: var(--width-full);
+    padding: var(--spacing-medium);
+
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--spacing-small);
+
+    @media (min-width: $breakpoint-medium) {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    @media (min-width: $breakpoint-large) {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
+
+.imageContainer {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin: 0;
+}
+
+.caption {
+    opacity: 0;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: var(--spacing-xsmall) var(--spacing-small);
+    font-size: 0.8rem;
+    font-weight: bold;
+    background: var(--color-background);
+    color: var(--color-foreground);
+    border: 2px solid var(--color-foreground);
+
+    .imageContainer:hover & {
+        opacity: 1;
+    }
+}
+
+.image {
+    width: 100%;
+    max-height: 100%;
+    height: auto;
+}

posts/superhero-maskuma-bass.mdx

@@ -3,7 +3,7 @@ export const meta = {
     tags: ['music'],
 }
 
-This is sheet music for the bass guitar part of **すーぱーひーろー☆マスクマ** written by Tomokazu Tashiro and performed by Tomoko Kaneda. The score is available as a <a href="https://cesque.com/storage/23/04/24/196364367245.pdf">PDF</a> and <a href="https://cesque.com/storage/23/04/24/565172306662.mid">MIDI</a>.
+This is sheet music for the bass guitar part of **すーぱーひーろー☆マスクマ** written by Tomokazu Tashiro and performed by Tomoko Kaneda. The score is available as a [PDF](https://cesque.com/storage/23/04/24/196364367245.pdf) and [MIDI](https://cesque.com/storage/23/04/24/565172306662.mid).
 
 I transcribed it by using Spleeter to split the parts into seperate audio tracks, processing the bass track with Melodyne to show most of the pitch data, then manually going through and creating a MIDI track with the correct data (guided by the Melodyne information but also having to clean up parts and interpret an unclear audio track). I then used Reaper's notation view as a guide to recreate the notation in Lilypond; the source code of the notation file is available below.
 

posts/tarot-decks.mdx

@@ -6,6 +6,7 @@ export const meta = {
     tags: ['personal', 'occult'],
 }
 
+[View as grid](/tarot-grid)
 
 { data.map(deck => {
     return <TarotDeck deck={ deck } />

styles/breakpoints.scss

@@ -1,2 +1,3 @@
 $breakpoint-small: 600px;
-$breakpoint-medium: 900px;
+$breakpoint-medium: 900px;
+$breakpoint-large: 1200px;