Add features page and fixes to website

docs/design/feature-goals.md

@@ -20,20 +20,14 @@
 	- Web/digital-focused graphics (marketing, branding, infographics, ads, etc.)
 	- Templates filled with file/spreadsheet data (e.g. prototyping/iterating components of a board/card game)
 - Illustration
-- Digital painting
+	- Digital painting
-- Icon design
+	- Logo and icon design
-- Logo design
-- UI/UX design
-	- Mockups
-	- Wireframing
 - Desktop publishing
 	- Templates filled with Markdown/HTML content with export to PDF
-- Font design
 - Video compositing
 - Data Visualization
 	- Data-powered graphs/charts/etc.
 	- Automated rendering with live/often-updated data
-- Traditional Animation
 - 3D/Gamedev
 	- PBR procedural material authorship
 	- 3D model UV map texturing

website/content/features/_index.md

@@ -0,0 +1,31 @@
++++
+title = "Features and roadmap"
+template = "page.html"
++++
+
+This page is a work in progress. Below is an incomplete list of planned features in no particular order. Many are long-term aspirations. In the coming days, this will be sequenced into a roadmap and expanded with further details.
+
+The current order of priorities right now begins with adding a node graph system to the existing vector editing toolset, then building a raster-based render engine. More advanced features will build off those core capabilities.
+
+- Node graph and layer tree
+- Resolution-agnostic rendering
+- Procedural generation
+- Capable compositing
+- Constraint solver
+- Advanced typesetting
+- RAW photo editing
+- Motion graphics and animation
+- Live video compositing
+- Animated SVG creation
+- Physically-based painting
+- HDR/WCG color handling
+- Real-time collaborative editing
+- Custom node scripting
+- Asset manager and store
+- Portable render engine
+- Batch conversion and processing
+- Mixed vector and raster design
+- Data visualization and graph/charts
+- Data-driven template replacement
+- Native desktop application
+- Distributed rendering system

website/content/index/_index.md

@@ -1,4 +1,4 @@
 +++
-title = "Redefining state-of-the-art graphics editing."
+title = ""
 template = "index.html"
-+++
++++

website/templates/article.scss

@@ -1,25 +0,0 @@
-#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

@@ -71,7 +71,7 @@
 		<footer>
 			<hr />
 			<nav>
-				<a href="/docs" class="link not-uppercase">Documentation</a>
+				<a href="https://github.com/GraphiteEditor/Graphite/tree/master/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>

website/templates/index.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block title %}{{ section.title }}{% endblock title %}
+{% block title %}Redefining state-of-the-art graphics editing.{% endblock title %}
 
 {% block head %}
 <link rel="stylesheet" href="/index.css">
@@ -14,7 +14,7 @@
 <img class="pencil-texture" src="https://static.graphite.rs/textures/pencil-texture.png"></img>
 
 <section id="quick-links">
-	<a href="/blog/announcing-graphite-alpha" class="button arrow">Announcing Graphite alpha</a>
+	<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">

website/templates/logo.scss

@@ -1,63 +0,0 @@
-.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;
-	}
-}