fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-15 14:18:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update the website layout with narrower default width and better typography (#1753)

Browse Source 
- Reduces the default width from 1600px to 1200px of the web page and reduce the size of various elements and text. This fixes the problem that I designed the website assuming everyone is viewing from the same 2560px wide screen as I used to design it, which is a bad assumption. Most websites are around the 1200px mark.
- Removes the use of the EB Garamond font, replacing more headers with a bold Inter instead, leaving only Bona Nova for h1 headers at the tops of pages (except the home page, which might have further revamp soon).
- Adds nice flavor graphics to a redesigned volunteer page.
- Cleans up and organizes the Zola templating code and CSS style sheets.
- Improves image carousel to fade out images when dragged past the start or end.
This commit is contained in:
Keavon Chambers
2024-05-18 01:20:59 -07:00
parent 377b8977b4
commit e39539fa08
29 changed files with 1632 additions and 1420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
website/content/features.md
View File

@@ -6,7 +6,7 @@ css = ["features.css"]
+++
<section>
<div class="section">
<div class="block">
# Graphite features
@@ -21,9 +21,9 @@ Stay tuned for major performance uplifts, a multiplatform native desktop app, an
<div class="diptych">
<div class="section">
<div class="block">
## Layers & nodes: hybrid compositing
## Layers & nodes: hybrid editing
Graphite combines the best ideas from multiple categories of digital content creation software to redefine the workflows of 2D graphics editing. It is influenced by the core editing experience of traditional layer-based raster and vector apps, the nondestructive approaches of VFX compositing programs used by film studios, and the boundless creative possibilities of procedural production tools daily-driven by the 3D industry.
@@ -32,17 +32,17 @@ Classic layer-based image editing is easy to understand, with collapsable folder
The hybrid workflow of Graphite offers a classic tool-centric, layer-based editing experience built around a procedural, node-based compositor. Users can ignore the node graph, use it exclusively, or switch back and forth with the press of a button while creating content. Interacting with the canvas using tools will manipulate the nodes behind the scenes. And the layer panel and node graph provide two equivalent, interchangeable views of the same document structure.
</div>
<div class="section">
<div class="block">
## Raster & vector: sharp at all sizes <span class="status-flag">not fully implemented yet</span>
## Raster & vector: sharp at all sizes
Digital 2D art commonly takes two forms. Raster artwork is made out of pixels which means it can look like anything imaginable, but it becomes blurry or pixelated when upscaling to a higher resolution. Vector artwork is made out of curved shapes which is perfect for some art styles but limiting to others. The magic of vector is that its mathematically-described curves can be enlarged to any size and remain crisp.
Other apps usually focus on just raster or vector, forcing artists to buy and learn both products. Mixing art styles requires shuttling content back and forth between programs. And since picking a raster document resolution is a one-time deal, artists may choose to start really big, resulting in sluggish editing performance and multi-gigabyte documents.
Other apps usually focus on just raster or vector, forcing artists to buy and learn both products. Mixing art styles requires shuttling content back and forth between programs. And since picking a raster document resolution is a one-time deal, artists often choose to start really big, resulting in sluggish editing performance and multi-gigabyte documents.
Graphite reinvents raster rendering so it stays sharp at any scale. Artwork is treated as data, not pixels, and is always redrawn at the current viewing resolution. Zoom the viewport and export images at any size— the document's paint brushes, masks, filters, and effects will all be rendered at the native resolution.
Graphite reinvents raster rendering so it stays sharp at any scale. Artwork is treated as data, not pixels, and is always redrawn at the current viewing resolution. Zoom the viewport and export images at any size— the document's paint brushes, masks, filters, and effects will all be rendered at the current native resolution.
Marrying vector and raster under one roof enables both art forms to complement each other in a cohesive content creation workflow.
Marrying vector and raster under one roof enables both art forms to complement each other in a cohesive content creation workflow. *(Scalable raster compositing is still in-development.)*
</div>
@@ -54,7 +54,7 @@ Marrying vector and raster under one roof enables both art forms to complement e
<div class="diptych">
<div class="section">
<div class="block">
## Powered by Graphene
@@ -63,7 +63,7 @@ Marrying vector and raster under one roof enables both art forms to complement e
<!-- Rust programmers may find the following technical details to be of interest. Graphene node graphs are programs built out of reusable Rust functions using Graphite as a visual "code" editor. New nodes and data types can be implemented by writing custom Rust code with a built-in text editor. `no_std` code also gets compiled to GPU compute shaders using [`rust-gpu`](https://github.com/EmbarkStudios/rust-gpu). Each node is independently pre-compiled by `rustc` into portable WASM binaries and linked at runtime. Groups of nodes may be compiled into one unit of execution, utilizing Rust's zero-cost abstractions and optimizations to run with less overhead. And whole node graphs can be compiled into standalone executables for use outside Graphite. -->
</div>
<div class="section">
<div class="block">
<!-- ## Proudly written in Rust -->
## Written in Rust
@@ -79,265 +79,265 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
</section>
<section>
<div class="section">
<div class="block">
## Roadmap
<div class="roadmap">
<div class="informational-group features">
<div class="feature-icons">
<!-- Pre-Alpha -->
<div class="informational complete heading" title="Began February 2021" data-year="2021">
<div class="feature-icon complete heading" title="Began February 2021" data-year="2021">
<h3>— Pre-Alpha —</h3>
</div>
<div class="informational complete" title="Development Complete">
<div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 1" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Editor systems; basic vector art tools</span>
</div>
<!-- Alpha 1 -->
<div class="informational complete heading" title="Began February 2022" data-year="2022">
<div class="feature-icon complete heading" title="Began February 2022" data-year="2022">
<h3>— Alpha 1 —</h3>
</div>
<div class="informational complete" title="Development Complete">
<div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Better tools; node graph prototyping</span>
</div>
<!-- Alpha 2 -->
<div class="informational complete heading" title="Began February 2023" data-year="2023">
<div class="feature-icon complete heading" title="Began February 2023" data-year="2023">
<h3>— Alpha 2 —</h3>
</div>
<div class="informational complete" title="Development Complete">
<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>
</div>
<!-- Alpha 3 -->
<div class="informational ongoing heading" title="Began February 2024" data-year="2024">
<div class="feature-icon ongoing heading" title="Began February 2024" data-year="2024">
<h3>— Alpha 3 —</h3>
</div>
<div class="informational complete" title="Development Complete">
<div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 3" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Stackable adjustment layers</span>
</div>
<div class="informational ongoing" title="Development Ongoing">
<div class="feature-icon ongoing" title="Development Ongoing">
<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="informational ongoing" title="Development Ongoing">
<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>
</div>
<div class="informational ongoing" title="Development Ongoing">
<div class="feature-icon ongoing" title="Development Ongoing">
<img class="atlas" style="--atlas-index: 8" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Editable nested node subgraphs</span>
</div>
<div class="informational ongoing" title="Development Ongoing">
<div class="feature-icon ongoing" title="Development Ongoing">
<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>
</div>
<div class="informational">
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 51" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Boolean operations for shapes</span>
</div>
<div class="informational">
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 12" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>WebGPU accelerated rendering</span>
</div>
<div class="informational">
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 14" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Adaptive resolution raster rendering</span>
</div>
<div class="informational">
<div class="feature-icon">
<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="informational">
<div class="feature-icon">
<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="informational">
<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>
</div>
<div class="informational">
<div class="feature-icon">
<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="informational">
<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>
</div>
<div class="informational">
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 41" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Timeline with animation channels</span>
</div>
<div class="informational">
<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 spreadsheet</span>
</div>
<div class="informational">
<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="informational">
<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>
</div>
<div class="informational">
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 17" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Stable document format</span>
</div>
<!-- Alpha 4 -->
<div class="informational heading" title="Expected to begin February 2025" data-year="2025">
<div class="feature-icon heading" title="Expected to begin February 2025" data-year="2025">
<h3>— Alpha 4 —</h3>
</div>
<div class="informational">
<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>
</div>
<div class="informational">
<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="informational">
<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="informational">
<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="informational">
<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="informational">
<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="informational">
<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="informational">
<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>
</div>
<div class="informational">
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Hosted compile/render server</span>
</div>
<div class="informational">
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 16" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Code editor for custom nodes</span>
</div>
<!-- Beta -->
<div class="informational heading">
<div class="feature-icon heading">
<h3>— Beta —</h3>
</div>
<div class="informational">
<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="informational">
<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="informational">
<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="informational">
<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="informational">
<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="informational">
<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="informational">
<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>
</div>
<div class="informational">
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 55" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>CMYK and other color spaces</span>
</div>
<div class="informational">
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 34" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Node manager and marketplace</span>
</div>
<div class="informational">
<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="informational">
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 35" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Predictive graph rendering/caching</span>
</div>
<!-- 1.0 Release -->
<div class="informational heading">
<div class="feature-icon heading">
<h3>— 1.0 Release —</h3>
</div>
<div class="informational">
<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="informational">
<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>
</div>
<div class="informational">
<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>
</div>
<div class="informational">
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 32" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>PDF export</span>
</div>
<div class="informational">
<div class="feature-icon">
<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="informational">
<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>
</div>
<div class="informational">
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 37" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Cloud document storage</span>
</div>
<div class="informational">
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 38" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Multiplayer collaborative editing</span>
</div>
<div class="informational">
<div class="feature-icon">
<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="informational">
<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="informational">
<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>
</div>
<div class="informational">
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 42" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Live video compositing</span>
</div>
<div class="informational">
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 43" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Pen and touch-only interaction</span>
</div>
<div class="informational">
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 44" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>iPad app</span>
</div>
<div class="informational">
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 47" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span><em>…and that's all just the beginning…</em></span>
</div>