645 lines
11 KiB
CSS
645 lines
11 KiB
CSS
:root {
|
|
--black: #000000;
|
|
--charcoal: #38383b;
|
|
--light-gray: #dedede;
|
|
--petrol: #476c77;
|
|
--off-white: #fdfdfd;
|
|
--gothic: 'Didact Gothic', sans-serif;
|
|
--garamond: 'Cormorant Garamond', serif;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-size: 20px;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--petrol);
|
|
}
|
|
|
|
.header-banner-container {
|
|
background-color: var(--petrol);
|
|
font-family: var(--gothic);
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
padding: 15px 25px;
|
|
color: var(--off-white);
|
|
}
|
|
|
|
header .titles {
|
|
display: flex;
|
|
align-items: baseline;
|
|
column-gap: 15px;
|
|
}
|
|
|
|
header .titles * {
|
|
margin: 0;
|
|
}
|
|
|
|
header .titles h1 {
|
|
font-size: 1.75em;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
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: none;
|
|
column-gap: 25px;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
nav a,
|
|
nav a:visited {
|
|
letter-spacing: 0.1em;
|
|
color: var(--light-gray);
|
|
text-decoration: none;
|
|
}
|
|
|
|
nav a:hover {
|
|
color: var(--off-white);
|
|
}
|
|
|
|
.banner,
|
|
.landscape-banner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20px;
|
|
padding-bottom: 20px;
|
|
color: var(--off-white);
|
|
}
|
|
|
|
:is(.banner, .landscape-banner) > * {
|
|
width: 100%;
|
|
}
|
|
|
|
.banner-text {
|
|
padding-inline: 20px;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
main {
|
|
background-color: var(--off-white);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.article-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 25px;
|
|
padding: 25px;
|
|
width: min(100%, 70ch);
|
|
font-family: var(--garamond);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
article {
|
|
text-align: justify;
|
|
}
|
|
|
|
article h1 {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
article h2 {
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
article h3 {
|
|
font-size: 1em;
|
|
}
|
|
|
|
article ul {
|
|
padding-inline: 40px;
|
|
text-align: left;
|
|
}
|
|
|
|
article ul li {
|
|
padding-block: 4px;
|
|
}
|
|
|
|
footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
row-gap: 20px;
|
|
padding: 25px;
|
|
background-color: var(--petrol);
|
|
color: var(--off-white);
|
|
font-family: var(--garamond);
|
|
}
|
|
|
|
footer .social-icons {
|
|
display: flex;
|
|
column-gap: 30px;
|
|
}
|
|
|
|
footer svg {
|
|
height: 48px;
|
|
fill: var(--light-gray);
|
|
}
|
|
|
|
footer svg:hover {
|
|
fill: var(--off-white);
|
|
}
|
|
|
|
footer p {
|
|
text-align: center;
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
button {
|
|
border-radius: 3px;
|
|
}
|
|
|
|
a {
|
|
color: var(--petrol);
|
|
}
|
|
|
|
a:hover {
|
|
color: rgba(from var(--petrol) r g b / 0.5);
|
|
}
|
|
|
|
.headshot-container,
|
|
.landscape-photo-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.portrait-photo,
|
|
.landscape-photo {
|
|
width: 100%;
|
|
}
|
|
|
|
.biography-banner .blurb-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 36px;
|
|
}
|
|
|
|
.biography-banner .blurb-container > * {
|
|
margin: 0;
|
|
}
|
|
|
|
.biography-banner .blurb-container p {
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.biography-banner .blurb-container p#jesse-brault-name {
|
|
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;
|
|
height: 40px;
|
|
font-family: var(--gothic);
|
|
font-size: 18px;
|
|
}
|
|
|
|
.biography-banner .blurb-container button:hover {
|
|
background-color: var(--off-white);
|
|
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);
|
|
}
|
|
|
|
.composition-listings:last-child {
|
|
border-bottom: 1px solid var(--light-gray);
|
|
}
|
|
|
|
.composition-listing {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 10px;
|
|
padding-block: 20px;
|
|
}
|
|
|
|
.composition-listing .info-row-1 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.composition-listing .info-row-1 .title {
|
|
margin: 0;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.composition-listing .info-row-1 .title a {
|
|
color: var(--charcoal);
|
|
|
|
&:hover {
|
|
color: hsl(from var(--charcoal) h s l / 0.75);
|
|
}
|
|
}
|
|
|
|
.composition-listing .info-row-1 .sub-title {
|
|
margin: 0;
|
|
}
|
|
|
|
.composition-listing .date-column {
|
|
grid-area: date;
|
|
justify-self: center;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.composition-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 20px;
|
|
border-bottom: 1px solid var(--light-gray);
|
|
padding-block-end: 2em;
|
|
}
|
|
|
|
.composition-info .composition-titles-year-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 20px;
|
|
}
|
|
|
|
.composition-info p,
|
|
.composition-info .title {
|
|
margin-block: 0;
|
|
}
|
|
|
|
.composition-info .year {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.composition-info :is(.recordings, .external-links, .alternate-versions) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 10px;
|
|
}
|
|
|
|
.composition-info :is(.recordings, .external-links, .alternate-versions) ul {
|
|
margin: 0;
|
|
}
|
|
|
|
.composition-info :is(.recordings, .external-links, .alternate-versions) a span {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 5px;
|
|
}
|
|
|
|
.composition-info :is(.recordings, .external-links, .alternate-versions) span svg {
|
|
pointer-events: none;
|
|
height: 0.8em;
|
|
fill: var(--petrol);
|
|
}
|
|
|
|
.composition-text p:first-child {
|
|
margin-block-start: 2em;
|
|
}
|
|
|
|
#lessons-banner-text,
|
|
#videos-banner-text {
|
|
text-align: center;
|
|
}
|
|
|
|
#videos-banner-text :is(a, a:visited) {
|
|
color: var(--light-gray);
|
|
}
|
|
|
|
#videos-banner-text a:hover {
|
|
color: var(--off-white);
|
|
}
|
|
|
|
.contact-banner article.social-media-links {
|
|
font-family: var(--gothic);
|
|
}
|
|
|
|
.contact-banner article.social-media-links h1 {
|
|
margin: 0;
|
|
margin-bottom: 20px;
|
|
font-size: 1.5em;
|
|
color: var(--light-gray);
|
|
}
|
|
|
|
.contact-banner div.social-media-links {
|
|
display: grid;
|
|
grid-template-columns: max-content 1fr;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.contact-banner a {
|
|
display: contents;
|
|
color: var(--light-gray);
|
|
fill: var(--light-gray);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.contact-banner a:hover {
|
|
& span {
|
|
color: var(--off-white);
|
|
}
|
|
& svg {
|
|
fill: var(--off-white);
|
|
}
|
|
}
|
|
|
|
.contact-banner a:visited {
|
|
& span {
|
|
color: var(--off-white);
|
|
}
|
|
& svg {
|
|
fill: var(--off-white);
|
|
}
|
|
}
|
|
|
|
.contact-banner svg {
|
|
height: 48px;
|
|
justify-self: center;
|
|
}
|
|
|
|
.contact-banner a span {
|
|
font-size: 1em;
|
|
justify-self: stretch;
|
|
}
|
|
|
|
article.contact {
|
|
min-width: min(100%, 500px);
|
|
}
|
|
|
|
form.contact {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 10px;
|
|
}
|
|
|
|
.contact .control {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 5px;
|
|
}
|
|
|
|
.contact .control * {
|
|
width: 100%;
|
|
}
|
|
|
|
.contact .control input,
|
|
.contact .control textarea {
|
|
min-height: 40px;
|
|
font-family: var(--garamond);
|
|
font-size: 18px;
|
|
padding: 5px;
|
|
border: 1px solid var(--charcoal);
|
|
}
|
|
|
|
.contact .control textarea {
|
|
min-height: 160px;
|
|
}
|
|
|
|
.contact .control input[type='submit'] {
|
|
background-color: var(--petrol);
|
|
color: var(--off-white);
|
|
height: 60px;
|
|
}
|
|
|
|
.contact .control input[type='submit']:hover {
|
|
background-color: rgba(from var(--petrol) r g b / 0.5);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.contact .control input.invalid,
|
|
.contact .control textarea.invalid {
|
|
border: 1px solid red;
|
|
}
|
|
|
|
.contact .control .message {
|
|
margin: 0;
|
|
}
|
|
|
|
.contact .control .error {
|
|
color: red;
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
html {
|
|
font-size: 18px;
|
|
}
|
|
|
|
header {
|
|
padding-inline: 30px;
|
|
}
|
|
|
|
.banner,
|
|
.landscape-banner {
|
|
flex-direction: unset;
|
|
padding: 0 30px 30px;
|
|
gap: 30px;
|
|
}
|
|
|
|
.banner-text {
|
|
padding-inline: unset;
|
|
letter-spacing: 0.15em;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
#lessons-banner-text,
|
|
#videos-banner-text {
|
|
font-size: 1.5em;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1024px) {
|
|
header {
|
|
align-items: center;
|
|
padding-inline: 50px;
|
|
}
|
|
|
|
header .titles h1 {
|
|
font-size: 2.5em;
|
|
letter-spacing: 0.175em;
|
|
}
|
|
|
|
.banner,
|
|
.landscape-banner {
|
|
padding: 0 50px 50px;
|
|
gap: 50px;
|
|
}
|
|
|
|
.landscape-banner {
|
|
display: grid;
|
|
grid-template-columns: 1.5fr 1fr;
|
|
align-items: center;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
#lessons-banner-text,
|
|
#videos-banner-text {
|
|
font-size: 2em;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1199px) {
|
|
nav ul {
|
|
position: absolute;
|
|
left: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
row-gap: 10px;
|
|
padding: 20px;
|
|
background-color: var(--petrol);
|
|
border-bottom: 1px solid var(--charcoal);
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1200px) {
|
|
nav .bars-wrapper {
|
|
display: none;
|
|
}
|
|
|
|
nav ul {
|
|
display: flex;
|
|
}
|
|
|
|
.contact-banner svg {
|
|
height: 72px;
|
|
}
|
|
|
|
.contact-banner article.social-media-links h1 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.contact-banner a span {
|
|
font-size: 1.75em;
|
|
}
|
|
}
|