openfree's picture
Deploy from GitHub repository
2409829 verified
.page {
// Prevents horizontal scrollbars from appearing on the page.
// This happens because of the masked (but not overflow: hidden) carousel images.
overflow: hidden;
}
// β–› LOGO β–œ
#logo {
img {
width: auto;
max-width: 75%;
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 β–Ÿ
// β–› OVERVIEW β–œ
#overview {
background-color: var(--color-cloud);
.sizzle-video {
display: flex;
flex-wrap: nowrap;
max-width: 100%;
.block {
min-width: 0;
flex-direction: row;
&.text {
flex: 1 4 100%;
flex-direction: column;
p:has(.button) {
margin-top: 20px;
}
}
&.video {
flex: 0 1 fit-content;
}
}
@media screen and (max-width: 900px) {
flex-wrap: wrap;
.block.video {
flex: 1 1 100%;
justify-content: center;
}
}
@media screen and (max-width: 1100px) {
p:has(.button) {
display: none;
}
}
}
}
// β–™ OVERVIEW β–Ÿ
// β–› DONATE β–œ
#donate {
h2 {
color: #cc304f;
}
}
// β–™ DONATE β–Ÿ
// β–› PROCEDURALISM β–œ
#proceduralism {
background-color: var(--color-slate);
color: white;
.diptych {
background: black;
color: var(--color-fog);
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(460 * var(--variable-px));
@media screen and (max-width: 1360px) {
--video-width: calc(400 * var(--variable-px));
}
@media screen and (max-width: 1280px) {
--video-width: calc(300 * var(--variable-px));
}
@media screen and (max-width: 1080px) {
--video-width: calc(500 * 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(var(--feature-box-padding) * var(--variable-px));
}
+ .diptych {
margin-top: calc(40 * var(--variable-px));
}
}
.pipelines .feature-icon {
background: rgba(255, 255, 255, 0.0625);
img {
filter: brightness(100);
}
}
}
// β–™ PROCEDURALISM β–Ÿ
// β–› NEWSLETTER β–œ
#newsletter {
background-color: var(--color-peach);
position: relative;
#newsletter-success {
position: absolute;
top: 0;
&:not(:target) ~ .diptych .newsletter-success,
&:target ~ .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;
min-width: 100%;
.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 β–Ÿ
// β–› DIVE IN β–œ
#dive-in {
.video-container {
background: var(--color-fog);
margin-top: calc(40 * var(--variable-px));
> div {
margin: calc(20 * var(--variable-px)) auto;
width: 100%;
max-width: 800px;
+ p {
margin-top: 0;
}
}
}
.buttons {
display: flex;
gap: calc(var(--font-size-link) * 0.8);
margin-top: calc(40 * var(--variable-px));
@media screen and (max-width: 600px) {
flex-direction: column;
}
}
}
// β–™ DIVE IN β–Ÿ
// β–› RECENT NEWS β–œ
#recent-news {
background-color: var(--color-parchment);
.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;
code {
text-justify: auto;
}
// 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 β–Ÿ
// β–› DEMO VIDEO β–œ
// #demo-video {
// max-width: 1000px;
// }
// β–™ DEMO VIDEO β–Ÿ
// β–› 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 β–Ÿ