fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-29 04:08:12 +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 ▟ -->
website/content/about.md
+5 -5
View File
@@ -5,7 +5,7 @@ title = "About Graphite"
css = ["/about.css"]
+++
<section class="section-row">
<section>
<div class="section">
# About Graphite
@@ -15,7 +15,7 @@ Graphite is a community-built, open source software project that is free to use
</div>
</section>
<section class="section-row">
<section>
<div class="section">
## Project
@@ -25,7 +25,7 @@ The idea for Graphite began with a desire to create artwork and edit photos usin
</div>
</section>
<section class="section-row">
<section>
<div class="diptych">
@@ -90,7 +90,7 @@ As an independent community-driven software project, Graphite will always remain
})();
</script> -->
<!-- <section id="opener-message" class="section-row">
<!-- <section id="opener-message">
<div class="section">
## A 2D creative tool made for everyone
@@ -168,7 +168,7 @@ Dennis is a mix between a mathematician and a mad scientist. While still enjoyin
</section>
<section class="section-row">
<section>
<div class="triptych">
website/content/blog/_index.md
+1 -1
View File
@@ -6,7 +6,7 @@ sort_by = "date"
generate_feed = true
+++
<section id="intro" class="section-row">
<section id="intro">
<div class="section">
# Blog
website/content/contact.md
+1 -1
View File
@@ -2,7 +2,7 @@
title = "Contact the team"
+++
<section class="section-row reading-material">
<section class="reading-material">
<div class="section">
# Contact the team
website/content/donate.md
+2 -2
View File
@@ -6,7 +6,7 @@ css = ["/donate.css"]
js = ["/fundraising.js"]
+++
<section class="section-row">
<section>
<div class="section">
# Donate
@@ -18,7 +18,7 @@ js = ["/fundraising.js"]
<section id="fundraising" class="feature-box">
<div class="box">
<div class="section-row">
<div>
<div class="section">
website/content/features.md
+4 -4
View File
@@ -5,7 +5,7 @@ title = "Graphite features"
css = ["/features.css"]
+++
<section class="section-row">
<section>
<div class="section">
# Graphite features
@@ -15,7 +15,7 @@ The current version of Graphite provides tools for designing vector art and grap
</div>
</section>
<section class="section-row">
<section>
<div class="diptych">
@@ -43,7 +43,7 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
</section>
<section class="section-row">
<section>
<div class="diptych">
@@ -76,7 +76,7 @@ Marrying vector and raster under one roof enables both art forms to complement e
</section>
<section class="section-row">
<section>
<div class="section">
## Roadmap
website/content/learn/node-graph/imaginate.md
+1 -1
View File
@@ -5,7 +5,7 @@ title = "Imaginate"
order = 2
+++
<!-- <section id="imaginate-creative-concepts" class="section-row feature-explainer">
<!-- <section id="imaginate-creative-concepts">
<div class="diptych">
<div class="section">
website/content/license.md
+1 -1
View File
@@ -2,7 +2,7 @@
title = "Graphite license"
+++
<section class="section-row reading-material">
<section class="reading-material">
<div class="section">
# Graphite license
website/content/logo.md
+4 -4
View File
@@ -5,7 +5,7 @@ title = "Graphite logo"
css = ["/logo.css"]
+++
<section class="section-row reading-material">
<section class="reading-material">
<div class="section">
# Graphite logo
@@ -48,7 +48,7 @@ Download the complete [logo kit](https://static.graphite.rs/logos/graphite-logo-
<a href="https://static.graphite.rs/logos/graphite-logotype-color-480x1874.png" download>Download (PNG 480x1874)</a>
</div>
<div>
<img src="https://static.graphite.rs/logos/graphite-logo-color.svg" height="160" />
<img src="https://static.graphite.rs/logos/graphite-logo-color.svg" width="160" height="160" />
<span>Graphite Icon (Color)</span>
<a href="https://static.graphite.rs/logos/graphite-logo-color.svg" download>Download (SVG)</a>
<a href="https://static.graphite.rs/logos/graphite-logo-color-240x240.png" download>Download (PNG 240x240)</a>
@@ -67,7 +67,7 @@ Download the complete [logo kit](https://static.graphite.rs/logos/graphite-logo-
<a href="https://static.graphite.rs/logos/graphite-logotype-solid-480x1874.png" download>Download (PNG 480x1874)</a>
</div>
<div>
<img src="https://static.graphite.rs/logos/graphite-logo-solid.svg" height="160" />
<img src="https://static.graphite.rs/logos/graphite-logo-solid.svg" width="160" height="160" />
<span>Graphite Icon (Solid)</span>
<a href="https://static.graphite.rs/logos/graphite-logo-solid.svg" download>Download (SVG)</a>
<a href="https://static.graphite.rs/logos/graphite-logo-solid-240x240.png" download>Download (PNG 240x240)</a>
@@ -86,7 +86,7 @@ Download the complete [logo kit](https://static.graphite.rs/logos/graphite-logo-
<a href="https://static.graphite.rs/logos/graphite-logotype-solid-white-480x1874.png" download>Download (PNG 480x1874)</a>
</div>
<div>
<img src="https://static.graphite.rs/logos/graphite-logo-solid-white.svg" height="160" />
<img src="https://static.graphite.rs/logos/graphite-logo-solid-white.svg" width="160" height="160" />
<span>Graphite Icon (Solid, White)</span>
<a href="https://static.graphite.rs/logos/graphite-logo-solid-white.svg" download>Download (SVG)</a>
<a href="https://static.graphite.rs/logos/graphite-logo-solid-white-240x240.png" download>Download (PNG 240x240)</a>
website/content/press.md
+1 -1
View File
@@ -2,7 +2,7 @@
title = "Press resources"
+++
<section class="section-row reading-material">
<section class="reading-material">
<div class="section">
# Press resources
website/content/volunteer/_index.md
+3 -4
View File
@@ -5,7 +5,7 @@ title = "Volunteer"
css = ["/volunteer.css"]
+++
<section class="section-row">
<section>
<div class="section">
# Volunteer
@@ -15,7 +15,7 @@ Graphite is built by volunteers. Join the effort to bring great, free creative s
</div>
</section>
<section class="section-row">
<section>
<div class="diptych">
@@ -36,8 +36,7 @@ Use your artistic talents to plan and produce ambitious open art projects publis
### PUBLICITY TEAM
Become the author of feature announcements, [blog](/blog) posts, website content, the user manual, press releases, social media posts, and industry outreach.
<!-- Become the author of feature announcements, [blog](/blog) posts, website content, the [user manual](/learn), press releases, social media posts, and industry outreach. -->
Become the author of release notes, feature announcements, blog posts, website content, the user manual, press releases, social media posts, and industry outreach.
</div>
website/content/volunteer/guide/codebase-overview/contributing-guidelines.md
+1 -1
View File
@@ -44,4 +44,4 @@ Once you begin writing code, please open a pull request immediately and mark it
Open a new PR as a draft / convert an existing PR to a draft:
![Screenhots showing GitHub's "Create pull request (arrow) > Create draft pull request" and "Still in progress? Convert to draft" buttons](https://static.graphite.rs/content/contribute/draft-pr.png)
![Screenhots showing GitHub's "Create pull request (arrow) > Create draft pull request" and "Still in progress? Convert to draft" buttons](https://static.graphite.rs/content/volunteer/guide/draft-pr.png)