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
---
<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>

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
---
<StandardPage title={title} banner={<BiographyBanner />}>
<article>
<%= renderBiography() %>
</article>
<div class="article-container">
<article>
<%= renderBiography() %>
</article>
</div>
</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
---
<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>

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
---
<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>

46
static/main.css
View File

@ -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);
}