From ed0bbc4fb6b24de2a75bc4e03a5c35fa2a728e37 Mon Sep 17 00:00:00 2001 From: JesseBrault0709 <62299747+JesseBrault0709@users.noreply.github.com> Date: Tue, 4 Jun 2024 07:52:28 +0200 Subject: [PATCH] Icons and styling. --- .../jessebrault/site/icon/SpotifyIcon.groovy | 19 +++++ .../jessebrault/site/icon/YoutubeIcon.groovy | 19 +++++ .../jessebrault/site/StandardPageTemplate.wvc | 11 +++ .../CompositionCategoryTemplate.wvc | 4 +- .../com/jessebrault/site/icon/Spotify.txt | 2 + .../com/jessebrault/site/icon/Youtube.txt | 2 + .../site/BiographyPageTemplate.wvc | 12 +-- .../site/CompositionsPageTemplate.wvc | 4 +- static/main.css | 76 +++++++++++++------ 9 files changed, 115 insertions(+), 34 deletions(-) create mode 100644 components/groovy/com/jessebrault/site/icon/SpotifyIcon.groovy create mode 100644 components/groovy/com/jessebrault/site/icon/YoutubeIcon.groovy create mode 100644 components/resources/com/jessebrault/site/icon/Spotify.txt create mode 100644 components/resources/com/jessebrault/site/icon/Youtube.txt diff --git a/components/groovy/com/jessebrault/site/icon/SpotifyIcon.groovy b/components/groovy/com/jessebrault/site/icon/SpotifyIcon.groovy new file mode 100644 index 0000000..8cf0f8b --- /dev/null +++ b/components/groovy/com/jessebrault/site/icon/SpotifyIcon.groovy @@ -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 + } + } + +} diff --git a/components/groovy/com/jessebrault/site/icon/YoutubeIcon.groovy b/components/groovy/com/jessebrault/site/icon/YoutubeIcon.groovy new file mode 100644 index 0000000..6e44e9a --- /dev/null +++ b/components/groovy/com/jessebrault/site/icon/YoutubeIcon.groovy @@ -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 + } + } + +} diff --git a/components/resources/com/jessebrault/site/StandardPageTemplate.wvc b/components/resources/com/jessebrault/site/StandardPageTemplate.wvc index 6698d07..c3220e8 100644 --- a/components/resources/com/jessebrault/site/StandardPageTemplate.wvc +++ b/components/resources/com/jessebrault/site/StandardPageTemplate.wvc @@ -1,5 +1,8 @@ --- package com.jessebrault.site + +import com.jessebrault.site.icon.SpotifyIcon +import com.jessebrault.site.icon.YoutubeIcon --- @@ -9,6 +12,14 @@ package com.jessebrault.site <% children -> pageChildren.each { children << it } %> diff --git a/components/resources/com/jessebrault/site/composition/CompositionCategoryTemplate.wvc b/components/resources/com/jessebrault/site/composition/CompositionCategoryTemplate.wvc index 51edb8f..9516297 100644 --- a/components/resources/com/jessebrault/site/composition/CompositionCategoryTemplate.wvc +++ b/components/resources/com/jessebrault/site/composition/CompositionCategoryTemplate.wvc @@ -1,7 +1,7 @@ --- package com.jessebrault.site.composition --- -
+

$category

} /> -
+ diff --git a/components/resources/com/jessebrault/site/icon/Spotify.txt b/components/resources/com/jessebrault/site/icon/Spotify.txt new file mode 100644 index 0000000..754734d --- /dev/null +++ b/components/resources/com/jessebrault/site/icon/Spotify.txt @@ -0,0 +1,2 @@ + + diff --git a/components/resources/com/jessebrault/site/icon/Youtube.txt b/components/resources/com/jessebrault/site/icon/Youtube.txt new file mode 100644 index 0000000..4210ca0 --- /dev/null +++ b/components/resources/com/jessebrault/site/icon/Youtube.txt @@ -0,0 +1,2 @@ + + diff --git a/pages/resources/com/jessebrault/site/BiographyPageTemplate.wvc b/pages/resources/com/jessebrault/site/BiographyPageTemplate.wvc index ed81f70..b09291b 100644 --- a/pages/resources/com/jessebrault/site/BiographyPageTemplate.wvc +++ b/pages/resources/com/jessebrault/site/BiographyPageTemplate.wvc @@ -2,10 +2,12 @@ package com.jessebrault.site --- -
- +
+
+ +
+
+ <%= renderBiography() %> +
-
- <%= renderBiography() %> -
diff --git a/pages/resources/com/jessebrault/site/CompositionsPageTemplate.wvc b/pages/resources/com/jessebrault/site/CompositionsPageTemplate.wvc index 66e9fc3..66e064a 100644 --- a/pages/resources/com/jessebrault/site/CompositionsPageTemplate.wvc +++ b/pages/resources/com/jessebrault/site/CompositionsPageTemplate.wvc @@ -4,7 +4,7 @@ package com.jessebrault.site import com.jessebrault.site.composition.CompositionCategory --- -
+

Compositions

} /> -
+ diff --git a/static/main.css b/static/main.css index 704c28b..ca0b088 100644 --- a/static/main.css +++ b/static/main.css @@ -1,6 +1,7 @@ :root { - --black: #110d0c; + --black: #000000; --dark-red: #401815; + --light-gray: #dedede; --off-white: #fdfdfd; } @@ -44,21 +45,18 @@ header, footer { display: flex; align-items: center; - padding: 15px 25px; + justify-content: space-between; + padding-left: 25px; + padding-right: 25px; } header { position: sticky; top: 0; z-index: 1; - justify-content: space-between; - background: linear-gradient(90deg, var(--dark-red), var(--black)); - color: white; - filter: drop-shadow(var(--black) 0 3px 3px); -} - -footer { - justify-content: center; + background-color: var(--black); + color: var(--off-white); + filter: drop-shadow(var(--black) 0 2px 2px); } header .titles { @@ -77,36 +75,64 @@ nav ul { nav a, nav a:visited { - color: white; + color: var(--light-gray); text-decoration: none; } nav a:hover { - color: hsl(from white h s calc(l * 0.8)); -} - -main { - padding: 0 25px; - text-align: justify; - display: flex; - flex-direction: column; - align-items: center; + color: var(--off-white); } article { - padding: 15px 0; + padding: 15px 25px; 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 { - width: 100vw; - background: linear-gradient(90deg, #0d1313, var(--black)); + grid-column: 2 / 3; + grid-row: 1; + background-color: var(--black); display: flex; flex-direction: column; align-items: center; - filter: drop-shadow(var(--black) 0 3px 3px); } .headshot { - max-width: 700px; + object-fit: cover; + width: 100%; }