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

Much better styling/colors/layout.

Browse Source
This commit is contained in:
JesseBrault0709 2024-06-05 16:43:56 +02:00
parent 6442790d2f
commit 666e424b8b
10 changed files with 106 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/groovy/com/jessebrault/site/StandardPage.groovy
View File

@ -1,6 +1,9 @@
package com.jessebrault.site package com.jessebrault.site
import groowt.view.component.web.BaseWebViewComponent import groowt.view.component.web.BaseWebViewComponent
import groowt.view.component.web.WebViewComponent
import org.jetbrains.annotations.Nullable
import java.time.LocalDate import java.time.LocalDate
import java.time.format.DateTimeFormatter import java.time.format.DateTimeFormatter
@ -8,12 +11,14 @@ import java.time.format.DateTimeFormatter
class StandardPage extends BaseWebViewComponent { class StandardPage extends BaseWebViewComponent {
final String title final String title
final Closure<WebViewComponent> banner
StandardPage(Map attr) { StandardPage(Map attr) {
this.title = attr.title this.title = attr.title
this.banner = attr.banner ?: { '' }
} }
List getPageChildren() { List getMainChildren() {
this.children this.children
} }

17
components/groovy/com/jessebrault/site/biography/BiographyBanner.groovy Normal file
View File

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

2
components/resources/com/jessebrault/site/HeadTemplate.wvc
View File

@ -8,7 +8,7 @@ package com.jessebrault.site
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=EB+Garamond:wght@400;600&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=EB+Garamond:wght@400;600&family=Didact+Gothic&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/main.css" /> <link rel="stylesheet" href="/main.css" />
</head> </head>

6
components/resources/com/jessebrault/site/HeaderTemplate.wvc
View File

@ -3,12 +3,12 @@ package com.jessebrault.site
--- ---
<header> <header>
<div class="titles"> <div class="titles">
<h1 class="eb-garamond-semibold">$siteName</h1> <h1>$siteName</h1>
<h2 class="eb-garamond-semibold">$siteTagLine</h2> <h2>$siteTagLine</h2>
</div> </div>
<nav> <nav>
<ul> <ul>
<Each items={menuItems} transform={<li class="eb-garamond-regular"><a href={it.path}>$it.name</a></li>} /> <Each items={menuItems} transform={<li><a href={it.path}>$it.name</a></li>} />
</ul> </ul>
</nav> </nav>
</header> </header>

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

@ -4,12 +4,15 @@ package com.jessebrault.site
import com.jessebrault.site.icon.SpotifyIcon import com.jessebrault.site.icon.SpotifyIcon
import com.jessebrault.site.icon.YoutubeIcon import com.jessebrault.site.icon.YoutubeIcon
--- ---
<html lang="en" class="cormorant-garamond-regular"> <html lang="en">
<Head title={title} /> <Head title={title} />
<body> <body>
<div class="header-banner-container">
<Header /> <Header />
<% children -> children << banner() %>
</div>
<main> <main>
<% children -> pageChildren.each { children << it } %> <% children -> mainChildren.each { children << it } %>
</main> </main>
<footer> <footer>
<div class="social-icons"> <div class="social-icons">

10
components/resources/com/jessebrault/site/biography/BiographyBanner.txt Normal file
View File

@ -0,0 +1,10 @@
<div class="banner">
<div class="headshot-container">
<img src="/headshot.jpg" class="headshot" />
</div>
<div class="banner-blurb-container">
<p>With a unique set of talents, skills, and experiences,</p>
<p id="jesse-brault-name">Jesse Brault</p>
<p>is an American conductor, composer, and developer.</p>
</div>
</div>

2
pages/groovy/com/jessebrault/site/BiographyPage.groovy → pages/groovy/com/jessebrault/site/biography/BiographyPage.groovy
View File

@ -1,4 +1,4 @@
package com.jessebrault.site package com.jessebrault.site.biography
import com.jessebrault.site.util.TitleMaker import com.jessebrault.site.util.TitleMaker
import com.jessebrault.ssg.di.InjectText import com.jessebrault.ssg.di.InjectText

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

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

10
pages/resources/com/jessebrault/site/biography/BiographyPageTemplate.wvc Normal file
View File

@ -0,0 +1,10 @@
---
package com.jessebrault.site.biography
import com.jessebrault.site.StandardPage
---
<StandardPage title={title} banner={<BiographyBanner />}>
<article>
<%= renderBiography() %>
</article>
</StandardPage>

108
static/main.css
View File

@ -1,63 +1,36 @@
:root { :root {
--black: #000000; --black: #000000;
--charcoal: #38383b;
--dark-blue: #00416b; --dark-blue: #00416b;
--medium-blue: #005e9b; --medium-blue: #005e9b;
--light-blue: #0071bb; --light-blue: #0071bb;
--light-gray: #dedede; --light-gray: #dedede;
--petrol: #005f6a;
--off-white: #fdfdfd; --off-white: #fdfdfd;
} }
.cormorant-garamond-regular {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-style: normal;
}
.cormorant-garamond-semibold {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-style: normal;
}
.eb-garamond-regular {
font-family: 'EB Garamond', serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
.eb-garamond-semibold {
font-family: 'EB Garamond', serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
}
html { html {
font-size: 14pt; font-size: 18px;
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: var(--black); background-color: var(--charcoal);
} }
header, .header-banner-container {
footer { background-color: var(--charcoal);
display: flex; font-family: 'Didact Gothic', sans-serif;
align-items: center; letter-spacing: 0.2em;
justify-content: space-between;
padding-inline: 50px;
} }
header { header {
position: sticky; display: flex;
top: 0; align-items: baseline;
z-index: 1; justify-content: space-between;
background: linear-gradient(var(--light-blue), var(--dark-blue)); padding: 15px 50px;
color: var(--off-white); color: var(--off-white);
filter: drop-shadow(var(--black) 0 2px 2px);
} }
header .titles { header .titles {
@ -66,6 +39,14 @@ header .titles {
column-gap: 15px; column-gap: 15px;
} }
header .titles * {
margin: 0;
}
header .titles h2 {
font-size: 18px;
}
nav ul { nav ul {
display: flex; display: flex;
column-gap: 25px; column-gap: 25px;
@ -76,6 +57,7 @@ nav ul {
nav a, nav a,
nav a:visited { nav a:visited {
letter-spacing: 0.1em;
color: var(--light-gray); color: var(--light-gray);
text-decoration: none; text-decoration: none;
} }
@ -84,11 +66,26 @@ nav a:hover {
color: var(--off-white); color: var(--off-white);
} }
.banner {
display: flex;
align-items: center;
}
.banner > * {
width: 100%;
padding: 15px 50px;
}
main { main {
background-color: var(--off-white); background-color: var(--off-white);
display: flex;
flex-direction: column;
align-items: center;
} }
article { article {
font-family: 'Cormorant Garamond', serif;
letter-spacing: 0.05em;
padding: 15px 25px; padding: 15px 25px;
max-width: 700px; max-width: 700px;
text-align: justify; text-align: justify;
@ -97,10 +94,10 @@ article {
footer { footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-block: 20px; padding: 20px 50px;
background: linear-gradient(var(--medium-blue), var(--dark-blue)); background-color: var(--charcoal);
color: var(--off-white); color: var(--off-white);
filter: drop-shadow(var(--black) 0 -1px 1px); font-family: 'Cormorant Garamond', serif;
} }
footer .social-icons { footer .social-icons {
@ -117,21 +114,7 @@ footer svg:hover {
fill: var(--off-white); 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 {
grid-column: 2 / 3;
grid-row: 1;
background-color: var(--black);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -140,3 +123,16 @@ footer svg:hover {
.headshot { .headshot {
width: 100%; width: 100%;
} }
.banner-blurb-container {
color: var(--off-white);
text-align: center;
}
.banner-blurb-container p {
font-size: 24px;
}
.banner-blurb-container p#jesse-brault-name {
font-size: 48px;
}