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
import groowt.view.component.web.BaseWebViewComponent
import groowt.view.component.web.WebViewComponent
import org.jetbrains.annotations.Nullable
import java.time.LocalDate
import java.time.format.DateTimeFormatter
@ -8,12 +11,14 @@ import java.time.format.DateTimeFormatter
class StandardPage extends BaseWebViewComponent {
final String title
final Closure<WebViewComponent> banner
StandardPage(Map attr) {
this.title = attr.title
this.banner = attr.banner ?: { '' }
}
List getPageChildren() {
List getMainChildren() {
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.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" />
</head>

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

@ -3,12 +3,12 @@ package com.jessebrault.site
---
<header>
<div class="titles">
<h1 class="eb-garamond-semibold">$siteName</h1>
<h2 class="eb-garamond-semibold">$siteTagLine</h2>
<h1>$siteName</h1>
<h2>$siteTagLine</h2>
</div>
<nav>
<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>
</nav>
</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.YoutubeIcon
---
<html lang="en" class="cormorant-garamond-regular">
<html lang="en">
<Head title={title} />
<body>
<div class="header-banner-container">
<Header />
<% children -> children << banner() %>
</div>
<main>
<% children -> pageChildren.each { children << it } %>
<% children -> mainChildren.each { children << it } %>
</main>
<footer>
<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.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 {
--black: #000000;
--charcoal: #38383b;
--dark-blue: #00416b;
--medium-blue: #005e9b;
--light-blue: #0071bb;
--light-gray: #dedede;
--petrol: #005f6a;
--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 {
font-size: 14pt;
font-size: 18px;
}
body {
margin: 0;
padding: 0;
background-color: var(--black);
background-color: var(--charcoal);
}
header,
footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: 50px;
.header-banner-container {
background-color: var(--charcoal);
font-family: 'Didact Gothic', sans-serif;
letter-spacing: 0.2em;
}
header {
position: sticky;
top: 0;
z-index: 1;
background: linear-gradient(var(--light-blue), var(--dark-blue));
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 15px 50px;
color: var(--off-white);
filter: drop-shadow(var(--black) 0 2px 2px);
}
header .titles {
@ -66,6 +39,14 @@ header .titles {
column-gap: 15px;
}
header .titles * {
margin: 0;
}
header .titles h2 {
font-size: 18px;
}
nav ul {
display: flex;
column-gap: 25px;
@ -76,6 +57,7 @@ nav ul {
nav a,
nav a:visited {
letter-spacing: 0.1em;
color: var(--light-gray);
text-decoration: none;
}
@ -84,11 +66,26 @@ nav a:hover {
color: var(--off-white);
}
.banner {
display: flex;
align-items: center;
}
.banner > * {
width: 100%;
padding: 15px 50px;
}
main {
background-color: var(--off-white);
display: flex;
flex-direction: column;
align-items: center;
}
article {
font-family: 'Cormorant Garamond', serif;
letter-spacing: 0.05em;
padding: 15px 25px;
max-width: 700px;
text-align: justify;
@ -97,10 +94,10 @@ article {
footer {
display: flex;
justify-content: space-between;
padding-block: 20px;
background: linear-gradient(var(--medium-blue), var(--dark-blue));
padding: 20px 50px;
background-color: var(--charcoal);
color: var(--off-white);
filter: drop-shadow(var(--black) 0 -1px 1px);
font-family: 'Cormorant Garamond', serif;
}
footer .social-icons {
@ -117,21 +114,7 @@ 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 {
grid-column: 2 / 3;
grid-row: 1;
background-color: var(--black);
display: flex;
flex-direction: column;
align-items: center;
@ -140,3 +123,16 @@ footer svg:hover {
.headshot {
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;
}