Create project website with near-complete home page
This commit is contained in:
Keavon Chambers
parent
4757e8b8cd
commit
3f79df7314
|
|
@ -0,0 +1,16 @@
|
|||
# The URL the site will be built for
|
||||
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
|
||||
|
||||
[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
|
||||
|
||||
[extra]
|
||||
# Put all your custom variables here
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
+++
|
||||
title = "Redefining state-of-the-art graphics editing."
|
||||
template = "index.html"
|
||||
+++
|
||||
|
|
@ -0,0 +1,441 @@
|
|||
:root {
|
||||
--color-walnut: #473a3a;
|
||||
--color-manilla: #f1decd;
|
||||
--color-mustard: #deba92;
|
||||
--color-crimson: #803847;
|
||||
--color-navy: #16323f;
|
||||
--color-fog: #eeeeee;
|
||||
--color-black: #000000;
|
||||
--max-width: 1600px;
|
||||
--max-width-plus-padding: calc(var(--max-width) + 40px * 2);
|
||||
--variable-px: Min(1px, 0.15vw);
|
||||
}
|
||||
|
||||
// Global element styles
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
background: var(--color-manilla);
|
||||
font-family: "Inter", sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: var(--color-navy);
|
||||
}
|
||||
|
||||
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: 60px;
|
||||
|
||||
~ p {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: "Bona Nova", serif;
|
||||
font-feature-settings: "lnum";
|
||||
line-height: 1.25;
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
|
||||
span {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
~ .divider {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
+ .divider + .diptych,
|
||||
+ .divider + .triptych {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: "Bona Nova", serif;
|
||||
font-feature-settings: "lnum";
|
||||
line-height: 1.25;
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
hyphens: auto;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
h1 ~ p,
|
||||
h2 ~ p,
|
||||
h4 ~ p,
|
||||
h4 ~ img,
|
||||
p + .link {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
p + p {
|
||||
margin-top: calc(1em * 1.5);
|
||||
}
|
||||
|
||||
.link {
|
||||
display: inline-block;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
text-decoration: none;
|
||||
color: var(--color-crimson);
|
||||
white-space: nowrap;
|
||||
|
||||
&:not(.not-uppercase) {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.button.button.button.button {
|
||||
color: var(--color-crimson);
|
||||
display: inline-block;
|
||||
border: 2px solid currentColor;
|
||||
height: 48px;
|
||||
line-height: calc(48px - 2 * 2px);
|
||||
font-size: 24px;
|
||||
padding: 0 24px;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.arrow::after {
|
||||
content: " »";
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 0 32px;
|
||||
width: calc(100% - 32px * 2);
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
left: -40px;
|
||||
border-width: 0 0 2px 40px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: -40px;
|
||||
border-width: 0 40px 2px 0;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-color: transparent transparent currentColor transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
.section-row {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: calc(40 * var(--variable-px)) calc(80 * var(--variable-px));
|
||||
|
||||
&.right {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
&.section-row {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.graphic {
|
||||
max-width: 280px;
|
||||
flex: 1 1 100%;
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-box {
|
||||
padding: calc(80 * var(--variable-px));
|
||||
background-image: url("https://static.graphite.rs/textures/noise.png");
|
||||
background-blend-mode: soft-light;
|
||||
background-position: center;
|
||||
|
||||
&.feature-box.feature-box {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
&.feature-box.feature-box {
|
||||
margin-left: -40px;
|
||||
margin-right: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
|
||||
.section h4 + .graphic {
|
||||
margin-top: 20px;
|
||||
|
||||
img {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.diptych,
|
||||
.triptych {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: calc(80 * var(--variable-px));
|
||||
|
||||
.section {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
&.diptych .section {
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
&.triptych .section {
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
img[alt=""]{
|
||||
display: block;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
background: var(--color-crimson);
|
||||
}
|
||||
}
|
||||
|
||||
+ div {
|
||||
margin-top: calc(80 * var(--variable-px));
|
||||
}
|
||||
}
|
||||
|
||||
// Page content
|
||||
|
||||
.page {
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
min-width: 600px;
|
||||
|
||||
header {
|
||||
padding: 0 40px;
|
||||
color: var(--color-walnut);
|
||||
|
||||
// max-width + (80px + 32px) * 2
|
||||
@media screen and (max-width: 1824px) {
|
||||
.divider {
|
||||
&.ripple {
|
||||
width: calc(100% + (40px * 2));
|
||||
margin-left: -40px;
|
||||
margin-right: -40px;
|
||||
}
|
||||
|
||||
&:not(.ripple) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
margin: auto;
|
||||
max-width: var(--max-width);
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30px 0;
|
||||
gap: 80px;
|
||||
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
font-family: "Bona Nova", serif;
|
||||
font-feature-settings: "lnum";
|
||||
line-height: 1.25;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
--height: 60px;
|
||||
--button-padding: 24px;
|
||||
--font-size: 36px;
|
||||
font-size: var(--font-size);
|
||||
|
||||
&.button {
|
||||
height: var(--height);
|
||||
padding-left: var(--button-padding);
|
||||
padding-right: var(--button-padding);
|
||||
line-height: calc(var(--height) - 2 * 2px);
|
||||
font-size: var(--font-size);
|
||||
|
||||
&::after {
|
||||
content: "»";
|
||||
margin-left: 8px
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
display: block;
|
||||
width: var(--height);
|
||||
height: var(--height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
gap: 60px;
|
||||
|
||||
.left,
|
||||
.right {
|
||||
gap: 30px;
|
||||
|
||||
a {
|
||||
--height: 50px;
|
||||
--button-padding: 16px;
|
||||
--font-size: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 760px) {
|
||||
gap: 40px;
|
||||
|
||||
.left,
|
||||
.right {
|
||||
gap: 20px;
|
||||
|
||||
a {
|
||||
--height: 40px;
|
||||
--button-padding: 16px;
|
||||
--font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
background: none;
|
||||
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0 40px;
|
||||
|
||||
.content {
|
||||
padding: calc(120 * var(--variable-px)) 0;
|
||||
|
||||
section {
|
||||
max-width: var(--max-width);
|
||||
margin: auto;
|
||||
// Puts the content in front of the hexagon decoration
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
~ section {
|
||||
margin-top: calc(80 * var(--variable-px));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
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) {
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,327 @@
|
|||
#logo {
|
||||
display: flex;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#quick-links {
|
||||
margin-bottom: calc(120 * var(--variable-px));
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pencil-texture {
|
||||
position: absolute;
|
||||
--remaining-width-to-full: calc(var(--max-width-plus-padding) - min(calc(100vw - 100px), var(--max-width-plus-padding)));
|
||||
left: Max(calc(-1 * var(--remaining-width-to-full)), -40px);
|
||||
width: 100px;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.hexagons {
|
||||
max-width: var(--max-width);
|
||||
margin: auto;
|
||||
position: relative;
|
||||
bottom: calc(-80 * var(--variable-px));
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10%;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: translate(-50%) rotate(347deg);
|
||||
opacity: 0.25;
|
||||
width: Max(1000px, Min(1400px, calc(100vw * 1400 / 1920)));
|
||||
height: auto;
|
||||
|
||||
polygon {
|
||||
fill: none;
|
||||
stroke: gray;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#screenshots {
|
||||
transform: translate(0);
|
||||
|
||||
.carousel {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
touch-action: pan-y pinch-zoom;
|
||||
cursor: grab;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 20px;
|
||||
|
||||
&:first-child {
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.dragging) .carousel img {
|
||||
transition: transform 500ms;
|
||||
}
|
||||
|
||||
.carousel:not(.torn) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.carousel.torn {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
// Torn edge mask
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
|
||||
&.left {
|
||||
padding-left: 120px;
|
||||
margin-left: -120px;
|
||||
-webkit-mask-image: url("https://static.graphite.rs/textures/torn-edge-left.png");
|
||||
mask-image: url("https://static.graphite.rs/textures/torn-edge-left.png");
|
||||
-webkit-mask-position: top left;
|
||||
mask-position: top left;
|
||||
}
|
||||
|
||||
&.right {
|
||||
padding-right: 120px;
|
||||
margin-right: -120px;
|
||||
-webkit-mask-image: url("https://static.graphite.rs/textures/torn-edge-right.png");
|
||||
mask-image: url("https://static.graphite.rs/textures/torn-edge-right.png");
|
||||
-webkit-mask-position: top right;
|
||||
mask-position: top right;
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot-details {
|
||||
display: flex;
|
||||
margin: 20px 0;
|
||||
gap: 20px 40px;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.carousel-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
+ button {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.direction {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
border: 2px solid currentColor;
|
||||
|
||||
&.active {
|
||||
border: none;
|
||||
background: var(--color-crimson);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot-description {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: calc(2em * 1.5);
|
||||
|
||||
p + p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
margin-left: -40px;
|
||||
margin-right: -40px;
|
||||
|
||||
.screenshot-details {
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.divider.divider {
|
||||
width: calc(100% - (32px + 40px) * 2);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#upcoming-tech {
|
||||
background-color: var(--color-navy);
|
||||
color: var(--color-fog);
|
||||
|
||||
a {
|
||||
color: var(--color-mustard);
|
||||
}
|
||||
}
|
||||
|
||||
#community {
|
||||
#newsletter form {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.same-line {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex: 100000 1 0;
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
flex-direction: column;
|
||||
flex: 1 1 100%;
|
||||
|
||||
&.name,
|
||||
&.email {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
||||
&.name {
|
||||
flex: 1 0 0;
|
||||
min-width: 240px;
|
||||
}
|
||||
|
||||
&.email {
|
||||
flex: 1 0 0;
|
||||
min-width: 240px;
|
||||
}
|
||||
|
||||
&.submit {
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
label,
|
||||
input {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
input:not([type="submit"]) {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
font-size: 22px;
|
||||
color: inherit;
|
||||
border: 2px solid currentColor;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
padding: 0 24px;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-mustard);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
background: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-mustard);
|
||||
color: var(--color-mustard);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#social .social-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px 80px;
|
||||
margin-top: 40px;
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
line-height: 48px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#recent-news {
|
||||
background-color: var(--color-mustard);
|
||||
color: var(--color-navy);
|
||||
|
||||
a {
|
||||
color: var(--color-crimson);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="582" height="508.999" viewBox="0 0 582 508.999" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M582.5,433.615a17.985,17.985,0,0,1-1.5,8q-1.5,3-4.5,8-25.008,29.016-55,44.5-30,15.516-69,15.5-30,0-49-15.5t-29.5-39.5a292,292,0,0,1-16.5-49h-1q-39,49.008-84.5,76-45.516,27-110.5,27-80.016,0-120.5-48.5Q.5,411.623.5,335.615a366.087,366.087,0,0,1,20.5-121,343.774,343.774,0,0,1,59-106,294.033,294.033,0,0,1,92-75q53.484-27.984,119.5-28,60.984,0,91,36,30,36,40,92,10.992-33,21-66,9.984-33,20-67l96,27a746.057,746.057,0,0,1-39,99q-11.016,24-23,47.5-12,23.508-24,46.5-10.008,19.008-20,37a242.935,242.935,0,0,0-17,38q-3,7.01-3,18,0,9,4,32.5,3.984,23.508,10.5,50.5,6.492,27,16,46,9.492,19.008,19.5,19,15.984,0,29.5-11a329.717,329.717,0,0,0,25-22.5q11.484-11.484,22.5-11.5,6,0,14,5.5T582.5,433.615Zm-238-179q0-19.991-1-40.5a370.084,370.084,0,0,0-4-39.5q-2.016-12.984-4.5-35.5-2.508-22.5-7.5-46-5.016-23.484-16-39.5-11.016-15.984-29-16a55.475,55.475,0,0,0-23,4.5,119.544,119.544,0,0,0-21,12.5q-42,31.008-69.5,79.5a391.8,391.8,0,0,0-40.5,103,458.01,458.01,0,0,0-13,106.5q0,14.018,4,34a225.831,225.831,0,0,0,12,40q7.992,20.016,21,33a42.284,42.284,0,0,0,31,13q21,0,46-17.5,24.984-17.484,48.5-44a378.436,378.436,0,0,0,40-53.5q16.5-27,21.5-46a150.883,150.883,0,0,0,4-24Q344.484,266.615,344.5,254.615Z" transform="translate(-0.5 -0.616)" fill="#473a3a" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13,17.1A3.719,3.719,0,0,0,9,14c-1.7.1-3.1,1.5-4,4.2a7.571,7.571,0,0,1-3.6,4c2.9,1,5.9,1.3,8.6.1A5.223,5.223,0,0,0,13,17.1Z" fill="#803847" />
|
||||
<path d="M22.5,1.1C21.6.3,18,3.8,14.1,8.2a34.223,34.223,0,0,0-3.6,4.6,3.9,3.9,0,0,1,1.9.8,3.887,3.887,0,0,1,1.4,1.9A29.655,29.655,0,0,0,17.5,11C20.9,6,23.5,1.9,22.5,1.1Z" fill="#473a3a" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 434 B |
|
|
@ -0,0 +1,24 @@
|
|||
<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>
|
||||
|
After Width: | Height: | Size: 6.0 KiB |
|
|
@ -0,0 +1,11 @@
|
|||
<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>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -0,0 +1,157 @@
|
|||
let carouselImages;
|
||||
let carouselDirectionPrev;
|
||||
let carouselDirectionNext;
|
||||
let carouselDots;
|
||||
let carouselDescriptions;
|
||||
let carouselDragLastClientX;
|
||||
let velocityDeltaWindow = Array.from({ length: 20 }, () => ({ time: 0, delta: 0 }));
|
||||
|
||||
window.addEventListener("DOMContentLoaded", initializeCarousel);
|
||||
window.addEventListener("pointerup", dragEnd);
|
||||
window.addEventListener("scroll", dragEnd);
|
||||
window.addEventListener("pointermove", dragMove);
|
||||
|
||||
function initializeCarousel() {
|
||||
carouselImages = document.querySelectorAll(".carousel img");
|
||||
carouselImages.forEach((image) => {
|
||||
image.addEventListener("pointerdown", dragBegin);
|
||||
});
|
||||
|
||||
carouselDirectionPrev = document.querySelector(".carousel-controls .direction.prev");
|
||||
carouselDirectionNext = document.querySelector(".carousel-controls .direction.next");
|
||||
carouselDots = document.querySelectorAll(".carousel-controls .dot");
|
||||
carouselDescriptions = document.querySelectorAll(".screenshot-description p");
|
||||
|
||||
carouselDirectionPrev.addEventListener("click", () => slideDirection("prev", false, true));
|
||||
carouselDirectionNext.addEventListener("click", () => slideDirection("next", false, true));
|
||||
Array.from(carouselDots).forEach((dot) => dot.addEventListener("click", (event) => {
|
||||
const index = Array.from(carouselDots).indexOf(event.target);
|
||||
slideTo(index, true);
|
||||
}));
|
||||
}
|
||||
|
||||
function slideDirection(direction, clamped = false, smooth) {
|
||||
const directionIndexOffset = { prev: -1, next: 1 }[direction];
|
||||
const offsetDotIndex = currentClosestImageIndex() + directionIndexOffset;
|
||||
|
||||
const nextDotIndex = (offsetDotIndex + carouselDots.length) % carouselDots.length;
|
||||
const unwrappedNextDotIndex = clamp(offsetDotIndex, 0, carouselDots.length - 1);
|
||||
|
||||
if (clamped) slideTo(unwrappedNextDotIndex, smooth);
|
||||
else slideTo(nextDotIndex, smooth);
|
||||
}
|
||||
|
||||
function slideTo(index, smooth) {
|
||||
const activeDot = document.querySelector(".carousel-controls .dot.active");
|
||||
activeDot.classList.remove("active");
|
||||
carouselDots[index].classList.add("active");
|
||||
|
||||
const activeDescription = document.querySelector(".screenshot-description p.active");
|
||||
activeDescription.classList.remove("active");
|
||||
carouselDescriptions[index].classList.add("active");
|
||||
|
||||
setCurrentTransform(index * -100, "%", smooth)
|
||||
}
|
||||
|
||||
function currentTransform() {
|
||||
const currentTransformMatrix = window.getComputedStyle(carouselImages[0]).transform;
|
||||
// Grab the X value from the format that looks like: `matrix(1, 0, 0, 1, -1332.13, 0)` or `none`
|
||||
return Number(currentTransformMatrix.split(",")[4] || "0");
|
||||
}
|
||||
|
||||
function setCurrentTransform(x, unit, smooth) {
|
||||
Array.from(carouselImages).forEach((image) => {
|
||||
image.style.transitionTimingFunction = smooth ? "ease-in-out" : "cubic-bezier(0, 0, 0.2, 1)";
|
||||
image.style.transform = `translateX(${x}${unit})`;
|
||||
});
|
||||
}
|
||||
|
||||
function currentClosestImageIndex() {
|
||||
const currentTransformX = -currentTransform();
|
||||
|
||||
const imageWidth = carouselImages[0].getBoundingClientRect().width;
|
||||
return Math.round(currentTransformX / imageWidth);
|
||||
}
|
||||
|
||||
function currentActiveDotIndex() {
|
||||
const activeDot = document.querySelector(".carousel-controls .dot.active");
|
||||
return Array.from(carouselDots).indexOf(activeDot);
|
||||
}
|
||||
|
||||
function dragBegin(event) {
|
||||
event.preventDefault();
|
||||
|
||||
carouselDragLastClientX = event.clientX;
|
||||
|
||||
setCurrentTransform(currentTransform(), "px", false);
|
||||
document.querySelector("#screenshots").classList.add("dragging");
|
||||
}
|
||||
|
||||
function dragEnd() {
|
||||
if (!carouselImages) return;
|
||||
|
||||
carouselDragLastClientX = undefined;
|
||||
|
||||
document.querySelector("#screenshots").classList.remove("dragging");
|
||||
|
||||
const onlyRecentVelocityDeltaWindow = velocityDeltaWindow.filter((delta) => delta.time > Date.now() - 1000);
|
||||
const timeRange = Date.now() - onlyRecentVelocityDeltaWindow[0]?.time;
|
||||
// Weighted (higher by recency) sum of velocity deltas from previous window of frames
|
||||
const recentVelocity = onlyRecentVelocityDeltaWindow.reduce((acc, entry) => {
|
||||
const timeSinceNow = Date.now() - entry.time;
|
||||
const recencyFactorScore = 1 - (timeSinceNow / timeRange);
|
||||
|
||||
return acc + entry.delta * recencyFactorScore;
|
||||
}, 0);
|
||||
|
||||
const closestImageIndex = currentClosestImageIndex();
|
||||
const activeDotIndex = currentActiveDotIndex();
|
||||
|
||||
// If the speed is fast enough, slide to the next or previous image in that direction
|
||||
if (Math.abs(recentVelocity) > 10) {
|
||||
// Positive velocity should go to the previous image
|
||||
if (recentVelocity > 0) {
|
||||
// Don't apply the velocity-based fling if we're already snapping to the next image
|
||||
if (closestImageIndex >= activeDotIndex) {
|
||||
slideDirection("prev", true, false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
// Negative velocity should go to the next image
|
||||
else {
|
||||
// Don't apply the velocity-based fling if we're already snapping to the next image
|
||||
if (closestImageIndex <= activeDotIndex) {
|
||||
slideDirection("next", true, false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If we didn't slide in a direction due to clear velocity, just snap to the closest image
|
||||
slideTo(clamp(closestImageIndex, 0, carouselDots.length - 1), true);
|
||||
}
|
||||
|
||||
function dragMove(event) {
|
||||
if (carouselDragLastClientX === undefined) return;
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
const LEFT_MOUSE_BUTTON = 1;
|
||||
if (!(event.buttons & LEFT_MOUSE_BUTTON)) {
|
||||
dragEnd();
|
||||
return;
|
||||
}
|
||||
|
||||
const deltaX = event.clientX - carouselDragLastClientX;
|
||||
velocityDeltaWindow.shift();
|
||||
velocityDeltaWindow.push({ time: Date.now(), delta: deltaX });
|
||||
|
||||
const newTransformX = currentTransform() + deltaX;
|
||||
setCurrentTransform(newTransformX, "px", false);
|
||||
|
||||
carouselDragLastClientX = event.clientX;
|
||||
}
|
||||
|
||||
function clamp(value, min, max) {
|
||||
return Math.min(Math.max(value, min), max);
|
||||
}
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
const NAV_BUTTON_INITIAL_FONT_SIZE = 36;
|
||||
const RIPPLE_ANIMATION_MILLISECONDS = 100;
|
||||
const RIPPLE_WIDTH = 150;
|
||||
const HANDLE_STRETCH = 0.4;
|
||||
|
||||
let ripplesInitialized;
|
||||
let navButtons;
|
||||
let navButtonFontSize;
|
||||
let rippleSvg;
|
||||
let ripplePath;
|
||||
let fullRippleHeight;
|
||||
let ripples;
|
||||
let activeRippleIndex;
|
||||
|
||||
window.addEventListener("DOMContentLoaded", initializeRipples);
|
||||
window.addEventListener("resize", () => animate(true));
|
||||
|
||||
function setRipples(mediaQueryScaleFactor) {
|
||||
const rippleSvgRect = rippleSvg.getBoundingClientRect();
|
||||
const rippleSvgLeft = rippleSvgRect.left;
|
||||
const rippleSvgWidth = rippleSvgRect.width;
|
||||
|
||||
let path = `M 0,${fullRippleHeight + 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 buttonRect = ripple.element.getBoundingClientRect();
|
||||
|
||||
const buttonCenter = buttonRect.width / 2;
|
||||
const rippleCenter = RIPPLE_WIDTH / 2 * mediaQueryScaleFactor;
|
||||
const rippleOffset = rippleCenter - buttonCenter;
|
||||
|
||||
const rippleStartX = buttonRect.left - rippleSvgLeft - rippleOffset;
|
||||
|
||||
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 += `s ${rippleRadius - handleRadius},${height} ${rippleRadius},${height} `;
|
||||
});
|
||||
|
||||
path += `l ${rippleSvgWidth},0`;
|
||||
|
||||
ripplePath.setAttribute("d", path);
|
||||
}
|
||||
|
||||
function initializeRipples() {
|
||||
ripplesInitialized = true;
|
||||
|
||||
navButtons = document.querySelectorAll("header nav a");
|
||||
rippleSvg = document.querySelector("header .ripple");
|
||||
ripplePath = rippleSvg.querySelector("path");
|
||||
fullRippleHeight = Number.parseInt(window.getComputedStyle(rippleSvg).height) - 4;
|
||||
|
||||
ripples = Array.from(navButtons).map((button) => ({
|
||||
element: button,
|
||||
animationStartTime: null,
|
||||
animationEndTime: null,
|
||||
goingUp: false,
|
||||
}));
|
||||
|
||||
activeRippleIndex = ripples.findIndex((ripple) => ripple.element.getAttribute("href") === window.location.pathname);
|
||||
|
||||
|
||||
ripples.forEach((ripple) => {
|
||||
const updateTimings = (goingUp) => {
|
||||
const start = ripple.animationStartTime;
|
||||
const now = Date.now();
|
||||
const stop = ripple.animationStartTime + RIPPLE_ANIMATION_MILLISECONDS;
|
||||
|
||||
const elapsed = now - start;
|
||||
const remaining = stop - now;
|
||||
|
||||
ripple.animationStartTime = now < stop ? now - remaining : now;
|
||||
ripple.animationEndTime = now < stop ? now + elapsed : now + RIPPLE_ANIMATION_MILLISECONDS;
|
||||
|
||||
ripple.goingUp = goingUp;
|
||||
animate();
|
||||
};
|
||||
|
||||
ripple.element.addEventListener("pointerenter", () => updateTimings(true));
|
||||
ripple.element.addEventListener("pointerleave", () => updateTimings(false));
|
||||
});
|
||||
|
||||
ripples[activeRippleIndex] = {
|
||||
...ripples[activeRippleIndex],
|
||||
animationStartTime: Date.now(),
|
||||
animationEndTime: Date.now() + RIPPLE_ANIMATION_MILLISECONDS,
|
||||
goingUp: true,
|
||||
};
|
||||
|
||||
animate();
|
||||
}
|
||||
|
||||
function animate(forceRefresh) {
|
||||
if (!ripplesInitialized) return;
|
||||
|
||||
navButtonFontSize = Number.parseInt(window.getComputedStyle(navButtons[0]).fontSize) || 36;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
function ease(x) {
|
||||
return 1 - (1 - x) * (1 - x);
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
{% extends "base.html" %}
|
||||
{% block title %}Page not found.{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
<section id="404" class="section-row right">
|
||||
<div class="section">
|
||||
<h2>Page not found (yet).</h2>
|
||||
<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!
|
||||
</p>
|
||||
<a href="/" class="link arrow">Home Page</a>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock content %}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.6, maximum-scale=5.0, minimum-scale=0.6">
|
||||
<title>Graphite | {% block title %}{% endblock title %}</title>
|
||||
{% block head %}{% endblock head %}
|
||||
<link rel="stylesheet" href="/base.css">
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bona+Nova:wght@400;700">
|
||||
<script src="/js/navbar.js"></script>
|
||||
<style>
|
||||
.balance-text {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@media (scripting: none) {
|
||||
.balance-text {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (text-wrap: balance) {
|
||||
.balance-text {
|
||||
text-wrap: balance;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<noscript>
|
||||
<style>
|
||||
.balance-text {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
</noscript>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header>
|
||||
<nav>
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
<a href="/blog">Blog</a>
|
||||
<a href="/features">Features</a>
|
||||
<a href="/contribute">Contribute</a>
|
||||
<a href="https://editor.graphite.rs" class="button arrow">Launch</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<svg class="divider ripple" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M 0,15 l 10000,0" />
|
||||
</svg>
|
||||
<div class="divider"></div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="content">
|
||||
{% block content %} {% endblock %}
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="divider"></div>
|
||||
<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="/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>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="https://static.graphite.rs/text-balancer/text-balancer.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,350 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ section.title }}{% endblock title %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="/index.css">
|
||||
{% endblock head %}
|
||||
|
||||
{% block content %}
|
||||
<section id="logo">
|
||||
<svg width="936.892" height="240.004" 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>
|
||||
|
||||
</section>
|
||||
|
||||
<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="https://editor.graphite.rs" class="button arrow">Instantly launch the web editor</a>
|
||||
</section>
|
||||
|
||||
<section id="hero-message">
|
||||
<h1>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>
|
||||
|
||||
<div class="hexagons">
|
||||
<div>
|
||||
<svg viewBox="0 0 1400 1215.42" xmlns="http://www.w3.org/2000/svg">
|
||||
<polygon points="1049.43,0.99 350.57,0.99 1.14,607.71 350.57,1214.44 1049.43,1214.44 1398.86,607.71" />
|
||||
<polygon points="1016.39,57.57 383.61,57.57 67.22,607.71 383.61,1157.85 1016.39,1157.85 1332.78,607.71" />
|
||||
<polygon points="964.49,149.01 435.51,149.01 171.02,607.71 435.51,1066.41 964.49,1066.41 1228.98,607.71" />
|
||||
<polygon points="875.52,304.71 524.48,304.71 348.96,607.71 524.48,910.71 875.52,910.71 1051.04,607.71" />
|
||||
<polygon points="768.12,490.96 631.88,490.96 563.78,607.71 631.88,724.47 768.12,724.47 836.22,607.71" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="screenshots">
|
||||
<div class="carousel">
|
||||
<img src="https://static.graphite.rs/content/index/gui-viewport-blank.png">
|
||||
<img src="https://static.graphite.rs/content/index/gui-viewport-mockup.png">
|
||||
<img src="https://static.graphite.rs/content/index/gui-viewport-mockup.png">
|
||||
</div>
|
||||
<div class="carousel torn left">
|
||||
<img src="https://static.graphite.rs/content/index/gui-viewport-blank.png">
|
||||
<img src="https://static.graphite.rs/content/index/gui-viewport-mockup.png">
|
||||
<img src="https://static.graphite.rs/content/index/gui-viewport-mockup.png">
|
||||
</div>
|
||||
<div class="carousel torn right">
|
||||
<img src="https://static.graphite.rs/content/index/gui-viewport-blank.png">
|
||||
<img src="https://static.graphite.rs/content/index/gui-viewport-mockup.png">
|
||||
<img src="https://static.graphite.rs/content/index/gui-viewport-mockup.png">
|
||||
</div>
|
||||
<div class="screenshot-details">
|
||||
<div class="carousel-controls">
|
||||
<button class="direction prev">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20,0C8.95,0,0,8.95,0,20c0,11.05,8.95,20,20,20c11.05,0,20-8.95,20-20C40,8.95,31.05,0,20,0z M20,38c-9.93,0-18-8.07-18-18S10.07,2,20,2s18,8.07,18,18S29.93,38,20,38z" />
|
||||
<polygon points="24.71,10.71 23.29,9.29 12.59,20 23.29,30.71 24.71,29.29 15.41,20" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="dot active"></button>
|
||||
<button class="dot"></button>
|
||||
<button class="dot"></button>
|
||||
<button class="direction next">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20,0C8.95,0,0,8.95,0,20c0,11.05,8.95,20,20,20c11.05,0,20-8.95,20-20C40,8.95,31.05,0,20,0z M20,38c-9.93,0-18-8.07-18-18S10.07,2,20,2s18,8.07,18,18S29.93,38,20,38z" />
|
||||
<polygon points="16.71,9.29 15.29,10.71 24.59,20 15.29,29.29 16.71,30.71 27.41,20" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="screenshot-description">
|
||||
<p class="balance-text active">View of the current alpha version of the Graphite editor with a blank canvas. Try this out at <a href="https://editor.graphite.rs">editor.graphite.rs</a>
|
||||
right in your browser. Send in your artwork to potentially be featured here in place of this blank canvas.</p>
|
||||
<p class="balance-text">Interface mockup showcasing a photo editing project that utilizes Graphite's raster graphics pipeline, one of the upcoming roadmap milestones. Photo editing
|
||||
is not yet supported.</p>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section id="opener-message" class="section-row right">
|
||||
<div class="graphic">
|
||||
<img src="images/graphics/brush.svg" alt="" />
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Professional 2D content creation for everyone.</h2>
|
||||
<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>
|
||||
The software 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.
|
||||
</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
|
||||
the casual and professional user alike, encompassing a wide set of use cases at every skill level.
|
||||
</p>
|
||||
<a href="/blog/mission-statement" class="link arrow">Mission Statement</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="available-now" class="section-row left">
|
||||
<div class="graphic">
|
||||
<img src="images/graphics/alpha.svg" alt="" />
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Available now for alpha testing.</h2>
|
||||
<p>
|
||||
One year ago, Graphite was merely an idea. Today, the first milestone of the alpha release series is available for testing.
|
||||
</p>
|
||||
<p>
|
||||
Milestone 1 focused on building an editor interface with basic vector design and illustration tools. Now the alpha release series moves toward milestone 2: developing a novel node-based
|
||||
vector graphics workflow. After that, raster graphics and more are planned in the <a href="/features">roadmap</a>.
|
||||
</p>
|
||||
<p>
|
||||
Features and fixes will continue rolling out every few days. Please report bugs and vote on issue prioritization <a href="https://github.com/GraphiteEditor/Graphite/projects/1">through
|
||||
GitHub</a>. While you're there, give the project a star to help grow its momentum.
|
||||
</p>
|
||||
<p>
|
||||
Try Graphite instantly in your browser:
|
||||
</p>
|
||||
<a href="https://editor.graphite.rs" class="link arrow">Launch the Editor</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<div class="triptych">
|
||||
<div class="section">
|
||||
<h4 class="balance-text">Non-destructive editing, powered by nodes.</h4>
|
||||
<!-- <div class="graphic">
|
||||
<img src="logo.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>
|
||||
<!-- <div class="graphic">
|
||||
<img src="logo.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>
|
||||
<!-- <div class="graphic">
|
||||
<img src="logo.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>
|
||||
<a href="/blog/graphene-explained" class="link arrow">Graphene</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="more-features section-row right">
|
||||
<!-- <div class="graphic">
|
||||
<img src="logo.svg" alt="" />
|
||||
</div> -->
|
||||
<div class="section">
|
||||
<h4>And more to explore.</h4>
|
||||
<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.
|
||||
</p>
|
||||
<p>
|
||||
Learn more about the planned technology in forthcoming Graphite releases.
|
||||
</p>
|
||||
<a href="/features" class="link arrow">Features</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="powered-by-rust" class="section-row left">
|
||||
<div class="graphic">
|
||||
<img src="images/graphics/ferris-artist.svg" alt="" />
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Built for the future, powered by Rust.</h2>
|
||||
<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.
|
||||
</p>
|
||||
<p>
|
||||
The underlying node graph engine that computes and renders Graphite documents is called Graphene. The Graphene engine is an extension of the Rust language, acting as a system for chaining
|
||||
together modular functions into useful pipelines with GPU and parallel computation. Artists can harness these powerful capabilities directly in the Graphite editor without touching code.
|
||||
Technical artists and programmers can write reusable Rust functions to extend the capabilities of Graphite and create new nodes to share with the community.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="get-involved" class="section-row right">
|
||||
<!-- <div class="graphic">
|
||||
<img src="images/graphics/graphite-logo.svg" alt="" />
|
||||
</div> -->
|
||||
<div class="section">
|
||||
<h2>Get involved.</h2>
|
||||
<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
|
||||
help.
|
||||
</p>
|
||||
<p>
|
||||
Rust, web, and graphics programmers should check out the <a href="/contribute">development page</a> for a quick technical overview and resources for getting started. Or just ask where to
|
||||
begin in the #development channel on Discord and the community will get you set up.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="community" class="section-row">
|
||||
<div class="diptych">
|
||||
<div id="newsletter" class="section">
|
||||
<h2>Stay in the loop.</h2>
|
||||
<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>
|
||||
<form action="/404">
|
||||
<div class="same-line">
|
||||
<div class="column name">
|
||||
<label for="newsletter-name">First + last name:</label>
|
||||
<input id="newsletter-name" type="text" />
|
||||
</div>
|
||||
<div class="column email">
|
||||
<label for="newsletter-email">Email address:</label>
|
||||
<input id="newsletter-email" type="email" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="column submit">
|
||||
<input type="submit" value="Subscribe" class="button" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="social" class="section">
|
||||
<h2>Follow along.</h2>
|
||||
<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.
|
||||
</p>
|
||||
<div class="social-links">
|
||||
<div class="column">
|
||||
<a href="https://discord.graphite.rs" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
|
||||
<path
|
||||
d="M39.983,3.4A38.948,38.948,0,0,0,30.369.414a.146.146,0,0,0-.155.073,27.131,27.131,0,0,0-1.2,2.459,35.956,35.956,0,0,0-10.8,0A24.883,24.883,0,0,0,17,.487.152.152,0,0,0,16.85.414,38.84,38.84,0,0,0,7.236,3.4a.138.138,0,0,0-.063.054A39.861,39.861,0,0,0,.2,30.333a.162.162,0,0,0,.061.111A39.166,39.166,0,0,0,12.05,36.405a.153.153,0,0,0,.166-.054,27.993,27.993,0,0,0,2.413-3.924.15.15,0,0,0-.082-.208,25.792,25.792,0,0,1-3.684-1.756.152.152,0,0,1-.015-.251c.248-.186.5-.379.732-.573a.146.146,0,0,1,.153-.021,27.931,27.931,0,0,0,23.736,0,.145.145,0,0,1,.155.019c.236.195.484.39.734.575a.151.151,0,0,1-.013.251,24.2,24.2,0,0,1-3.686,1.754.151.151,0,0,0-.08.21,31.43,31.43,0,0,0,2.411,3.923.15.15,0,0,0,.166.056,39.036,39.036,0,0,0,11.812-5.962.152.152,0,0,0,.061-.109A39.6,39.6,0,0,0,40.044,3.452.12.12,0,0,0,39.983,3.4Zm-24.2,21.571a4.539,4.539,0,0,1-4.245-4.76,4.515,4.515,0,0,1,4.245-4.76,4.49,4.49,0,0,1,4.245,4.76A4.515,4.515,0,0,1,15.783,24.967Zm15.694,0a4.539,4.539,0,0,1-4.245-4.76,4.515,4.515,0,0,1,4.245-4.76,4.49,4.49,0,0,1,4.245,4.76A4.5,4.5,0,0,1,31.477,24.967Z"
|
||||
transform="translate(0.3 5.588)" fill="#803847" />
|
||||
</svg>
|
||||
<span class="link arrow">Join on Discord</span>
|
||||
</a>
|
||||
<a href="https://www.reddit.com/r/graphite/" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
|
||||
<path
|
||||
d="M22,44A21.9,21.9,0,0,1,9.7,40.243a22.064,22.064,0,0,1-7.971-9.679A21.971,21.971,0,0,1,3.757,9.7a22.065,22.065,0,0,1,9.679-7.971A21.971,21.971,0,0,1,34.3,3.757a22.064,22.064,0,0,1,7.971,9.679A21.971,21.971,0,0,1,40.243,34.3a22.066,22.066,0,0,1-9.679,7.971A21.861,21.861,0,0,1,22,44ZM10.6,18.784a3.214,3.214,0,0,0-1.312,6.15,6.069,6.069,0,0,0-.077.978c0,2.389,1.334,4.632,3.757,6.317a16.015,16.015,0,0,0,9.083,2.612,16.016,16.016,0,0,0,9.083-2.612c2.423-1.684,3.757-3.928,3.757-6.317a5.738,5.738,0,0,0-.077-.952A3.314,3.314,0,0,0,36.667,22a3.22,3.22,0,0,0-3.216-3.216,3.1,3.1,0,0,0-2.213.9,15.857,15.857,0,0,0-8.568-2.727l1.467-6.87,4.76,1A2.291,2.291,0,1,0,31.186,8.7a2.219,2.219,0,0,0-2.033,1.287L23.827,8.852a.7.7,0,0,0-.115-.01.576.576,0,0,0-.579.447l-1.621,7.668a15.609,15.609,0,0,0-8.7,2.727A3.243,3.243,0,0,0,10.6,18.784ZM22.026,32.009a12.4,12.4,0,0,1-2.464-.257A5.845,5.845,0,0,1,16.6,30.337a.609.609,0,0,1,0-.849.606.606,0,0,1,.849,0,4.572,4.572,0,0,0,2.1,1.036,10.519,10.519,0,0,0,2.505.3c1.491,0,3.592-.35,4.606-1.338a.606.606,0,0,1,.849,0,.662.662,0,0,1-.051.849,5.83,5.83,0,0,1-2.975,1.425A12.346,12.346,0,0,1,22.026,32.009Zm5.018-5.429a2.29,2.29,0,1,1,2.29-2.29A2.293,2.293,0,0,1,27.043,26.58Zm-10.087,0a2.29,2.29,0,1,1,2.29-2.29A2.293,2.293,0,0,1,16.957,26.58Z"
|
||||
transform="translate(2 2)" fill="#803847" />
|
||||
</svg>
|
||||
<span class="link not-uppercase arrow">/r/Graphite</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<a href="https://github.com/GraphiteEditor/Graphite" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
|
||||
<path
|
||||
d="M22,0a22,22,0,0,0-6.958,42.873c1.1.192,1.513-.468,1.513-1.045,0-.522-.028-2.255-.028-4.1C11,38.748,9.57,36.382,9.13,35.145a8,8,0,0,0-2.255-3.107c-.77-.413-1.87-1.43-.028-1.458,1.733-.028,2.97,1.6,3.383,2.255,1.98,3.327,5.142,2.392,6.407,1.815a4.628,4.628,0,0,1,1.4-2.942c-4.895-.55-10.01-2.448-10.01-10.862a8.562,8.562,0,0,1,2.255-5.913A7.905,7.905,0,0,1,10.5,9.1s1.842-.578,6.05,2.255a20.742,20.742,0,0,1,11,0C31.762,8.5,33.6,9.1,33.6,9.1a7.905,7.905,0,0,1,.22,5.83,8.512,8.512,0,0,1,2.255,5.912c0,8.443-5.142,10.313-10.038,10.863a5.21,5.21,0,0,1,1.485,4.07c0,2.943-.028,5.308-.028,6.05,0,.577.412,1.265,1.512,1.045A22.012,22.012,0,0,0,22,0Z"
|
||||
transform="translate(2 2)" fill="#803847" fill-rule="link evenodd" />
|
||||
</svg>
|
||||
<span class="link arrow">Star on GitHub</span>
|
||||
</a>
|
||||
<a href="https://twitter.com/graphiteeditor" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
|
||||
<path d="M0,0H48V48H0Z" fill="#803847" opacity="0" />
|
||||
<path
|
||||
d="M46.349,7.122A18.657,18.657,0,0,1,41,8.588a9.342,9.342,0,0,0,4.1-5.156,18.6,18.6,0,0,1-5.916,2.26,9.321,9.321,0,0,0-16.116,6.38,9.515,9.515,0,0,0,.24,2.12A26.457,26.457,0,0,1,4.1,4.456,9.332,9.332,0,0,0,6.983,16.9a9.3,9.3,0,0,1-4.22-1.166v.12a9.322,9.322,0,0,0,7.474,9.136,9.458,9.458,0,0,1-4.208.16,9.322,9.322,0,0,0,8.7,6.468A18.7,18.7,0,0,1,3.161,35.6a19,19,0,0,1-2.224-.13,26.349,26.349,0,0,0,14.28,4.186c17.14,0,26.51-14.2,26.51-26.508,0-.4-.01-.8-.028-1.2a18.941,18.941,0,0,0,4.646-4.82Z"
|
||||
transform="translate(0.937 2.752)" fill="#803847" />
|
||||
</svg>
|
||||
<span class="link not-uppercase arrow">@GraphiteEditor</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="/js/carousel.js"></script>
|
||||
{% endblock content %}
|
||||
Loading…
Reference in New Issue