fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-10-03 21:18:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve responsive design sizing for website

Browse Source
This commit is contained in:
Keavon Chambers
2023-08-14 03:29:40 -07:00
parent c9d3453e46
commit 2412a3def6
25 changed files with 766 additions and 590 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/content/_index.md
+82 -96
View File
@@ -1,21 +1,26 @@
+++
title = "Web-based vector graphics editor and design tool"
template = "section.html" # Avoids needing a separate `index.html` template that's identical to `section.html`
template = "section.html"
[extra]
css = ["/index.css"]
js = ["/image-interaction.js", "/fundraising.js"]
+++
<!-- ▛ LOGO ▜ -->
<section id="logo">
<img src="https://static.graphite.rs/logos/graphite-logotype-color.svg" alt="Graphite Logo" />
</section>
<!-- ▙ LOGO ▟ -->
<img class="pencil-texture" src="https://static.graphite.rs/textures/pencil-texture.png" alt="" />
<!-- ▛ QUICK LINKS ▜ -->
<section id="quick-links">
<a href="#community" class="button arrow">Subscribe to the newsletter</a>
<a href="/donate" class="button arrow">&hearts; Support the mission</a>
<div>
<a href="#community" class="button arrow">Subscribe to the newsletter</a>
<a href="/donate" class="button arrow">&hearts; Support the mission</a>
</div>
<div>
<a href="https://github.com/GraphiteEditor/Graphite" target="_blank">
<img src="https://static.graphite.rs/icons/github.svg" alt="GitHub" />
@@ -26,19 +31,25 @@ js = ["/image-interaction.js", "/fundraising.js"]
<a href="https://twitter.com/graphiteeditor" target="_blank">
<img src="https://static.graphite.rs/icons/twitter.svg" alt="Twitter" />
</a>
<a href="https://www.youtube.com/@GraphiteEditor" target="_blank">
<img src="https://static.graphite.rs/icons/youtube.svg" alt="YouTube" />
</a>
<a href="https://discord.graphite.rs" target="_blank">
<img src="https://static.graphite.rs/icons/discord.svg" alt="Discord" />
</a>
</div>
</section>
<!-- ▙ QUICK LINKS ▟ -->
<!-- -->
<!-- ▛ TAGLINE ▜ -->
<section id="tagline">
<section id="hero-message">
# Redefining state-of-the-art graphics editing
<h1 class="balance-text">Redefining state&#8209;of&#8209;the&#8209;art graphics editing</h1>
<p class="balance-text"><strong>Graphite</strong> is an in-development raster and vector graphics package that's free and open source. It is powered by a node graph compositing engine that fuses layers with nodes, providing a fully nondestructive editing experience.</p>
</section>
<!-- ▙ TAGLINE ▟ -->
<div class="hexagons">
<div>
@@ -52,6 +63,7 @@ js = ["/image-interaction.js", "/fundraising.js"]
</div>
</div>
<!-- ▛ SCREENSHOTS ▜ -->
<section id="screenshots" class="carousel window-size-1" data-carousel>
<div class="carousel-slide">
<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires.png" alt="Graphite UI image #1" data-carousel-image />
@@ -100,10 +112,13 @@ js = ["/image-interaction.js", "/fundraising.js"]
</div>
</section>
<section class="section-row">
<!-- ▙ SCREENSHOTS ▟ -->
<!-- -->
<!-- ▛ TODAY AND TOMORROW ▜ -->
<section id="today-and-tomorrow">
<div class="diptych">
<div id="graphite-today" class="section">
<div class="section">
# Graphite today
@@ -129,7 +144,7 @@ js = ["/image-interaction.js", "/fundraising.js"]
Graphite is a lightweight vector graphics editor that runs in your browser. Its node-based compositor lets you apply image effects and co-create art with generative AI.
</div>
<div id="graphite-tomorrow" class="section">
<div class="section">
# Graphite tomorrow
@@ -158,10 +173,11 @@ Graphite is a lightweight vector graphics editor that runs in your browser. Its
</div>
</section>
<!-- ▙ TODAY AND TOMORROW ▟ -->
<!-- -->
<!-- ▛ COMMUNITY ▜ -->
<section id="community" class="feature-box">
<div class="box">
<section class="section-row">
<div class="diptych">
<div id="newsletter" class="section">
@@ -199,13 +215,10 @@ You'll receive your first newsletter email with the next major Graphite news.
</form>
</div>
<div id="social" class="section">
# Follow along
<!-- High-quality open source software is a community endeavor. Hang out with hundreds of friendly Graphite users and developers. -->
<div class="social-links">
<div class="column">
<a href="https://discord.graphite.rs" target="_blank">
@@ -232,11 +245,12 @@ You'll receive your first newsletter email with the next major Graphite news.
</div>
</div>
</section>
</div>
</section>
<section id="vector-art" class="section-row">
<!-- ▙ COMMUNITY ▟ -->
<!-- -->
<!-- ▛ VECTOR ART ▜ -->
<section id="vector-art">
<div class="section">
# Art takes shape
@@ -245,12 +259,11 @@ Make vector art out of shapes ranging from simple geometric primitives to comple
Style your shapes with strokes, fills, and gradients. Mix your layers with blend modes. Then export as SVG.
<div class="background-video">
<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.mp4" type="video/mp4" />
</video>
</div>
<div class="download-artwork">
<img src="https://static.graphite.rs/content/index/just-a-potted-cactus-thumbnail.png" alt="Vector art of Just of Potted Cactus" />
<p>
@@ -268,44 +281,11 @@ Style your shapes with strokes, fills, and gradients. Mix your layers with blend
</div>
</section>
<!-- <section id="node-graph">
<section id="node-graph-intro" class="section-row">
<div class="section">
# The power of nodes
At Graphite's core is its **node graph**, a compositing engine and artist-friendly visual scripting environment that simplifies laborious steps in your design process.
</div>
</section>
<section id="node-graph-adjustment-layers" class="section-row feature-explainer">
<div class="diptych">
<div class="section">
## Adjust layers with<br />nondestructive effects
Apply effects directly in the layer stack to modify the artwork underneath. Combine them in unique ways by connecting the effect nodes to one another.
- Per-pixel color adjustments: levels, curves, exposure, contrast, saturation
- Image-wide creative filters: blur/sharpen, high pass, flood fill, warp, fresco
- Alpha-aware image styles: color overlay, drop shadow, inner/outer glow
- Effort-saving modifiers: transform, mirror, tile, scatter, linear/radial repeat
- Procedural generators: solid color, gradient, pattern, coherent/white noise
</div>
</div>
</section>
</section> -->
<!-- ▙ VECTOR ART ▟ -->
<!-- -->
<!-- ▛ IMAGINATE ▜ -->
<section id="imaginate">
<section id="imaginate-intro" class="section-row">
<div class="section">
<h1><span class="alternating-text"><span>Co-create</span><span>Ideate</span><span>Illustrate</span><span>Generate</span><span>Iterate</span></span> with Imaginate</h1>
@@ -314,9 +294,6 @@ Apply effects directly in the layer stack to modify the artwork underneath. Comb
<!-- [Learn how](/learn/node-graph/imaginate) it works. -->
</div>
</section>
<section id="imaginate-vector-art" class="section-row feature-explainer">
<div class="diptych">
<div class="section">
@@ -348,7 +325,6 @@ Apply effects directly in the layer stack to modify the artwork underneath. Comb
<blockquote class="balance-text require-polyfill"><strong>Watercolor painting</strong> of a light bulb gleaming with an exclamation mark inside</blockquote>
</div>
<div class="section">
## Work fast, be sloppy
@@ -380,13 +356,14 @@ Apply effects directly in the layer stack to modify the artwork underneath. Comb
</div>
</div>
</section>
</section>
<!-- ▙ IMAGINATE ▟ -->
<!-- -->
<!-- ▛ FUNDRAISING ▜ -->
<section id="fundraising" class="feature-box">
<div class="box">
<div class="section-row">
<div>
<div class="section">
@@ -422,9 +399,42 @@ Graphite is built by a small, dedicated crew of volunteers in need of resources
</div>
</div>
</section>
<!-- ▙ FUNDRAISING ▟ -->
<!-- -->
<!-- ▛ PROCEDURALISM ▜ -->
<section id="proceduralism">
<div class="section">
<section class="section-row">
<div id="disciplines" class="section">
# Powerful proceduralism
The data-driven approach to design affords unique capabilities that are presently in-development.
<div class="informational-group features four-wide">
<div class="informational">
<img class="atlas" style="--atlas-index: 8" 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="informational">
<img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
<span class="balance-text">Infinitely scalable raster content with no pixelation</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
<span class="balance-text">Integrates generative AI models and graphics algorithms</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 11" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
<span class="balance-text">Procedural pipelines for studio production environments</span>
</div>
</div>
</div>
</section>
<!-- ▙ PROCEDURALISM ▟ -->
<!-- -->
<!-- ▛ DISCIPLINES ▜ -->
<section id="disciplines">
<div class="section">
# One app to rule them all
@@ -459,37 +469,10 @@ Stop jumping between programs. Planned features will make Graphite a first-class
</div>
</section>
<section id="vector-art" class="section-row">
<div class="section">
# Powerful proceduralism
The data-driven approach to design affords unique capabilities that are presently in-development.
<div class="informational-group features four-wide">
<div class="informational">
<img class="atlas" style="--atlas-index: 8" 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="informational">
<img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
<span class="balance-text">Infinitely scalable raster content with no pixelation</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
<span class="balance-text">Integrates generative AI models and graphics algorithms</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 11" src="https://static.graphite.rs/icons/icon-atlas-features.png" alt="" />
<span class="balance-text">Procedural pipelines for studio production environments</span>
</div>
</div>
</div>
</section>
<section id="demo-video" class="section-row">
<!-- ▙ DISCIPLINES ▟ -->
<!-- -->
<!-- ▛ DEMO VIDEO ▜ -->
<section id="demo-video">
<div class="section">
<div class="video-embed aspect-16x9">
<iframe width="1280" height="720" src="https://www.youtube.com/embed/JgJvAHQLnXA" title="Graphite Vector Editing: &quot;Commander Basstronaut&quot; Artwork (25x Timelapse)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
@@ -497,7 +480,9 @@ The data-driven approach to design affords unique capabilities that are presentl
<!-- <a href="/blog/mission-statement" class="link arrow">Mission Statement</a> -->
</div>
</section>
<!-- ▙ DEMO VIDEO ▟ -->
<!-- -->
<!-- ▛ GET INVOLVED ▜ -->
<section id="get-involved-box" class="feature-box">
<div class="box">
<div class="diptych">
@@ -518,3 +503,4 @@ The data-driven approach to design affords unique capabilities that are presentl
</div>
</div>
</section>
<!-- ▙ GET INVOLVED ▟ -->