Styling compositions page.

components/resources/com/jessebrault/site/composition/CompositionCategoryTemplate.wvc

@@ -3,5 +3,7 @@ package com.jessebrault.site.composition
 ---
 <section>
     <h3>$category</h3>
-    <Each items={compositions} transform={<CompositionListing (it) />} />
+    <div class="composition-listings">
+        <Each items={compositions} transform={<CompositionListing (it) />} />
+    </div>
 </section>

components/resources/com/jessebrault/site/composition/CompositionListingTemplate.wvc

@@ -5,7 +5,7 @@ package com.jessebrault.site.composition
     <div class="info-row-1">
         <h4 class="title"><a href={compositionUrl}>$composition.title</a></h4>
         <WhenNotNull item={composition.subTitle} render={<h5 class="sub-title">$it</h5>} />
-        <WhenNotNull item={composition.version} render={<span class="version">$it</span>} />
+        <WhenNotNull item={composition.version} render={<span class="version"> – $it</span>} />
     </div>
     <div class="info-row-2">
         <span class="instrumentation">$composition.instrumentation</span>

pages/resources/com/jessebrault/site/CompositionsPageTemplate.wvc

@@ -4,14 +4,16 @@ package com.jessebrault.site
 import com.jessebrault.site.composition.CompositionCategory
 ---
 <StandardPage title={title}>
-    <article>
+    <article class="compositions">
         <h1>Compositions</h1>
-        <Each
-            items={categories}
-            transform={<CompositionCategory
-                category={it}
-                compositions={compositions.getByCategory(it)}
-            />}
-        />
+        <div class="composition-categories">
+            <Each
+                items={categories}
+                transform={<CompositionCategory
+                    category={it}
+                    compositions={compositions.getByCategory(it)}
+                />}
+            />
+        </div>
     </article>
 </StandardPage>

static/main.css

@@ -99,6 +99,18 @@ article {
     text-align: justify;
 }
 
+article h1 {
+    font-size: 2em;
+}
+
+article h2 {
+    font-size: 1.75em;
+}
+
+article h3 {
+    font-size: 1.5em;
+}
+
 footer {
     display: flex;
     justify-content: space-between;
@@ -171,6 +183,74 @@ button {
     cursor: pointer;
 }
 
+.compositions {
+    min-width: min(100%, 700px);
+}
+
+.composition-categories {
+    display: flex;
+    flex-direction: column;
+    row-gap: 30px;
+}
+
+.composition-listings > * {
+    border-top: 1px solid var(--light-gray);
+}
+
+.composition-listings:last-child {
+    border-bottom: 1px solid var(--light-gray);
+}
+
+.composition-listing {
+    padding-block: 20px;
+    display: grid;
+    grid-template-columns: 4fr 1fr;
+    grid-template-areas:
+        'r1 date'
+        'r2 .'
+        'r3 .';
+    row-gap: 10px;
+}
+
+.composition-listing .info-row-1 {
+    grid-area: r1;
+    display: flex;
+    align-items: baseline;
+    column-gap: 10px;
+}
+
+.composition-listing .info-row-1 .title {
+    margin: 0;
+    font-size: 1.5em;
+}
+
+.composition-listing .info-row-1 .title a {
+    color: var(--charcoal);
+
+    &:hover {
+        color: hsl(from var(--charcoal) h s l / 0.75);
+    }
+}
+
+.composition-listing .info-row-1 .sub-title {
+    margin: 0;
+}
+
+.composition-listing .info-row-2 {
+    grid-area: r2;
+}
+
+.composition-listing .info-row-3 {
+    grid-area: r3;
+}
+
+.composition-listing .date-column {
+    grid-area: date;
+    align-self: center;
+    justify-self: center;
+    font-size: 1.25em;
+}
+
 .contact-banner article.social-media-links {
     font-family: var(--gothic);
 }