From 6f5654cbcc3d0bb897ebe22a640596a2d4be3d53 Mon Sep 17 00:00:00 2001
From: JesseBrault0709 <62299747+JesseBrault0709@users.noreply.github.com>
Date: Fri, 7 Jun 2024 12:56:23 +0200
Subject: [PATCH] Styling of Composition page and div refactoring.

---
 .../site/CompositionsPageTemplate.wvc         | 26 ++++----
 .../site/biography/BiographyPageTemplate.wvc  |  8 ++-
 .../composition/CompositionPageTemplate.wvc   | 46 ++++++++------
 .../site/contact/ContactPageTemplate.wvc      | 62 ++++++++++---------
 static/main.css                               | 46 ++++++++++++--
 5 files changed, 118 insertions(+), 70 deletions(-)

diff --git a/pages/resources/com/jessebrault/site/CompositionsPageTemplate.wvc b/pages/resources/com/jessebrault/site/CompositionsPageTemplate.wvc
index b0d87c0..b899f3e 100644
--- a/pages/resources/com/jessebrault/site/CompositionsPageTemplate.wvc
+++ b/pages/resources/com/jessebrault/site/CompositionsPageTemplate.wvc
@@ -4,16 +4,18 @@ package com.jessebrault.site
 import com.jessebrault.site.composition.CompositionCategory
 ---
 <StandardPage title={title}>
-    <article class="compositions">
-        <h1>Compositions</h1>
-        <div class="composition-categories">
-            <Each
-                items={categories}
-                transform={<CompositionCategory
-                    category={it}
-                    compositions={compositions.getByCategory(it)}
-                />}
-            />
-        </div>
-    </article>
+    <div class="article-container">
+        <article class="compositions">
+            <h1>Compositions</h1>
+            <div class="composition-categories">
+                <Each
+                    items={categories}
+                    transform={<CompositionCategory
+                        category={it}
+                        compositions={compositions.getByCategory(it)}
+                    />}
+                />
+            </div>
+        </article>
+    </div>
 </StandardPage>
diff --git a/pages/resources/com/jessebrault/site/biography/BiographyPageTemplate.wvc b/pages/resources/com/jessebrault/site/biography/BiographyPageTemplate.wvc
index 3a41a5c..794bbe7 100644
--- a/pages/resources/com/jessebrault/site/biography/BiographyPageTemplate.wvc
+++ b/pages/resources/com/jessebrault/site/biography/BiographyPageTemplate.wvc
@@ -4,7 +4,9 @@ package com.jessebrault.site.biography
 import com.jessebrault.site.StandardPage
 ---
 <StandardPage title={title} banner={<BiographyBanner />}>
-    <article>
-        <%= renderBiography() %>
-    </article>
+    <div class="article-container">
+        <article>
+            <%= renderBiography() %>
+        </article>
+    </div>
 </StandardPage>
diff --git a/pages/resources/com/jessebrault/site/composition/CompositionPageTemplate.wvc b/pages/resources/com/jessebrault/site/composition/CompositionPageTemplate.wvc
index 38e5255..de06eb7 100644
--- a/pages/resources/com/jessebrault/site/composition/CompositionPageTemplate.wvc
+++ b/pages/resources/com/jessebrault/site/composition/CompositionPageTemplate.wvc
@@ -4,23 +4,31 @@ package com.jessebrault.site.composition
 import com.jessebrault.site.StandardPage
 ---
 <StandardPage title={title}>
-    <article>
-        <section class="composition-info">
-            <h1>$composition.title</h1>
-            <WhenNotNull item={composition.subTitle} render={<h2>$it</h2>} />
-            <WhenNotNull item={composition.version} render={<p class="version">$it</p>} />
-            <p class="year">$compositionYear</p>
-            <p class="instrumentation">$composition.instrumentation</p>
-            <WhenNotEmpty items={alternateVersions}>
-                <p>Alternate versions:
-                    <ul>
-                        <Each items={alternateVersions} transform={<li><a href={it.path}>${it.versionName}</a></li>} />
-                    </ul>
-                </p>
-            </WhenNotEmpty>
-        </section>
-        <section class="composition-text">
-            ${composition.text.render()}
-        </section>
-    </article>
+    <div class="article-container">
+        <a id="back-to-compositions" href="/compositions">Back to compositions</a>
+        <article>
+            <section class="composition-info">
+                <div class="composition-titles-year-container">
+                    <div class="composition-titles">
+                        <h1 class="title">$composition.title</h1>
+                        <WhenNotNull item={composition.subTitle} render={<h2 class="sub-title">$it</h2>} />
+                    </div>
+                    <p class="year">$compositionYear</p>
+                </div>
+                <WhenNotNull item={composition.version} render={<p class="version">$it</p>} />
+                <p class="instrumentation">$composition.instrumentation</p>
+                <WhenNotEmpty items={alternateVersions}>
+                    <div class="alternate-versions">
+                        <p>Alternate versions:</p>
+                        <ul>
+                            <Each items={alternateVersions} transform={<li><a href={it.path}>${it.versionName}</a></li>} />
+                        </ul>
+                    </div>
+                </WhenNotEmpty>
+            </section>
+            <section class="composition-text">
+                ${composition.text.render()}
+            </section>
+        </article>
+    </div>
 </StandardPage>
diff --git a/pages/resources/com/jessebrault/site/contact/ContactPageTemplate.wvc b/pages/resources/com/jessebrault/site/contact/ContactPageTemplate.wvc
index 5346b64..a9f5c6a 100644
--- a/pages/resources/com/jessebrault/site/contact/ContactPageTemplate.wvc
+++ b/pages/resources/com/jessebrault/site/contact/ContactPageTemplate.wvc
@@ -4,38 +4,40 @@ package com.jessebrault.site.contact
 import com.jessebrault.site.StandardPage
 ---
 <StandardPage title={title} banner={<ContactBanner />} pageScripts={['/contact.js']}>
-    <article class="contact">
-        <h1>Contact</h1>
-        <p>Please use the following form to contact Jesse Brault directly.</p>
-        <form class="contact">
-            <div class="control">
-                <label for="name">Name</label>
-                <input id="name" name="name" type="text" />
-                <p id="name-message" class="message">&nbsp;</p>
-            </div>
+    <div class="article-container">
+        <article class="contact">
+            <h1>Contact</h1>
+            <p>Please use the following form to contact Jesse Brault directly.</p>
+            <form class="contact">
+                <div class="control">
+                    <label for="name">Name</label>
+                    <input id="name" name="name" type="text" />
+                    <p id="name-message" class="message">&nbsp;</p>
+                </div>
 
-            <div class="control">
-                <label for="institution">Institution</label>
-                <input id="institution" name="institution" type="text" />
-                <p id="institution-message" class="message">&nbsp;</p>
-            </div>
+                <div class="control">
+                    <label for="institution">Institution</label>
+                    <input id="institution" name="institution" type="text" />
+                    <p id="institution-message" class="message">&nbsp;</p>
+                </div>
 
-            <div class="control">
-                <label for="email">Email</label>
-                <input id="email" name="email" type="email" />
-                <p id="email-message" class="message">&nbsp;</p>
-            </div>
+                <div class="control">
+                    <label for="email">Email</label>
+                    <input id="email" name="email" type="email" />
+                    <p id="email-message" class="message">&nbsp;</p>
+                </div>
 
-            <div class="control">
-                <label for="message">Message</label>
-                <textarea id="message" name="message"></textarea>
-                <p id="message-message" class="message">&nbsp;</p>
-            </div>
+                <div class="control">
+                    <label for="message">Message</label>
+                    <textarea id="message" name="message"></textarea>
+                    <p id="message-message" class="message">&nbsp;</p>
+                </div>
 
-            <div class="control">
-                <input type="submit" />
-                <p id="submit-message" class="message">&nbsp;</p>
-            </div>
-        </form>
-    </article>
+                <div class="control">
+                    <input type="submit" />
+                    <p id="submit-message" class="message">&nbsp;</p>
+                </div>
+            </form>
+        </article>
+    </div>
 </StandardPage>
diff --git a/static/main.css b/static/main.css
index 2bb44b9..be0e0de 100644
--- a/static/main.css
+++ b/static/main.css
@@ -91,11 +91,18 @@ main {
     align-items: center;
 }
 
+.article-container {
+    display: flex;
+    flex-direction: column;
+    row-gap: 25px;
+    padding: 50px 25px;
+    max-width: 70ch;
+    min-width: min(100%, 70ch);
+}
+
 article {
     font-family: var(--garamond);
     letter-spacing: 0.05em;
-    padding: 50px 25px;
-    max-width: 70ch;
     text-align: justify;
 }
 
@@ -183,10 +190,6 @@ button {
     cursor: pointer;
 }
 
-.compositions {
-    min-width: min(100%, 700px);
-}
-
 .composition-categories {
     display: flex;
     flex-direction: column;
@@ -251,6 +254,37 @@ button {
     font-size: 1.25em;
 }
 
+.composition-info {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+}
+
+.composition-info .composition-titles-year-container {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+}
+
+.composition-info p,
+.composition-info .title {
+    margin-block: 0;
+}
+
+.composition-info .year {
+    font-size: 1.5em;
+}
+
+.composition-info .alternate-versions {
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+}
+
+.composition-info .alternate-versions ul {
+    margin: 0;
+}
+
 .contact-banner article.social-media-links {
     font-family: var(--gothic);
 }