540 lines
10 KiB
SCSS
540 lines
10 KiB
SCSS
.page {
|
|
// Prevents horizontal scrollbars from appearing on the page.
|
|
// This happens because of the masked (but not overflow: hidden) carousel images.
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hexagons {
|
|
max-width: var(--max-width);
|
|
margin: auto;
|
|
position: relative;
|
|
bottom: calc(-80 * var(--variable-px));
|
|
|
|
div {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 10%;
|
|
|
|
svg {
|
|
position: absolute;
|
|
margin: auto;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
transform: translate(-50%) rotate(347deg);
|
|
opacity: 0.25;
|
|
--hexagon-max-size: 1100;
|
|
--mexagon-min-size: 900;
|
|
--hexagon-shrink-start-viewport-width: 1640;
|
|
width: Max(
|
|
Min(
|
|
calc(var(--hexagon-max-size) * 1px),
|
|
calc(var(--hexagon-max-size) / var(--hexagon-shrink-start-viewport-width) * 100vw)
|
|
),
|
|
calc(var(--mexagon-min-size) * 1px)
|
|
);
|
|
height: auto;
|
|
|
|
polygon {
|
|
fill: none;
|
|
stroke: #aaa;
|
|
stroke-width: 1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ▛ LOGO ▜
|
|
#logo {
|
|
img {
|
|
width: auto;
|
|
max-width: 100%;
|
|
max-height: 160px;
|
|
}
|
|
}
|
|
// ▙ LOGO ▟
|
|
|
|
// ▛ TAGLINE ▜
|
|
#tagline {
|
|
h1 {
|
|
span {
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: "";
|
|
pointer-events: none;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 100%;
|
|
// Dimensions: 480x40
|
|
height: 100%;
|
|
margin-top: -0.2em;
|
|
background: url("https://static.graphite.rs/textures/text-sketch-underline.png");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
}}
|
|
|
|
p {
|
|
font-size: 1.2rem;
|
|
|
|
@media screen and (max-width: 1400px) {
|
|
max-width: unset;
|
|
}
|
|
}
|
|
}
|
|
// ▙ TAGLINE ▟
|
|
|
|
// ▛ QUICK LINKS ▜
|
|
#quick-links {
|
|
margin-top: calc(40 * var(--variable-px));
|
|
gap: calc(var(--font-size-link) * 0.8) calc(var(--font-size-link) * 0.8 * 2);
|
|
|
|
&,
|
|
.social-media-buttons,
|
|
.call-to-action-buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.social-media-buttons,
|
|
.call-to-action-buttons {
|
|
gap: calc(var(--font-size-link) * 0.8);
|
|
}
|
|
|
|
.social-media-buttons img {
|
|
width: calc(var(--font-size-link) * 2);
|
|
display: block;
|
|
}
|
|
|
|
.call-to-action-buttons .github-stars {
|
|
display: inline-flex;
|
|
padding-left: calc(var(--font-size-link) / 2);
|
|
padding-right: 0;
|
|
|
|
img {
|
|
margin: auto;
|
|
width: calc(var(--font-size-link) * 4 / 3);
|
|
height: calc(var(--font-size-link) * 4 / 3);
|
|
}
|
|
|
|
span {
|
|
margin: auto calc(var(--font-size-link) / 2);
|
|
}
|
|
|
|
div {
|
|
display: inline-flex;
|
|
background: var(--color-fog);
|
|
padding: 0 calc(var(--font-size-link) / 2);
|
|
border-left: var(--border-thickness) solid var(--color-crimson);
|
|
align-items: center;
|
|
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Hide all these buttons while waiting for the number of stars to be fetched.
|
|
// Otherwise the width of the star count will cause a jump upon loading with the layout of all subsequent buttons changing.
|
|
// If it fails to load, the div will be removed, allowing the buttons to be displayed (with the star count omitted).
|
|
&:has(.github-stars div:empty) {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
// ▙ QUICK LINKS ▟
|
|
|
|
// ▛ SCREENSHOTS ▜
|
|
// ▙ SCREENSHOTS ▟
|
|
|
|
// ▛ TODAY AND TOMORROW ▜
|
|
#today-and-tomorrow h1 span {
|
|
background: var(--color-crimson);
|
|
white-space: nowrap;
|
|
color: white;
|
|
font-size: 1rem;
|
|
line-height: 1.2;
|
|
padding: 0.25em 0.5em;
|
|
vertical-align: middle;
|
|
}
|
|
// ▙ TODAY AND TOMORROW ▟
|
|
|
|
// ▛ DISCIPLINES ▜
|
|
#disciplines .block .feature-icons .feature-icon {
|
|
margin-top: 40px;
|
|
}
|
|
// ▙ DISCIPLINES ▟
|
|
|
|
// ▛ NEWSLETTER ▜
|
|
#newsletter {
|
|
background-color: var(--color-mustard);
|
|
position: relative;
|
|
|
|
#newsletter-success {
|
|
position: absolute;
|
|
top: 0;
|
|
|
|
&:not(:target) ~ .feature-box-inner .diptych .newsletter-success,
|
|
&:target ~ .feature-box-inner .diptych form {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.diptych {
|
|
justify-content: center;
|
|
|
|
.newsletter-signup {
|
|
.newsletter-success {
|
|
margin-top: 40px;
|
|
padding: 40px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background: var(--color-ale);
|
|
border: 2px solid var(--color-navy);
|
|
}
|
|
|
|
form {
|
|
width: 100%;
|
|
margin-top: 40px;
|
|
display: flex;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
|
|
.same-line {
|
|
display: flex;
|
|
gap: 20px;
|
|
flex: 100000 1 0;
|
|
flex-wrap: wrap;
|
|
min-width: Min(100%, 700px);
|
|
|
|
div {
|
|
min-height: auto;
|
|
}
|
|
}
|
|
|
|
.input-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
--input-focus-color: var(--color-ale);
|
|
|
|
&.name {
|
|
flex: 1 0 0;
|
|
min-width: 240px;
|
|
}
|
|
|
|
&.phone {
|
|
display: none;
|
|
}
|
|
|
|
&.email {
|
|
flex: 1 0 0;
|
|
min-width: 240px;
|
|
}
|
|
|
|
@media screen and (max-width: 400px) {
|
|
&.name,
|
|
&.email {
|
|
min-width: 100%;
|
|
}
|
|
}
|
|
|
|
&.submit {
|
|
flex: 1 0 auto;
|
|
|
|
.button {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
label,
|
|
input {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
label {
|
|
font-size: var(--font-size-link);
|
|
font-weight: 800;
|
|
margin-bottom: 10px;
|
|
line-height: 1;
|
|
}
|
|
|
|
input:not([type="submit"]) {
|
|
flex: 0 0 auto;
|
|
width: 100%;
|
|
height: calc(var(--font-size-link) * 2);
|
|
font-size: calc(var(--font-size-link) * 0.9);
|
|
color: inherit;
|
|
border: var(--border-thickness) solid currentColor;
|
|
border-radius: 0; // Required for iOS Safari
|
|
outline: none;
|
|
margin: 0;
|
|
padding: 0 var(--font-size-link);
|
|
font-family: inherit;
|
|
font-weight: inherit;
|
|
box-sizing: border-box;
|
|
|
|
&:focus {
|
|
border-color: var(--input-focus-color);
|
|
}
|
|
}
|
|
|
|
input[type="submit"] {
|
|
background: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
border-radius: 0; // Required for iOS Safari
|
|
|
|
&:focus {
|
|
border-color: var(--input-focus-color);
|
|
color: var(--input-focus-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.social-media-links {
|
|
display: flex;
|
|
flex: 0 1 fit-content;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 20px 80px;
|
|
min-width: 0;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
display: flex;
|
|
|
|
img {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
span {
|
|
line-height: 48px;
|
|
margin: 0;
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// ▙ NEWSLETTER ▟
|
|
|
|
// ▛ PROCEDURALISM ▜
|
|
#proceduralism-red-dress .diptych,
|
|
#proceduralism-leaves .diptych {
|
|
overflow: hidden; // Clip off a 1px overflow beneath the video which appears at some screen widths
|
|
align-items: stretch;
|
|
justify-content: center;
|
|
gap: 0;
|
|
--video-width: calc(540 * var(--variable-px));
|
|
|
|
@media screen and (max-width: 1260px) {
|
|
--video-width: calc(480 * var(--variable-px));
|
|
}
|
|
|
|
@media screen and (max-width: 1200px) {
|
|
--video-width: calc(440 * var(--variable-px));
|
|
}
|
|
|
|
@media screen and (max-width: 1160px) {
|
|
--video-width: calc(400 * var(--variable-px));
|
|
}
|
|
|
|
@media screen and (max-width: 640px) {
|
|
--video-width: 100%;
|
|
}
|
|
|
|
a {
|
|
color: var(--color-mustard);
|
|
}
|
|
|
|
.video-background {
|
|
flex: 1 0 var(--video-width);
|
|
justify-content: center;
|
|
|
|
&,
|
|
video {
|
|
max-width: var(--video-width);
|
|
}
|
|
|
|
&::after {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
.description {
|
|
margin: calc(80 * var(--variable-px));
|
|
}
|
|
}
|
|
|
|
#proceduralism-red-dress .diptych {
|
|
background: var(--color-black);
|
|
color: var(--color-fog);
|
|
|
|
}
|
|
|
|
#proceduralism-leaves {
|
|
margin-top: calc(40 * var(--variable-px));
|
|
|
|
.diptych {
|
|
background: var(--color-crimson);
|
|
color: var(--color-fog);
|
|
}
|
|
}
|
|
// ▙ PROCEDURALISM ▟
|
|
|
|
// ▛ DONATE ▜
|
|
#donate {
|
|
background-color: var(--color-lilac);
|
|
|
|
.graphic {
|
|
max-width: 400px;
|
|
}
|
|
}
|
|
// ▙ DONATE ▟
|
|
|
|
// ▛ IMAGINATE ▜
|
|
// #imaginate {
|
|
// > .block {
|
|
// align-items: center;
|
|
|
|
// h1 {
|
|
// text-align: center;
|
|
|
|
// .alternating-text {
|
|
// position: relative;
|
|
|
|
// span {
|
|
// // Move left by half (since it's centered) the average (half the 74px difference) of the variance in word lengths
|
|
// margin-left: calc(-1.54em / 2 / 2);
|
|
// opacity: 0;
|
|
// $alternate-duration: 15s;
|
|
// $alternate-words: 5;
|
|
// animation: $alternate-duration infinite linear 0s fade-word;
|
|
|
|
// // The 1st child is the widest
|
|
// &:not(:nth-child(1)) {
|
|
// position: absolute;
|
|
// right: 0;
|
|
// }
|
|
|
|
// @for $i from 1 through $alternate-words {
|
|
// &:nth-child(#{$i}) {
|
|
// animation-delay: ($alternate-duration / $alternate-words * ($i - 1));
|
|
// }
|
|
// }
|
|
|
|
// @keyframes fade-word {
|
|
// // Fade in at the start (which begins staggered on each item by `animation-delay`)
|
|
// #{0.0%} { opacity: 0; }
|
|
// #{2.5%} { opacity: 1; }
|
|
// // Remain visible for this item's slice of time, then fade out
|
|
// #{0.0% + 100% / ($alternate-words + 1)} { opacity: 1; }
|
|
// #{2.5% + 100% / ($alternate-words + 1)} { opacity: 0; }
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// > .diptych {
|
|
// margin-top: calc(80 * var(--variable-px));
|
|
|
|
// .block {
|
|
// align-items: center;
|
|
|
|
// h2 {
|
|
// text-align: center;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// // #imaginate-creative-concepts-carousel {
|
|
// // margin-top: 20px;
|
|
|
|
// // .screenshot-details {
|
|
// // justify-content: center;
|
|
// // }
|
|
|
|
// // + blockquote {
|
|
// // margin-top: 0;
|
|
// // }
|
|
// // }
|
|
// }
|
|
// ▙ IMAGINATE ▟
|
|
|
|
// ▛ DEMO VIDEO ▜
|
|
// #demo-video {
|
|
// max-width: 1000px;
|
|
// }
|
|
// ▙ DEMO VIDEO ▟
|
|
|
|
// ▛ DIVE IN ▜
|
|
#dive-in {
|
|
.video-container {
|
|
margin: calc(40 * var(--variable-px)) auto;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
|
|
+ p {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
// ▙ DIVE IN ▟
|
|
|
|
// ▛ RECENT NEWS ▜
|
|
#recent-news {
|
|
background-color: var(--color-walnut);
|
|
color: var(--color-white);
|
|
|
|
a {
|
|
color: var(--color-mustard);
|
|
}
|
|
|
|
.banner img {
|
|
width: 100%;
|
|
height: auto;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.headline a {
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.summary {
|
|
margin: 20px 0;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
text-align: justify;
|
|
text-justify: inter-character; // Only supported in Firefox
|
|
-webkit-hyphens: auto;
|
|
hyphens: auto;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 6;
|
|
|
|
// Safari workaround: https://stackoverflow.com/a/72170897/775283
|
|
// But there remains an issue where the ellipsis is rendered inside the text. There doesn't appear to be a fix, or even a way to disable the ellipsis in Safari.
|
|
p {
|
|
display: inline;
|
|
|
|
&::after {
|
|
content: "\A\A"; // Double new line
|
|
white-space: pre;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// ▙ RECENT NEWS ▟
|