From d7fbbac95ebaabaaa42d36be790c79e1705b6b63 Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Mon, 30 Jun 2025 10:04:37 -0700 Subject: [PATCH] Add videos to the website home page and features page --- website/content/_index.md | 54 ++++++----- website/content/features.md | 17 +++- .../code-quality-guidelines.md | 4 +- website/sass/base.scss | 26 +++--- website/sass/page/features.scss | 10 +++ website/sass/page/index.scss | 90 ++++++++++++++----- 6 files changed, 143 insertions(+), 58 deletions(-) diff --git a/website/content/_index.md b/website/content/_index.md index 98d7c321..a22928a9 100644 --- a/website/content/_index.md +++ b/website/content/_index.md @@ -164,9 +164,23 @@ meta_description = "Open source free software. A vector graphics creativity suit --- - +
+
-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
- + + + + +
@@ -363,23 +393,7 @@ Graphite's representation of artwork as a node graph lets you customize, compose
- - - - - +
diff --git a/website/content/features.md b/website/content/features.md index 307e8bbc..ad0e7796 100644 --- a/website/content/features.md +++ b/website/content/features.md @@ -2,7 +2,8 @@ title = "Graphite features" [extra] -css = ["/page/features.css", "/component/feature-box.css", "/component/feature-icons.css"] +css = ["/page/features.css", "/component/feature-box.css", "/component/feature-icons.css", "/component/youtube-embed.css"] +js = ["/js/youtube-embed.js"] +++
@@ -17,6 +18,20 @@ In 2025, stay tuned for performance improvements, native multiplatform desktop a
+
+
+ +
+
+
+ Rust-Powered Graphics Editor: How Graphite's Syntax Trees Revolutionize Image Editing +
+
+
+ +
+
+
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 375c8cf1..1ea8e088 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 b0b7098e..d938d26a 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 a305d811..41590b90 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 0997758b..9c82d1f0 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;