jessebrault/jb-ssg-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling of Composition page and div refactoring.

Browse Source
This commit is contained in:
JesseBrault0709 2024-06-07 12:56:23 +02:00
parent 57176a3aee
commit 6f5654cbcc
5 changed files with 118 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
pages/resources/com/jessebrault/site/CompositionsPageTemplate.wvc
View File

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

8
pages/resources/com/jessebrault/site/biography/BiographyPageTemplate.wvc
View File

@ -4,7 +4,9 @@ package com.jessebrault.site.biography
import com.jessebrault.site.StandardPage import com.jessebrault.site.StandardPage
--- ---
<StandardPage title={title} banner={<BiographyBanner />}> <StandardPage title={title} banner={<BiographyBanner />}>
<article> <div class="article-container">
<%= renderBiography() %> <article>
</article> <%= renderBiography() %>
</article>
</div>
</StandardPage> </StandardPage>

46
pages/resources/com/jessebrault/site/composition/CompositionPageTemplate.wvc
View File

@ -4,23 +4,31 @@ package com.jessebrault.site.composition
import com.jessebrault.site.StandardPage import com.jessebrault.site.StandardPage
--- ---
<StandardPage title={title}> <StandardPage title={title}>
<article> <div class="article-container">
<section class="composition-info"> <a id="back-to-compositions" href="/compositions">Back to compositions</a>
<h1>$composition.title</h1> <article>
<WhenNotNull item={composition.subTitle} render={<h2>$it</h2>} /> <section class="composition-info">
<WhenNotNull item={composition.version} render={<p class="version">$it</p>} /> <div class="composition-titles-year-container">
<p class="year">$compositionYear</p> <div class="composition-titles">
<p class="instrumentation">$composition.instrumentation</p> <h1 class="title">$composition.title</h1>
<WhenNotEmpty items={alternateVersions}> <WhenNotNull item={composition.subTitle} render={<h2 class="sub-title">$it</h2>} />
<p>Alternate versions: </div>
<ul> <p class="year">$compositionYear</p>
<Each items={alternateVersions} transform={<li><a href={it.path}>${it.versionName}</a></li>} /> </div>
</ul> <WhenNotNull item={composition.version} render={<p class="version">$it</p>} />
</p> <p class="instrumentation">$composition.instrumentation</p>
</WhenNotEmpty> <WhenNotEmpty items={alternateVersions}>
</section> <div class="alternate-versions">
<section class="composition-text"> <p>Alternate versions:</p>
${composition.text.render()} <ul>
</section> <Each items={alternateVersions} transform={<li><a href={it.path}>${it.versionName}</a></li>} />
</article> </ul>
</div>
</WhenNotEmpty>
</section>
<section class="composition-text">
${composition.text.render()}
</section>
</article>
</div>
</StandardPage> </StandardPage>

62
pages/resources/com/jessebrault/site/contact/ContactPageTemplate.wvc
View File

@ -4,38 +4,40 @@ package com.jessebrault.site.contact
import com.jessebrault.site.StandardPage import com.jessebrault.site.StandardPage
--- ---
<StandardPage title={title} banner={<ContactBanner />} pageScripts={['/contact.js']}> <StandardPage title={title} banner={<ContactBanner />} pageScripts={['/contact.js']}>
<article class="contact"> <div class="article-container">
<h1>Contact</h1> <article class="contact">
<p>Please use the following form to contact Jesse Brault directly.</p> <h1>Contact</h1>
<form class="contact"> <p>Please use the following form to contact Jesse Brault directly.</p>
<div class="control"> <form class="contact">
<label for="name">Name</label> <div class="control">
<input id="name" name="name" type="text" /> <label for="name">Name</label>
<p id="name-message" class="message">&nbsp;</p> <input id="name" name="name" type="text" />
</div> <p id="name-message" class="message">&nbsp;</p>
</div>
<div class="control"> <div class="control">
<label for="institution">Institution</label> <label for="institution">Institution</label>
<input id="institution" name="institution" type="text" /> <input id="institution" name="institution" type="text" />
<p id="institution-message" class="message">&nbsp;</p> <p id="institution-message" class="message">&nbsp;</p>
</div> </div>
<div class="control"> <div class="control">
<label for="email">Email</label> <label for="email">Email</label>
<input id="email" name="email" type="email" /> <input id="email" name="email" type="email" />
<p id="email-message" class="message">&nbsp;</p> <p id="email-message" class="message">&nbsp;</p>
</div> </div>
<div class="control"> <div class="control">
<label for="message">Message</label> <label for="message">Message</label>
<textarea id="message" name="message"></textarea> <textarea id="message" name="message"></textarea>
<p id="message-message" class="message">&nbsp;</p> <p id="message-message" class="message">&nbsp;</p>
</div> </div>
<div class="control"> <div class="control">
<input type="submit" /> <input type="submit" />
<p id="submit-message" class="message">&nbsp;</p> <p id="submit-message" class="message">&nbsp;</p>
</div> </div>
</form> </form>
</article> </article>
</div>
</StandardPage> </StandardPage>

46
static/main.css
View File

@ -91,11 +91,18 @@ main {
align-items: center; 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 { article {
font-family: var(--garamond); font-family: var(--garamond);
letter-spacing: 0.05em; letter-spacing: 0.05em;
padding: 50px 25px;
max-width: 70ch;
text-align: justify; text-align: justify;
} }
@ -183,10 +190,6 @@ button {
cursor: pointer; cursor: pointer;
} }
.compositions {
min-width: min(100%, 700px);
}
.composition-categories { .composition-categories {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -251,6 +254,37 @@ button {
font-size: 1.25em; 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 { .contact-banner article.social-media-links {
font-family: var(--gothic); font-family: var(--gothic);
} }