mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-24 19:18:11 +08:00
Revamp the website
This commit is contained in:
Keavon Chambers
+34
-28
@@ -372,7 +372,7 @@ body > .page {
|
||||
// =====================
|
||||
|
||||
:is(h1, h2, h3, h4, article > :first-child) ~ :is(p, ul, ol, ol li p, img, a:has(> img:only-child)),
|
||||
:is(h1, p) ~ .feature-icons,
|
||||
:is(h1, h2, h3, h4, p) ~ .feature-icons,
|
||||
p ~ :is(h1, h2, h3, h4, details summary, blockquote, .image-comparison, .video-background, .video-embed),
|
||||
.video-embed + :is(p, .link, .button),
|
||||
p + p > .button,
|
||||
@@ -759,7 +759,7 @@ hr,
|
||||
}
|
||||
}
|
||||
|
||||
.info-box,
|
||||
.feature-box-narrow,
|
||||
.feature-box-outer {
|
||||
padding: calc(80 * var(--variable-px));
|
||||
background-image: url("https://static.graphite.rs/textures/noise.png");
|
||||
@@ -767,6 +767,19 @@ hr,
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
:where(h1, h2, h3, h4, p) + .feature-box-narrow {
|
||||
margin-top: calc(40 * var(--variable-px));
|
||||
}
|
||||
|
||||
.feature-box-full-image {
|
||||
width: calc(100% + 2 * 80 * var(--variable-px));
|
||||
height: auto;
|
||||
margin-left: calc(-80 * var(--variable-px));
|
||||
margin-top: calc(-80 * var(--variable-px));
|
||||
margin-bottom: calc(40 * var(--variable-px));
|
||||
display: block;
|
||||
}
|
||||
|
||||
.feature-box-outer {
|
||||
@media screen and (max-width: 1000px) {
|
||||
&.feature-box-outer {
|
||||
@@ -784,22 +797,26 @@ hr,
|
||||
.feature-box-inner {
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
h1.feature-box-header {
|
||||
font-family: "Inter", sans-serif;
|
||||
line-height: 1.5;
|
||||
font-size: var(--font-size-link);
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
h1.feature-box-header.feature-box-header {
|
||||
font-family: "Inter", sans-serif;
|
||||
line-height: 1.5;
|
||||
font-size: var(--font-size-link);
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
|
||||
span {
|
||||
white-space: pre;
|
||||
}
|
||||
span {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
~ hr {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
~ hr {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
+ p {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -895,18 +912,6 @@ hr,
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
.status-flag {
|
||||
background: var(--color-crimson);
|
||||
white-space: nowrap;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
padding: 0.25em 0.5em;
|
||||
vertical-align: middle;
|
||||
font-family: "Bona Nova", Palatino, serif;
|
||||
line-height: 1.2;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.demo-artwork {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1142,8 +1147,9 @@ hr,
|
||||
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
--fade-factor: Min(calc(var(--over-slide-factor, 0) / 1.5 + 0.5), 1);
|
||||
// Fade to white (combining invert and brightness, see <https://stackoverflow.com/a/78478074/775283>) and desaturate
|
||||
filter: Invert(calc(var(--over-slide-factor) / 2)) Brightness(calc(1 + var(--over-slide-factor))) Grayscale(var(--over-slide-factor));
|
||||
filter: Invert(calc(var(--fade-factor) / 2)) Brightness(calc(1 + var(--fade-factor))) Grayscale(var(--fade-factor));
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
||||
+109
-32
@@ -57,8 +57,28 @@
|
||||
|
||||
// ▛ 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: calc(1rem * 10 / 9);
|
||||
font-size: 1.2rem;
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
max-width: unset;
|
||||
@@ -131,15 +151,20 @@
|
||||
// ▙ 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 {
|
||||
align-items: center;
|
||||
|
||||
.feature-icons .feature-icon {
|
||||
margin-top: 40px;
|
||||
}
|
||||
#disciplines .block .feature-icons .feature-icon {
|
||||
margin-top: 40px;
|
||||
}
|
||||
// ▙ DISCIPLINES ▟
|
||||
|
||||
@@ -301,21 +326,67 @@
|
||||
}
|
||||
// ▙ NEWSLETTER ▟
|
||||
|
||||
// ▛ JUMP RIGHT IN ▜
|
||||
// #jump-right-in {
|
||||
// max-width: 1000px;
|
||||
|
||||
// .block {
|
||||
// align-items: center;
|
||||
// }
|
||||
// }
|
||||
// ▙ JUMP RIGHT IN ▟
|
||||
|
||||
// ▛ PROCEDURALISM ▜
|
||||
#proceduralism .block,
|
||||
#proceduralism-demo .block,
|
||||
#proceduralism-features .block {
|
||||
align-items: center;
|
||||
#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 ▟
|
||||
|
||||
@@ -329,14 +400,6 @@
|
||||
}
|
||||
// ▙ DONATE ▟
|
||||
|
||||
// ▛ VECTOR ART ▜
|
||||
#vector-art {
|
||||
.block {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
// ▙ VECTOR ART ▟
|
||||
|
||||
// ▛ IMAGINATE ▜
|
||||
// #imaginate {
|
||||
// > .block {
|
||||
@@ -408,11 +471,25 @@
|
||||
// ▙ IMAGINATE ▟
|
||||
|
||||
// ▛ DEMO VIDEO ▜
|
||||
#demo-video {
|
||||
max-width: 1000px;
|
||||
}
|
||||
// #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);
|
||||
|
||||
+16
-25
@@ -1,30 +1,21 @@
|
||||
.code-contributions,
|
||||
.creative-contributions {
|
||||
gap: 0 calc(80* var(--variable-px));
|
||||
}
|
||||
.diptych {
|
||||
gap: 0 calc(80 * var(--variable-px));
|
||||
|
||||
.code-contributions .info-box {
|
||||
background-color: var(--color-seaside);
|
||||
.feature-box-narrow {
|
||||
margin-top: calc(40 * var(--variable-px));
|
||||
}
|
||||
}
|
||||
|
||||
.creative-contributions .info-box {
|
||||
background-color: var(--color-lemon);
|
||||
}
|
||||
|
||||
.user-contributions .info-box {
|
||||
background-color: var(--color-lilac);
|
||||
}
|
||||
|
||||
.info-box {
|
||||
margin-top: calc(40 * var(--variable-px));
|
||||
|
||||
> img:first-child,
|
||||
> a:first-child > img:only-child {
|
||||
width: calc(100% + 2 * 80 * var(--variable-px));
|
||||
height: auto;
|
||||
margin-left: calc(-80 * var(--variable-px));
|
||||
margin-top: calc(-80 * var(--variable-px));
|
||||
margin-bottom: calc(40 * var(--variable-px));
|
||||
display: block;
|
||||
.feature-box-narrow {
|
||||
.code-contributions & {
|
||||
background-color: var(--color-seaside);
|
||||
}
|
||||
|
||||
.creative-contributions & {
|
||||
background-color: var(--color-lemon);
|
||||
}
|
||||
|
||||
.user-contributions & {
|
||||
background-color: var(--color-lilac);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user