mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-10-01 16:38:13 +08:00
Improve responsive design sizing for website
This commit is contained in:
Keavon Chambers
+278
-268
@@ -18,7 +18,7 @@
|
||||
--color-sage: #739c7e;
|
||||
--color-seaside-rgb: 165, 213, 200;
|
||||
|
||||
--font-size-intro-heading: 60px;
|
||||
--font-size-intro-heading: calc(var(--font-size-heading-h1) * 1.25);
|
||||
--font-size-intro-body: 22px;
|
||||
--font-size-link: 24px;
|
||||
--font-size-heading-h1: 48px;
|
||||
@@ -45,6 +45,7 @@
|
||||
--font-size-body: 16px;
|
||||
|
||||
--page-edge-padding: 28px;
|
||||
--border-thickness: 1px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
@@ -56,7 +57,6 @@
|
||||
--font-size-body: 16px;
|
||||
|
||||
--page-edge-padding: 20px;
|
||||
--border-thickness: 1px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
@@ -162,28 +162,28 @@ p ~ p {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
h1 ~ p,
|
||||
h2 ~ p,
|
||||
h3 ~ p,
|
||||
h1 ~ ol li p,
|
||||
h2 ~ ol li p,
|
||||
h3 ~ ol li p,
|
||||
h1 ~ img,
|
||||
h2 ~ img,
|
||||
h3 ~ img,
|
||||
h1 + .section-row,
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
& ~ p,
|
||||
& ~ ol li p,
|
||||
& ~ img {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
h1 ~ .informational-group,
|
||||
.video-embed + p,
|
||||
p ~ h1,
|
||||
p ~ h2,
|
||||
p ~ h3,
|
||||
p ~ details summary,
|
||||
p ~ blockquote,
|
||||
p ~ video,
|
||||
p ~ .video-embed,
|
||||
p ~ .informational-group,
|
||||
p ~ .image-comparison,
|
||||
p + .link,
|
||||
p ~ .video-background,
|
||||
p ~ .video-embed,
|
||||
.video-embed + p,
|
||||
.video-embed + .link,
|
||||
.video-embed + .button,
|
||||
img + .link {
|
||||
@@ -216,6 +216,8 @@ code {
|
||||
}
|
||||
|
||||
pre {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
color: var(--color-fog);
|
||||
// This zero transform sets this element as the root for `position: fixed`
|
||||
transform: translate(0);
|
||||
@@ -241,6 +243,8 @@ pre {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 20px;
|
||||
width: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
// Language name in top right corner
|
||||
@@ -338,7 +342,6 @@ summary {
|
||||
|
||||
.reading-material.reading-material.reading-material {
|
||||
max-width: 800px;
|
||||
flex: 0 1 auto;
|
||||
|
||||
hr {
|
||||
margin-top: 40px;
|
||||
@@ -396,6 +399,24 @@ summary {
|
||||
}
|
||||
}
|
||||
|
||||
.video-background {
|
||||
position: relative;
|
||||
font-size: 0;
|
||||
|
||||
video {
|
||||
max-width: Min(100%, 1280px);
|
||||
}
|
||||
|
||||
// Uses a white border over the video to cover up the edges of the video which, due to a Chrome rendering bug, displays black edges sometimes when scrolling
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 2px solid white;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.image-comparison {
|
||||
position: relative;
|
||||
touch-action: pan-y pinch-zoom;
|
||||
@@ -793,23 +814,6 @@ hr,
|
||||
}
|
||||
}
|
||||
|
||||
.section-row {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: calc(40 * var(--variable-px)) calc(80 * var(--variable-px));
|
||||
|
||||
&.vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
&.section-row {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-box {
|
||||
margin-top: calc(40 * var(--variable-px));
|
||||
padding: calc(80 * var(--variable-px));
|
||||
@@ -885,11 +889,6 @@ hr,
|
||||
background: var(--color-crimson);
|
||||
}
|
||||
}
|
||||
|
||||
+ div,
|
||||
hr + .section-row + & {
|
||||
margin-top: calc(80 * var(--variable-px));
|
||||
}
|
||||
}
|
||||
|
||||
.informational-group {
|
||||
@@ -931,10 +930,21 @@ hr,
|
||||
|
||||
&.concepts {
|
||||
justify-content: space-between;
|
||||
|
||||
margin: 0 -10px;
|
||||
width: calc(100% + 20px);
|
||||
|
||||
.informational {
|
||||
flex-direction: column;
|
||||
flex: 0 1 auto;
|
||||
margin: 0 10px;
|
||||
|
||||
@media screen and (max-width: 1100px) {
|
||||
width: calc(100% / 3 - 40px);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
width: calc(100% / 2 - 20px);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 72px;
|
||||
@@ -942,6 +952,10 @@ hr,
|
||||
object-position: calc(-72px * var(--atlas-index)) 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -985,255 +999,251 @@ blockquote {
|
||||
}
|
||||
}
|
||||
|
||||
// Page content
|
||||
|
||||
.page {
|
||||
body > .page {
|
||||
box-sizing: border-box;
|
||||
min-width: 320px;
|
||||
|
||||
header {
|
||||
padding: 0 var(--page-edge-padding);
|
||||
color: var(--color-walnut);
|
||||
|
||||
// var(--max-width) + (80px + 32px) * 2
|
||||
@media screen and (max-width: 1824px) {
|
||||
.ripple {
|
||||
width: calc(100% + (40px * 2));
|
||||
margin-left: -40px;
|
||||
margin-right: -40px;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
margin: auto;
|
||||
max-width: var(--max-width);
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30px 0;
|
||||
|
||||
@media screen and (max-width: 760px) {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
font-family: "Bona Nova", Palatino, serif;
|
||||
font-feature-settings: "lnum";
|
||||
line-height: 1.25;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
--height: 60px;
|
||||
--button-padding: 24px;
|
||||
--nav-font-size: 28px;
|
||||
font-size: var(--nav-font-size);
|
||||
|
||||
&.button {
|
||||
height: var(--height);
|
||||
padding-left: var(--button-padding);
|
||||
padding-right: var(--button-padding);
|
||||
line-height: calc(var(--height) - 2 * var(--border-thickness));
|
||||
font-size: var(--nav-font-size);
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: var(--height);
|
||||
height: var(--height);
|
||||
}
|
||||
}
|
||||
|
||||
&.left img {
|
||||
// Don't show the alt text if the image doesn't load
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
gap: 30px;
|
||||
|
||||
a {
|
||||
--height: 50px;
|
||||
--button-padding: 16px;
|
||||
--nav-font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
gap: 30px;
|
||||
|
||||
a {
|
||||
--height: 50px;
|
||||
--button-padding: 16px;
|
||||
--nav-font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 880px) {
|
||||
gap: 20px;
|
||||
|
||||
a {
|
||||
--height: 40px;
|
||||
--button-padding: 12px;
|
||||
--nav-font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 680px) {
|
||||
gap: 16px;
|
||||
|
||||
a {
|
||||
--height: 30px;
|
||||
--button-padding: 8px;
|
||||
--nav-font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
gap: 12px;
|
||||
|
||||
a {
|
||||
--height: 24px;
|
||||
--button-padding: 8px;
|
||||
--nav-font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 540px) {
|
||||
gap: 10px;
|
||||
|
||||
a {
|
||||
--height: 22px;
|
||||
--button-padding: 6px;
|
||||
--nav-font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
gap: 8px;
|
||||
|
||||
a {
|
||||
--height: 20px;
|
||||
--button-padding: 4px;
|
||||
--nav-font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 430px) {
|
||||
gap: 6px;
|
||||
|
||||
a {
|
||||
--height: 20px;
|
||||
--button-padding: 4px;
|
||||
--nav-font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
header {
|
||||
padding: 0 var(--page-edge-padding);
|
||||
color: var(--color-walnut);
|
||||
|
||||
@media screen and (max-width: 1824px) {
|
||||
.ripple {
|
||||
display: block;
|
||||
background: none;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
--ripple-height: 16px;
|
||||
height: var(--ripple-height);
|
||||
margin-top: calc(-1 * var(--ripple-height) + var(--border-thickness));
|
||||
margin-bottom: calc(-1 * var(--border-thickness));
|
||||
stroke-width: var(--border-thickness);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
width: calc(100% + (var(--page-edge-padding) * 2));
|
||||
margin-left: calc(-1 * var(--page-edge-padding));
|
||||
margin-right: calc(-1 * var(--page-edge-padding));
|
||||
}
|
||||
|
||||
hr {
|
||||
background: none;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0 var(--page-edge-padding);
|
||||
nav {
|
||||
margin: auto;
|
||||
max-width: var(--max-width);
|
||||
|
||||
.content {
|
||||
padding: calc(120 * var(--variable-px)) 0;
|
||||
|
||||
section {
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
// Puts the content in front of the hexagon decoration
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
~ section {
|
||||
margin-top: calc(120 * var(--variable-px));
|
||||
}
|
||||
|
||||
p img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
pre {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
details {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
padding: 40px;
|
||||
padding-top: 0;
|
||||
color: var(--color-walnut);
|
||||
|
||||
nav {
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 8px 40px;
|
||||
|
||||
a {
|
||||
color: var(--color-walnut);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
max-width: 500px;
|
||||
}
|
||||
justify-content: space-between;
|
||||
padding: 30px 0;
|
||||
|
||||
@media screen and (max-width: 760px) {
|
||||
max-width: 440px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
gap: 6px 20px;
|
||||
}
|
||||
}
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
a {
|
||||
color: inherit;
|
||||
font-family: "Bona Nova", Palatino, serif;
|
||||
font-feature-settings: "lnum";
|
||||
line-height: 1.25;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
--height: 60px;
|
||||
--button-padding: 24px;
|
||||
--nav-font-size: 28px; // Keep up to date with `NAV_BUTTON_INITIAL_FONT_SIZE` in navbar.js
|
||||
font-size: var(--nav-font-size);
|
||||
|
||||
&.button.button {
|
||||
height: var(--height);
|
||||
padding-left: var(--button-padding);
|
||||
padding-right: var(--button-padding);
|
||||
line-height: calc(var(--height) - 2 * var(--border-thickness));
|
||||
font-size: var(--nav-font-size);
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: var(--height);
|
||||
height: var(--height);
|
||||
}
|
||||
}
|
||||
|
||||
&.left img {
|
||||
// Don't show the alt text if the image doesn't load
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
gap: 30px;
|
||||
|
||||
a {
|
||||
--height: 50px;
|
||||
--button-padding: 16px;
|
||||
--nav-font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
gap: 30px;
|
||||
|
||||
a {
|
||||
--height: 50px;
|
||||
--button-padding: 16px;
|
||||
--nav-font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 880px) {
|
||||
gap: 20px;
|
||||
|
||||
a {
|
||||
--height: 40px;
|
||||
--button-padding: 12px;
|
||||
--nav-font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 680px) {
|
||||
gap: 16px;
|
||||
|
||||
a {
|
||||
--height: 30px;
|
||||
--button-padding: 8px;
|
||||
--nav-font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
gap: 12px;
|
||||
|
||||
a {
|
||||
--height: 24px;
|
||||
--button-padding: 8px;
|
||||
--nav-font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 540px) {
|
||||
gap: 10px;
|
||||
|
||||
a {
|
||||
--height: 22px;
|
||||
--button-padding: 6px;
|
||||
--nav-font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
gap: 8px;
|
||||
|
||||
a {
|
||||
--height: 20px;
|
||||
--button-padding: 4px;
|
||||
--nav-font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 430px) {
|
||||
gap: 6px;
|
||||
|
||||
a {
|
||||
--height: 20px;
|
||||
--button-padding: 4px;
|
||||
--nav-font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ripple {
|
||||
display: block;
|
||||
background: none;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
--ripple-height: 16px;
|
||||
height: var(--ripple-height);
|
||||
margin-top: calc(-1 * var(--ripple-height) + var(--border-thickness));
|
||||
margin-bottom: calc(-1 * var(--border-thickness));
|
||||
stroke-width: var(--border-thickness);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0 var(--page-edge-padding);
|
||||
|
||||
.content {
|
||||
padding: calc(120 * var(--variable-px)) 0;
|
||||
|
||||
section {
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
// Puts the content in front of the hexagon decoration
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
~ section {
|
||||
margin-top: calc(120 * var(--variable-px));
|
||||
}
|
||||
|
||||
p img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
pre {
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
details {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
padding: 40px;
|
||||
padding-top: 0;
|
||||
color: var(--color-walnut);
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 8px 40px;
|
||||
|
||||
a {
|
||||
color: var(--color-walnut);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 760px) {
|
||||
max-width: 440px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
gap: 6px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fundraising {
|
||||
|
||||
@@ -46,10 +46,16 @@
|
||||
@media screen and (max-width: 960px) {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.banner.banner {
|
||||
width: 100%;
|
||||
max-width: 540px;
|
||||
background: var(--color-fog);
|
||||
|
||||
img {
|
||||
margin: auto;
|
||||
max-width: 480px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+136
-5
@@ -1,25 +1,153 @@
|
||||
.three-column-layout {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
transform: translate(0);
|
||||
|
||||
.reading-material {
|
||||
width: 800px;
|
||||
|
||||
flex: 0 0 auto;
|
||||
|
||||
.prev-next {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
|
||||
svg {
|
||||
fill: var(--color-navy);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1320px) {
|
||||
.contents {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reading-material.reading-material {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger-menu-button {
|
||||
display: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
// Overlaid fold-out menu
|
||||
@media screen and (max-width: 1080px) {
|
||||
gap: 0;
|
||||
|
||||
.chapters {
|
||||
position: sticky;
|
||||
height: 100vh;
|
||||
width: 0;
|
||||
margin-top: calc(-120 * var(--variable-px));
|
||||
overflow: visible;
|
||||
z-index: 10;
|
||||
|
||||
&.open .wrapper-outer {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.wrapper-outer {
|
||||
position: absolute;
|
||||
background: white;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
padding-left: var(--page-edge-padding);
|
||||
margin-left: calc(-1 * var(--page-edge-padding));
|
||||
padding-bottom: 120px;
|
||||
margin-bottom: -120px;
|
||||
border-right: var(--border-thickness) solid var(--color-walnut);
|
||||
box-sizing: border-box;
|
||||
width: 300px;
|
||||
transition: left 0.2s ease-in-out;
|
||||
left: -310px;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: -10px;
|
||||
width: 10px;
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent);
|
||||
}
|
||||
|
||||
.wrapper-inner {
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
padding-right: var(--page-edge-padding);
|
||||
padding-bottom: 120px;
|
||||
|
||||
ul:first-of-type {
|
||||
margin-top: calc(120 * var(--variable-px));
|
||||
}
|
||||
|
||||
.hamburger-menu-button.close {
|
||||
display: inline-block;
|
||||
background: none;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: var(--color-walnut);
|
||||
width: 36px;
|
||||
height: 4px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-18px, -2px) rotate(45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translate(-18px, -2px) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reading-material {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
|
||||
.article-title {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
gap: 20px;
|
||||
|
||||
.hamburger-menu-button.open {
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
top: calc(var(--font-size-heading-h1) * 0.25);
|
||||
background: linear-gradient(to bottom, transparent calc(25% / 3), var(--color-walnut) calc(25% / 3), var(--color-walnut) calc(75% / 3), transparent calc(75% / 3), transparent calc(125% / 3), var(--color-walnut) calc(125% / 3), var(--color-walnut) calc(175% / 3), transparent calc(175% / 3), transparent calc(225% / 3), var(--color-walnut) calc(225% / 3), var(--color-walnut) calc(275% / 3), transparent calc(275% / 3));
|
||||
}
|
||||
|
||||
h1 {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
position: sticky;
|
||||
@@ -55,8 +183,11 @@
|
||||
}
|
||||
|
||||
|
||||
&.chapters li.active a {
|
||||
color: var(--color-ale);
|
||||
&.chapters {
|
||||
li.active,
|
||||
li.active a {
|
||||
color: var(--color-ale);
|
||||
}
|
||||
}
|
||||
|
||||
&.contents {
|
||||
|
||||
+144
-154
@@ -2,6 +2,7 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// ▛ LOGO ▜
|
||||
#logo {
|
||||
display: flex;
|
||||
|
||||
@@ -11,6 +12,7 @@
|
||||
max-height: 240px;
|
||||
}
|
||||
}
|
||||
// ▙ LOGO ▟
|
||||
|
||||
.pencil-texture {
|
||||
position: absolute;
|
||||
@@ -26,6 +28,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ▛ QUICK LINKS ▜
|
||||
#quick-links {
|
||||
margin-top: calc(80 * var(--variable-px));
|
||||
display: flex;
|
||||
@@ -36,15 +39,18 @@
|
||||
display: flex;
|
||||
gap: calc(var(--font-size-link) * 0.8);
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
width: calc(var(--font-size-link) * 2);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
// ▙ QUICK LINKS ▟
|
||||
|
||||
#hero-message {
|
||||
// ▛ TAGLINE ▜
|
||||
#tagline {
|
||||
h1 {
|
||||
font-size: var(--font-size-intro-heading);
|
||||
}
|
||||
@@ -57,6 +63,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
// ▙ TAGLINE ▟
|
||||
|
||||
.hexagons {
|
||||
max-width: var(--max-width);
|
||||
@@ -90,157 +97,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
#graphite-tomorrow > img {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
#disciplines {
|
||||
align-items: center;
|
||||
|
||||
.informational-group {
|
||||
margin-top: 0;
|
||||
|
||||
.informational {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// #node-graph {
|
||||
// #node-graph-intro {
|
||||
// .section {
|
||||
// align-items: center;
|
||||
// }
|
||||
|
||||
// ~ section {
|
||||
// margin-top: calc(80 * var(--variable-px));
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
#vector-art {
|
||||
.section {
|
||||
align-items: center;
|
||||
|
||||
.background-video {
|
||||
position: relative;
|
||||
font-size: 0;
|
||||
|
||||
video {
|
||||
max-width: Min(100%, 1280px);
|
||||
}
|
||||
|
||||
// Uses a white border over the video to cover up the edges of the video which, due to a Chrome rendering bug, displays black edges sometimes when scrolling
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 2px solid white;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.download-artwork {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
border: 12px solid var(--color-walnut);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 300px;
|
||||
margin-left: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#imaginate {
|
||||
#imaginate-intro {
|
||||
.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; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
~ section {
|
||||
margin-top: calc(80 * var(--variable-px));
|
||||
}
|
||||
}
|
||||
|
||||
// #imaginate-creative-concepts-carousel {
|
||||
// margin-top: 20px;
|
||||
|
||||
// .screenshot-details {
|
||||
// justify-content: center;
|
||||
// }
|
||||
|
||||
// + blockquote {
|
||||
// margin-top: 0;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.feature-explainer {
|
||||
margin-top: 40px;
|
||||
|
||||
.diptych {
|
||||
width: 100%;
|
||||
|
||||
.section {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
flex: 1 1 calc(50% - (80 * var(--variable-px)) / 2);
|
||||
}
|
||||
}
|
||||
// ▛ SCREENSHOTS ▜
|
||||
// ▙ SCREENSHOTS ▟
|
||||
|
||||
// ▛ TODAY AND TOMORROW ▜
|
||||
// ▙ TODAY AND TOMORROW ▟
|
||||
//
|
||||
// ▛ COMMUNITY ▜
|
||||
#community {
|
||||
background-color: var(--color-lime);
|
||||
|
||||
@@ -273,6 +136,8 @@
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex: 100000 1 0;
|
||||
flex-wrap: wrap;
|
||||
min-width: Min(100%, calc(240px + 20px + 240px));
|
||||
|
||||
div {
|
||||
min-height: auto;
|
||||
@@ -339,6 +204,7 @@
|
||||
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);
|
||||
@@ -355,6 +221,7 @@
|
||||
background: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
border-radius: 0; // Required for iOS Safari
|
||||
|
||||
&:focus {
|
||||
border-color: var(--input-focus-color);
|
||||
@@ -394,11 +261,109 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
// ▙ COMMUNITY ▟
|
||||
|
||||
#demo-video {
|
||||
max-width: 1000px;
|
||||
// ▛ VECTOR ART ▜
|
||||
#vector-art {
|
||||
.section {
|
||||
align-items: center;
|
||||
|
||||
.download-artwork {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
|
||||
img {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
border: 12px solid var(--color-walnut);
|
||||
vertical-align: top;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 300px;
|
||||
margin-left: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// ▙ VECTOR ART ▟
|
||||
|
||||
// ▛ IMAGINATE ▜
|
||||
#imaginate {
|
||||
> .section {
|
||||
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));
|
||||
|
||||
.section {
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// #imaginate-creative-concepts-carousel {
|
||||
// margin-top: 20px;
|
||||
|
||||
// .screenshot-details {
|
||||
// justify-content: center;
|
||||
// }
|
||||
|
||||
// + blockquote {
|
||||
// margin-top: 0;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
// ▙ IMAGINATE ▟
|
||||
|
||||
// ▛ FUNDRAISING ▜
|
||||
#fundraising {
|
||||
background-color: var(--color-seaside);
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
@@ -407,8 +372,33 @@
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
// ▙ FUNDRAISING ▟
|
||||
|
||||
// ▛ PROCEDURALISM ▜
|
||||
#proceduralism .section {
|
||||
align-items: center;
|
||||
}
|
||||
// ▙ PROCEDURALISM ▟
|
||||
|
||||
// ▛ DISCIPLINES ▜
|
||||
#disciplines .section {
|
||||
align-items: center;
|
||||
|
||||
.informational-group .informational {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
// ▙ DISCIPLINES ▟
|
||||
|
||||
// ▛ DEMO VIDEO ▜
|
||||
#demo-video {
|
||||
max-width: 1000px;
|
||||
}
|
||||
// ▙ DEMO VIDEO ▟
|
||||
|
||||
// ▛ GET INVOLVED ▜
|
||||
#get-involved-box {
|
||||
background-color: var(--color-lemon);
|
||||
background-blend-mode: color-burn;
|
||||
}
|
||||
// ▙ GET INVOLVED ▟
|
||||
|
||||
@@ -17,3 +17,12 @@
|
||||
background-color: var(--color-ale);
|
||||
}
|
||||
}
|
||||
|
||||
.creative-contributions,
|
||||
.code-contributions {
|
||||
.button.button.button {
|
||||
height: auto;
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user