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

Add website revisions and many new pages

Browse Source
This commit is contained in:
Keavon Chambers
2022-03-12 08:31:12 -08:00
parent 2f6722fb40
commit d4f62ba01d
37 changed files with 1039 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/templates/404.html
+2 -5
View File
@@ -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>
website/templates/article.html
+22
View File
@@ -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 %}
website/templates/article.scss
+25
View File
@@ -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;
}
}
}
website/templates/base.html
+10 -10
View File
@@ -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 &copy;
{{ now() | date(format="%Y") }} Graphite contributors.</span>
<span>Copyright &copy; {{ now() | date(format="%Y") }} Graphite contributors.</span>
</footer>
</div>
<script src="https://static.graphite.rs/text-balancer/text-balancer.js"></script>
website/templates/blog.html
+44
View File
@@ -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 %}
website/templates/index.html
+66 -58
View File
@@ -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>
website/templates/logo.html
+70
View File
@@ -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 %}
website/templates/logo.scss
+63
View File
@@ -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;
}
}
website/templates/page.html
+15
View File
@@ -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 %}