- 
- 
- 
- 
- 
-
-
+ 
+ 
+ 
+ 
+
+
@@ -107,7 +106,6 @@ js = ["image-interaction.js", "video-embed.js"]
-
-
-
-
-
-
-
+
+
+
+
+
+
-
@@ -143,26 +138,26 @@ js = ["image-interaction.js", "video-embed.js"]
- Red Dress β Illustration made with the help of procedurally placing hundreds of circles. +
+ Painted Dreams β Made using nondestructive boolean operations and procedural dot patterns
- Valley of Spires β Vector art made with the Pen and Gradient tools without touching the node graph. + Valley of Spires β The layer stack is represented, under the hood, by a node graph (shown fully expanded)
- Procedural String Lights β Drawing of a tree adorned by reusable, auto-placed light bulbs along the wire path made using this node graph. + Mandelbrot fractal filled with a noise pattern, procedurally generated and infinitely scalable
- Design mockup for the work-in-progress raster editing pipeline. Some of these raster-specific nodes are not implemented yet, but will be soon! -
-- Design mockup for the work-in-progress raster editing workflow. Some of the features shown here are not implemented yet, but will be soon! + Coming soon: mockup for the actively in-development raster workflow with new nodes for photo editing
-# Graphite today public alpha
+# Graphite today public alpha
@@ -177,19 +172,19 @@ Presently, Graphite is a lightweight offline web app with features primarily ori
@@ -208,31 +203,31 @@ Presently, Graphite is a lightweight offline web app with features primarily ori
# One app to rule them all
-**Stop jumping between programs. Planned features will make Graphite a first-class design tool for all these disciplines.** *(Listed by priority.)*
+**Stop jumping between programsβ planned features will make Graphite a first-class content creation tool for all these disciplines.**
@@ -310,57 +305,66 @@ You'll receive your first newsletter email with the next major Graphite news.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
- Vector art editing
+ 
+ Vector editing tools
- Vector art editing
+
+ Vector editing tools
-
+
Node-based layers
+
Node-based layers
-
+
-
+
Procedural graphic design workflow
+
Procedural graphic design workflow
-
+
Forever free and open source
+
Forever free and open source
-
+
All-in-one creative tool for all things 2D
+
All-in-one creative tool for all things 2D
-
- Clean, familiar, designer-centric UI
+
+ Fully-featured raster manipulation
- Clean, familiar, designer-centric UI
+
+ Fully-featured raster manipulation
-
- Multiplatform app for desktop + iPad
+
+ Windows/Mac/Linux native apps + web
- Multiplatform app for desktop + iPad
+
+ Windows/Mac/Linux native apps + web
-
+
Live collaborative editing
+
Live collaborative editing
-
+
Graphic Design
+
Graphic Design
-
+
Image Editing
+
Image Editing
-
+
Motion Graphics
+
Motion Graphics
-
+
Digital Painting
+
Digital Painting
-
+
VFX Compositing
+
VFX Compositing
-
+
Desktop Publishing
+
Desktop Publishing
-# Powerful proceduralism
+# The power of proceduralism
-**Graphite is the first and only graphic design package to offer procedural vector editing.**
+**Graphite is the first and only graphic design package built for procedural editing β where everything is nondestructive.**
+
+
-Proceduralism lets you create sophisticated design elements that are easy to edit and reuse. The holiday string lights shown below are built from a simple group of nodes, allowing you to effortlessly reshape the wire and update the bulb appearance and spacing. Click here to explore this demo and try dragging the wire layer's points with the Path tool ().
-
-
+
+
+
- Fully node graph-driven documents
+ Node graph integration in documents
+
-
+
@@ -416,33 +420,29 @@ Graphite is built by a small, dedicated crew of volunteers in need of the resour
-
-
-
-
- 
-
-
+
+
+
-
-
-
- Procedural String Lights
-
-
-
- Open this artwork to
explore it yourself.
-
-
+
+
+
+Explore creative possibilities (without the grunt work)
+ +--- + +Save hours on tedious alterations and make better creative choices. Graphite lets you iterate rapidly by adjusting node parameters instead of individual elements. + +Scatter circles with just a couple nodes... +Want them denser? Bigger? Those are sliders. +Want a different placement area? Just tweak the path. + +Open this artwork and give it a try yourself. + +
+
+
@@ -373,19 +377,19 @@ Graphite's procedural, data-driven approach to graphic design affords unique cap
+
+
+
+Mix and morph parameters
+ +--- + +Nondestructive editing means every decision is tied to a parameter you can adjust later on. Use Graphite to interpolate between any states just by dragging sliders. + +Blend across color schemes. Morph shapes before they're scattered around the canvas. The possibilities are endless. + +
+
-
- Fully nondestructive editing with node-driven layers
-
-
- Fully nondestructive editing with node-driven layers
-
-
+
Infinitely scalable raster content with no pixelation
+
Infinitely scalable raster content with no pixelation
-
- Versatile modularity of node-based generative AI models
+
+ Modular node-based pipelines for generative AI
- Versatile modularity of node-based generative AI models
+
+ Modular node-based pipelines for generative AI
-
+
+ Fully nondestructive editing with node-driven layers
+
+
+
+ Fully nondestructive editing with node-driven layers
+
+
Procedural pipelines for studio production environments
Procedural pipelines for studio production environments
-# Taking shape
+# Ready to dive in?
-**All you've come to expect from a professional vector graphics editor. Now readily accessible in your browser.**
+**Get started with Graphite by following along to a hands-on quickstart tutorial.**
-
-Make vector art out of shapes ranging from simple geometric primitives to complex BΓ©zier curves.
-
-Style shapes with strokes, fills, and gradients. Mix layers with blend modes. Then export as an image or SVG.
-
-
-
+
diff --git a/website/content/blog/2024-07-31-graphite-progress-report-q2-2024.md b/website/content/blog/2024-07-31-graphite-progress-report-q2-2024.md
index b0668e7a..c10fcaa6 100644
--- a/website/content/blog/2024-07-31-graphite-progress-report-q2-2024.md
+++ b/website/content/blog/2024-07-31-graphite-progress-report-q2-2024.md
@@ -18,7 +18,7 @@ Overall, editor functionality has been shaping up and becoming an all around use
This is the second of our quarterly progress report blog posts. If you missed the [first one](../graphite-progress-report-q1-2024), be sure to check it out as well. If you'd like to help speed up future progress, please consider [getting involved](/volunteer) with code, QA/bug testing, or art/marketing projects. [Donations](/donate) are also valued, as are [stars of GitHub](https://github.com/GraphiteEditor/Graphite). Follow along and partake in our [Discord community](https://discord.graphite.rs), too.
-All Q2 2024 commits may be [viewed in this list](https://github.com/GraphiteEditor/Graphite/commits/master/?since=2024-04-01&until=2024-06-30) and all noteworthy changes are detailed below. To showcase the much anticipated introduction of boolean path operations, the new *Painted Dreams* artwork shown here extensively utilizes non-destructive booleans.
+All Q2 2024 commits may be [viewed in this list](https://github.com/GraphiteEditor/Graphite/commits/master/?since=2024-04-01&until=2024-06-30) and all noteworthy changes are detailed below. To showcase the much anticipated introduction of boolean path operations, the new *Painted Dreams* artwork shown here extensively utilizes nondestructive booleans.
@@ -107,7 +107,7 @@ Always on the bleeding edge and built to lastβ Graphite is written on a robust
-
-Style shapes with strokes, fills, and gradients. Mix layers with blend modes. Then export as an image or SVG.
-
+
-
-
+
+
@@ -529,7 +529,7 @@ Style shapes with strokes, fills, and gradients. Mix layers with blend modes. Th
-
+
+
+Then keep learning with the Graphite manual:
+
+Keep learning
+ 
+
- Fully node graph-driven documents
+ Node graph integration in documents
@@ -129,10 +129,14 @@ Always on the bleeding edge and built to lastβ Graphite is written on a robust
Procedurally alterable vector data
-
Procedurally alterable vector data
+
New vector 2D renderer (with Vello)
+
Imaginate (Stable Diffusion node/tool)
@@ -141,21 +145,13 @@ Always on the bleeding edge and built to lastβ Graphite is written on a robust
GPU-accelerated raster rendering
-
- Adaptive resolution system
+ Infinitely zoomable/panable content
-
New vector 2D renderer (with Vello)
+
+ Interactive graph auto-layout
+
+ Interactive graph auto-layout
+
Imaginate (Stable Diffusion node/tool)
@@ -141,21 +145,13 @@ Always on the bleeding edge and built to lastβ Graphite is written on a robust
GPU-accelerated raster rendering
-
- Imported RAW photo processing
-
-
- Imported RAW photo processing
-
-
- Interactive graph auto-layout
-
- Interactive graph auto-layout
-
- Adaptive resolution system
+ Infinitely zoomable/panable content
-
- Graph data attribute spreadsheets
+
@@ -163,19 +159,23 @@ Always on the bleeding edge and built to lastβ Graphite is written on a robust
Local file browser for saving/loading
@@ -186,40 +186,40 @@ Always on the bleeding edge and built to lastβ Graphite is written on a robust
Command palette and context menus
+
Outliner panel (node graph tree view)
-
Shape builder tool
+
Guide mode (construction geometry)
@@ -233,30 +233,26 @@ Always on the bleeding edge and built to lastβ Graphite is written on a robust
-
Internationalization and accessibility
+
Frozen-in-time graph references
-
Automation and batch processing
+
HDR and WCG color handling
@@ -270,8 +266,8 @@ Always on the bleeding edge and built to lastβ Graphite is written on a robust
Asset libraries and marketplace
@@ -281,17 +277,21 @@ Always on the bleeding edge and built to lastβ Graphite is written on a robust
+
Procedural styling of paint brushes
@@ -301,6 +301,10 @@ Always on the bleeding edge and built to lastβ Graphite is written on a robust
Finer-grain control over SVG export
+
Distributed graph rendering
@@ -317,10 +321,6 @@ Always on the bleeding edge and built to lastβ Graphite is written on a robust
Offline edit resolution with CRDTs
-
SVG animation authorship
diff --git a/website/content/volunteer/_index.md b/website/content/volunteer/_index.md
index d38d67ad..e8d3babc 100644
--- a/website/content/volunteer/_index.md
+++ b/website/content/volunteer/_index.md
@@ -19,10 +19,10 @@ css = ["volunteer.css"]
## Code contributions
-
- Graph data attribute spreadsheets
+
+
+ Raw photo processing
+ Raw photo processing
@@ -163,19 +159,23 @@ Always on the bleeding edge and built to lastβ Graphite is written on a robust
Local file browser for saving/loading
-
- Fully-supported brush tool
+
+ Local fonts access
- Fully-supported brush tool
+
+ Local fonts access
-
- Select mode (marquee masking)
+
+ Graph data attribute spreadsheets
+
+
- Select mode (marquee masking)
+
+ Graph data attribute spreadsheets
+
+
+ Fully functional brush tool
+ Fully functional brush tool
@@ -186,40 +186,40 @@ Always on the bleeding edge and built to lastβ Graphite is written on a robust
β Alpha 4 β
-
- AI nodes and tools (e.g. magic wand)
+
+ Variable color swatches
- AI nodes and tools (e.g. magic wand)
+
+ Variable color swatches
-
- Local fonts access
+
+ Select mode (marquee masking)
- Local fonts access
+
+ Select mode (marquee masking)
Command palette and context menus
+
+ Reconfigurable workspace panels
+
+ Reconfigurable workspace panels
+
Outliner panel (node graph tree view)
-
- Variable color swatches
-
-
- Variable color swatches
-
-
- Mesh vector format
-
- Mesh vector format
-
Shape builder tool
+
+ Mesh vector format
+
+ Mesh vector format
+
Guide mode (construction geometry)
-
- CAD-like constraint relationships
+
+ AI nodes and tools (e.g. magic wand)
- CAD-like constraint relationships
+
+ AI nodes and tools (e.g. magic wand)
@@ -233,30 +233,26 @@ Always on the bleeding edge and built to lastβ Graphite is written on a robust
-
-
- Document history management
-
- Document history management
-
Internationalization and accessibility
+
+ Document history management
+
+ Document history management
+
Frozen-in-time graph references
-
- Liquify and non-affine rendering
-
-
- Liquify and non-affine rendering
-
-
- Reconfigurable workspace panels
-
- Reconfigurable workspace panels
-
Automation and batch processing
+
+ Liquify and non-affine transforms
+
+ Liquify and non-affine transforms
+
HDR and WCG color handling
@@ -270,8 +266,8 @@ Always on the bleeding edge and built to lastβ Graphite is written on a robust
Asset libraries and marketplace
-
- Portable, embeddable render engine
+
+ Advanced typography and typesetting
- Portable, embeddable render engine
+
+ Advanced typography and typesetting
@@ -281,17 +277,21 @@ Always on the bleeding edge and built to lastβ Graphite is written on a robust
+
+
+ Fully native UI rewrite (with Xilem)
+
+ Fully native UI rewrite (with Xilem)
+
Procedural styling of paint brushes
-
- Constraint models for UI layouts
+
+ CAD-like constraint relationships
- Constraint models for UI layouts
+
+ CAD-like constraint relationships
-
- Advanced typography and typesetting
+
+ Responsive design constraint solvers
- Advanced typography and typesetting
+
+ Responsive design constraint solvers
@@ -301,6 +301,10 @@ Always on the bleeding edge and built to lastβ Graphite is written on a robust
Finer-grain control over SVG export
+
+ Portable, embeddable render engine
+
+ Portable, embeddable render engine
+
Distributed graph rendering
@@ -317,10 +321,6 @@ Always on the bleeding edge and built to lastβ Graphite is written on a robust
Offline edit resolution with CRDTs
-
- Native UI rewrite (no HTML frontend)
-
- Native UI rewrite (no HTML frontend)
-
SVG animation authorship
diff --git a/website/content/volunteer/_index.md b/website/content/volunteer/_index.md
index d38d67ad..e8d3babc 100644
--- a/website/content/volunteer/_index.md
+++ b/website/content/volunteer/_index.md
@@ -19,10 +19,10 @@ css = ["volunteer.css"]
## Code contributions
-
+
- 
+
**Get started by reading the contributor guide:**
@@ -33,14 +33,14 @@ css = ["volunteer.css"]
+
**Get started by reading the contributor guide:**
@@ -33,14 +33,14 @@ css = ["volunteer.css"]
-
+
### EDITOR TEAM
The Graphite editor is built much like a game engine, split across user interface application tooling and a renderer with nodes implementing an assortment of graphics algorithms.
-
+
### GRAPHENE TEAM
@@ -56,10 +56,9 @@ The Graphite editor is built much like a game engine, split across user interfac
## Creative contributions
-
+
-
- 
+
**Ask how to get started by reaching out to a [core team](/about#core-team) member on Discord:**
@@ -70,14 +69,14 @@ The Graphite editor is built much like a game engine, split across user interfac
+
**Ask how to get started by reaching out to a [core team](/about#core-team) member on Discord:**
@@ -70,14 +69,14 @@ The Graphite editor is built much like a game engine, split across user interfac
-
+
### ART TEAM
Use your artistic talents to conceptualize and produce high-quality open art projects published by the Graphite project to stress-test and showcase the editor's capabilities.
-
+
### MARKETING TEAM
@@ -93,11 +92,9 @@ Help write, edit, and design content for this website, social media, newsletters
## User contributions
-
+
-
- 
-
+
**Ask how to get started by reaching out to a [core team](/about#core-team) member on Discord:**
@@ -107,14 +104,14 @@ Help write, edit, and design content for this website, social media, newsletters
-
+
**Ask how to get started by reaching out to a [core team](/about#core-team) member on Discord:**
@@ -107,14 +104,14 @@ Help write, edit, and design content for this website, social media, newsletters
-
+
### QA TEAM
Get familiar with the ins-and-outs of the editor and respond actively to developer requests on a recurring basis to test out new features and find bugs and breakages.
-
+
### NODES TEAM
diff --git a/website/other/bezier-rs-demos/index.html b/website/other/bezier-rs-demos/index.html
index a842005d..7237f2db 100644
--- a/website/other/bezier-rs-demos/index.html
+++ b/website/other/bezier-rs-demos/index.html
@@ -1,17 +1,15 @@
-
+
-
-
- Bezier-rs Interactive Documentation
-
-
-
-
-
-
-
-
-
-
-
+
+
+ Bezier-rs Interactive Documentation
+
+
+
+
+
+
+
+
+
diff --git a/website/other/bezier-rs-demos/src/main.ts b/website/other/bezier-rs-demos/src/main.ts
index 8f5e1f47..d841010c 100644
--- a/website/other/bezier-rs-demos/src/main.ts
+++ b/website/other/bezier-rs-demos/src/main.ts
@@ -71,7 +71,7 @@ function renderExamples() {
window.document.body.innerHTML = `
) 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 {
diff --git a/website/sass/index.scss b/website/sass/index.scss
index f70913fe..032db018 100644
--- a/website/sass/index.scss
+++ b/website/sass/index.scss
@@ -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);
diff --git a/website/sass/volunteer.scss b/website/sass/volunteer.scss
index 35d51dc6..ad413b22 100644
--- a/website/sass/volunteer.scss
+++ b/website/sass/volunteer.scss
@@ -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);
-}
-
-.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 {
+ margin-top: calc(40 * var(--variable-px));
+ }
+}
+
+.feature-box-narrow {
+ .code-contributions & {
+ background-color: var(--color-seaside);
+ }
+
+ .creative-contributions & {
+ background-color: var(--color-lemon);
+ }
+
+ .user-contributions & {
+ background-color: var(--color-lilac);
}
}
diff --git a/website/templates/base.html b/website/templates/base.html
index 053b49a2..3633057e 100644
--- a/website/templates/base.html
+++ b/website/templates/base.html
@@ -4,46 +4,44 @@
{%- block head -%}{%- endblock head -%}
{%- set page = page | default(value = section | default(value = false)) -%}
-
+
Graphite | {{ title | safe }}
-
+
{% if current_path -%}
-
+
{%- endif %}
{% if meta_description -%}
-
+
{%- endif %}
-
+
-
+
{% block rss -%}
-
+
{%- endblock %}
-
-
-
-
-
-
-
+
+
+
+
+
{%- set extra_css = page.extra.css | default(value = []) | concat(with = css | default(value = [])) -%}
{% for css_path in extra_css %}
-
- {% endfor %}
+
+ {%- endfor %}
{%- set extra_js = page.extra.js | default(value = []) | concat(with = js | default(value = [])) -%}
{% for js_path in extra_js %}
- {% endfor %}
+ {%- endfor %}
-
+ {{- get_env(name = "INDEX_HTML_HEAD_INCLUSION", default = "") }}
Bezier-rs Interactive Documentation
- This is the interactive documentation for the Bezier-rs library. View the + This is the interactive documentation for the Bezier-rs library. View the crate documentation for detailed function descriptions and API usage. Click and drag on the endpoints of the demo curves to visualize the various Bezier utilities and functions.
diff --git a/website/sass/base.scss b/website/sass/base.scss index 2de6b2e9..dd6f11f0 100644 --- a/website/sass/base.scss +++ b/website/sass/base.scss @@ -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