+
-Starting life as a vector editor, Graphite is evolving into a generalized, all-in-one graphics toolbox that's built more like a game engine than a conventional creative app. The editor's tools wrap its node graph core, providing user-friendly workflows for vector, raster, and beyond.
+Starting life as a vector editor, Graphite is evolving into a generalized, all-in-one graphics toolbox that's built more like a game engine than a conventional creative app. The editor's tools wrap its node graph core, providing user-friendly workflows for vector, raster, animation, and beyond.
+
+Start creating
+
+
+
+
+
+
+
+
@@ -276,7 +290,23 @@ Once it's ready to shine, Graphite's code architecture is structured to deliver
-
+
+
+
+
+
+
+Support the mission
+ +Free software doesn't grow on trees! Chip in your share of the (very real) development costs so you're not leaving others to pick up the tab. Becoming a member (or giving a one-time donation) lets you help maintain Graphite's sustainability and independence. + +Become a member + +
@@ -363,23 +393,7 @@ Graphite's representation of artwork as a node graph lets you customize, compose
-
-## Support the mission
-
-Free software doesn't grow on trees! Chip in your share of the (very real) development costs so you're not leaving others to pick up the tab. Becoming a member (or giving a one-time donation) lets you help maintain Graphite's sustainability and independence.
-
-Become a member
-
-
-
-
+
+
+
+
+
+
+
+
+ 
+
+
+
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 375c8cf180..1ea8e0885f 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 b0b7098ea5..d938d26a9a 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 a305d811fb..41590b908a 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 0997758b86..9c82d1f0f8 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;