Mobile styling.
This commit is contained in:
JesseBrault0709
parent
dcaefa0576
commit
3683d5eae6
17
components/groovy/com/jessebrault/site/icon/BarsIcon.groovy
Normal file
17
components/groovy/com/jessebrault/site/icon/BarsIcon.groovy
Normal 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 }
|
||||
}
|
||||
|
||||
}
|
||||
@ -2,6 +2,7 @@
|
||||
package com.jessebrault.site
|
||||
---
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta charset="UTF-8" />
|
||||
|
||||
<title>$title</title>
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
---
|
||||
package com.jessebrault.site
|
||||
|
||||
import com.jessebrault.site.icon.BarsIcon
|
||||
---
|
||||
<header>
|
||||
<div class="titles">
|
||||
@ -7,6 +9,9 @@ package com.jessebrault.site
|
||||
<h2>$siteTagLine</h2>
|
||||
</div>
|
||||
<nav>
|
||||
<button class="bars-wrapper">
|
||||
<BarsIcon />
|
||||
</button>
|
||||
<ul>
|
||||
<Each items={menuItems} transform={<li><a href={it.path}>$it.name</a></li>} />
|
||||
</ul>
|
||||
|
||||
@ -5,7 +5,10 @@ package com.jessebrault.site.composition
|
||||
<div class="info-row-1">
|
||||
<h4 class="title"><a href={compositionUrl}>$composition.title</a></h4>
|
||||
<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 class="info-row-2">
|
||||
<span class="instrumentation">$composition.instrumentation</span>
|
||||
@ -13,7 +16,4 @@ package com.jessebrault.site.composition
|
||||
<WhenNotNull item={composition.shortInfo} render={
|
||||
<div class="info-row-3"><span class="short-info">$composition.shortInfo</span></div>
|
||||
} />
|
||||
<div class="date-column">
|
||||
<span class="date">$compositionDate</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
2
components/resources/com/jessebrault/site/icon/Bars.txt
Normal file
2
components/resources/com/jessebrault/site/icon/Bars.txt
Normal 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>
|
||||
|
After Width: | Height: | Size: 572 B |
257
static/main.css
257
static/main.css
@ -8,8 +8,12 @@
|
||||
--garamond: 'Cormorant Garamond', serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 18px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -25,16 +29,14 @@ body {
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
padding: 15px 50px;
|
||||
padding: 15px 25px;
|
||||
color: var(--off-white);
|
||||
}
|
||||
|
||||
header .titles {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
column-gap: 15px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header .titles * {
|
||||
@ -42,16 +44,33 @@ header .titles * {
|
||||
}
|
||||
|
||||
header .titles h1 {
|
||||
letter-spacing: 0.175em;
|
||||
font-size: 1.75em;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
header .titles h2 {
|
||||
font-size: 18px;
|
||||
letter-spacing: 0.15em;
|
||||
display: none;
|
||||
}
|
||||
|
||||
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 {
|
||||
display: flex;
|
||||
display: none;
|
||||
column-gap: 25px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@ -71,17 +90,18 @@ nav a:hover {
|
||||
|
||||
.banner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: var(--off-white);
|
||||
}
|
||||
|
||||
.banner > * {
|
||||
width: 100%;
|
||||
padding: 15px 50px 30px;
|
||||
}
|
||||
|
||||
.banner-text {
|
||||
letter-spacing: 0.15em;
|
||||
padding: 25px;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
main {
|
||||
@ -95,9 +115,8 @@ main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 25px;
|
||||
padding: 50px 25px;
|
||||
max-width: 70ch;
|
||||
min-width: min(100%, 70ch);
|
||||
padding: 25px;
|
||||
width: min(100%, 70ch);
|
||||
font-family: var(--garamond);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
@ -107,21 +126,23 @@ article {
|
||||
}
|
||||
|
||||
article h1 {
|
||||
font-size: 2em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
article h2 {
|
||||
font-size: 1.75em;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
article h3 {
|
||||
font-size: 1.5em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px 50px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 20px;
|
||||
padding: 25px;
|
||||
background-color: var(--petrol);
|
||||
color: var(--off-white);
|
||||
font-family: var(--garamond);
|
||||
@ -141,6 +162,10 @@ footer svg:hover {
|
||||
fill: var(--off-white);
|
||||
}
|
||||
|
||||
footer p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
button {
|
||||
@ -176,15 +201,17 @@ a:hover {
|
||||
}
|
||||
|
||||
.biography-banner .blurb-container p {
|
||||
font-size: 36px;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.biography-banner .blurb-container p#jesse-brault-name {
|
||||
letter-spacing: 0.15em;
|
||||
font-size: 54px;
|
||||
display: none;
|
||||
letter-spacing: 0.1em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.biography-banner .blurb-container button {
|
||||
display: none;
|
||||
border: 1px solid var(--charcoal);
|
||||
background-color: var(--light-gray);
|
||||
width: 150px;
|
||||
@ -198,12 +225,20 @@ a:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
article.compositions {
|
||||
text-align: unset;
|
||||
}
|
||||
|
||||
.composition-categories {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 30px;
|
||||
}
|
||||
|
||||
.composition-categories h3 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.composition-listings > * {
|
||||
border-top: 1px solid var(--light-gray);
|
||||
}
|
||||
@ -213,26 +248,21 @@ a:hover {
|
||||
}
|
||||
|
||||
.composition-listing {
|
||||
padding-block: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 4fr 1fr;
|
||||
grid-template-areas:
|
||||
'r1 date'
|
||||
'r2 .'
|
||||
'r3 .';
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 10px;
|
||||
padding-block: 20px;
|
||||
}
|
||||
|
||||
.composition-listing .info-row-1 {
|
||||
grid-area: r1;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
column-gap: 10px;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.composition-listing .info-row-1 .title {
|
||||
margin: 0;
|
||||
font-size: 1.5em;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.composition-listing .info-row-1 .title a {
|
||||
@ -247,17 +277,8 @@ a:hover {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.composition-listing .info-row-2 {
|
||||
grid-area: r2;
|
||||
}
|
||||
|
||||
.composition-listing .info-row-3 {
|
||||
grid-area: r3;
|
||||
}
|
||||
|
||||
.composition-listing .date-column {
|
||||
grid-area: date;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
@ -272,8 +293,8 @@ a:hover {
|
||||
|
||||
.composition-info .composition-titles-year-container {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
}
|
||||
|
||||
.composition-info p,
|
||||
@ -352,8 +373,6 @@ a:hover {
|
||||
|
||||
article.contact {
|
||||
min-width: 500px;
|
||||
max-width: 50%;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
form.contact {
|
||||
@ -400,3 +419,149 @@ form.contact {
|
||||
.contact .control .message {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user