+
+
+
+
+
+
+
+
+ 
+
+
+
diff --git a/website/content/volunteer/guide/starting-a-task/code-quality-guidelines.md b/website/content/volunteer/guide/starting-a-task/code-quality-guidelines.md
index 375c8cf18..1ea8e0885 100644
--- a/website/content/volunteer/guide/starting-a-task/code-quality-guidelines.md
+++ b/website/content/volunteer/guide/starting-a-task/code-quality-guidelines.md
@@ -35,7 +35,9 @@ Comments should usually be placed on a separate line above the code they are ref
## Blank lines
-Please make a habit of grouping together related lines of code in blocks separated by blank lines. If you have dozens of lines comprising a single unbroken block of logic, you are likely not splitting it apart enough to aid readability. Find sensible places to partition the logic and insert blank lines between each. Roughly 10% of the code you write should ideally be blank lines, otherwise you are likely underutilizing them at the expense of readability.
+Please make a habit of grouping together related lines of code in blocks separated by blank lines. These are like your paragraphs if you were writing a novel — they greatly aid readability and your copy editor would have significant concerns with your writing if they were absent.
+
+If you have dozens of lines comprising a single unbroken block of logic, you are likely not splitting it apart enough to aid readability. Find sensible places to partition the logic and insert blank lines between each. Roughly 10% of the code you write should ideally be blank lines, otherwise you are likely underutilizing them at the expense of readability.
## Imports
diff --git a/website/sass/base.scss b/website/sass/base.scss
index b0b7098ea..d938d26a9 100644
--- a/website/sass/base.scss
+++ b/website/sass/base.scss
@@ -151,19 +151,6 @@ body > .page {
.heart.heart {
// The same color is also used below in the SVG after the `%23` (URL-encoded `#`)
color: #cc304f;
-
- &::after {
- content: "";
- background-image: url('data:image/svg+xml;utf8,\
- \
- ');
- display: inline-block;
- width: 0.75em;
- height: 0.75em;
- margin-left: 0.25em;
- margin-bottom: -0.1em;
- vertical-align: baseline;
- }
}
@media screen and (max-width: 1200px) {
@@ -683,6 +670,19 @@ hr,
}
}
+.heart::after {
+ content: "";
+ background-image: url('data:image/svg+xml;utf8,\
+ \
+ ');
+ display: inline-block;
+ width: 0.75em;
+ height: 0.75em;
+ margin-left: 0.25em;
+ margin-bottom: -0.1em;
+ vertical-align: baseline;
+}
+
// blockquote {
// padding: 32px 80px;
// background: rgba(0, 0, 0, 0.0625);
diff --git a/website/sass/page/features.scss b/website/sass/page/features.scss
index a305d811f..41590b908 100644
--- a/website/sass/page/features.scss
+++ b/website/sass/page/features.scss
@@ -1,3 +1,13 @@
+.video-container {
+ background: var(--color-fog);
+
+ > div {
+ margin: calc(20 * var(--variable-px)) auto;
+ width: 100%;
+ max-width: 800px;
+ }
+}
+
#roadmap {
width: 100%;
text-align: center;
diff --git a/website/sass/page/index.scss b/website/sass/page/index.scss
index 0997758b8..9c82d1f0f 100644
--- a/website/sass/page/index.scss
+++ b/website/sass/page/index.scss
@@ -18,24 +18,25 @@
#tagline {
h1 {
span {
- position: relative;
+ 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;
+ &::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;
@@ -112,15 +113,61 @@
// ▛ 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;
- margin-top: 0;
-
+
.diptych {
background: black;
color: var(--color-fog);
@@ -183,9 +230,6 @@
}
// ▙ PROCEDURALISM ▟
-// ▛ DONATE ▜
-// ▙ DONATE ▟
-
// ▛ NEWSLETTER ▜
#newsletter {
background-color: var(--color-peach);
@@ -355,7 +399,7 @@
margin: calc(20 * var(--variable-px)) auto;
width: 100%;
max-width: 800px;
-
+
+ p {
margin-top: 0;
}
@@ -377,7 +421,7 @@
// ▛ RECENT NEWS ▜
#recent-news {
background-color: var(--color-parchment);
-
+
.banner img {
width: 100%;
height: auto;