Add website revisions and many new pages
This commit is contained in:
Keavon Chambers
parent
2f6722fb40
commit
d4f62ba01d
|
|
@ -4,13 +4,13 @@ base_url = "https://graphite.rs"
|
|||
# Whether to automatically compile all Sass files in the sass directory
|
||||
compile_sass = true
|
||||
|
||||
# Whether to build a search index to be used later on by a JavaScript library
|
||||
build_search_index = true
|
||||
feed_filename = "rss.xml"
|
||||
|
||||
[markdown]
|
||||
# Whether to do syntax highlighting
|
||||
# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
|
||||
highlight_code = true
|
||||
highlight_theme = "css"
|
||||
|
||||
[extra]
|
||||
# Put all your custom variables here
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
+++
|
||||
title = "Announcing Graphite alpha"
|
||||
date = 2021-02-12
|
||||
|
||||
[extra]
|
||||
banner = "https://static.graphite.rs/content/blog/2022-02-12-announcing-graphite-alpha.png"
|
||||
author = "Keavon Chambers"
|
||||
+++
|
||||
|
||||
The Graphite open source team is excited to announce the release of the alpha version of our next-generation graphics editor. This is the culmination of one year of development by our passionate and dedicated community. The alpha release, a minimum viable product vector editor web app, completes the first chapter for our project. We can't wait to now forge ahead towards additional milestones as we build a node-based procedural workflow, raster graphics compositing, a native desktop client, and further ambitions.
|
||||
|
||||
<!-- more -->
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
+++
|
||||
title = "Graphite: a vision for the future of 2D content creation"
|
||||
date = 2021-03-12
|
||||
|
||||
[extra]
|
||||
banner = "https://static.graphite.rs/content/blog/2022-03-12-the-vision-behind-graphite.png"
|
||||
author = "Keavon Chambers"
|
||||
+++
|
||||
|
||||
Graphite is an open source, cross-platform digital content creation desktop and web application for 2D graphics editing, photo processing, vector art, digital painting, illustration, data visualization, compositing, and more. Inspired by the open source success of Blender in the 3D domain, it aims to bring 2D content creation to new heights with efficient workflows influenced by Photoshop/Gimp and Illustrator/Inkscape and backed by a powerful node-based, nondestructive approach proven by Houdini and Substance.
|
||||
|
||||
The user experience of Graphite is of central importance, offering a meticulously-designed UI catering towards an intuitive and efficient artistic process. Users may draw and edit in the traditional interactive (WYSIWYG) viewport with the Layer Tree panel or jump in or out of the node graph at any time to tweak previous work and construct powerful procedural image generators that seamlessly sync with the interactive viewport. A core principle of the application is its 100% nondestructive workflow that is resolution-agnostic, meaning that raster-style image editing can be infinitely zoomed and scaled to arbitrary resolutions at a later time because editing is done by recording brush strokes, vector shapes, and other manipulations parametrically.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
One might use the painting tools on a small laptop display, zoom into specific areas to add detail to finish the artwork, then perhaps try changing the simulated brush style from a blunt pencil to a soft acrylic paintbrush after-the-fact, and finally export the complete drawing at ultra high resolution for printing on a large poster.
|
||||
|
||||
On the surface, Graphite is an artistic medium for drawing anything imaginable— under the hood, the node graph in Graphite powers procedural graphics and parametric rendering to produce unique artwork and automated data-driven visualizations. Graphite brings together artistic workflows and empowers your creativity in a free, open source package that feels familiar but lets you delve further.
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
+++
|
||||
title = "Blog"
|
||||
template = "blog.html"
|
||||
sort_by = "date"
|
||||
page_template = "article.html"
|
||||
generate_feed = true
|
||||
+++
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
+++
|
||||
title = "Contact the team"
|
||||
template = "page.html"
|
||||
+++
|
||||
|
||||
* Members of the press, please see the [press resources](/press) page.
|
||||
* For general discussions, reach out on [Discord](https://discord.graphite.rs) or [Reddit](https://www.reddit.com/r/graphite/).
|
||||
* To report a bug or request a feature, please [file an issue](https://github.com/GraphiteEditor/Graphite/issues/new) on GitHub.
|
||||
* For other inquiries, please get in touch by email at <contact@graphite.rs>.
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
+++
|
||||
title = "Contribute to Graphite"
|
||||
template = "page.html"
|
||||
+++
|
||||
|
||||
It's great to hear you are interested in contributing to Graphite! We want to make it as easy and frictionless as possible for you to get started. Here are the basics.
|
||||
|
||||
## Building and running the codebase
|
||||
|
||||
Graphite is built with Rust and web technologies. Download and install the latest LTS version of [Node.js](https://nodejs.org/) and stable release of [Rust](https://www.rust-lang.org/). On Windows, Rust requires the MSVC toolchain properly configured with the Visual Studio Build Tools installed on your machine including the "Desktop development with C++" workload. **If you are having issues building,** you might have skipped this step or you may have outdated Node.js or Rust versions (compare `node --version` and `rustc --version` against the versions listed in the links above, use `rustup update` to upgrade Rust).
|
||||
|
||||
After cloning the project, acquire the required Node.js packages:
|
||||
```
|
||||
cd frontend && npm install
|
||||
```
|
||||
(Rust's cargo packages will be acquired automatically when building.) One dependency in the build chain, `wasm-pack`, will be installed automatically on your system when the npm packages are installing. If you prefer to install this manually, you can get it from the [wasm-pack website](https://rustwasm.github.io/wasm-pack/), then install dependencies with `npm install --no-optional`. **This is necessary on Apple Silicon/M1 Macs** until [this bug](https://github.com/rustwasm/wasm-pack/issues/952) is fixed.
|
||||
|
||||
To run the project while developing:
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
This spins up the dev server on `localhost:8080` with a file watcher that performs hot reloading of the web page. You should be able to start the server, edit and save web and Rust code, and rarely have to kill the server (by hitting <kbd>Ctrl</kbd><kbd>C</kbd> twice). You sometimes may need to reload the web page if the hot reloading didn't behave perfectly.
|
||||
|
||||
While developing Rust code, `cargo check` and `cargo clippy` may be run from the root directory. You can also use `npm run lint`/`npm run lint-no-fix` to solve web code formatting and `cargo fmt` for Rust code formatting. If you don't use VS Code and its format-on-save feature, please remember or format before committing or consider [setting up a `pre-commit` hook](https://githooks.com/) to do that automatically.
|
||||
|
||||
We provide default configurations for VS Code users. When you open the project, watch for a prompt to install the project's suggested extensions. They will provide helpful web and Rust tooling. If you use a different IDE, you won't get default configurations for the project out of the box, so please remember to format your code and check CI for errors.
|
||||
|
||||
## Task board
|
||||
|
||||
Visit our [**task board**](https://github.com/GraphiteEditor/Graphite/projects/1) board and look through the current sprint's column. You are also welcome to work on tasks prioritized for upcoming sprints. Find any issues with the green "Available" tag.
|
||||
|
||||
Pay attention to the tags which provide some useful information like which ones are a [**Good First Issue**](https://github.com/GraphiteEditor/Graphite/issues?q=is%3Aissue+is%3Aopen+label%3AAvailable+label%3A%22Good+First+Issue%22+) and whether they involve [**only Rust**](https://github.com/GraphiteEditor/Graphite/issues?q=is%3Aissue+is%3Aopen+label%3ARust+label%3AAvailable+-label%3AWeb+), [**only Web**](https://github.com/GraphiteEditor/Graphite/issues?q=is%3Aissue+is%3Aopen+label%3AWeb+label%3AAvailable+-label%3ARust+) (HTML/CSS/TypeScript/Vue.js), or [**both**](https://github.com/GraphiteEditor/Graphite/issues?q=is%3Aissue+is%3Aopen+label%3AAvailable+label%3ARust+label%3AWeb+). Feel free to pick whatever task interests you, then comment on the issue that you would like to start. After commenting, you can dig in right away, then we will assign the issue to your GitHub user to keep the status of things organized.
|
||||
|
||||
## Mentorship
|
||||
|
||||
Join the [project's Discord server](https://discord.graphite.design) then hop on the `#development` channel and ping @Keavon and @TrueDoctor. We would be delighted to help you get started with in-depth explanations of the code, one-on-one mentorship and pair programming. This is very valuable and not at all an inconvenience to us because it helps you avoid the intimidating step of getting started, so please do not hesitate to reach out right away.
|
||||
|
||||
## Docs
|
||||
|
||||
We have some documentation [here](https://github.com/GraphiteEditor/Graphite/blob/master/docs/README.md). However it could use some improvements and currently isn't a substitute for mentorship described in the section above. If you also want to dig into the code and solidify your understanding by writing documentation, that would be equally valuable to the project!
|
||||
|
||||
## Codebase overview
|
||||
|
||||
The Graphite Editor is built as a web app powered by Vue.js in the frontend and Rust in the backend which is compiled to WebAssembly (wasm) and run in the browser.
|
||||
|
||||
The Editor's frontend web code lives in `/frontend/src` and the backend Rust code lives in `/editor`. The web-based frontend is intended to be semi-temporary and eventually replaceable with a pure-Rust GUI frontend. Therefore, all backend code should be unaware of JavaScript or web concepts and all Editor application logic should be written in Rust not JS.
|
||||
|
||||
### Frontend/backend communication
|
||||
|
||||
Frontend (JS) -> backend (Rust/wasm) communication is achieved through a thin Rust translation layer in `/frontend/wasm/api.rs` which wraps the Editor backend's complex Rust data type API and provides the JS with a simpler API of callable functions. These wrapper functions are compiled by wasm-bindgen into autogenerated JS functions that serve as an entry point into the wasm.
|
||||
|
||||
Backend (Rust) -> frontend (JS) communication happens by sending a queue of messages to the frontend message dispatcher. After the JS calls any wrapper API function to get into backend (Rust) code execution, the Editor's business logic runs and queues up `FrontendMessage`s (defined in `editor/src/frontend/frontend_message_handler.rs`) which get mapped from Rust to JS-friendly data types in `frontend/src/dispatcher/js-messages.ts`. Various JS code subscribes to these messages by calling `subscribeJsMessage(MessageName, (messageData) => { /* callback code */ });`.
|
||||
|
||||
### Editor backend and Graphene modules
|
||||
|
||||
The Graphite Editor backend handles all the day-to-day logic and responsibilities of a user-facing interactive application. Some duties include: user input, GUI state management, viewport tool behavior, layer management and selection, and handling of multiple document tabs.
|
||||
|
||||
The actual document (the artwork data and layers included in a saved `.graphite` file) is part of another core module located in `/graphene`. Graphene manages a document and will grow into the codebase for the full node graph system in the future. While it's OK for the Editor to read data from, or make immutable function calls upon, the Graphene document, it should never be directly mutated. Instead, messages (called Operations) should be sent to the Graphene document to request changes occur. Graphene is designed to be used by the Editor or by third-party Rust or C/C++ code directly so a careful separation of concerns between the Editor and Graphene should be considered.
|
||||
|
||||
### The message bus
|
||||
|
||||
Every part of the Graphite stack works based on the concept of message passing. Messages are pushed to the front or back of a queue and each one is processed by the module's dispatcher in the order encountered. Only the dispatcher owns a mutable reference to update its module's state.
|
||||
|
||||
<details><summary><b>Addition technical details (click to show)</b></summary>
|
||||
|
||||
A message is an enum variant of a certain message sub-type like `FrontendMessage`, `ToolMessage`, `DocumentsMessage` (plural), or `DocumentMessage` (singular). An example is `DocumentMessage::DeleteSelectedLayers` (which carries no data) or `DocumentMessage::RenameLayer(Vec<LayerId>, String)` (which carries a layer path and a string as data).
|
||||
|
||||
Message sub-types hierarchically wrap other message sub-types; for example, `DocumentMessage` is wrapped by `DocumentsMessage` via `DocumentsMessage::Document(DocumentMessage)` (this carries the child message as data), and `EllipseMessage` is wrapped by `ToolMessage` via `ToolMessage::Ellipse(EllipseMessage)` (again, this carries the child message as data). Every message sub-type is wrapped by the top-level `Message`, so the previous example is actually `Message::Tool(ToolMessage::Ellipse(EllipseMessage))`.
|
||||
|
||||
Because this is cumbersome, we have a proc macro `#[child]` that automatically implements the `From` trait on message sub-types and lets you write `DocumentMessage::DeleteSelectedLayers.into()` instead of `Message(DocumentsMessage::Document(DocumentMessage::DeleteSelectedLayers))`.
|
||||
|
||||
</details>
|
||||
|
||||
## Contributing guide
|
||||
|
||||
### Code style
|
||||
|
||||
The Graphite project highly values code quality and accessibility to new contributors. Therefore, please make an effort to make your code readable and well-documented.
|
||||
|
||||
**Naming:** Descriptive variable names, and not abbreviated naming conventions, is encouraged. Prefer to spell out full words most of the time, so `gen_doc_fmt` should be written out as `generate_document_format` instead. This avoids the mental burden of expanding abbreviations into semantic meaning. Monitors are wide enough to display long variable/function names, so descriptive is better than cryptic.
|
||||
|
||||
**Tests:** It's great if you can write tests for your code, especially if it's a tricky stand-alone function. However at the moment, we are prioritizing rapid iteration and will usually accept code without associated unit tests. That stance will change in the near future as we begin focusing more on stability than iteration.
|
||||
|
||||
Additional best practices will be added here soon (when #192 is done). Please ask @Keavon in the mean time.
|
||||
|
||||
### Draft pull requests
|
||||
|
||||
Once you begin writing code, please open a pull request immediately and mark it as a **Draft**. Please push to this on a frequent basis, even if things don't compile or work fully yet. It's very helpful to have your work-in-progress code up on GitHub so the status of your feature is less of a mystery.
|
||||
|
||||
Open a new PR as a draft / Convert an existing PR to a draft:
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 434 B After Width: | Height: | Size: 434 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg viewBox="0 0 105 105" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="#473a3a" d="M104,51.2l-4.5-2.8c0-0.4-0.1-0.8-0.1-1.2l3.8-3.6c0.4-0.4,0.5-0.9,0.4-1.4c-0.1-0.5-0.5-0.9-0.9-1.1l-4.9-1.8c-0.1-0.4-0.2-0.8-0.3-1.2l3.1-4.3c0.3-0.4,0.4-1,0.2-1.4c-0.2-0.5-0.6-0.8-1.1-0.9l-5.2-0.8c-0.2-0.4-0.4-0.7-0.6-1l2.2-4.8c0.2-0.5,0.2-1-0.1-1.5s-0.8-0.7-1.3-0.7L89.4,23c-0.2-0.3-0.5-0.6-0.7-0.9l1.2-5.1c0.1-0.5,0-1-0.4-1.4c-0.4-0.4-0.9-0.5-1.4-0.4l-5.1,1.2c-0.3-0.2-0.6-0.5-0.9-0.7l0.2-5.3c0-0.5-0.2-1-0.7-1.3c-0.4-0.3-1-0.3-1.5-0.1l-4.8,2.2c-0.3-0.2-0.7-0.4-1.1-0.6l-0.8-5.2c-0.1-0.5-0.4-0.9-0.9-1.1C72,4,71.5,4.1,71,4.4l-4.2,3.1c-0.4-0.1-0.8-0.2-1.2-0.3l-1.8-4.9c-0.2-0.5-0.6-0.8-1.1-0.9c-0.5-0.1-1,0.1-1.4,0.4l-3.6,3.8c-0.4,0-0.8-0.1-1.2-0.1L53.8,1c-0.3-0.4-0.8-0.7-1.3-0.7s-1,0.3-1.3,0.7l-2.8,4.5c-0.4,0-0.8,0.1-1.2,0.1l-3.6-3.8c-0.4-0.4-0.9-0.5-1.4-0.4c-0.5,0.1-0.9,0.5-1.1,0.9l-1.8,4.9c-0.4,0.1-0.8,0.2-1.2,0.3L34,4.4c-0.4-0.3-1-0.4-1.4-0.2c-0.5,0.2-0.8,0.6-0.9,1.1l-0.8,5.2c-0.4,0.2-0.7,0.4-1.1,0.6l-4.8-2.2c-0.5-0.2-1-0.2-1.5,0.1c-0.4,0.3-0.7,0.8-0.7,1.3l0.2,5.3c-0.3,0.2-0.6,0.5-0.9,0.7L17,15.1c-0.5-0.1-1,0-1.4,0.4c-0.4,0.4-0.5,0.9-0.4,1.4l1.2,5.1c-0.3,0.3-0.5,0.6-0.7,0.9l-5.3-0.2c-0.5,0-1,0.2-1.3,0.7c-0.3,0.4-0.3,1-0.1,1.5l2.2,4.8c-0.2,0.3-0.4,0.7-0.6,1.1l-5.2,0.8c-0.5,0.1-0.9,0.4-1.1,0.9C4,33,4.1,33.5,4.4,34l3.1,4.3c-0.1,0.4-0.2,0.8-0.3,1.2l-4.9,1.8c-0.5,0.2-0.8,0.6-0.9,1.1c-0.1,0.5,0.1,1,0.4,1.4l3.8,3.6c0,0.4-0.1,0.8-0.1,1.2L1,51.2c-0.4,0.3-0.7,0.8-0.7,1.3s0.3,1,0.7,1.3l4.5,2.8c0,0.4,0.1,0.8,0.1,1.2l-3.8,3.6c-0.4,0.4-0.5,0.9-0.4,1.4c0.1,0.5,0.5,0.9,0.9,1.1l4.9,1.8c0.1,0.4,0.2,0.8,0.3,1.2L4.4,71c-0.3,0.4-0.4,1-0.2,1.4s0.6,0.8,1.1,0.9l5.2,0.8c0.2,0.4,0.4,0.7,0.6,1.1l-2.2,4.8c-0.2,0.5-0.2,1,0.1,1.5c0.3,0.4,0.8,0.7,1.3,0.7l5.3-0.2c0.2,0.3,0.5,0.6,0.7,0.9L15.2,88c-0.1,0.5,0,1,0.4,1.4c0.4,0.4,0.9,0.5,1.4,0.4l5.1-1.2c0.3,0.2,0.6,0.5,0.9,0.7l-0.2,5.3c0,0.5,0.2,1,0.7,1.3s1,0.3,1.5,0.1l4.8-2.2c0.3,0.2,0.7,0.4,1.1,0.6l0.8,5.2c0.1,0.5,0.4,0.9,0.9,1.1c0.5,0.2,1,0.1,1.4-0.2l4.3-3.1c0.4,0.1,0.8,0.2,1.2,0.3l1.8,4.9c0.2,0.5,0.6,0.8,1.1,0.9c0.5,0.1,1-0.1,1.4-0.4l3.6-3.8c0.4,0,0.8,0.1,1.2,0.1l2.8,4.5c0.3,0.4,0.8,0.7,1.3,0.7s1-0.3,1.3-0.7l2.8-4.5c0.4,0,0.8-0.1,1.2-0.1l3.6,3.8c0.4,0.4,0.9,0.5,1.4,0.4c0.5-0.1,0.9-0.5,1.1-0.9l1.8-4.9c0.4-0.1,0.8-0.2,1.2-0.3l4.2,3.1c0.4,0.3,1,0.4,1.5,0.2c0.5-0.2,0.8-0.6,0.9-1.1l0.8-5.2c0.4-0.2,0.7-0.4,1.1-0.6l4.8,2.2c0.5,0.2,1,0.2,1.5-0.1c0.4-0.3,0.7-0.8,0.7-1.3L82,89.4c0.3-0.2,0.6-0.5,0.9-0.7l5.1,1.2c0.5,0.1,1,0,1.4-0.4c0.4-0.4,0.5-0.9,0.4-1.4l-1.2-5.1c0.2-0.3,0.5-0.6,0.7-0.9l5.3,0.2c0.5,0,1-0.2,1.3-0.7c0.3-0.4,0.3-1,0.1-1.5l-2.2-4.8c0.2-0.3,0.4-0.7,0.6-1.1l5.2-0.8c0.5-0.1,0.9-0.4,1.1-0.9s0.1-1-0.2-1.5l-3.1-4.3c0.1-0.4,0.2-0.8,0.3-1.2l4.9-1.8c0.5-0.2,0.8-0.6,0.9-1.1c0.1-0.5-0.1-1-0.4-1.4l-3.8-3.6c0-0.4,0.1-0.8,0.1-1.2l4.5-2.8c0.4-0.3,0.7-0.8,0.7-1.3S104.5,51.5,104,51.2z M73.2,77.6c-1.5-0.3-3,0.7-3.4,2.2L68.3,87c-10.2,4.6-21.8,4.5-31.9-0.2l-1.6-7.3c-0.3-1.5-1.8-2.5-3.4-2.2L25,78.8c-1.2-1.2-2.3-2.5-3.3-3.9H53c0.3,0,0.6-0.1,0.6-0.4V63.4c0-0.3-0.2-0.4-0.6-0.4h-9.2l0-7h9.9c0.9,0,4.8,0.3,6.1,5.3c0.4,1.5,1.3,6.6,1.8,8.2c0.6,1.8,3,5.4,5.5,5.4h16.1c-1.1,1.4-2.3,2.8-3.5,4.1L73.2,77.6z M78.5,84.6c0,1.7-1.4,3.1-3.1,3.1c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1c0,0,0.1,0,0.1,0C77.1,81.5,78.5,82.9,78.5,84.6z M32.4,84.5c0,1.7-1.4,3.1-3.1,3.1c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1c0,0,0.1,0,0.1,0C31.1,81.4,32.4,82.8,32.4,84.5z M14.5,48l6.7-3c1.4-0.6,2.1-2.3,1.4-3.7l-1.4-3.1h5.4v24.4H15.7C14.3,57.9,13.9,52.9,14.5,48z M12.2,40.7c0-1.7,1.4-3.1,3.1-3.1c0,0,0.1,0,0.1,0c1.7,0,3,1.4,3,3.1c0,1.7-1.4,3.1-3.1,3.1C13.5,43.8,12.2,42.4,12.2,40.7z M43.8,45.7l0-7.2h12.9c0.7,0,4.7,0.8,4.7,3.8c0,2.5-3.1,3.4-5.6,3.4H43.8z M81.7,62.8c-2,0.2-4.2-0.8-4.5-2.1c-1.2-6.6-3.1-8-6.2-10.5c3.8-2.4,7.8-6,7.8-10.9c0-5.2-3.6-8.5-6-10.1c-3.4-2.2-7.2-2.7-8.2-2.7H24c5.6-6.3,13.1-10.5,21.4-12.1l4.8,5c1.1,1.1,2.9,1.2,4,0.1l5.4-5.1c11.1,2.1,20.6,8.9,26.2,18.7l-3.7,8.3c-0.6,1.4,0,3.1,1.4,3.8l7.1,3.1c0.2,2.2,0.2,4.4,0.1,6.6h-3.9c-0.4,0-0.6,0.3-0.6,0.6v1.8C86.2,61.7,83.8,62.6,81.7,62.8z M49.2,12.5c0-1.7,1.4-3.1,3.1-3.1c0,0,0.1,0,0.1,0c1.7,0,3,1.4,3,3.1c0,1.7-1.4,3.1-3.1,3.1S49.2,14.3,49.2,12.5z M89.4,43.9c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1c0,0,0.1,0,0.1,0c1.7,0,3,1.4,3,3.1C92.5,42.5,91.1,43.9,89.4,43.9z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,187 @@
|
|||
+++
|
||||
title = "Graphite license"
|
||||
template = "page.html"
|
||||
+++
|
||||
|
||||
Graphite is open source software built by the community. The application is free to use by anyone for any purpose, even commercially. The artwork you produce is solely yours.
|
||||
|
||||
The source code [available on GitHub](https://github.com/GraphiteEditor/Graphite) (including the Graphite editor application, Graphene system, libraries, and other software materials) is provided under the Apache 2.0 license posted below, unless otherwise noted. Artwork, including but not limited to logos, icons, SVG code, branding imagery, and sample art are excluded from this license and held under copyright by their respective owners. Learn about the [Graphite brand](/logo) for more information.
|
||||
|
||||
----
|
||||
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
<http://www.apache.org/licenses/>
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
+++
|
||||
title = "Graphite logo"
|
||||
template = "logo.html"
|
||||
+++
|
||||
|
||||
The Graphite logo is made available for community use. While the software is free and open source, the brand identity is more restrictive. Please be respectful of the Graphite brand by reviewing the usage policy.
|
||||
|
||||
## Usage policy
|
||||
|
||||
The Graphite logo is not part of the software's Apache 2.0 license. Users of the logo must adhere to the usage policy:
|
||||
|
||||
1. Do not use the Graphite logo as your own. It should not be used as your primary, or most visually prominent, branding. Your usage should not imply that it's a part of the official Graphite project, nor that it's endorsed or affiliated.
|
||||
2. Only use the logo when talking about, describing, referencing, or crediting the official Graphite project or software. If used as a hyperlink, it should point only to <https://graphite.rs>.
|
||||
3. Do not modify the logo. Only the solid-colored version may be recolored if necessary, but this is discouraged.
|
||||
4. Commercial use of the logo (for example, merchandise sales) is not allowed without permission.
|
||||
|
||||
If in doubt, please send an email to <contact@graphite.rs> for permission.
|
||||
|
||||
## Download
|
||||
|
||||
Download the complete [logo kit](https://static.graphite.rs/logos/graphite-logo-kit.zip) or a specific version in PNG or SVG format below.
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
+++
|
||||
title = "Press resources"
|
||||
template = "page.html"
|
||||
+++
|
||||
|
||||
This page provides materials for members of the press and anyone looking to share Graphite with their audiences.
|
||||
|
||||
## Contact
|
||||
|
||||
Please get in touch if you'd like to conduct an interview, get any questions answered, or anything else. Send an email to <contact@graphite.rs> and you can usually expect a quick reply.
|
||||
|
||||
## Logo
|
||||
|
||||
Logos in PNG and SVG format are available for use in articles talking about Graphite. See the [logo](/logo) page for downloads.
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
#article {
|
||||
max-width: 800px;
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
.publication {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin-top: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: calc(40px - 20px);
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -13,7 +13,9 @@
|
|||
--font-size-intro-body: 22px;
|
||||
--font-size-link: 24px;
|
||||
--font-size-heading: 40px;
|
||||
--font-size-subheading: 24px;
|
||||
--font-size-body: 18px;
|
||||
--border-thickness: 2px;
|
||||
|
||||
@media screen and (max-width: 760px) {
|
||||
--font-size-intro-heading: 40px;
|
||||
|
|
@ -29,6 +31,7 @@
|
|||
--font-size-link: 16px;
|
||||
--font-size-heading: 28px;
|
||||
--font-size-body: 16px;
|
||||
--border-thickness: 1px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
|
|
@ -59,35 +62,9 @@ a {
|
|||
color: var(--color-crimson);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: "Bona Nova", serif;
|
||||
font-feature-settings: "lnum";
|
||||
line-height: 1.25;
|
||||
font-weight: 700;
|
||||
font-size: var(--font-size-intro-heading);
|
||||
|
||||
~ p {
|
||||
font-size: var(--font-size-intro-body);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: "Bona Nova", serif;
|
||||
font-feature-settings: "lnum";
|
||||
line-height: 1.25;
|
||||
font-weight: 700;
|
||||
font-size: var(--font-size-heading);
|
||||
}
|
||||
|
||||
h3 {
|
||||
h1.box-header {
|
||||
font-family: "Inter", sans-serif;
|
||||
line-height: 1.5;
|
||||
font-size: var(--font-size-link);
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -96,17 +73,33 @@ h3 {
|
|||
white-space: pre;
|
||||
}
|
||||
|
||||
~ .divider {
|
||||
~ hr {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
+ .divider + .diptych,
|
||||
+ .divider + .triptych {
|
||||
+ hr + .diptych,
|
||||
+ hr + .triptych {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
h1.hero {
|
||||
font-size: var(--font-size-intro-heading);
|
||||
|
||||
~ p {
|
||||
font-size: var(--font-size-intro-body);
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: "Bona Nova", serif;
|
||||
font-feature-settings: "lnum";
|
||||
line-height: 1.25;
|
||||
font-weight: 700;
|
||||
font-size: var(--font-size-heading);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: "Bona Nova", serif;
|
||||
font-feature-settings: "lnum";
|
||||
line-height: 1.25;
|
||||
|
|
@ -114,22 +107,74 @@ h4 {
|
|||
font-weight: 400;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-subheading);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
hyphens: auto;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
p ~ p {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
h1 ~ p,
|
||||
h2 ~ p,
|
||||
h4 ~ p,
|
||||
h4 ~ img,
|
||||
h3 ~ p,
|
||||
h1 ~ ol li p,
|
||||
h2 ~ ol li p,
|
||||
h3 ~ ol li p,
|
||||
h1 ~ img,
|
||||
h2 ~ img,
|
||||
h3 ~ img,
|
||||
p ~ h1,
|
||||
p ~ h2,
|
||||
p ~ h3,
|
||||
p ~ details summary,
|
||||
p + .link {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
p + p {
|
||||
margin-top: calc(1em * 1.5);
|
||||
h1 ~ hr {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ol + p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
background: var(--color-fog);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 20px;
|
||||
background: var(--color-navy);
|
||||
color: var(--color-fog);
|
||||
|
||||
code {
|
||||
background: initial;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link {
|
||||
|
|
@ -148,9 +193,9 @@ p + p {
|
|||
.button.button.button.button {
|
||||
color: var(--color-crimson);
|
||||
display: inline-block;
|
||||
border: 2px solid currentColor;
|
||||
border: var(--border-thickness) solid currentColor;
|
||||
height: calc(var(--font-size-link) * 2);
|
||||
line-height: calc(var(--font-size-link) * 2 - 2 * 2px);
|
||||
line-height: calc(var(--font-size-link) * 2 - 2 * var(--border-thickness));
|
||||
font-size: var(--font-size-link);
|
||||
padding: 0 var(--font-size-link);
|
||||
box-sizing: border-box;
|
||||
|
|
@ -164,21 +209,27 @@ p + p {
|
|||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 0 32px;
|
||||
hr {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
hr,
|
||||
.ripple {
|
||||
width: calc(100% - 32px * 2);
|
||||
height: 2px;
|
||||
height: var(--border-thickness);
|
||||
margin: 0 32px;
|
||||
background: currentColor;
|
||||
position: relative;
|
||||
border: none;
|
||||
|
||||
&::before {
|
||||
left: -40px;
|
||||
border-width: 0 0 2px 40px;
|
||||
border-width: 0 0 var(--border-thickness) 40px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: -40px;
|
||||
border-width: 0 40px 2px 0;
|
||||
border-width: 0 40px var(--border-thickness) 0;
|
||||
}
|
||||
|
||||
&::before,
|
||||
|
|
@ -254,7 +305,7 @@ p + p {
|
|||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
|
||||
.section h4 + .graphic {
|
||||
.section h2 + .graphic {
|
||||
margin-top: 20px;
|
||||
|
||||
img {
|
||||
|
|
@ -317,18 +368,16 @@ p + p {
|
|||
padding: 0 40px;
|
||||
color: var(--color-walnut);
|
||||
|
||||
// max-width + (80px + 32px) * 2
|
||||
// var(--max-width) + (80px + 32px) * 2
|
||||
@media screen and (max-width: 1824px) {
|
||||
.divider {
|
||||
&.ripple {
|
||||
width: calc(100% + (40px * 2));
|
||||
margin-left: -40px;
|
||||
margin-right: -40px;
|
||||
}
|
||||
.ripple {
|
||||
width: calc(100% + (40px * 2));
|
||||
margin-left: -40px;
|
||||
margin-right: -40px;
|
||||
}
|
||||
|
||||
&:not(.ripple) {
|
||||
display: none;
|
||||
}
|
||||
hr {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -367,16 +416,15 @@ p + p {
|
|||
height: var(--height);
|
||||
padding-left: var(--button-padding);
|
||||
padding-right: var(--button-padding);
|
||||
line-height: calc(var(--height) - 2 * 2px);
|
||||
line-height: calc(var(--height) - 2 * var(--border-thickness));
|
||||
font-size: var(--nav-font-size);
|
||||
|
||||
&::after {
|
||||
content: " »";
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: var(--height);
|
||||
height: var(--height);
|
||||
|
|
@ -456,25 +504,26 @@ p + p {
|
|||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
.ripple {
|
||||
display: block;
|
||||
background: none;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
--ripple-height: 16px;
|
||||
height: var(--ripple-height);
|
||||
margin-top: calc(-1 * var(--ripple-height) + var(--border-thickness));
|
||||
margin-bottom: calc(-1 * var(--border-thickness));
|
||||
stroke-width: var(--border-thickness);
|
||||
|
||||
&.ripple {
|
||||
display: block;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
--ripple-height: 16px;
|
||||
height: var(--ripple-height);
|
||||
margin-top: calc(-1 * var(--ripple-height) + 2px);
|
||||
margin-bottom: -2px;
|
||||
stroke-width: 2px;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
@ -505,16 +554,24 @@ p + p {
|
|||
gap: 40px;
|
||||
padding: 40px;
|
||||
padding-top: 0;
|
||||
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 8px 40px;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 760px) {
|
||||
max-width: 440px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
gap: 6px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
#intro {
|
||||
.section {
|
||||
flex: 1 1 100%;
|
||||
|
||||
.left-right-split {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.feed {
|
||||
margin-top: -4px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
.icon {
|
||||
vertical-align: top;
|
||||
width: calc(var(--font-size-link) * 1.5);
|
||||
height: calc(var(--font-size-link) * 1.5);
|
||||
}
|
||||
|
||||
.link {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#articles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 80px;
|
||||
|
||||
|
||||
article {
|
||||
display: flex;
|
||||
gap: 80px;
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
.headline a {
|
||||
text-decoration: none;
|
||||
color: var(--color-navy);
|
||||
}
|
||||
|
||||
.publication {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.summary {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
text-align: justify;
|
||||
hyphens: auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
width: 400px;
|
||||
flex: 0 0 auto;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -27,6 +27,18 @@
|
|||
display: flex;
|
||||
gap: calc(var(--font-size-link) * 0.8);
|
||||
flex-wrap: wrap;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
gap: calc(var(--font-size-link) * 0.8);
|
||||
flex-direction: row;
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#hero-message {
|
||||
|
|
@ -172,7 +184,7 @@
|
|||
height: 16px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
border: 2px solid currentColor;
|
||||
border: var(--border-thickness) solid currentColor;
|
||||
|
||||
&.active {
|
||||
border: none;
|
||||
|
|
@ -205,7 +217,7 @@
|
|||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.divider.divider {
|
||||
hr {
|
||||
width: calc(100% - (32px + 40px) * 2);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
|
@ -320,7 +332,7 @@
|
|||
height: calc(var(--font-size-link) * 2);
|
||||
font-size: calc(var(--font-size-link) * 0.9);
|
||||
color: inherit;
|
||||
border: 2px solid currentColor;
|
||||
border: var(--border-thickness) solid currentColor;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
padding: 0 var(--font-size-link);
|
||||
|
|
@ -380,7 +392,26 @@
|
|||
background-color: var(--color-mustard);
|
||||
color: var(--color-navy);
|
||||
|
||||
a {
|
||||
color: var(--color-crimson);
|
||||
article {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
.headline a {
|
||||
text-decoration: none;
|
||||
color: var(--color-navy);
|
||||
}
|
||||
|
||||
.publication {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.summary {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
.logo-view {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
|
||||
&.logo-view.logo-view {
|
||||
margin-top: 0;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.color {
|
||||
background-color: var(--color-manilla);
|
||||
background-blend-mode: hard-light;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
color: var(--color-fog);
|
||||
background-color: var(--color-navy);
|
||||
background-blend-mode: soft-light;
|
||||
|
||||
a {
|
||||
color: var(--color-mustard);
|
||||
}
|
||||
}
|
||||
|
||||
&.light {
|
||||
background-color: var(--color-fog);
|
||||
background-blend-mode: color-burn;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 80px 160px;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
max-width: calc(100vw - 2 * 80 * var(--variable-px));
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 800;
|
||||
margin-top: 20px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+ h3 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<svg width="280" height="174.379" viewBox="0 0 280 174.379" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M97.072,3.951c28.8,0,54.63,3.968,71.968,10.208V51.748C151.7,58,125.869,61.956,97.072,61.956c-25.158,0-47.9-3.013-65.019-7.952v.033a80.957,80.957,0,0,1-17.815-7.87A134.476,134.476,0,0,0,21.022,59.8c4.956,7.689,6.734,14.423,6.5,14.769-.148.214-1.844-1.992-4.347-5.582-5.8-7-16.811-20.367-19.017-23.775C1.676,41.326,3.091,39.5,3.091,39.5l1.745-3.145a10.642,10.642,0,0,1-.807-3.935c0-8.463,10.9-16.119,28.023-21.635V11.9C49.176,6.981,71.914,3.951,97.072,3.951" transform="translate(66.67 61.101)" fill="#a52b00" />
|
||||
<path d="M23.341,29.761s1.218,1.844-.955,5.812c-1.91,3.507-11.509,17.288-16.6,24.516-2.173,3.688-3.639,5.96-3.754,5.746-.214-.346,1.367-7.212,5.68-15.115,2.634-5.516,5.944-13.369,6.9-17.255A50.462,50.462,0,0,1,1.1,41.369V4.537c12.1,5.1,19.33,11.492,19.33,18.424,0,.231-.016.461-.033.692Z" transform="translate(238.251 70.164)" fill="#a52b00" />
|
||||
<path d="M230.065,99.892s2.914,1.515,0,6.932c-2.569,4.791-16.547,24.467-23.956,34.79-3.013,5.1-5.1,8.3-5.417,8.117-.494-.3.362-8.693,6.141-19.461,4.248-9.467,9.418-23.792,7.426-24.944,0,0-5.8-5.121-15.362-3.408-83.756,40.948-174.049-.708-174.049-.708-.181-.115.132.132,0,0a17.936,17.936,0,0,0-6.4,4.66c-1.893,1.6,6.108,15.526,12.25,24.582,8.018,10.093,10.406,18.688,9.961,19.083-.3.263-3.062-2.667-7.129-7.393-9.6-9.319-27.809-27.085-31.332-31.563-4.017-5.088-1.284-7.244-1.284-7.244L18.921,84.2l.165-.494-6.372-9.22a3.462,3.462,0,0,1-.362-3.227,3.218,3.218,0,0,1,2.42-2.009l10.784-1.828Q26.2,66.139,26.84,64.9L22.329,54.548a3.437,3.437,0,0,1,.247-3.244,3.207,3.207,0,0,1,2.783-1.482l10.916.4c.543-.741,1.136-1.465,1.712-2.173L35.5,36.93a3.4,3.4,0,0,1,.84-3.112,3.114,3.114,0,0,1,3-.889L49.99,35.547c.692-.609,1.383-1.218,2.091-1.811L51.7,22.343a3.338,3.338,0,0,1,1.416-2.881A3.1,3.1,0,0,1,56.23,19.2l9.912,4.709c.807-.461,1.6-.906,2.4-1.35l1.778-11.229a3.268,3.268,0,0,1,1.91-2.536,3.1,3.1,0,0,1,3.112.362L84.2,15.806c.873-.3,1.745-.576,2.634-.84l3.8-10.636a3.225,3.225,0,0,1,2.371-2.107,3.145,3.145,0,0,1,2.98.988l7.442,8.331c.906-.1,1.811-.2,2.717-.263l5.746-9.7a3.125,3.125,0,0,1,5.433,0l5.763,9.7c.906.066,1.811.165,2.7.263l7.459-8.331a3.1,3.1,0,0,1,2.947-.988,3.248,3.248,0,0,1,2.387,2.107l3.787,10.636c.906.263,1.778.543,2.651.84l8.858-6.652a3.083,3.083,0,0,1,3.1-.362,3.287,3.287,0,0,1,1.926,2.536l1.762,11.229c.807.445,1.614.906,2.4,1.35l9.945-4.709a3.076,3.076,0,0,1,3.1.263,3.338,3.338,0,0,1,1.416,2.881l-.379,11.394c.708.593,1.416,1.2,2.091,1.811l10.653-2.618a3.114,3.114,0,0,1,3,.889,3.4,3.4,0,0,1,.84,3.112l-2.5,11.114q.864,1.062,1.729,2.173l10.916-.4a3.171,3.171,0,0,1,2.783,1.482,3.484,3.484,0,0,1,.247,3.244L202.371,64.9c.445.823.873,1.663,1.3,2.519l10.752,1.828a3.213,3.213,0,0,1,2.453,2.009,3.509,3.509,0,0,1-.362,3.227l-6.372,9.22c.2.642.379,1.268.56,1.91Z" transform="translate(48.634)" fill="#f74c00" />
|
||||
<path d="M49.664,25.512V18.976C47.606,16.144,28.293-9.525,4.172,22.3l29.554,2.733s-.181.181-.527.477Z" transform="translate(161.645 100.773)" />
|
||||
<path d="M64.464,79.271C31.254,61.851,30,47.428,30,47.428-6.928,20.557,24.635,5.377,24.635,5.377c-.461,17.14,9.7,26.936,9.7,26.936l.922-30.822C69.5,25.678,40.886,48.432,40.886,48.432c4.116,10.225,28.5,19.725,28.5,19.725Z" transform="translate(11.851 23.058)" fill="#f74c00" />
|
||||
<path d="M8.2,8.873c-7.738,12.513,0,19.758,0,19.758,6.438,9.22,18.045,0,18.045,0,7.1-6.586,0-19.758,0-19.758-9.023-9.879-18.045,0-18.045,0" transform="translate(172.169 69.318)" />
|
||||
<path d="M15.542,11.513c0-3.853-2.272-6.965-5.071-6.965-2.783,0-5.055,3.112-5.055,6.965s2.272,6.965,5.055,6.965c2.8,0,5.071-3.112,5.071-6.965" transform="translate(175.285 70.334)" fill="#fff" />
|
||||
<path d="M12.449,6.021c-14.868,23.067,7,27.282,7,27.282,17.123-1,12.711-18.836,12.711-18.836C27.926-.828,12.449,6.021,12.449,6.021" transform="translate(127.65 69.47)" />
|
||||
<path d="M18.464,11.73c0-3.968-2.338-7.179-5.219-7.179S8.025,7.762,8.025,11.73s2.338,7.179,5.219,7.179,5.219-3.211,5.219-7.179" transform="translate(129.406 70.38)" fill="#fff" />
|
||||
<path d="M83.579,5.767c-2.5,25.553-33.341,37.474-33.341,37.474C21.079,76.45,1.914,53.465,1.914,53.465A36.086,36.086,0,0,0,31.847,38.729C10.262,33.016,2.21,37.709,2.21,37.709,28.044.235,46.27,33.494,46.27,33.494l5.647-1.317C72.021,18.642,75.248,5.767,75.248,5.767Z" transform="translate(164.907 89.185)" fill="#f74c00" />
|
||||
<path d="M0,0H221.315V11.047L97.653,20.453,0,11.047Z" transform="matrix(-0.827, -0.562, 0.562, -0.827, 204.507, 161.529)" fill="#6e96ba" />
|
||||
<rect width="221.315" height="11.047" transform="matrix(-0.827, -0.562, 0.562, -0.827, 210.718, 152.388)" fill="#89a9cc" />
|
||||
<path d="M40.819,31.236,8.449,9.256,2.242,18.394Z" transform="translate(202.264 143.142)" fill="#ccc593" />
|
||||
<path d="M34.612,39.835,2.242,17.854,8.449,8.7Z" transform="translate(208.471 134.543)" fill="#e2ddaf" />
|
||||
<path d="M19.415,23.612,7.774,9.749,5.008,13.832,2.242,17.9Z" transform="translate(223.668 150.766)" fill="#2b2b2b" />
|
||||
<rect width="8.782" height="11.047" transform="translate(27.641 28.034) rotate(-145.774)" fill="#d8d8d8" />
|
||||
<path d="M20.163.743,36.151,11.61l-6.207,9.138L17.809,12.5a4.657,4.657,0,0,1-1.235-6.471Z" transform="translate(-15.767 11.49)" fill="#cea097" />
|
||||
<path d="M25.451,1.1,37.586,9.353l-6.207,9.138L15.391,7.624,18.98,2.339A4.66,4.66,0,0,1,25.451,1.1" transform="translate(-10.995 4.609)" fill="#d8b1a7" />
|
||||
<rect width="8.782" height="11.047" transform="translate(21.431 37.175) rotate(-145.774)" fill="#c1c1c1" />
|
||||
<path d="M47.439,45.875,31.551,38.729C9.965,33.016,1.914,37.709,1.914,37.709,27.747.235,45.99,33.494,45.99,33.494l5.631-1.317C71.725,18.642,74.968,5.767,74.968,5.767H83.3C80.8,31.32,49.958,43.241,49.958,43.241c-.856.971-1.679,1.745-2.519,2.634" transform="translate(165.187 89.185)" fill="#f74c00" />
|
||||
<path d="M24.634,1.727c-.445,17.14,9.7,26.936,9.7,26.936L46.483,38.773a34.625,34.625,0,0,1-5.6,6.01C45.018,55.007,69.4,64.507,69.4,64.507L64.463,75.621C31.253,58.2,30,43.778,30,43.778-6.929,16.908,24.634,1.727,24.634,1.727" transform="translate(11.852 26.708)" fill="#f74c00" />
|
||||
<rect width="280" height="174.378" fill="none" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 6.0 KiB |
|
|
@ -1,11 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="231.228" height="240.004" viewBox="0 0 231.228 240.004">
|
||||
<g id="Logo_Icon" data-name="Logo Icon" transform="translate(0.007 0.004)">
|
||||
<rect id="Rectangle_52" data-name="Rectangle 52" width="231.221" height="240" transform="translate(0 0)" fill="none"/>
|
||||
<path id="Path_54" data-name="Path 54" d="M149.474,6.026a10.475,10.475,0,0,0-8.169-4.72H54.2a10.475,10.475,0,0,0-8.169,4.72L2.477,81.459a10.5,10.5,0,0,0,0,9.429l43.556,75.444a10.465,10.465,0,0,0,8.169,4.71h87.1a10.465,10.465,0,0,0,8.169-4.71l43.556-75.444a10.5,10.5,0,0,0,0-9.429Z" transform="translate(12.232 11.749)" fill="#f1decd"/>
|
||||
<path id="Path_55" data-name="Path 55" d="M73.237,112.684l57.085-32.417L98.2,24.622,84.546.974H8.453Z" transform="translate(76.068 8.76)" fill="#3ea8ff"/>
|
||||
<path id="Path_56" data-name="Path 56" d="M84.836,50.93,56,.974H16.922L4.873,17.693,39.26,77.248l30.847,53.436,45.926-25.718Z" transform="translate(43.849 8.762)" fill="#2180ce"/>
|
||||
<path id="Path_57" data-name="Path 57" d="M69.21,9.294,15.494,35.512,81.788,136.334Z" transform="translate(139.433 83.636)" fill="#deba92"/>
|
||||
<path id="Path_58" data-name="Path 58" d="M57.141,11.606,11.565,37.924l93.582,56.815Z" transform="translate(104.078 104.438)" fill="#d49b64"/>
|
||||
<path id="Path_59" data-name="Path 59" d="M72.991,159.707l-35-60.615a5,5,0,1,1,8.649-5l35,60.615a5,5,0,1,1-8.649,5m158.187,59.275a9.955,9.955,0,0,1-3.05,8.149c-4.19,5.07-22.408,8.879-36.147,10.769A216.3,216.3,0,0,1,164.5,240c-8.629-.09-20.628-2.26-32.037-2.97-16.109-.99-69.444-2.96-87.763-2.9-20.578.08-24.708-1.1-28.2-4.08-1.36-1.15,10.319-7.019,35.027-9.029,60.215-4.91,113.311-5.5,131.419-4.63a86.235,86.235,0,0,1,21.468,3.83l-38.587-27.678a19.952,19.952,0,0,1-10.849,3.32H64.991a20.009,20.009,0,0,1-17.319-10l-45-77.933a20.011,20.011,0,0,1,0-20L47.673,10A20.009,20.009,0,0,1,64.991,0h89.992a20.013,20.013,0,0,1,17.329,10l33.187,57.5,11.8,20.438-.04.02.02.01.03-.03.06.15a2.722,2.722,0,0,1,.11.25,19.993,19.993,0,0,1,2.45,8.089c.03.48,10.319,112.471,11.179,121.86ZM60.772,27.308,116.9,124.54A87.866,87.866,0,0,1,138.305,122l14.769-20.078,24.768-2.75a87.882,87.882,0,0,1,12.889-17.259L157.474,24.3a9.621,9.621,0,0,0-7.489-4.31H69.991a9.618,9.618,0,0,0-7.5,4.33Zm81.813,148.558-30.927-22.178a9.831,9.831,0,0,1-2.79-3.15l-.04.02L49.223,47.316,22.495,93.6a9.636,9.636,0,0,0,0,8.659l40,69.274a9.618,9.618,0,0,0,7.5,4.33Zm63.8-4.26-7.029-70.9a91.359,91.359,0,0,0-11.519,15.789l-24.768,2.75L148.3,139.318a91.516,91.516,0,0,0-19.448,2.09l57.9,41.527a19.214,19.214,0,0,1,19.638-11.329" transform="translate(-0.007 -0.004)" fill="#473a3a"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.6 KiB |
|
|
@ -1,26 +0,0 @@
|
|||
<svg width="936.892" height="240" viewBox="0 0 936.89 240" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="#473a3a"
|
||||
d="M934.29,139.3c-3.08,2.94-6.82,5.09-10.91,6.27c-3.49,1.06-7.1,1.63-10.74,1.71c-6.08,0.08-11.98-2.06-16.6-6.02c-4.78-4.01-7.49-10.63-8.14-19.86l48.01-6.02c0-8.68-2.58-15.71-7.73-21.08c-5.16-5.37-12.72-8.06-22.7-8.06c-7.19-0.04-14.29,1.57-20.75,4.72c-6.37,3.07-11.75,7.86-15.54,13.83c-3.91,6.08-5.86,13.46-5.86,22.14c0,8.03,1.76,14.98,5.29,20.83c3.41,5.76,8.38,10.44,14.32,13.51c6.21,3.19,13.11,4.81,20.1,4.72c9.01,0,16.14-2.2,21.41-6.59c5.51-4.74,9.78-10.74,12.45-17.5L934.29,139.3z M891.64,99.01c2.28-3.85,5.26-5.78,8.95-5.78c3.79,0,6.48,1.84,8.06,5.53c1.68,4.2,2.59,8.66,2.69,13.18l-23.6,2.93C888.06,108.15,889.37,102.86,891.64,99.01" />
|
||||
<path fill="#473a3a"
|
||||
d="M844.61,151.33c-7.06,0-10.58-4.34-10.58-13.02v-34.5c0-4.34,2.17-6.51,6.51-6.51h14.65v-8.62h-21.16c0-4.12,0.05-8.19,0.16-12.21c0.11-4.01,0.59-11.63,0.91-15.76l-25.49,11.81v16.16h-9.77v8.62h9.77v44.27c0,7.16,2.01,13.02,6.02,17.58c4.01,4.56,9.87,6.83,17.58,6.84c4.07,0.13,8.11-0.71,11.8-2.44c3.03-1.49,5.72-3.6,7.89-6.18c1.98-2.37,3.62-5,4.88-7.81l-2.6-2.6C852.42,149.81,848.59,151.4,844.61,151.33" />
|
||||
<path fill="#473a3a"
|
||||
d="M783.25,154.67c-0.64-2.97-0.91-6-0.81-9.03v-38.9c0-5.21,0.08-9.52,0.24-12.94s0.3-5.94,0.41-7.57l-0.98-0.98l-35.48,16.44l1.63,3.74c1.09-0.4,2.2-0.73,3.34-0.98c0.94-0.21,1.89-0.31,2.85-0.32c0.97-0.07,1.92,0.22,2.69,0.81c0.59,0.54,0.89,1.63,0.9,3.26v37.43c0.08,3.03-0.14,6.05-0.65,9.03c-0.44,2.01-1.2,3.34-2.28,3.99c-1.35,0.73-2.86,1.12-4.39,1.14v3.74h41.5v-3.74c-2.06,0-4.1-0.39-6.02-1.14C784.64,157.85,783.56,156.38,783.25,154.67 M771.04,77.28c3.74,0.07,7.35-1.44,9.93-4.15c2.64-2.59,4.11-6.15,4.07-9.85c0.03-3.72-1.44-7.3-4.07-9.93c-2.56-2.75-6.17-4.29-9.93-4.23c-3.81-0.09-7.48,1.45-10.09,4.23c-2.64,2.63-4.1,6.21-4.07,9.93c0.02,7.75,6.32,14.02,14.07,14C770.98,77.29,771.01,77.29,771.04,77.28" />
|
||||
<path fill="#473a3a"
|
||||
d="M732.15,154.68c-0.64-2.97-0.91-6-0.81-9.03v-39.22c0-7.05-1.57-12.18-4.72-15.38c-3.15-3.2-8.08-4.8-14.81-4.8c-4.06,0.01-8.07,0.84-11.8,2.44c-3.08,1.21-6.03,2.75-8.79,4.57c-3.07,2.01-5.99,4.25-8.71,6.72V61.55c0-5.21,0.08-9.52,0.24-12.94c0.16-3.42,0.3-5.94,0.41-7.57L682.11,40l-35.45,16.42l1.66,3.82c1.09-0.4,2.2-0.73,3.34-0.98c0.94-0.21,1.89-0.32,2.85-0.33c0.96-0.07,1.92,0.22,2.68,0.81c0.6,0.55,0.9,1.63,0.9,3.26v82.63c0.08,3.03-0.14,6.05-0.65,9.03c-0.43,2.01-1.19,3.34-2.28,3.99c-1.35,0.73-2.86,1.12-4.4,1.14v3.74h41.5v-3.74c-2.06,0-4.1-0.38-6.02-1.14c-1.54-0.81-2.62-2.28-2.93-3.99c-0.64-2.97-0.91-6-0.82-9.03v-37.92c2.72-1.87,5.71-3.29,8.87-4.23c2.26-0.61,4.58-0.94,6.92-0.98c3.79,0,6.18,1,7.16,3.01c1.06,2.43,1.56,5.08,1.46,7.73v32.39c0.08,3.03-0.14,6.05-0.65,9.03c-0.43,2.01-1.19,3.34-2.28,3.99c-1.35,0.73-2.86,1.12-4.4,1.14v3.74h41.5v-3.74c-2.06,0-4.1-0.38-6.02-1.14c-1.54-0.81-2.62-2.28-2.93-3.99" />
|
||||
<path fill="#473a3a"
|
||||
d="M624.97,90.71c-4.3-2.92-9.37-4.48-14.57-4.48c-5.74-0.16-11.38,1.43-16.19,4.56c-4.26,2.76-7.67,6.65-9.85,11.23h-0.32c0-3.26,0.12-6.35,0.39-9.49c0.14-2.07,0.38-4.14,0.73-6.18l-0.98-0.98l-33.84,15.68l1.63,3.74c1.49-0.4,3.02-0.62,4.56-0.65c0.97-0.07,1.92,0.22,2.69,0.81c0.6,0.54,0.9,1.63,0.9,3.25v73.9c0.08,3.02-0.14,6.05-0.65,9.03c-0.43,2.01-1.19,3.34-2.28,3.99c-1.35,0.72-2.86,1.11-4.39,1.14V200h43.12v-3.74c-2.46,0.01-4.9-0.38-7.24-1.14c-1.71-0.68-2.96-2.18-3.33-3.99c-0.64-2.97-0.91-6-0.81-9.03v-16.76c1.52,0.22,3.17,0.38,4.96,0.49s3.77,0.16,5.94,0.16c5.18-0.03,10.33-0.8,15.3-2.28c5.21-1.52,10.1-4.01,14.4-7.32c4.5-3.5,8.15-7.98,10.66-13.1c2.71-5.37,4.07-11.96,4.07-19.78c0-7.81-1.36-14.49-4.07-20.02C633.4,98.33,629.66,93.92,624.97,90.71 M608.94,150.61c-3.26,5.04-7.27,7.57-12.04,7.57c-5.21,0-9.33-2.39-12.37-7.16v-43.3c1.7-1.75,3.75-3.11,6.02-3.99c2.03-0.79,4.18-1.2,6.35-1.22c4.77,0,8.79,2.31,12.04,6.92c3.26,4.61,4.88,11.64,4.88,21.08C613.82,138.86,612.19,145.57,608.94,150.61" />
|
||||
<path fill="#473a3a"
|
||||
d="M541.31,150.61c-1.17,0.45-2.41,0.7-3.66,0.73c-1.95,0-3.25-0.68-3.91-2.03c-0.74-1.83-1.07-3.81-0.98-5.78v-35.48c0-12.25-7.16-19.5-19.95-21.8c-8.97-1.62-19.39-1.04-28.28,0.57c-5.06,0.92-10.37,2.79-13.57,5.49v23.95h3.71c0.91-5.48,3.36-10.58,7.07-14.72c3.2-3.81,7.96-5.97,12.94-5.86c3.8,0,6.75,1.11,8.87,3.34c2.12,2.23,3.17,5.89,3.17,10.99v8.63c-13.78,3.69-23.95,7.76-30.52,12.21s-9.85,10.25-9.85,17.42c-0.06,4.5,1.47,8.88,4.31,12.36c2.87,3.58,7.29,5.37,13.27,5.37c4.5-0.01,8.92-1.16,12.86-3.34c4.18-2.27,7.62-5.69,9.93-9.85h0.33c0.95,3.66,3.1,6.9,6.1,9.2c2.87,2.12,6.97,3.17,12.29,3.17c4.71,0.08,9.34-1.19,13.35-3.66c4.15-2.73,7.43-6.6,9.44-11.15l-2.6-2.6C544.39,148.99,542.93,149.96,541.31,150.61 M506.73,146.3c-1.27,1.36-2.72,2.54-4.31,3.5c-1.74,1.05-3.75,1.58-5.78,1.54c-2.11,0.12-4.16-0.75-5.53-2.36c-1.32-1.63-2.02-3.68-1.95-5.78c0.09-1.95,0.5-3.88,1.22-5.7c1.09-2.66,2.82-5.01,5.05-6.84c2.55-2.28,6.32-4.12,11.31-5.53L506.73,146.3z" />
|
||||
<path fill="#473a3a"
|
||||
d="M440.68,91.63c-4.8,1.93-9.07,4.75-11.91,9.87h-0.33c-0.02-2.98,0.11-5.96,0.41-8.92c0.13-2.13,0.37-4.25,0.73-6.35l-0.98-0.98l-33.85,15.79l1.63,3.74c1.49-0.4,3.02-0.62,4.56-0.65c0.97-0.07,1.92,0.22,2.69,0.82c0.59,0.54,0.89,1.63,0.9,3.25v37.44c0.08,3.03-0.14,6.05-0.65,9.03c-0.43,2.01-1.19,3.34-2.28,3.99c-1.35,0.73-2.86,1.12-4.4,1.14v3.74h43.13v-3.74c-2.46,0.01-4.9-0.38-7.24-1.14c-1.71-0.68-2.97-2.18-3.34-3.99c-0.64-2.97-0.91-6-0.82-9.03v-36.29c2.1-1.79,4.53-3.15,7.16-3.99c2.49-0.72,5.06-1.08,7.65-1.06c2.42,0.01,4.78,0.68,6.84,1.95c2.17,1.3,3.71,5.12,4.48,10h4.1V92.3C455.3,89.03,446.61,89.25,440.68,91.63" />
|
||||
<path fill="#473a3a"
|
||||
d="M344.13,115.53c2.68,0.05,5.32,0.57,7.81,1.55c1.73,0.81,2.9,2.6,3.5,5.37c0.72,4.38,1.02,8.82,0.9,13.26c0,3.8-0.04,6.29-0.2,9.22c-0.16,2.93-0.39,4.51-1.58,6.47c-1.63,2.71-4.43,4-7.41,4.59c-2.7,0.57-5.46,0.87-8.22,0.9c-6.29,0-12.7-1.98-16.81-5.14c-5.27-4.05-9.38-11.35-12.04-19.92c-2.4-8.27-3.58-16.84-3.51-25.45c0-14.54,4.01-24.17,9.38-31.43c5.46-7.37,14.61-11.25,25-11.89c4.13-0.21,8.27,0.21,12.28,1.25c3.63,1.12,7.4,2.65,10.43,6.07c3.03,3.42,4.67,7.11,6.85,13.4h3.74v-24.9c-4.86-1.84-9.87-3.25-14.97-4.23c-5.73-1.18-11.56-1.78-17.41-1.79c-8.11-0.06-16.17,1.23-23.85,3.82c-7.23,2.44-13.91,6.25-19.69,11.23c-5.77,5.04-10.36,11.29-13.43,18.31c-3.38,7.91-5.05,16.46-4.88,25.07c0,10.96,2.39,20.57,7.16,28.81c4.6,8.07,11.36,14.7,19.53,19.12c8.5,4.57,18.02,6.89,27.67,6.76c7.53,0.11,15.02-0.97,22.22-3.18c5.71-1.74,11.2-4.14,16.36-7.16c3.26-1.87,6.32-4.08,9.11-6.59c-0.63-2.67-1.01-5.4-1.14-8.14c-0.11-2.61-0.16-5.37-0.16-8.3v-9.44c0-2.82,0.3-4.77,0.9-5.86c0.66-1.12,1.87-1.81,3.17-1.79v-3.74h-40.7V115.53z" />
|
||||
<path fill="#f1decd"
|
||||
d="M205.27,93.21l-43.55-75.43c-1.82-2.78-4.85-4.53-8.17-4.72h-87.1c-3.32,0.19-6.35,1.94-8.17,4.72L14.72,93.21c-1.49,2.97-1.49,6.46,0,9.43l43.56,75.44c1.82,2.78,4.85,4.53,8.17,4.71h87.1c3.32-0.18,6.35-1.93,8.17-4.71l43.56-75.44C206.76,99.67,206.76,96.18,205.27,93.21z" />
|
||||
<polygon fill="#3ea8ff" points="174.28,33.39 160.62,9.74 84.53,9.74 149.31,121.45 206.4,89.03" />
|
||||
<polygon fill="#2180ce" points="128.69,59.7 99.86,9.74 60.78,9.74 48.73,26.46 83.12,86.01 113.96,139.45 159.89,113.73" />
|
||||
<polygon fill="#deba92" points="208.65,92.93 154.93,119.15 221.23,219.97" />
|
||||
<polygon fill="#d49b64" points="161.23,116.05 115.65,142.37 209.23,199.18" />
|
||||
<path fill="#473a3a"
|
||||
d="M231.18,218.98l-0.07-0.69c-0.86-9.39-11.15-121.38-11.18-121.86c-0.23-2.84-1.07-5.6-2.45-8.09c-0.03-0.09-0.07-0.17-0.11-0.25l-0.06-0.15l-0.03,0.03l-0.02-0.01l0.04-0.02L205.5,67.5L172.31,10c-3.58-6.19-10.18-10-17.33-10H64.99c-7.14,0-13.74,3.81-17.32,10l-45,77.93c-3.57,6.19-3.57,13.81,0,20l45,77.93c3.57,6.19,10.17,10,17.32,10h89.99c3.86-0.03,7.63-1.19,10.85-3.32l38.59,27.68c-6.97-2.18-14.18-3.47-21.47-3.83c-18.11-0.87-71.2-0.28-131.42,4.63c-24.71,2.01-36.39,7.88-35.03,9.03c3.49,2.98,7.62,4.16,28.2,4.08c18.32-0.06,71.65,1.91,87.76,2.9c11.41,0.71,23.41,2.88,32.04,2.97c9.2-0.12,18.37-0.82,27.48-2.1c13.74-1.89,31.96-5.7,36.15-10.77C230.34,225.03,231.47,222.02,231.18,218.98z M62.49,24.32c1.67-2.55,4.45-4.16,7.5-4.33h79.99c3.04,0.17,5.81,1.77,7.49,4.31l33.26,57.61c-4.99,5.2-9.32,11-12.89,17.26l-24.77,2.75L138.3,122c-7.21-0.04-14.4,0.82-21.4,2.54L60.77,27.31L62.49,24.32z M69.99,175.86c-3.05-0.17-5.83-1.78-7.5-4.33l-40-69.27c-1.37-2.72-1.37-5.94,0-8.66l26.73-46.28l59.6,103.24l0.04-0.02c0.69,1.24,1.64,2.31,2.79,3.15l30.93,22.18L69.99,175.86z M186.75,182.93l-57.9-41.53c6.39-1.39,12.91-2.09,19.45-2.09l14.77-20.07l24.77-2.75c3.26-5.66,7.13-10.95,11.52-15.79l7.03,70.9C198.07,170.71,190.13,175.29,186.75,182.93z M81.64,154.71c1.49,2.33,0.8,5.42-1.52,6.91c-2.33,1.49-5.42,0.8-6.91-1.52c-0.08-0.12-0.15-0.25-0.22-0.38l-35-60.61c-1.49-2.33-0.8-5.42,1.52-6.91c2.33-1.49,5.42-0.8,6.91,1.52c0.08,0.12,0.15,0.25,0.22,0.38L81.64,154.71z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,6 @@
|
|||
<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="#803847" d="M104,128H24c-13.3,0-24-10.7-24-24V24C0,10.7,10.7,0,24,0h80c13.3,0,24,10.7,24,24v80C128,117.3,117.3,128,104,128z" />
|
||||
<circle fill="#eeeeee" cx="32" cy="96" r="12" />
|
||||
<path fill="#eeeeee" d="M78,108H61c0-22.6-18.4-41-41-41l0,0V50C52,50,78,76,78,108z" />
|
||||
<path fill="#eeeeee" d="M90.4,108c0-38.9-31.5-70.4-70.4-70.4V20c48.6,0,88,39.4,88,88H90.4z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 445 B |
|
Before Width: | Height: | Size: 806 B After Width: | Height: | Size: 806 B |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 660 B After Width: | Height: | Size: 660 B |
|
|
@ -1,6 +1,6 @@
|
|||
const NAV_BUTTON_INITIAL_FONT_SIZE = 36;
|
||||
const NAV_BUTTON_INITIAL_FONT_SIZE = 32;
|
||||
const RIPPLE_ANIMATION_MILLISECONDS = 100;
|
||||
const RIPPLE_WIDTH = 150;
|
||||
const RIPPLE_WIDTH = 140;
|
||||
const HANDLE_STRETCH = 0.4;
|
||||
|
||||
let ripplesInitialized;
|
||||
|
|
@ -46,7 +46,7 @@ function initializeRipples() {
|
|||
ripple.animationEndTime = now < stop ? now + elapsed : now + RIPPLE_ANIMATION_MILLISECONDS;
|
||||
|
||||
ripple.goingUp = goingUp;
|
||||
animate();
|
||||
animate(false);
|
||||
};
|
||||
|
||||
ripple.element.addEventListener("pointerenter", () => updateTimings(true));
|
||||
|
|
@ -60,34 +60,35 @@ function initializeRipples() {
|
|||
goingUp: true,
|
||||
};
|
||||
|
||||
animate();
|
||||
animate(false);
|
||||
}
|
||||
|
||||
function animate(forceRefresh) {
|
||||
if (!ripplesInitialized) return;
|
||||
|
||||
navButtonFontSize = Number.parseInt(window.getComputedStyle(navButtons[0]).fontSize) || 36;
|
||||
navButtonFontSize = Number.parseInt(window.getComputedStyle(navButtons[0]).fontSize) || NAV_BUTTON_INITIAL_FONT_SIZE;
|
||||
const mediaQueryScaleFactor = navButtonFontSize / NAV_BUTTON_INITIAL_FONT_SIZE;
|
||||
|
||||
const animateThisFrame = ripples.some((ripple) => ripple.animationStartTime && ripple.animationEndTime && Date.now() <= ripple.animationEndTime);
|
||||
if (animateThisFrame || forceRefresh) {
|
||||
setRipples(mediaQueryScaleFactor);
|
||||
window.requestAnimationFrame(animate);
|
||||
window.requestAnimationFrame(() => animate(false));
|
||||
}
|
||||
}
|
||||
|
||||
function setRipples(mediaQueryScaleFactor) {
|
||||
const rippleHeight = fullRippleHeight * (mediaQueryScaleFactor * 0.5 + 0.5);
|
||||
const rippleSvgRect = rippleSvg.getBoundingClientRect();
|
||||
const rippleSvgLeft = rippleSvgRect.left;
|
||||
const rippleSvgWidth = rippleSvgRect.width;
|
||||
|
||||
let path = `M 0,${fullRippleHeight + 3} `;
|
||||
let path = `M 0,${rippleHeight + 3} `;
|
||||
|
||||
ripples.forEach((ripple) => {
|
||||
if (!ripple.animationStartTime || !ripple.animationEndTime) return;
|
||||
|
||||
const t = Math.min((Date.now() - ripple.animationStartTime) / (ripple.animationEndTime - ripple.animationStartTime), 1);
|
||||
const height = fullRippleHeight * (ripple.goingUp ? ease(t) : 1 - ease(t));
|
||||
const height = rippleHeight * (ripple.goingUp ? ease(t) : 1 - ease(t));
|
||||
|
||||
const buttonRect = ripple.element.getBoundingClientRect();
|
||||
|
||||
|
|
@ -100,8 +101,8 @@ function setRipples(mediaQueryScaleFactor) {
|
|||
const rippleRadius = RIPPLE_WIDTH / 2 * mediaQueryScaleFactor;
|
||||
const handleRadius = rippleRadius * HANDLE_STRETCH;
|
||||
|
||||
path += `L ${rippleStartX},${fullRippleHeight + 3} `;
|
||||
path += `c ${handleRadius},0 ${rippleRadius - handleRadius},-${height} ${rippleRadius},-${height} `;
|
||||
path += `L ${rippleStartX},${rippleHeight + 3} `;
|
||||
path += `c ${handleRadius},0 ${rippleRadius - handleRadius},${-height} ${rippleRadius},${-height} `;
|
||||
path += `s ${rippleRadius - handleRadius},${height} ${rippleRadius},${height} `;
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -4,12 +4,9 @@
|
|||
{% block content %}
|
||||
<section id="404" class="section-row">
|
||||
<div class="section">
|
||||
<h2>Page not found (yet).</h2>
|
||||
<h1>Page not found (yet).</h1>
|
||||
<p>
|
||||
While the home page is now online to get early feedback pending the full site launch, the remaining pages are still actively under construction.
|
||||
</p>
|
||||
<p>
|
||||
Please check back in a few days!
|
||||
Some pages are still actively under construction. Please check back in a few days!
|
||||
</p>
|
||||
<a href="/" class="link arrow">Home Page</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
{% extends "base.html" %}
|
||||
{% block title %}Blog | {{ page.title }}.{% endblock title %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="/article.css">
|
||||
{% endblock head %}
|
||||
|
||||
{% block content %}
|
||||
<section id="article" class="section-row">
|
||||
<div class="section">
|
||||
<div class="details">
|
||||
<h2 class="headline">{{ page.title }}.</h2>
|
||||
<span class="publication">By {{ page.extra.author }}. {{ page.date | date(format="%B %d, %Y", timezone="America/Los_Angeles") }}.</span>
|
||||
<img class="banner" src="{{ page.extra.banner }}" />
|
||||
<hr />
|
||||
</div>
|
||||
<article>
|
||||
{{ page.content | safe }}
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock content %}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
#article {
|
||||
max-width: 800px;
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
.publication {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin-top: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: calc(40px - 20px);
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4,6 +4,9 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1">
|
||||
<title>Graphite | {% block title %}{% endblock title %}</title>
|
||||
{% block rss %}
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path='blog/rss.xml', trailing_slash=false) }}">
|
||||
{% endblock %}
|
||||
{% block head %}{% endblock head %}
|
||||
<link rel="stylesheet" href="/base.css">
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
|
|
@ -44,10 +47,7 @@
|
|||
<div class="row">
|
||||
<div class="left">
|
||||
<a href="/">
|
||||
<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M21.51,38.68c0.36,0.59,0.17,1.36-0.42,1.72s-1.36,0.17-1.72-0.42c-0.01-0.02-0.02-0.03-0.03-0.05h0L10.6,24.77c-0.36-0.59-0.17-1.36,0.42-1.72c0.59-0.36,1.36-0.17,1.72,0.42c0.01,0.02,0.02,0.03,0.03,0.05L21.51,38.68z M58.89,54.74c0.07,0.76-0.21,1.51-0.76,2.04c-1.05,1.27-5.6,2.22-9.04,2.69c-2.28,0.32-4.57,0.5-6.87,0.53c-2.16-0.02-5.16-0.57-8.01-0.74c-4.03-0.25-17.36-0.74-21.94-0.73c-5.14,0.02-6.18-0.27-7.05-1.02c-0.34-0.29,2.58-1.76,8.76-2.26c10.92-0.95,21.89-1.34,32.85-1.16c1.82,0.09,3.63,0.41,5.37,0.96l-9.65-6.92c-0.8,0.53-1.75,0.82-2.71,0.83h-22.5c-1.79,0-3.44-0.95-4.33-2.5L1.77,26.98c-0.89-1.55-0.89-3.45,0-5L13.02,2.5C13.91,0.95,15.56,0,17.35,0h22.5c1.79,0,3.44,0.95,4.33,2.5l8.3,14.37l2.95,5.11l0,0l0.01,0.04c0.01,0.02,0.02,0.04,0.03,0.06c0.35,0.62,0.55,1.31,0.61,2.02c0.01,0.12,2.58,28.12,2.79,30.46L58.89,54.74z M16.29,6.83l14.03,24.31c1.75-0.43,3.55-0.64,5.35-0.64l3.69-5.02l6.19-0.69c0.89-1.57,1.98-3.01,3.22-4.32l-8.31-14.4C40.05,5.44,39.35,5.04,38.59,5h-20c-0.76,0.04-1.46,0.44-1.88,1.08L16.29,6.83zM36.74,43.97l-7.73-5.54c-0.29-0.21-0.53-0.48-0.7-0.79l-0.01,0.01L13.4,11.83L6.72,23.4c-0.34,0.68-0.34,1.48,0,2.17l10,17.32c0.42,0.64,1.11,1.04,1.88,1.08H36.74z M52.7,42.9l-1.76-17.72c-1.1,1.21-2.06,2.53-2.88,3.95l-6.19,0.69l-3.69,5.02c-1.63,0-3.26,0.17-4.86,0.52l14.47,10.38C48.63,43.82,50.62,42.67,52.7,42.9z" />
|
||||
</svg>
|
||||
<img src="https://static.graphite.rs/logos/graphite-logo-solid.svg" alt="Graphite Logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
|
|
@ -58,10 +58,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<svg class="divider ripple" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg class="ripple" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M 0,15 l 10000,0" />
|
||||
</svg>
|
||||
<div class="divider"></div>
|
||||
<hr />
|
||||
</header>
|
||||
<main>
|
||||
<div class="content">
|
||||
|
|
@ -69,16 +69,16 @@
|
|||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="divider"></div>
|
||||
<hr />
|
||||
<nav>
|
||||
<a href="https://github.com/GraphiteEditor/Graphite" class="link not-uppercase">GitHub</a>
|
||||
<a href="/docs" class="link not-uppercase">Documentation</a>
|
||||
<a href="https://github.com/GraphiteEditor/Graphite/graphs/contributors" class="link not-uppercase">Credits</a>
|
||||
<a href="/license" class="link not-uppercase">License</a>
|
||||
<a href="/logo" class="link not-uppercase">Logo</a>
|
||||
<a href="/press" class="link not-uppercase">Press</a>
|
||||
<a href="/contact" class="link not-uppercase">Contact</a>
|
||||
</nav>
|
||||
<span class="balance-text">Graphite is licensed under the terms of the <a href="https://github.com/GraphiteEditor/Graphite/blob/master/LICENSE.txt">Apache 2.0 license</a>. Copyright ©
|
||||
{{ now() | date(format="%Y") }} Graphite contributors.</span>
|
||||
<span>Copyright © {{ now() | date(format="%Y") }} Graphite contributors.</span>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="https://static.graphite.rs/text-balancer/text-balancer.js"></script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
{% extends "base.html" %}
|
||||
{% block title %}{{ section.title }}.{% endblock title %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="/blog.css">
|
||||
{% endblock head %}
|
||||
|
||||
{% block content %}
|
||||
<section id="intro" class="section-row">
|
||||
<div class="section">
|
||||
<h1>{{ section.title }}.</h1>
|
||||
<div class="left-right-split">
|
||||
<p>Latest news and articles from the Graphite team.</p>
|
||||
<p class="feed">
|
||||
<a href="/blog/rss.xml">
|
||||
<img class="icon" src="/images/icons/feed.svg" alt="RSS" />
|
||||
<span class="link arrow">RSS Feed</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="articles" class="section">
|
||||
{% for page in section.pages %}
|
||||
<article>
|
||||
<div class="banner">
|
||||
<a href="{{ page.permalink | safe }}"><img src="{{ page.extra.banner }}" /></a>
|
||||
</div>
|
||||
<div class="details">
|
||||
<div class="headline">
|
||||
<h2><a href="{{ page.permalink | safe }}">{{ page.title }}.</a></h2>
|
||||
</div>
|
||||
<span class="publication">By {{ page.extra.author }}. {{ page.date | date(format="%B %d, %Y", timezone="America/Los_Angeles") }}.</span>
|
||||
<div class="summary">
|
||||
{{ page.summary | safe }}
|
||||
</div>
|
||||
<div class="keep-reading">
|
||||
<a href="{{ page.permalink | safe }}" class="link arrow">Keep Reading</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% endblock content %}
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
{% block content %}
|
||||
<section id="logo">
|
||||
<img src="/images/graphics/logotype.svg" alt="Graphite Logo" />
|
||||
<img src="https://static.graphite.rs/logos/graphite-logotype-color.svg" alt="Graphite Logo" />
|
||||
</section>
|
||||
|
||||
<img class="pencil-texture" src="https://static.graphite.rs/textures/pencil-texture.png"></img>
|
||||
|
|
@ -16,10 +16,24 @@
|
|||
<section id="quick-links">
|
||||
<a href="/blog/announcing-graphite-alpha" class="button arrow">Announcing Graphite alpha</a>
|
||||
<a href="https://editor.graphite.rs" class="button arrow">Instantly launch the web editor</a>
|
||||
<div>
|
||||
<a href="https://github.com/GraphiteEditor/Graphite" target="_blank">
|
||||
<img src="/images/icons/github.svg" alt="GitHub" />
|
||||
</a>
|
||||
<a href="https://www.reddit.com/r/graphite/" target="_blank">
|
||||
<img src="/images/icons/reddit.svg" alt="Reddit" />
|
||||
</a>
|
||||
<a href="https://discord.graphite.rs" target="_blank">
|
||||
<img src="/images/icons/discord.svg" alt="Discord" />
|
||||
</a>
|
||||
<a href="https://twitter.com/graphiteeditor" target="_blank">
|
||||
<img src="/images/icons/twitter.svg" alt="Twitter" />
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="hero-message">
|
||||
<h1>Redefining state-of-the-art graphics editing.</h1>
|
||||
<h1 class="hero">Redefining state-of-the-art graphics editing.</h1>
|
||||
<p class="balance-text">Graphite is an in-development raster and vector 2D graphics editor that is free and open source. It is powered by a node graph compositing engine that supercharges your
|
||||
layer stack, providing a completely non-destructive editing experience.</p>
|
||||
</section>
|
||||
|
|
@ -78,22 +92,24 @@
|
|||
<p class="balance-text">This last screenshot is currently identical to the previous one, serving as a placeholder. Work is ongoing to replace this image with a node graph mockup.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<hr />
|
||||
</section>
|
||||
|
||||
<section id="opener-message" class="section-row right">
|
||||
<div class="graphic">
|
||||
<img src="/images/graphics/brush.svg" alt="" />
|
||||
<img src="/index/brush.svg" alt="" />
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Professional 2D content creation for everyone.</h2>
|
||||
<h1>Professional 2D content creation for everyone.</h1>
|
||||
<p>
|
||||
With great power comes great accessibility. Graphite is built on the belief that the best creative tools can be powerful and within reach of all.
|
||||
</p>
|
||||
<p>
|
||||
Graphite is designed with a friendly and intuitive interface where a delightful user experience is of first-class importance. It is available for free under an open source <a
|
||||
href="https://github.com/GraphiteEditor/Graphite/blob/master/LICENSE.txt" target="_blank">license</a> and usable <a href="https://editor.graphite.rs">instantly through a web
|
||||
browser</a> or an upcoming native client on Windows, Mac, and Linux.
|
||||
Graphite is designed with a friendly and intuitive interface where a delightful user experience is of first-class importance. It is available for free under an open source
|
||||
<a href="/license" target="_blank">license</a>
|
||||
and usable
|
||||
<a href="https://editor.graphite.rs">instantly through a web browser</a>
|
||||
or an upcoming native client on Windows, Mac, and Linux.
|
||||
</p>
|
||||
<p>
|
||||
The accessible design of Graphite does not sacrifice versatility for simplicity. The node-based workflow (coming soon) will open doors to an ecosystem of powerful capabilities catering to
|
||||
|
|
@ -105,10 +121,10 @@
|
|||
|
||||
<section id="available-now" class="section-row left">
|
||||
<div class="graphic">
|
||||
<img src="/images/graphics/alpha.svg" alt="" />
|
||||
<img src="/index/alpha.svg" alt="" />
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Available now for alpha testing.</h2>
|
||||
<h1>Available now for alpha testing.</h1>
|
||||
<p>
|
||||
One year ago, Graphite was merely an idea. Today, the first milestone of the alpha release series is available for testing.
|
||||
</p>
|
||||
|
|
@ -129,31 +145,31 @@
|
|||
|
||||
<section id="upcoming-tech" class="feature-box">
|
||||
<div class="box">
|
||||
<h3>Upcoming Tech <span> / </span> <a href="/features" class="link arrow">More in the Roadmap</a></h3>
|
||||
<div class="divider"></div>
|
||||
<h1 class="box-header">Upcoming Tech <span> / </span> <a href="/features" class="link arrow">More in the Roadmap</a></h1>
|
||||
<hr />
|
||||
<div class="triptych">
|
||||
<div class="section">
|
||||
<h4 class="balance-text">Non-destructive editing, powered by nodes.</h4>
|
||||
<h2 class="balance-text">Non-destructive editing, powered by nodes.</h2>
|
||||
<!-- <div class="graphic">
|
||||
<img src="logo.svg" alt="" />
|
||||
<img src="graphic.svg" alt="" />
|
||||
</div> -->
|
||||
<p>When editing in Graphite, your work gets described in <em>nodes</em> within your <em>layers</em>. Their <em>parameters</em> can be altered anytime in the creative process. The
|
||||
simpler <em>layer tree</em> and wickedly powerful <em>node graph</em> provide two equivalent and interchangeable ways to create art.</p>
|
||||
<a href="/blog/node-graph-explained" class="link arrow">Node Graph</a>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h4 class="balance-text">Raster and vector art, crisp at any resolution.</h4>
|
||||
<h2 class="balance-text">Raster and vector art, crisp at any resolution.</h2>
|
||||
<!-- <div class="graphic">
|
||||
<img src="logo.svg" alt="" />
|
||||
<img src="graphic.svg" alt="" />
|
||||
</div> -->
|
||||
<p>Just like <em>vector</em> artwork, which is based on curves instead of pixels to preserve quality at any scale, Graphite's <em>raster</em> paintbrushes, generators, and other tools
|
||||
work the same way. A <em>resolution-agnostic</em> render engine lets you zoom infinitely and export at any size.</p>
|
||||
<a href="/blog/rendering-pipeline-explained" class="link arrow">Rendering</a>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h4 class="balance-text">Procedural superpowers, part of your art pipeline.</h4>
|
||||
<h2 class="balance-text">Procedural superpowers, part of your art pipeline.</h2>
|
||||
<!-- <div class="graphic">
|
||||
<img src="logo.svg" alt="" />
|
||||
<img src="graphic.svg" alt="" />
|
||||
</div> -->
|
||||
<p>Graphite aims to be the ultimate 2D tool for every technical artist. From procedural artwork to data viz and automation, it is designed from the ground up to fit into studio content
|
||||
pipelines. You can also integrate Graphite's render engine into your game, app, or server.</p>
|
||||
|
|
@ -162,10 +178,10 @@
|
|||
</div>
|
||||
<div class="more-features section-row right">
|
||||
<!-- <div class="graphic">
|
||||
<img src="logo.svg" alt="" />
|
||||
<img src="graphic.svg" alt="" />
|
||||
</div> -->
|
||||
<div class="section">
|
||||
<h4>And more to explore.</h4>
|
||||
<h2>More to come.</h2>
|
||||
<p>
|
||||
RAW photo editing. Procedural texture generation. Advanced typesetting and desktop publishing. Motion graphics and animation. Physically-based digital painting. HDR and wide-gamut
|
||||
color handling (ACES/OpenColorIO). Real-time collaboration. A rich ecosystem of custom nodes.
|
||||
|
|
@ -181,10 +197,10 @@
|
|||
|
||||
<section id="powered-by-rust" class="section-row left">
|
||||
<div class="graphic">
|
||||
<img src="/images/graphics/ferris-artist.svg" alt="" />
|
||||
<img src="/index/rust.svg" alt="" />
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Built for the future, powered by Rust.</h2>
|
||||
<h1>Built for the future, powered by Rust.</h1>
|
||||
<p>
|
||||
Always on the bleeding edge and built to last— Graphite is written on a robust foundation with Rust, a modern programming language optimized for creating fast, reliable, future-proof
|
||||
software.
|
||||
|
|
@ -199,10 +215,10 @@
|
|||
|
||||
<section id="get-involved" class="section-row right">
|
||||
<!-- <div class="graphic">
|
||||
<img src="images/graphics/graphite-logo.svg" alt="" />
|
||||
<img src="/index/graphite-logo-color.svg" alt="" />
|
||||
</div> -->
|
||||
<div class="section">
|
||||
<h2>Get involved.</h2>
|
||||
<h1>Get involved.</h1>
|
||||
<p>
|
||||
The Graphite project could not exist without the community. Building its ambitious and diverse breadth of features will require contributions from developers, designers, technical experts,
|
||||
creative professionals, and eagle-eyed bug hunters. Help build the future of digital art! <a href="https://discord.graphite.rs">Join the project Discord server</a> and ask how you can
|
||||
|
|
@ -218,14 +234,14 @@
|
|||
<section id="community" class="section-row">
|
||||
<div class="diptych">
|
||||
<div id="newsletter" class="section">
|
||||
<h2>Stay in the loop.</h2>
|
||||
<h1>Stay in the loop.</h1>
|
||||
<p>
|
||||
Graphite is early in development and the most exciting, ambitious features are still to come. Enter your email below to receive only occasional announcements when major updates are
|
||||
ready for your enjoyment. The first newsletter will likely be sent out for the Graphite alpha milestone 2 release, featuring node-based editing, later this year.
|
||||
</p>
|
||||
<div id="newsletter-success">
|
||||
<h4>Thanks!</h4>
|
||||
<p>You'll receive the first newsletter with the next major Graphite news.</p>
|
||||
<h2>Thanks!</h2>
|
||||
<p>You'll receive your first newsletter email with the next major Graphite news.</p>
|
||||
</div>
|
||||
<form action="https://graphite.rs/newsletter-signup" method="post">
|
||||
<div class="same-line">
|
||||
|
|
@ -248,7 +264,7 @@
|
|||
</form>
|
||||
</div>
|
||||
<div id="social" class="section">
|
||||
<h2>Follow along.</h2>
|
||||
<h1>Follow along.</h1>
|
||||
<p>
|
||||
High-quality open source software is a community endeavor. Whether you are a developer, an artist, or (like many of us) something in between— your presence in the Graphite community
|
||||
will surely be valuable. As an avid user, tester, contributor, or just someone to cheer along from the sidelines, please join the conversation.
|
||||
|
|
@ -256,21 +272,21 @@
|
|||
<div class="social-links">
|
||||
<div class="column">
|
||||
<a href="https://discord.graphite.rs" target="_blank">
|
||||
<img src="/images/graphics/discord.svg" alt="Discord" />
|
||||
<img src="/images/icons/discord.svg" alt="Discord" />
|
||||
<span class="link arrow">Join on Discord</span>
|
||||
</a>
|
||||
<a href="https://www.reddit.com/r/graphite/" target="_blank">
|
||||
<img src="/images/graphics/reddit.svg" alt="Reddit" />
|
||||
<img src="/images/icons/reddit.svg" alt="Reddit" />
|
||||
<span class="link not-uppercase arrow">/r/Graphite</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<a href="https://github.com/GraphiteEditor/Graphite" target="_blank">
|
||||
<img src="/images/graphics/github.svg" alt="GitHub" />
|
||||
<img src="/images/icons/github.svg" alt="GitHub" />
|
||||
<span class="link arrow">Star on GitHub</span>
|
||||
</a>
|
||||
<a href="https://twitter.com/graphiteeditor" target="_blank">
|
||||
<img src="/images/graphics/twitter.svg" alt="Twitter" />
|
||||
<img src="/images/icons/twitter.svg" alt="Twitter" />
|
||||
<span class="link not-uppercase arrow">@GraphiteEditor</span>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -280,33 +296,25 @@
|
|||
|
||||
<section id="recent-news" class="feature-box">
|
||||
<div class="box">
|
||||
<h3>Recent News <span> / </span> <a href="/features" class="link arrow">More in the Blog</a></h3>
|
||||
<div class="divider"></div>
|
||||
<h1 class="box-header">Recent News <span> / </span> <a href="/features" class="link arrow">More in the Blog</a></h1>
|
||||
<hr />
|
||||
<div class="diptych">
|
||||
<div class="section">
|
||||
<h4>Announcing Graphite alpha</h4>
|
||||
<p>
|
||||
February 12, 2022. After one year of development, the volunteer Graphite team is proud to present Graphite 0.1, the minimum viable product release of the Graphite Editor. This
|
||||
milestone is only the beginning for the project— grand ambitions lie ahead as the development pace accelerates. We hope you will <a href="/contribute">join us</a> on the road to
|
||||
1.0 and beyond.
|
||||
</p>
|
||||
<p>
|
||||
This first release features the foundations of the Graphite Editor web client and simple SVG vector editing capabilities. It is presently suitable for basic vector illustration,
|
||||
although many features remain unimplemented. Upcoming major milestones on the <a href="/features">development roadmap</a> will introduce the node-based non-destructive editing
|
||||
workflow, raster graphics compositing, and a downloadable native desktop client for Windows, Mac, and Linux.
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://editor.graphite.rs">Open the Editor</a> instantly in your browser.
|
||||
</p>
|
||||
<a href="/blog/announcing-graphite-alpha" class="link arrow">Keep Reading</a>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h4>The Graphite mission statement</h4>
|
||||
<p>
|
||||
February 12, 2022. This blog post is coming soon. Stay tuned!
|
||||
</p>
|
||||
<a href="/blog/mission-statement" class="link arrow">Keep Reading</a>
|
||||
</div>
|
||||
{% set articles = get_section(path="blog/_index.md") %}
|
||||
{% set latest = articles.pages | slice(end=2) %}
|
||||
{% for article in latest %}
|
||||
<article class="section">
|
||||
<div class="headline">
|
||||
<h2><a href="{{ article.permalink | safe }}">{{ article.title }}.</a></h2>
|
||||
</div>
|
||||
<span class="publication">By {{ article.extra.author }}. {{ article.date | date(format="%B %d, %Y", timezone="America/Los_Angeles") }}.</span>
|
||||
<div class="summary">
|
||||
{{ article.summary | safe }}
|
||||
</div>
|
||||
<div class="keep-reading">
|
||||
<a href="{{ article.permalink | safe }}" class="link arrow">Keep Reading</a>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
{% extends "base.html" %}
|
||||
{% block title %}{{ section.title }}.{% endblock title %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="/logo.css">
|
||||
{% endblock head %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section-row">
|
||||
<div class="section">
|
||||
<h1>{{ section.title }}.</h1>
|
||||
{{ section.content | safe }}
|
||||
<br />
|
||||
</div>
|
||||
</section>
|
||||
<section class="feature-box logo-view color">
|
||||
<div class="box">
|
||||
<div>
|
||||
<img src="https://static.graphite.rs/logos/graphite-logotype-color.svg" height="160" />
|
||||
<span>Graphite Logotype (Color)</span>
|
||||
<a href="https://static.graphite.rs/logos/graphite-logotype-color.svg" download>Download (SVG)</a>
|
||||
<a href="https://static.graphite.rs/logos/graphite-logotype-color-240x937.png" download>Download (PNG 240x937)</a>
|
||||
<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" />
|
||||
<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>
|
||||
<a href="https://static.graphite.rs/logos/graphite-logo-color-480x480.png" download>Download (PNG 480x480)</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="feature-box logo-view light">
|
||||
<div class="box">
|
||||
<div>
|
||||
<img src="https://static.graphite.rs/logos/graphite-logotype-solid.svg" height="160" />
|
||||
<span>Graphite Logotype (Solid)</span>
|
||||
<a href="https://static.graphite.rs/logos/graphite-logotype-solid.svg" download>Download (SVG)</a>
|
||||
<a href="https://static.graphite.rs/logos/graphite-logotype-solid-240x937.png" download>Download (PNG 240x937)</a>
|
||||
<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" />
|
||||
<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>
|
||||
<a href="https://static.graphite.rs/logos/graphite-logo-solid-480x480.png" download>Download (PNG 480x480)</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="feature-box logo-view dark">
|
||||
<div class="box">
|
||||
<div>
|
||||
<img src="https://static.graphite.rs/logos/graphite-logotype-solid-white.svg" height="160" />
|
||||
<span>Graphite Logotype (Solid, White)</span>
|
||||
<a href="https://static.graphite.rs/logos/graphite-logotype-solid-white.svg" download>Download (SVG)</a>
|
||||
<a href="https://static.graphite.rs/logos/graphite-logotype-solid-white-240x937.png" download>Download (PNG 240x937)</a>
|
||||
<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" />
|
||||
<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>
|
||||
<a href="https://static.graphite.rs/logos/graphite-logo-solid-white-480x480.png" download>Download (PNG 480x480)</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock content %}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
.logo-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
|
||||
.group {
|
||||
display: flex;
|
||||
background-image: url("https://static.graphite.rs/textures/noise.png");
|
||||
background-position: center;
|
||||
width: 100%;
|
||||
margin-left: calc(-1 * ((100vw - 100%) / 2));
|
||||
padding: 0 calc((100vw - 100%) / 2);
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
&.feature-box.feature-box {
|
||||
margin-left: -40px;
|
||||
margin-right: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 80px;
|
||||
}
|
||||
|
||||
&.color {
|
||||
background-color: var(--color-manilla);
|
||||
background-blend-mode: hard-light;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
color: var(--color-fog);
|
||||
background-color: var(--color-navy);
|
||||
background-blend-mode: soft-light;
|
||||
|
||||
a {
|
||||
color: var(--color-mustard);
|
||||
}
|
||||
}
|
||||
|
||||
&.light {
|
||||
background-color: var(--color-fog);
|
||||
background-blend-mode: color-burn;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 800;
|
||||
margin-top: 20px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
+ h3 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
{% extends "base.html" %}
|
||||
{% block title %}{{ section.title }}.{% endblock title %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="/page.css">
|
||||
{% endblock head %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section-row">
|
||||
<div class="section">
|
||||
<h1>{{ section.title }}.</h1>
|
||||
{{ section.content | safe }}
|
||||
</div>
|
||||
</section>
|
||||
{% endblock content %}
|
||||
Loading…
Reference in New Issue