mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2025-07-08 00:05:00 +00:00
Revamp the website
This commit is contained in:
Keavon Chambers
parent
d7546fb183
commit
5d74178f5f
11 changed files with 368 additions and 302 deletions
7
.github/workflows/website.yml
vendored
7
.github/workflows/website.yml
vendored
|
|
@ -13,7 +13,7 @@ on:
|
|||
- website/**
|
||||
env:
|
||||
CARGO_TERM_COLOR: always
|
||||
INDEX_HTML_HEAD_REPLACEMENT: <script defer data-domain="graphite.rs" data-api="/visit/event" src="/visit/script.js"></script>
|
||||
INDEX_HTML_HEAD_INCLUSION: <script defer data-domain="graphite.rs" data-api="/visit/event" src="/visit/script.js"></script>
|
||||
|
||||
jobs:
|
||||
build:
|
||||
|
|
@ -34,9 +34,8 @@ jobs:
|
|||
|
||||
- name: ✂ Replace template in <head> of index.html
|
||||
run: |
|
||||
# Remove the INDEX_HTML_HEAD_REPLACEMENT environment variable for build links (not master deploys)
|
||||
git rev-parse --abbrev-ref HEAD | grep master > /dev/null || export INDEX_HTML_HEAD_REPLACEMENT=""
|
||||
sed -i "s|<!-- INDEX_HTML_HEAD_REPLACEMENT -->|$INDEX_HTML_HEAD_REPLACEMENT|" website/templates/base.html
|
||||
# Remove the INDEX_HTML_HEAD_INCLUSION environment variable for build links (not master deploys)
|
||||
git rev-parse --abbrev-ref HEAD | grep master > /dev/null || export INDEX_HTML_HEAD_INCLUSION=""
|
||||
|
||||
- name: 🌐 Build Graphite website with Zola
|
||||
run: |
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@ js = ["image-interaction.js", "video-embed.js"]
|
|||
<section id="tagline">
|
||||
<div class="block">
|
||||
|
||||
<h1 class="balance-text">Redefining state‑of‑the‑art graphics editing</h1>
|
||||
<h1 class="balance-text">Your <span>procedural</span> toolbox for 2D content creation</h1>
|
||||
|
||||
<p class="balance-text"><strong>Graphite</strong> is an in-development vector and raster graphics editor that's free and open source. It is powered by a node graph compositor that fuses layers with nodes and brings a unique procedural approach to your 2D design workflow.</p>
|
||||
<p class="balance-text">Graphite is a free, open source vector and raster graphics engine, available now in alpha. Get creative with a nondestructive editing workflow that combines layer-based compositing with node-based generative design.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -85,13 +85,12 @@ js = ["image-interaction.js", "video-embed.js"]
|
|||
<!-- ▛ SCREENSHOTS ▜ -->
|
||||
<section id="screenshots" class="carousel window-size-1" data-carousel data-carousel-jostle-hint>
|
||||
<div class="carousel-slide" data-carousel-slide>
|
||||
<!-- Copy of last --><img src="https://static.graphite.rs/content/index/gui-mockup-viewport__5.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-demo-red-dress.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #1" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires__4.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #2" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-demo-procedural-string-lights.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #3" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__5.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #4" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__5.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #5" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<!-- Copy of first --><img src="https://static.graphite.rs/content/index/gui-demo-red-dress.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<!-- Copy of last --><img src="https://static.graphite.rs/content/index/gui-mockup-nodes__6.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-demo-painted-dreams.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-demo-node-graph-valley-of-spires.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-demo-fractal.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__6.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<!-- Copy of first --><img src="https://static.graphite.rs/content/index/gui-demo-painted-dreams.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
|
||||
</div>
|
||||
<div class="carousel-slide torn left" data-carousel-slide-torn-left></div>
|
||||
<div class="carousel-slide torn right" data-carousel-slide-torn-right></div>
|
||||
|
|
@ -107,7 +106,6 @@ js = ["image-interaction.js", "video-embed.js"]
|
|||
<button class="dot" data-carousel-dot></button>
|
||||
<button class="dot" data-carousel-dot></button>
|
||||
<button class="dot" data-carousel-dot></button>
|
||||
<button class="dot" data-carousel-dot></button>
|
||||
<button class="direction next" data-carousel-next>
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20,0C8.95,0,0,8.95,0,20c0,11.05,8.95,20,20,20c11.05,0,20-8.95,20-20C40,8.95,31.05,0,20,0z M20,38c-9.93,0-18-8.07-18-18S10.07,2,20,2s18,8.07,18,18S29.93,38,20,38z" />
|
||||
|
|
@ -116,20 +114,17 @@ js = ["image-interaction.js", "video-embed.js"]
|
|||
</button>
|
||||
</div>
|
||||
<div class="screenshot-description">
|
||||
<p class="active" data-carousel-description>
|
||||
<a href="https://editor.graphite.rs/#demo/red-dress"><em>Red Dress</em></a> — Illustration made with the help of procedurally placing hundreds of circles.
|
||||
<p data-carousel-description class="active">
|
||||
<a href="https://editor.graphite.rs/#demo/painted-dreams"><em>Painted Dreams</em></a> — Made using nondestructive boolean operations and procedural dot patterns
|
||||
</p>
|
||||
<p data-carousel-description>
|
||||
<a href="https://editor.graphite.rs/#demo/valley-of-spires"><em>Valley of Spires</em></a> — Vector art made with the Pen and Gradient tools without touching the node graph.
|
||||
<a href="https://editor.graphite.rs/#demo/valley-of-spires"><em>Valley of Spires</em></a> — The layer stack is represented, under the hood, by a node graph (shown fully expanded)
|
||||
</p>
|
||||
<p data-carousel-description>
|
||||
<a href="https://editor.graphite.rs/#demo/procedural-string-lights"><em>Procedural String Lights</em></a> — 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
|
||||
</p>
|
||||
<p data-carousel-description>
|
||||
Design mockup for the work-in-progress raster editing pipeline. Some of these raster-specific nodes are not implemented yet, but will be soon!
|
||||
</p>
|
||||
<p data-carousel-description>
|
||||
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
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -143,26 +138,26 @@ js = ["image-interaction.js", "video-embed.js"]
|
|||
|
||||
<div class="block">
|
||||
|
||||
# Graphite today <span class="status-flag">public alpha</span>
|
||||
# Graphite today <span>public alpha</span>
|
||||
|
||||
<div class="feature-icons">
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 0" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span>Vector art editing</span>
|
||||
<img class="atlas" style="--atlas-index: 0" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Vector editing tools</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 8" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 8" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Node-based layers</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<!-- TODO: Reenable when Imaginate is properly working again -->
|
||||
<!-- <img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" /> -->
|
||||
<!-- <img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" /> -->
|
||||
<!-- <span>AI-assisted art creation</span> -->
|
||||
<img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Procedural graphic design workflow</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 3" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 3" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Forever free and open source</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -177,19 +172,19 @@ Presently, Graphite is a lightweight offline web app with features primarily ori
|
|||
|
||||
<div class="feature-icons">
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 4" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 4" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>All-in-one creative tool for all things 2D</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 5" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span>Clean, familiar, designer-centric UI</span>
|
||||
<img class="atlas" style="--atlas-index: 5" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Fully-featured raster manipulation</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 7" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span>Multiplatform app for desktop + iPad</span>
|
||||
<img class="atlas" style="--atlas-index: 7" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Windows/Mac/Linux native apps + web</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 6" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 6" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Live collaborative editing</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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.** <small>*(Listed by priority.)*</small>
|
||||
**Stop jumping between programs— planned features will make Graphite a first-class content creation tool for all these disciplines.**
|
||||
|
||||
<div class="feature-icons stacked no-background">
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 12" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 12" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Graphic Design</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 13" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 13" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Image Editing</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 17" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 17" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Motion Graphics</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 14" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 14" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Digital Painting</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 16" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 16" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>VFX Compositing</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Desktop Publishing</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -310,57 +305,66 @@ You'll receive your first newsletter email with the next major Graphite news.
|
|||
</section>
|
||||
<!-- ▙ NEWSLETTER ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ JUMP RIGHT IN ▜ -->
|
||||
<!-- <section id="jump-right-in">
|
||||
<div class="block"> -->
|
||||
|
||||
<!-- # Jump right in -->
|
||||
|
||||
<!-- **Get started with Graphite by following along to a hands-on quickstart tutorial.** -->
|
||||
|
||||
<!-- <div class="video-embed aspect-16x9">
|
||||
<img data-video-embed="7gjUhl_3X10" src="https://static.graphite.rs/content/index/tutorial-1-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite Tutorial 1 - Hands-On Quickstart" />
|
||||
</div> -->
|
||||
|
||||
<!-- </div>
|
||||
</section> -->
|
||||
<!-- ▙ JUMP RIGHT IN ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ PROCEDURALISM ▜ -->
|
||||
<section id="proceduralism">
|
||||
<div class="block">
|
||||
|
||||
# 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.**
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="proceduralism-demo">
|
||||
<div class="block">
|
||||
<section id="proceduralism-red-dress">
|
||||
<div class="diptych">
|
||||
|
||||
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. <a href="https://editor.graphite.rs/#demo/procedural-string-lights">Click here to explore this demo</a> and try dragging the wire layer's points with the Path tool <span style="white-space: nowrap">(<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" style="vertical-align: middle"><polygon fill="#aaa" points="5,0 5,17 10,12 17,12" /><path fill="#78bae5" d="M20.77,14.36c-0.35-0.42-0.98-0.48-1.41-0.13c-1.04,0.87-2.19,1.6-3.36,2.24V16h-6v2.9c-2.88,0.84-5.07,1.1-5.11,1.11c-0.55,0.06-0.94,0.56-0.88,1.11C4.06,21.62,4.5,22,5,22c0.04,0,0.07,0,0.11-0.01c0.17-0.02,2.18-0.26,4.89-1.01V22h6v-3.28c1.6-0.79,3.2-1.75,4.64-2.95C21.06,15.42,21.12,14.78,20.77,14.36z M14,20h-2v-2h2V20z" /></svg>).</span>
|
||||
|
||||
<div class="video-background">
|
||||
<div class="block video-background">
|
||||
<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play>
|
||||
<source src="https://static.graphite.rs/content/blog/2024-01-01-looking-back-on-2023-and-what's-next/christmas-tree-lights.webm" type="video/webm" />
|
||||
<source src="https://static.graphite.rs/content/blog/2024-01-01-looking-back-on-2023-and-what's-next/christmas-tree-lights.mp4" type="video/mp4" />
|
||||
<source src="https://static.graphite.rs/content/index/procedural-demo-red-dress.webm" type="video/webm" />
|
||||
<source src="https://static.graphite.rs/content/index/procedural-demo-red-dress.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
<div class="demo-artwork">
|
||||
<a href="https://editor.graphite.rs/#demo/procedural-string-lights">
|
||||
<img src="https://static.graphite.rs/content/index/procedural-string-lights-thumbnail.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Vector art of Procedural String Lights" />
|
||||
</a>
|
||||
<p>
|
||||
<span>
|
||||
<em>Procedural String Lights</em>
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
<a href="https://editor.graphite.rs/#demo/procedural-string-lights">Open this artwork</a> to<br />explore it yourself.
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<div class="block description">
|
||||
|
||||
<h1 class="feature-box-header balance-text">Explore creative possibilities (without the grunt work)</h1>
|
||||
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
<a href="https://editor.graphite.rs/#demo/procedural-string-lights">Open this artwork</a> and give it a try yourself.
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="proceduralism-leaves">
|
||||
<div class="diptych">
|
||||
|
||||
<div class="block description">
|
||||
|
||||
<h1 class="feature-box-header balance-text">Mix and morph parameters</h1>
|
||||
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
</div>
|
||||
|
||||
<div class="block video-background">
|
||||
<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play>
|
||||
<source src="https://static.graphite.rs/content/index/procedural-demo-leaves.webm" type="video/webm" />
|
||||
<source src="https://static.graphite.rs/content/index/procedural-demo-leaves.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -373,19 +377,19 @@ Graphite's procedural, data-driven approach to graphic design affords unique cap
|
|||
|
||||
<div class="feature-icons four-wide">
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 1" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span class="balance-text">Fully nondestructive editing with node-driven layers</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span class="balance-text">Infinitely scalable raster content with no pixelation</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<span class="balance-text">Versatile modularity of node-based generative AI models</span>
|
||||
<img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span class="balance-text">Modular node-based pipelines for generative AI</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 11" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 1" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span class="balance-text">Fully nondestructive editing with node-driven layers</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 11" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span class="balance-text">Procedural pipelines for studio production environments</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -416,33 +420,29 @@ Graphite is built by a small, dedicated crew of volunteers in need of the resour
|
|||
</div>
|
||||
</section>
|
||||
<!-- ▙ DONATE ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ VECTOR ART ▜ -->
|
||||
<section id="vector-art">
|
||||
<!-- -->
|
||||
<!-- ▛ DIVE IN ▜ -->
|
||||
<section id="dive-in">
|
||||
<div class="block">
|
||||
|
||||
# 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.**
|
||||
|
||||
<p>
|
||||
<center>
|
||||
Make vector art out of shapes ranging from simple geometric primitives to complex Bézier curves.
|
||||
<br />
|
||||
Style shapes with strokes, fills, and gradients. Mix layers with blend modes. Then export as an image or SVG.</center>
|
||||
</p>
|
||||
|
||||
<div class="video-background">
|
||||
<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play>
|
||||
<source src="https://static.graphite.rs/content/index/just-a-potted-cactus-timelapse.webm" type="video/webm" />
|
||||
<source src="https://static.graphite.rs/content/index/just-a-potted-cactus-timelapse.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<div class="video-container">
|
||||
<div class="video-embed aspect-16x9">
|
||||
<img data-video-embed="7gjUhl_3X10" src="https://static.graphite.rs/content/index/tutorial-1-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite Tutorial 1 - Hands-On Quickstart" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Then keep learning with the Graphite manual:
|
||||
|
||||
<a href="/learn" class="button arrow">Keep learning</a>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- ▙ VECTOR ART ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▙ DIVE IN ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ IMAGINATE ▜ -->
|
||||
|
||||
<!-- TODO: Reenable when Imaginate is properly working again -->
|
||||
|
|
@ -529,7 +529,7 @@ Style shapes with strokes, fills, and gradients. Mix layers with blend modes. Th
|
|||
<!-- ▙ IMAGINATE ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ DEMO VIDEO ▜ -->
|
||||
<section id="demo-video">
|
||||
<!-- <section id="demo-video">
|
||||
<div class="block">
|
||||
|
||||
Watch this timelapse showing the process of mixing traditional vector art (tracing a physical sketch and colorizing it, first two minutes) with using Imaginate to generate a background (last 45 seconds).
|
||||
|
|
@ -541,7 +541,7 @@ Watch this timelapse showing the process of mixing traditional vector art (traci
|
|||
(Recorded in an older version of Graphite from early 2023.)
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</section> -->
|
||||
<!-- ▙ DEMO VIDEO ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ RECENT NEWS ▜ -->
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
<div class="demo-artwork">
|
||||
<a href="https://editor.graphite.rs/#demo/isometric-fountain">
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ css = ["features.css"]
|
|||
|
||||
The current alpha version of Graphite is a tool for vector art and graphic design. It also supports a limited, experimental raster editing toolset. All this is built around a central node graph that stores layer data and provides a basic—but continually improving—procedural design and nondestructive editing workflow which is a unique feature among vector editing software.
|
||||
|
||||
Stay tuned for major performance uplifts, a multiplatform native desktop app, and a full suite of raster editing tools being developed throughout 2024.
|
||||
Stay tuned for major performance uplifts, a multiplatform desktop app with native rendering speed, and a full suite of raster editing tools being developed throughout 2024.
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -107,7 +107,7 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
</div>
|
||||
<div class="feature-icon complete" title="Development Complete">
|
||||
<img class="atlas" style="--atlas-index: 6" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Fully node graph-driven documents</span>
|
||||
<span>Node graph integration in documents</span>
|
||||
</div>
|
||||
<!-- Alpha 3 -->
|
||||
<div class="feature-icon ongoing heading" title="Began February 2024" data-year="2024">
|
||||
|
|
@ -129,10 +129,14 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
<img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Procedurally alterable vector data</span>
|
||||
</div>
|
||||
<div class="feature-icon ongoing" title="Development Ongoing">
|
||||
<div class="feature-icon complete" title="Development Complete">
|
||||
<img class="atlas" style="--atlas-index: 13" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>New vector 2D renderer (with <a target="_blank" href="https://github.com/linebender/vello">Vello</a>)</span>
|
||||
</div>
|
||||
<div class="feature-icon ongoing" title="Development Ongoing">
|
||||
<img class="atlas" style="--atlas-index: 26" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Interactive graph auto-layout</span>
|
||||
</div>
|
||||
<div class="feature-icon ongoing" title="Development Ongoing">
|
||||
<img class="atlas" style="--atlas-index: 0" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Imaginate (Stable Diffusion node/tool)</span>
|
||||
|
|
@ -141,21 +145,13 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
<img class="atlas" style="--atlas-index: 12" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>GPU-accelerated raster rendering</span>
|
||||
</div>
|
||||
<div class="feature-icon ongoing" title="Development Ongoing">
|
||||
<img class="atlas" style="--atlas-index: 19" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Imported RAW photo processing</span>
|
||||
</div>
|
||||
<div class="feature-icon ongoing" title="Development Ongoing">
|
||||
<img class="atlas" style="--atlas-index: 26" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Interactive graph auto-layout</span>
|
||||
</div>
|
||||
<div class="feature-icon ongoing" title="Development Ongoing">
|
||||
<img class="atlas" style="--atlas-index: 14" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Adaptive resolution system</span>
|
||||
<span>Infinitely zoomable/panable content</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Graph data attribute spreadsheets</span>
|
||||
<div class="feature-icon ongoing" title="Development Ongoing">
|
||||
<img class="atlas" style="--atlas-index: 19" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Raw photo processing</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 41" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
|
|
@ -163,19 +159,23 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 7" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Native desktop app (with <a target="_blank" href="https://tauri.app/">Tauri</a>)</span>
|
||||
<span>Lightweight desktop app (with <a target="_blank" href="https://tauri.app/">Tauri</a>)</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 54" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Local file browser for saving/loading</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 5" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Fully-supported brush tool</span>
|
||||
<img class="atlas" style="--atlas-index: 53" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Local fonts access</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 21" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Select mode (marquee masking)</span>
|
||||
<img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Graph data attribute spreadsheets</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 5" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Fully functional brush tool</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 17" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
|
|
@ -186,40 +186,40 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
<h3>— Alpha 4 —</h3>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 49" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>AI nodes and tools (e.g. magic wand)</span>
|
||||
<img class="atlas" style="--atlas-index: 56" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Variable color swatches</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 53" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Local fonts access</span>
|
||||
<img class="atlas" style="--atlas-index: 21" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Select mode (marquee masking)</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 52" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Command palette and context menus</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 24" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Reconfigurable workspace panels</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 4" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Outliner panel (node graph tree view)</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 56" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Variable color swatches</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 48" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Mesh vector format</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 50" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Shape builder tool</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 48" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Mesh vector format</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 28" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Guide mode (construction geometry)</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 29" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>CAD-like constraint relationships</span>
|
||||
<img class="atlas" style="--atlas-index: 49" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>AI nodes and tools (e.g. magic wand)</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
|
|
@ -233,30 +233,26 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
<div class="feature-icon heading">
|
||||
<h3>— Beta —</h3>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 18" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Document history management</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 23" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Internationalization and accessibility</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 18" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Document history management</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 22" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Frozen-in-time graph references</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 25" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Liquify and non-affine rendering</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 24" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Reconfigurable workspace panels</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 27" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Automation and batch processing</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 25" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Liquify and non-affine transforms</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 33" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>HDR and WCG color handling</span>
|
||||
|
|
@ -270,8 +266,8 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
<span>Asset libraries and marketplace</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 45" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Portable, embeddable render engine</span>
|
||||
<img class="atlas" style="--atlas-index: 31" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Advanced typography and typesetting</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 35" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
|
|
@ -281,17 +277,21 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
<div class="feature-icon heading">
|
||||
<h3>— 1.0 Release —</h3>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 40" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Fully native UI rewrite (with <a target="_blank" href="https://github.com/linebender/xilem">Xilem</a>)</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 20" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Procedural styling of paint brushes</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 30" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Constraint models for UI layouts</span>
|
||||
<img class="atlas" style="--atlas-index: 29" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>CAD-like constraint relationships</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 31" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Advanced typography and typesetting</span>
|
||||
<img class="atlas" style="--atlas-index: 30" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Responsive design constraint solvers</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 32" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
|
|
@ -301,6 +301,10 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
<img class="atlas" style="--atlas-index: 11" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Finer-grain control over SVG export</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 45" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Portable, embeddable render engine</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 36" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Distributed graph rendering</span>
|
||||
|
|
@ -317,10 +321,6 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
<img class="atlas" style="--atlas-index: 39" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Offline edit resolution with CRDTs</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 40" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>Native UI rewrite (no HTML frontend)</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 46" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<span>SVG animation authorship</span>
|
||||
|
|
|
|||
|
|
@ -19,10 +19,10 @@ css = ["volunteer.css"]
|
|||
|
||||
## Code contributions
|
||||
|
||||
<div class="info-box">
|
||||
<div class="feature-box-narrow">
|
||||
|
||||
<a href="/volunteer/guide">
|
||||
<img src="https://static.graphite.rs/content/volunteer/code-contributions.avif" style="aspect-ratio: 3/1 auto; background: var(--color-seaside)" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.jpg')" alt="Flavor graphic depicting a library of knowledge in a digital realm" />
|
||||
<img src="https://static.graphite.rs/content/volunteer/code-contributions.avif" class="feature-box-full-image" style="aspect-ratio: 3/1 auto; background: var(--color-seaside)" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.jpg')" alt="Flavor graphic depicting a library of knowledge in a digital realm" />
|
||||
</a>
|
||||
|
||||
**Get started by reading the contributor guide:**
|
||||
|
|
@ -33,14 +33,14 @@ css = ["volunteer.css"]
|
|||
|
||||
<div class="diptych code-contributions">
|
||||
|
||||
<div class="block info-box">
|
||||
<div class="block feature-box-narrow">
|
||||
|
||||
### 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.
|
||||
|
||||
</div>
|
||||
<div class="block info-box">
|
||||
<div class="block feature-box-narrow">
|
||||
|
||||
### GRAPHENE TEAM
|
||||
|
||||
|
|
@ -56,10 +56,9 @@ The Graphite editor is built much like a game engine, split across user interfac
|
|||
|
||||
## Creative contributions
|
||||
|
||||
<div class="info-box">
|
||||
<div class="feature-box-narrow">
|
||||
|
||||
<a href="https://discord.graphite.rs">
|
||||
<img src="https://static.graphite.rs/content/volunteer/creative-contributions.avif" style="aspect-ratio: 3/1 auto; background: var(--color-lemon)" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.jpg')" alt="Flavor graphic depicting a fountain pen, ink pots, and a book" />
|
||||
<img src="https://static.graphite.rs/content/volunteer/creative-contributions.avif" class="feature-box-full-image" style="aspect-ratio: 3/1 auto; background: var(--color-lemon)" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.jpg')" alt="Flavor graphic depicting a fountain pen, ink pots, and a book" />
|
||||
</a>
|
||||
|
||||
**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
|
|||
|
||||
<div class="diptych creative-contributions">
|
||||
|
||||
<div class="block info-box">
|
||||
<div class="block feature-box-narrow">
|
||||
|
||||
### 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.
|
||||
|
||||
</div>
|
||||
<div class="block info-box">
|
||||
<div class="block feature-box-narrow">
|
||||
|
||||
### MARKETING TEAM
|
||||
|
||||
|
|
@ -93,11 +92,9 @@ Help write, edit, and design content for this website, social media, newsletters
|
|||
|
||||
## User contributions
|
||||
|
||||
<div class="info-box">
|
||||
<div class="feature-box-narrow">
|
||||
|
||||
<a href="/volunteer/guide">
|
||||
<img src="https://files.keavon.com/-/KosherGregariousBluefish/qa_testing.png" style="aspect-ratio: 3/1 auto; background: var(--color-lilac)" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.jpg')" alt="Flavor graphic depicting a library of knowledge in a digital realm" />
|
||||
</a>
|
||||
<img src="https://static.graphite.rs/content/volunteer/user-contributions.avif" class="feature-box-full-image" style="aspect-ratio: 3/1 auto; background: var(--color-lilac)" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.jpg')" alt="Flavor graphic depicting a magnifying glass on the search for a software bug" />
|
||||
|
||||
**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
|
|||
|
||||
<div class="diptych user-contributions">
|
||||
|
||||
<div class="block info-box">
|
||||
<div class="block feature-box-narrow">
|
||||
|
||||
### 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.
|
||||
|
||||
</div>
|
||||
<div class="block info-box">
|
||||
<div class="block feature-box-narrow">
|
||||
|
||||
### NODES TEAM
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Bezier-rs Interactive Documentation</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<link rel="preconnect" href="https://rsms.me/">
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bona+Nova:wght@700&family=EB+Garamond:ital,wght@0,500;1,500&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>JavaScript is required</noscript>
|
||||
<script type="module" src="src/main.ts"></script>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Bezier-rs Interactive Documentation</title>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bona+Nova:wght@700&family=Inter:wght@500&display=swap" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<noscript>JavaScript is required</noscript>
|
||||
<script type="module" src="src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ function renderExamples() {
|
|||
window.document.body.innerHTML = `
|
||||
<h1 class="website-header">Bezier-rs Interactive Documentation</h1>
|
||||
<p class="website-description">
|
||||
This is the interactive documentation for the <a href="https://crates.io/crates/bezier-rs"><b>Bezier-rs</b></a> library. View the
|
||||
This is the interactive documentation for the <a href="https://crates.io/crates/bezier-rs">Bezier-rs</a> library. View the
|
||||
<a href="https://docs.rs/bezier-rs/latest/bezier_rs">crate documentation</a>
|
||||
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.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,46 +4,44 @@
|
|||
<head>
|
||||
{%- block head -%}{%- endblock head -%}
|
||||
{%- set page = page | default(value = section | default(value = false)) -%}
|
||||
<meta charset="utf-8">
|
||||
<meta charset="utf-8" />
|
||||
<title>Graphite | {{ title | safe }}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1" />
|
||||
{% if current_path -%}
|
||||
<meta property="og:url" content="https://graphite.rs{{ current_path | safe }}">
|
||||
<meta property="og:url" content="https://graphite.rs{{ current_path | safe }}" />
|
||||
{%- endif %}
|
||||
{% if meta_description -%}
|
||||
<meta name="description" content="{{ meta_description | safe }}">
|
||||
<meta name="description" content="{{ meta_description | safe }}" />
|
||||
<meta property="og:description" content="{{ meta_description | safe }}" />
|
||||
<meta name="twitter:description" content="{{ meta_description | safe }}" />
|
||||
{%- endif %}
|
||||
<meta property="og:image" content="{{ meta_image | default(value = 'https://static.graphite.rs/logos/splash.png' | safe) | safe }}">
|
||||
<meta property="og:image" content="{{ meta_image | default(value = 'https://static.graphite.rs/logos/splash.png' | safe) | safe }}" />
|
||||
<meta name="twitter:image" content="{{ meta_image | default(value = 'https://static.graphite.rs/logos/splash.png' | safe) | safe }}" />
|
||||
<meta property="og:title" content="{{ meta_title | default(value = title | safe) | safe }}">
|
||||
<meta property="og:title" content="{{ meta_title | default(value = title | safe) | safe }}" />
|
||||
<meta name="twitter:title" content="{{ meta_title | default(value = title | safe) | safe }}" />
|
||||
<meta property="og:type" content="{% if meta_article_type %}article{% else %}website{% endif %}" />
|
||||
<meta property="og:site_name" content="Graphite" />
|
||||
<meta name="twitter:site" content="@GraphiteEditor" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
{% block rss -%}
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path = 'blog/rss.xml', trailing_slash = false) | safe }}">
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path = 'blog/rss.xml', trailing_slash = false) | safe }}" />
|
||||
{%- endblock %}
|
||||
<link rel="preconnect" href="https://rsms.me/">
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bona+Nova:wght@700&family=EB+Garamond:ital,wght@0,500;1,500&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/base.css">
|
||||
<link rel="stylesheet" href="/syntax-highlighting.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bona+Nova:wght@700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="/base.css" />
|
||||
<link rel="stylesheet" href="/syntax-highlighting.css" />
|
||||
{%- set extra_css = page.extra.css | default(value = []) | concat(with = css | default(value = [])) -%}
|
||||
{% for css_path in extra_css %}
|
||||
<link rel="stylesheet" href="/{{ css_path | safe }}">
|
||||
{% endfor %}
|
||||
<link rel="stylesheet" href="/{{ css_path | safe }}" />
|
||||
{%- endfor %}
|
||||
{%- set extra_js = page.extra.js | default(value = []) | concat(with = js | default(value = [])) -%}
|
||||
{% for js_path in extra_js %}
|
||||
<script src="/js/{{ js_path | safe }}"></script>
|
||||
{% endfor %}
|
||||
{%- endfor %}
|
||||
<script src="/js/text-justification.js"></script>
|
||||
<script src="/js/navbar.js"></script>
|
||||
<!-- INDEX_HTML_HEAD_REPLACEMENT -->
|
||||
{{- get_env(name = "INDEX_HTML_HEAD_INCLUSION", default = "") }}
|
||||
<style>
|
||||
.balance-text {
|
||||
visibility: hidden;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue