relayout music

Kalabasa · Dec 30, 2023 · 9b25dff · 9b25dff
1 parent a468382
commit 9b25dff
Showing 1 changed file with 65 additions and 19 deletions.
diff --git a/src/site/music/index.html b/src/site/music/index.html
@@ -7,6 +7,9 @@
     </p>
     <section class="section">
       <h2 class="section-title">Single(s)</h2>
+      <div class="section-meta">
+        There is currently a single single.
+      </div>
       <div class="song-card-grid">
         <song-card
           :audiosrc="url('isolation/Isolation.mp3')"
@@ -18,13 +21,25 @@ <h2 class="section-title">Single(s)</h2>
     </section>
     <section class="section">
       <h2 class="section-title">Visualisations</h2>
-      🚧 Under construction 🚧
+      <div class="section-meta">
+        🚧 Under construction
+      </div>
     </section>
     <section class="section">
       <h2 class="section-title">Conversations EP (2017)</h2>
-      <responsive-img class="song-image" :src="url('conversations/art.jpg')" spec="195" />
-      <p><strong>Conversations</strong> is a four-piece composition of mellow beats, jazz harmony, and mild piano improvisations. Made with <text-link href="https://lmms.io/">LMMS</text-link> and Audacity.</p>
-      <p>Here are two of them:</p>
+      <div class="section-meta">
+        <responsive-img
+          class="song-image"
+          :src="url('conversations/art.jpg')"
+          spec="200"
+        />
+        <p>
+          <strong>Conversations</strong> is a four-piece composition of mellow
+          beats, jazz harmony, and mild piano improvisations. Made with
+          <text-link href="https://lmms.io/">LMMS</text-link> and Audacity.
+        </p>
+        <p>Here are two of them.</p>
+      </div>
       <div class="song-card-grid">
         <song-card
           :audiosrc="url('conversations/Just wanted to know.mp3')"
@@ -42,7 +57,17 @@ <h2 class="section-title">Conversations EP (2017)</h2>
     </section>
     <section class="section">
       <h2 class="section-title">Leftovers from the past</h2>
-      Old songs and abandoned ones.
+      <div class="section-meta">
+        <p>
+          I’ve been making music since I was 15, more or less. Starting with the
+          online music-making application Notessimo, to DAWs like LMMS, I’ve
+          made music ranging from solo piano pieces to electronic dance music.
+        </p>
+        <p>
+          Here are some of my old (but not too old) songs and abandoned drafts.
+          This collection is mostly from around 2016.
+        </p>
+      </div>
       <div class="song-card-grid">
         <song-card
           :audiosrc="url('old/Gravity.mp3')"
@@ -70,18 +95,18 @@ <h2 class="section-title">Leftovers from the past</h2>
           :audiosrc="url('old/2016-09-funk.mp3')"
           title="2016-09-funk.mp3"
           tag="funk"
-          description="Funk, chill. Unfinished."
+          description="Funk, chill. Draft."
         />
         <song-card
           :audiosrc="url('old/electro-loop.mp3')"
           title="electro-loop.mp3"
           tag="edm"
-          description="Electronic looping music. Unfinished."
+          description="Electronic looping music. Draft."
         />
         <song-card
           :audiosrc="url('old/sad.mp3')"
           title="sad.mp3"
-          description="Chill electro pop. Unfinished."
+          description="Chill electro pop. Draft."
         />
       </div>
     </section>
@@ -98,36 +123,57 @@ <h2 class="section-title">Leftovers from the past</h2>
   }
 
   .section {
+    display: grid;
+    grid-template-columns: 200px 30px 1fr;
+    grid-template-rows: min-content 18px min-content;
+    grid-template-areas:
+      "title title title"
+      ". . ."
+      "meta . songs";
     margin: 60px auto 90px;
     padding: 0 12px;
     max-width: 1200px;
   }
+  @media (max-width: 800px) {
+    .section {
+      grid-template-columns: 1fr;
+      grid-template-rows: min-content 18px min-content 24px min-content;
+      grid-template-areas:
+        "title"
+        "."
+        "meta"
+        "."
+        "songs";
+    }
+  }
 
   .section-title {
-    margin: 0 0 36px;
+    grid-area: title;
     font-size: 21px;
     font-family: var(--display-font);
     font-weight: bold;
     font-style: italic;
   }
 
+  .section-meta {
+    grid-area: meta;
+    max-width: 470px;
+  }
+  .section-meta > :first-child {
+    margin-top: 0;
+  }
+
   .song-card-grid {
-    clear: both;
-    margin: 30px 0 0;
+    grid-area: songs;
+    align-self: flex-start;
     display: grid;
-    grid-template-columns: repeat(auto-fit, calc(min(585px, 100%)));
+    grid-template-columns: repeat(auto-fit, calc(min(470px, 100%)));
     gap: 30px;
   }
 
   .song-image {
-    margin: 0 30px 30px 0;
     border-radius: 12px;
     width: 100%;
-    max-width: 195px;
-  }
-  @media (min-width: 600px) {
-    .song-image {
-      float: left;
-    }
+    max-width: 200px;
   }
 </style>