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

Mobile styling.

Browse Source
This commit is contained in:
JesseBrault0709 2024-06-09 11:10:35 +02:00
parent dcaefa0576
commit 3683d5eae6
6 changed files with 240 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/groovy/com/jessebrault/site/icon/BarsIcon.groovy Normal file
View File

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

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

@ -2,6 +2,7 @@
package com.jessebrault.site package com.jessebrault.site
--- ---
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>$title</title> <title>$title</title>

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

@ -1,5 +1,7 @@
--- ---
package com.jessebrault.site package com.jessebrault.site
import com.jessebrault.site.icon.BarsIcon
--- ---
<header> <header>
<div class="titles"> <div class="titles">
@ -7,6 +9,9 @@ package com.jessebrault.site
<h2>$siteTagLine</h2> <h2>$siteTagLine</h2>
</div> </div>
<nav> <nav>
<button class="bars-wrapper">
<BarsIcon />
</button>
<ul> <ul>
<Each items={menuItems} transform={<li><a href={it.path}>$it.name</a></li>} /> <Each items={menuItems} transform={<li><a href={it.path}>$it.name</a></li>} />
</ul> </ul>

8
components/resources/com/jessebrault/site/composition/CompositionListingTemplate.wvc
View File

@ -5,7 +5,10 @@ package com.jessebrault.site.composition
<div class="info-row-1"> <div class="info-row-1">
<h4 class="title"><a href={compositionUrl}>$composition.title</a></h4> <h4 class="title"><a href={compositionUrl}>$composition.title</a></h4>
<WhenNotNull item={composition.subTitle} render={<h5 class="sub-title">$it</h5>} /> <WhenNotNull item={composition.subTitle} render={<h5 class="sub-title">$it</h5>} />
<WhenNotNull item={composition.version} render={<span class="version"> – $it</span>} /> <WhenNotNull item={composition.version} render={<span class="version">$it</span>} />
</div>
<div class="date-column">
<span class="date">$compositionDate</span>
</div> </div>
<div class="info-row-2"> <div class="info-row-2">
<span class="instrumentation">$composition.instrumentation</span> <span class="instrumentation">$composition.instrumentation</span>
@ -13,7 +16,4 @@ package com.jessebrault.site.composition
<WhenNotNull item={composition.shortInfo} render={ <WhenNotNull item={composition.shortInfo} render={
<div class="info-row-3"><span class="short-info">$composition.shortInfo</span></div> <div class="info-row-3"><span class="short-info">$composition.shortInfo</span></div>
} /> } />
<div class="date-column">
<span class="date">$compositionDate</span>
</div>
</div> </div>

2
components/resources/com/jessebrault/site/icon/Bars.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 448 512"><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 572 B

257
static/main.css
View File

@ -8,8 +8,12 @@
--garamond: 'Cormorant Garamond', serif; --garamond: 'Cormorant Garamond', serif;
} }
* {
box-sizing: border-box;
}
html { html {
font-size: 18px; font-size: 20px;
} }
body { body {
@ -25,16 +29,14 @@ body {
header { header {
display: flex; display: flex;
align-items: baseline;
justify-content: space-between; justify-content: space-between;
padding: 15px 50px; padding: 15px 25px;
color: var(--off-white); color: var(--off-white);
} }
header .titles { header .titles {
display: flex; display: flex;
align-items: baseline; flex-direction: column;
column-gap: 15px;
} }
header .titles * { header .titles * {
@ -42,16 +44,33 @@ header .titles * {
} }
header .titles h1 { header .titles h1 {
letter-spacing: 0.175em; font-size: 1.75em;
letter-spacing: 0.1em;
} }
header .titles h2 { header .titles h2 {
font-size: 18px; display: none;
letter-spacing: 0.15em; }
nav .bars-wrapper {
background: none;
padding: 0;
border: none;
}
nav .bars-wrapper svg {
fill: var(--light-gray);
height: 48px;
width: 48px;
}
nav .bars-wrapper svg:hover {
fill: var(--off-white);
cursor: pointer;
} }
nav ul { nav ul {
display: flex; display: none;
column-gap: 25px; column-gap: 25px;
list-style: none; list-style: none;
margin: 0; margin: 0;
@ -71,17 +90,18 @@ nav a:hover {
.banner { .banner {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
color: var(--off-white); color: var(--off-white);
} }
.banner > * { .banner > * {
width: 100%; width: 100%;
padding: 15px 50px 30px;
} }
.banner-text { .banner-text {
letter-spacing: 0.15em; padding: 25px;
letter-spacing: 0.1em;
} }
main { main {
@ -95,9 +115,8 @@ main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
row-gap: 25px; row-gap: 25px;
padding: 50px 25px; padding: 25px;
max-width: 70ch; width: min(100%, 70ch);
min-width: min(100%, 70ch);
font-family: var(--garamond); font-family: var(--garamond);
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
@ -107,21 +126,23 @@ article {
} }
article h1 { article h1 {
font-size: 2em; font-size: 1.5em;
} }
article h2 { article h2 {
font-size: 1.75em; font-size: 1.25em;
} }
article h3 { article h3 {
font-size: 1.5em; font-size: 1em;
} }
footer { footer {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
padding: 20px 50px; align-items: center;
row-gap: 20px;
padding: 25px;
background-color: var(--petrol); background-color: var(--petrol);
color: var(--off-white); color: var(--off-white);
font-family: var(--garamond); font-family: var(--garamond);
@ -141,6 +162,10 @@ footer svg:hover {
fill: var(--off-white); fill: var(--off-white);
} }
footer p {
text-align: center;
}
input, input,
textarea, textarea,
button { button {
@ -176,15 +201,17 @@ a:hover {
} }
.biography-banner .blurb-container p { .biography-banner .blurb-container p {
font-size: 36px; font-size: 1.25em;
} }
.biography-banner .blurb-container p#jesse-brault-name { .biography-banner .blurb-container p#jesse-brault-name {
letter-spacing: 0.15em; display: none;
font-size: 54px; letter-spacing: 0.1em;
font-size: 1.5em;
} }
.biography-banner .blurb-container button { .biography-banner .blurb-container button {
display: none;
border: 1px solid var(--charcoal); border: 1px solid var(--charcoal);
background-color: var(--light-gray); background-color: var(--light-gray);
width: 150px; width: 150px;
@ -198,12 +225,20 @@ a:hover {
cursor: pointer; cursor: pointer;
} }
article.compositions {
text-align: unset;
}
.composition-categories { .composition-categories {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
row-gap: 30px; row-gap: 30px;
} }
.composition-categories h3 {
font-size: 1.25em;
}
.composition-listings > * { .composition-listings > * {
border-top: 1px solid var(--light-gray); border-top: 1px solid var(--light-gray);
} }
@ -213,26 +248,21 @@ a:hover {
} }
.composition-listing { .composition-listing {
padding-block: 20px; display: flex;
display: grid; flex-direction: column;
grid-template-columns: 4fr 1fr;
grid-template-areas:
'r1 date'
'r2 .'
'r3 .';
row-gap: 10px; row-gap: 10px;
padding-block: 20px;
} }
.composition-listing .info-row-1 { .composition-listing .info-row-1 {
grid-area: r1;
display: flex; display: flex;
align-items: baseline; flex-direction: column;
column-gap: 10px; gap: 10px;
} }
.composition-listing .info-row-1 .title { .composition-listing .info-row-1 .title {
margin: 0; margin: 0;
font-size: 1.5em; font-size: 1.25em;
} }
.composition-listing .info-row-1 .title a { .composition-listing .info-row-1 .title a {
@ -247,17 +277,8 @@ a:hover {
margin: 0; margin: 0;
} }
.composition-listing .info-row-2 {
grid-area: r2;
}
.composition-listing .info-row-3 {
grid-area: r3;
}
.composition-listing .date-column { .composition-listing .date-column {
grid-area: date; grid-area: date;
align-self: center;
justify-self: center; justify-self: center;
font-size: 1.25em; font-size: 1.25em;
} }
@ -272,8 +293,8 @@ a:hover {
.composition-info .composition-titles-year-container { .composition-info .composition-titles-year-container {
display: flex; display: flex;
align-items: baseline; flex-direction: column;
justify-content: space-between; row-gap: 20px;
} }
.composition-info p, .composition-info p,
@ -352,8 +373,6 @@ a:hover {
article.contact { article.contact {
min-width: 500px; min-width: 500px;
max-width: 50%;
padding: 50px;
} }
form.contact { form.contact {
@ -400,3 +419,149 @@ form.contact {
.contact .control .message { .contact .control .message {
margin: 0; margin: 0;
} }
@media screen and (min-width: 768px) {
html {
font-size: 18px;
}
header {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-inline: 30px;
}
nav .bars-wrapper {
display: none;
}
nav ul {
display: flex;
}
.banner {
flex-direction: unset;
}
.banner > * {
padding: 15px 30px 30px;
}
.banner-text {
letter-spacing: 0.15em;
padding-top: 30px;
}
article h1 {
font-size: 2em;
}
article h2 {
font-size: 1.5em;
}
article h3 {
font-size: 1.25em;
}
footer {
flex-direction: unset;
justify-content: space-between;
padding: 20px 30px;
}
.biography-banner .blurb-container p#jesse-brault-name {
display: unset;
letter-spacing: 0.15em;
font-size: 2em;
}
.composition-listing {
display: grid;
grid-template-columns: 4fr 1fr;
grid-template-areas:
'r1 date'
'r2 .'
'r3 .';
row-gap: 10px;
}
.composition-listing .info-row-1 {
grid-area: r1;
flex-direction: unset;
align-items: baseline;
}
.composition-listing .info-row-1 .title {
font-size: 1.5em;
}
.composition-listing .date-column {
align-self: center;
}
.composition-listing .info-row-2 {
grid-area: r2;
}
.composition-listing .info-row-3 {
grid-area: r3;
}
.composition-info .composition-titles-year-container {
flex-direction: unset;
row-gap: unset;
align-items: baseline;
justify-content: space-between;
}
}
@media screen and (min-width: 1024px) {
header {
padding-inline: 50px;
}
header .titles h1 {
font-size: 2.5em;
letter-spacing: 0.175em;
}
.banner > * {
padding-inline: 50px;
padding-bottom: 50px;
}
footer {
padding-inline: 50px;
}
.biography-banner .blurb-container p {
font-size: 2em;
}
.biography-banner .blurb-container p#jesse-brault-name {
display: unset;
letter-spacing: 0.15em;
font-size: 3em;
}
.biography-banner .blurb-container button {
display: unset;
}
}
@media screen and (min-width: 1200px) {
header .titles {
flex-direction: unset;
align-items: baseline;
column-gap: 15px;
}
header .titles h2 {
display: unset;
font-size: 2em;
font-size: 18px;
letter-spacing: 0.15em;
}
}