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

Icons and styling.

Browse Source
This commit is contained in:
JesseBrault0709 2024-06-04 07:52:28 +02:00
parent 2be671b81d
commit ed0bbc4fb6
9 changed files with 115 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/groovy/com/jessebrault/site/icon/SpotifyIcon.groovy Normal file
View File

@ -0,0 +1,19 @@
package com.jessebrault.site.icon
import com.jessebrault.ssg.view.SkipTemplate
import groowt.view.View
import groowt.view.component.web.lib.DelegatingWebViewComponent
@SkipTemplate
class SpotifyIcon extends DelegatingWebViewComponent {
private static final String svgText = SpotifyIcon.getResource('Spotify.txt').text
@Override
protected View getDelegate() {
return { Writer w ->
w << svgText
}
}
}

19
components/groovy/com/jessebrault/site/icon/YoutubeIcon.groovy Normal file
View File

@ -0,0 +1,19 @@
package com.jessebrault.site.icon
import com.jessebrault.ssg.view.SkipTemplate
import groowt.view.View
import groowt.view.component.web.lib.DelegatingWebViewComponent
@SkipTemplate
class YoutubeIcon extends DelegatingWebViewComponent{
private static final String svgText = YoutubeIcon.getResource('Youtube.txt').text
@Override
protected View getDelegate() {
return { Writer w ->
w << svgText
}
}
}

11
components/resources/com/jessebrault/site/StandardPageTemplate.wvc
View File

@ -1,5 +1,8 @@
--- ---
package com.jessebrault.site package com.jessebrault.site
import com.jessebrault.site.icon.SpotifyIcon
import com.jessebrault.site.icon.YoutubeIcon
--- ---
<html lang="en" class="cormorant-garamond-regular"> <html lang="en" class="cormorant-garamond-regular">
<Head title={title} /> <Head title={title} />
@ -9,6 +12,14 @@ package com.jessebrault.site
<% children -> pageChildren.each { children << it } %> <% children -> pageChildren.each { children << it } %>
</main> </main>
<footer> <footer>
<div class="social-icons">
<a href="https://open.spotify.com/artist/4ea1gZnLlQTrXKIMsnlr45?si=DfR-KCDyTiycbjmYwu566w">
<SpotifyIcon />
</a>
<a href="https://www.youtube.com/@JesseBrault0709">
<YoutubeIcon />
</a>
</div>
<p>Copyright $copyrightYear Jesse R. Brault. All rights reserved.</p> <p>Copyright $copyrightYear Jesse R. Brault. All rights reserved.</p>
</footer> </footer>
</body> </body>

4
components/resources/com/jessebrault/site/composition/CompositionCategoryTemplate.wvc
View File

@ -1,7 +1,7 @@
--- ---
package com.jessebrault.site.composition package com.jessebrault.site.composition
--- ---
<article> <section>
<h3>$category</h3> <h3>$category</h3>
<Each items={compositions} transform={<CompositionListing (it) />} /> <Each items={compositions} transform={<CompositionListing (it) />} />
</article> </section>

2
components/resources/com/jessebrault/site/icon/Spotify.txt Normal file
View File

@ -0,0 +1,2 @@
<!--! Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

2
components/resources/com/jessebrault/site/icon/Youtube.txt Normal file
View File

@ -0,0 +1,2 @@
<!--! Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 763 B

2
pages/resources/com/jessebrault/site/BiographyPageTemplate.wvc
View File

@ -2,10 +2,12 @@
package com.jessebrault.site package com.jessebrault.site
--- ---
<StandardPage title={title}> <StandardPage title={title}>
<div class="biography-container">
<div class="headshot-container"> <div class="headshot-container">
<img src="/headshot.jpg" class="headshot" /> <img src="/headshot.jpg" class="headshot" />
</div> </div>
<article> <article>
<%= renderBiography() %> <%= renderBiography() %>
</article> </article>
</div>
</StandardPage> </StandardPage>

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

@ -4,7 +4,7 @@ package com.jessebrault.site
import com.jessebrault.site.composition.CompositionCategory import com.jessebrault.site.composition.CompositionCategory
--- ---
<StandardPage title={title}> <StandardPage title={title}>
<section> <article>
<h1>Compositions</h1> <h1>Compositions</h1>
<Each <Each
items={categories} items={categories}
@ -13,5 +13,5 @@ import com.jessebrault.site.composition.CompositionCategory
compositions={compositions.getByCategory(it)} compositions={compositions.getByCategory(it)}
/>} />}
/> />
</section> </article>
</StandardPage> </StandardPage>

76
static/main.css
View File

@ -1,6 +1,7 @@
:root { :root {
--black: #110d0c; --black: #000000;
--dark-red: #401815; --dark-red: #401815;
--light-gray: #dedede;
--off-white: #fdfdfd; --off-white: #fdfdfd;
} }
@ -44,21 +45,18 @@ header,
footer { footer {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 15px 25px; justify-content: space-between;
padding-left: 25px;
padding-right: 25px;
} }
header { header {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
justify-content: space-between; background-color: var(--black);
background: linear-gradient(90deg, var(--dark-red), var(--black)); color: var(--off-white);
color: white; filter: drop-shadow(var(--black) 0 2px 2px);
filter: drop-shadow(var(--black) 0 3px 3px);
}
footer {
justify-content: center;
} }
header .titles { header .titles {
@ -77,36 +75,64 @@ nav ul {
nav a, nav a,
nav a:visited { nav a:visited {
color: white; color: var(--light-gray);
text-decoration: none; text-decoration: none;
} }
nav a:hover { nav a:hover {
color: hsl(from white h s calc(l * 0.8)); color: var(--off-white);
}
main {
padding: 0 25px;
text-align: justify;
display: flex;
flex-direction: column;
align-items: center;
} }
article { article {
padding: 15px 0; padding: 15px 25px;
max-width: 700px; max-width: 700px;
text-align: justify;
}
footer {
display: flex;
justify-content: space-between;
padding-block: 20px;
background-color: var(--black);
color: var(--off-white);
filter: drop-shadow(var(--black) 0 -1px 1px);
}
footer .social-icons {
display: flex;
column-gap: 20px;
}
footer svg {
height: 48px;
fill: var(--light-gray);
}
footer svg:hover {
fill: var(--off-white);
}
.biography-container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.biography-container > article {
grid-column: 1 / 2;
grid-row: 1;
padding-inline: 50px;
} }
.headshot-container { .headshot-container {
width: 100vw; grid-column: 2 / 3;
background: linear-gradient(90deg, #0d1313, var(--black)); grid-row: 1;
background-color: var(--black);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
filter: drop-shadow(var(--black) 0 3px 3px);
} }
.headshot { .headshot {
max-width: 700px; object-fit: cover;
width: 100%;
} }