Website responsive resizing improvements
This commit is contained in:
Keavon Chambers
parent
3f79df7314
commit
248e2ab0d1
|
|
@ -1,3 +1,4 @@
|
||||||
target/
|
target/
|
||||||
*.spv
|
*.spv
|
||||||
*.exrc
|
*.exrc
|
||||||
|
website/public
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,35 @@
|
||||||
--max-width: 1600px;
|
--max-width: 1600px;
|
||||||
--max-width-plus-padding: calc(var(--max-width) + 40px * 2);
|
--max-width-plus-padding: calc(var(--max-width) + 40px * 2);
|
||||||
--variable-px: Min(1px, 0.15vw);
|
--variable-px: Min(1px, 0.15vw);
|
||||||
|
--font-size-intro-heading: 60px;
|
||||||
|
--font-size-intro-body: 22px;
|
||||||
|
--font-size-link: 24px;
|
||||||
|
--font-size-heading: 40px;
|
||||||
|
--font-size-body: 18px;
|
||||||
|
|
||||||
|
@media screen and (max-width: 760px) {
|
||||||
|
--font-size-intro-heading: 40px;
|
||||||
|
--font-size-intro-body: 18px;
|
||||||
|
--font-size-link: 20px;
|
||||||
|
--font-size-heading: 32px;
|
||||||
|
--font-size-body: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 500px) {
|
||||||
|
--font-size-intro-heading: 32px;
|
||||||
|
--font-size-intro-body: 16px;
|
||||||
|
--font-size-link: 16px;
|
||||||
|
--font-size-heading: 28px;
|
||||||
|
--font-size-body: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 400px) {
|
||||||
|
--font-size-intro-heading: 24px;
|
||||||
|
--font-size-intro-body: 14px;
|
||||||
|
--font-size-link: 14px;
|
||||||
|
--font-size-heading: 24px;
|
||||||
|
--font-size-body: 16px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Global element styles
|
// Global element styles
|
||||||
|
|
@ -22,7 +51,7 @@ body {
|
||||||
font-family: "Inter", sans-serif;
|
font-family: "Inter", sans-serif;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 18px;
|
font-size: var(--font-size-body);
|
||||||
color: var(--color-navy);
|
color: var(--color-navy);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -43,10 +72,10 @@ h1 {
|
||||||
font-feature-settings: "lnum";
|
font-feature-settings: "lnum";
|
||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 60px;
|
font-size: var(--font-size-intro-heading);
|
||||||
|
|
||||||
~ p {
|
~ p {
|
||||||
font-size: 22px;
|
font-size: var(--font-size-intro-body);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -55,11 +84,11 @@ h2 {
|
||||||
font-feature-settings: "lnum";
|
font-feature-settings: "lnum";
|
||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 40px;
|
font-size: var(--font-size-heading);
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 24px;
|
font-size: var(--font-size-link);
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
|
@ -81,7 +110,7 @@ h4 {
|
||||||
font-family: "Bona Nova", serif;
|
font-family: "Bona Nova", serif;
|
||||||
font-feature-settings: "lnum";
|
font-feature-settings: "lnum";
|
||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
font-size: 32px;
|
font-size: var(--font-size-heading);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -105,7 +134,7 @@ p + p {
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 24px;
|
font-size: var(--font-size-link);
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--color-crimson);
|
color: var(--color-crimson);
|
||||||
|
|
@ -120,10 +149,10 @@ p + p {
|
||||||
color: var(--color-crimson);
|
color: var(--color-crimson);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: 2px solid currentColor;
|
border: 2px solid currentColor;
|
||||||
height: 48px;
|
height: calc(var(--font-size-link) * 2);
|
||||||
line-height: calc(48px - 2 * 2px);
|
line-height: calc(var(--font-size-link) * 2 - 2 * 2px);
|
||||||
font-size: 24px;
|
font-size: var(--font-size-link);
|
||||||
padding: 0 24px;
|
padding: 0 var(--font-size-link);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
|
|
@ -189,6 +218,11 @@ p + p {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
width: auto;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -248,6 +282,13 @@ p + p {
|
||||||
min-width: 280px;
|
min-width: 280px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
&.diptych .section,
|
||||||
|
&.triptych .section {
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
img[alt=""]{
|
img[alt=""]{
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
|
|
@ -270,7 +311,7 @@ p + p {
|
||||||
.page {
|
.page {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
min-width: 600px;
|
min-width: 320px;
|
||||||
|
|
||||||
header {
|
header {
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
|
|
@ -299,7 +340,10 @@ p + p {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 30px 0;
|
padding: 30px 0;
|
||||||
gap: 80px;
|
|
||||||
|
@media screen and (max-width: 760px) {
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
.left,
|
.left,
|
||||||
.right {
|
.right {
|
||||||
|
|
@ -316,19 +360,18 @@ p + p {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
--height: 60px;
|
--height: 60px;
|
||||||
--button-padding: 24px;
|
--button-padding: 24px;
|
||||||
--font-size: 36px;
|
--nav-font-size: 32px;
|
||||||
font-size: var(--font-size);
|
font-size: var(--nav-font-size);
|
||||||
|
|
||||||
&.button {
|
&.button {
|
||||||
height: var(--height);
|
height: var(--height);
|
||||||
padding-left: var(--button-padding);
|
padding-left: var(--button-padding);
|
||||||
padding-right: var(--button-padding);
|
padding-right: var(--button-padding);
|
||||||
line-height: calc(var(--height) - 2 * 2px);
|
line-height: calc(var(--height) - 2 * 2px);
|
||||||
font-size: var(--font-size);
|
font-size: var(--nav-font-size);
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: "»";
|
content: " »";
|
||||||
margin-left: 8px
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -339,34 +382,74 @@ p + p {
|
||||||
height: var(--height);
|
height: var(--height);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 960px) {
|
@media screen and (max-width: 960px) {
|
||||||
gap: 60px;
|
|
||||||
|
|
||||||
.left,
|
|
||||||
.right {
|
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
--height: 50px;
|
--height: 50px;
|
||||||
--button-padding: 16px;
|
--button-padding: 16px;
|
||||||
--font-size: 26px;
|
--nav-font-size: 26px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
@media screen and (max-width: 760px) {
|
||||||
@media screen and (max-width: 760px) {
|
|
||||||
gap: 40px;
|
|
||||||
|
|
||||||
.left,
|
|
||||||
.right {
|
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
--height: 40px;
|
--height: 40px;
|
||||||
--button-padding: 16px;
|
--button-padding: 12px;
|
||||||
--font-size: 22px;
|
--nav-font-size: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
--height: 30px;
|
||||||
|
--button-padding: 8px;
|
||||||
|
--nav-font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 500px) {
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
--height: 24px;
|
||||||
|
--button-padding: 8px;
|
||||||
|
--nav-font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 460px) {
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
--height: 22px;
|
||||||
|
--button-padding: 6px;
|
||||||
|
--nav-font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 400px) {
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
--height: 20px;
|
||||||
|
--button-padding: 4px;
|
||||||
|
--nav-font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 360px) {
|
||||||
|
gap: 6px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
--height: 20px;
|
||||||
|
--button-padding: 4px;
|
||||||
|
--nav-font-size: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,40 @@
|
||||||
#logo {
|
#logo {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 240px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
svg {
|
.pencil-texture {
|
||||||
display: block;
|
position: absolute;
|
||||||
height: auto;
|
--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)), -50px);
|
||||||
|
width: 100px;
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
|
||||||
|
@media screen and (max-width: 1000px) {
|
||||||
|
width: 40px;
|
||||||
|
top: 400px;
|
||||||
|
left: -10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#quick-links {
|
#quick-links {
|
||||||
margin-bottom: calc(120 * var(--variable-px));
|
margin-bottom: calc(120 * var(--variable-px));
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20px;
|
gap: calc(var(--font-size-link) * 0.8);
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pencil-texture {
|
#hero-message {
|
||||||
position: absolute;
|
@media screen and (max-width: 1400px) {
|
||||||
--remaining-width-to-full: calc(var(--max-width-plus-padding) - min(calc(100vw - 100px), var(--max-width-plus-padding)));
|
p {
|
||||||
left: Max(calc(-1 * var(--remaining-width-to-full)), -40px);
|
max-width: unset !important;
|
||||||
width: 100px;
|
}
|
||||||
mix-blend-mode: multiply;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.hexagons {
|
.hexagons {
|
||||||
|
|
@ -196,6 +211,13 @@
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 1600px is var(--max-width)
|
||||||
|
@media screen and (max-width: 1600px) {
|
||||||
|
.carousel.torn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#upcoming-tech {
|
#upcoming-tech {
|
||||||
|
|
@ -209,6 +231,7 @@
|
||||||
|
|
||||||
#community {
|
#community {
|
||||||
#newsletter form {
|
#newsletter form {
|
||||||
|
width: 100%;
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
|
|
@ -238,6 +261,11 @@
|
||||||
&.name {
|
&.name {
|
||||||
flex: 1 0 0;
|
flex: 1 0 0;
|
||||||
min-width: 240px;
|
min-width: 240px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&.phone {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.email {
|
&.email {
|
||||||
|
|
@ -245,6 +273,13 @@
|
||||||
min-width: 240px;
|
min-width: 240px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 400px) {
|
||||||
|
&.name,
|
||||||
|
&.email {
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.submit {
|
&.submit {
|
||||||
flex: 1 0 0;
|
flex: 1 0 0;
|
||||||
}
|
}
|
||||||
|
|
@ -255,7 +290,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
font-size: 24px;
|
font-size: var(--font-size-link);
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
|
@ -264,13 +299,13 @@
|
||||||
input:not([type="submit"]) {
|
input:not([type="submit"]) {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 48px;
|
height: calc(var(--font-size-link) * 2);
|
||||||
font-size: 22px;
|
font-size: calc(var(--font-size-link) * 0.9);
|
||||||
color: inherit;
|
color: inherit;
|
||||||
border: 2px solid currentColor;
|
border: 2px solid currentColor;
|
||||||
outline: none;
|
outline: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0 24px;
|
padding: 0 var(--font-size-link);
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -308,6 +343,11 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
line-height: 48px;
|
line-height: 48px;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
<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="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="#473a3a" />
|
||||||
<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" />
|
<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>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 434 B After Width: | Height: | Size: 434 B |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="#803847" d="M40.34,9.04C40.33,9.02,40.31,9,40.28,8.99C37.22,7.58,33.99,6.58,30.67,6c-0.06-0.01-0.12,0.02-0.16,0.07c-0.44,0.8-0.84,1.62-1.2,2.46c-3.58-0.54-7.22-0.54-10.8,0c-0.36-0.84-0.76-1.66-1.21-2.46C17.27,6.02,17.21,5.99,17.15,6c-3.32,0.57-6.55,1.58-9.61,2.99C7.51,9,7.49,9.02,7.47,9.04C2,16.88-0.47,26.42,0.5,35.92c0,0.04,0.03,0.08,0.06,0.11c3.56,2.64,7.55,4.66,11.79,5.96c0.06,0.02,0.13,0,0.17-0.05c0.91-1.24,1.72-2.55,2.41-3.92c0.04-0.07,0.01-0.16-0.07-0.2c0,0-0.01,0-0.02-0.01c-1.27-0.49-2.5-1.07-3.68-1.76c-0.07-0.04-0.1-0.14-0.05-0.21c0.01-0.02,0.02-0.03,0.04-0.04c0.25-0.19,0.5-0.38,0.73-0.57c0.04-0.04,0.1-0.04,0.15-0.02c7.52,3.53,16.22,3.53,23.74,0c0.05-0.02,0.11-0.02,0.16,0.02c0.24,0.2,0.48,0.39,0.73,0.58c0.07,0.05,0.08,0.14,0.03,0.21c-0.01,0.02-0.03,0.03-0.04,0.04c-1.18,0.69-2.41,1.27-3.69,1.75c-0.08,0.03-0.12,0.12-0.09,0.2c0,0.01,0,0.01,0.01,0.01c0.71,1.36,1.51,2.68,2.41,3.92c0.04,0.05,0.1,0.07,0.17,0.06c4.25-1.3,8.24-3.32,11.81-5.96c0.04-0.03,0.06-0.07,0.06-0.11C48.32,26.41,45.84,16.86,40.34,9.04z M20.33,25.8c0.14,2.48-1.76,4.61-4.24,4.76v0c-2.48-0.16-4.37-2.28-4.24-4.76c-0.14-2.49,1.76-4.62,4.24-4.76c2.48,0.13,4.38,2.24,4.25,4.72C20.33,25.77,20.33,25.79,20.33,25.8z M36.02,25.8c0.15,2.48-1.75,4.61-4.23,4.76c-0.01,0-0.01,0-0.02,0v0c-2.48-0.16-4.37-2.28-4.24-4.76c-0.14-2.49,1.76-4.62,4.24-4.76c2.48,0.13,4.38,2.24,4.25,4.72C36.02,25.77,36.02,25.79,36.02,25.8z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="#803847" d="M44.83,16.98C41.82,8.04,33.44,2.01,24,2C11.85,2,2,11.84,1.99,23.99c0,9.47,6.06,17.89,15.05,20.88c1.1,0.19,1.51-0.47,1.51-1.04c0-0.52-0.03-2.26-0.03-4.1c-5.53,1.02-6.96-1.35-7.4-2.58c-0.49-1.2-1.26-2.27-2.26-3.11c-0.77-0.41-1.87-1.43-0.03-1.46c1.73-0.03,2.97,1.6,3.38,2.26c1.98,3.33,5.14,2.39,6.41,1.82c0.09-1.12,0.59-2.16,1.4-2.94c-4.89-0.55-10.01-2.45-10.01-10.86c-0.03-2.19,0.78-4.3,2.26-5.91c-0.67-1.9-0.6-3.99,0.22-5.83c0,0,1.84-0.58,6.05,2.26c3.6-0.99,7.4-0.99,11,0c4.21-2.85,6.05-2.26,6.05-2.26c0.81,1.84,0.89,3.93,0.22,5.83c1.48,1.61,2.29,3.72,2.26,5.91c0,8.44-5.14,10.31-10.04,10.86c1.06,1.08,1.6,2.56,1.48,4.07c0,2.94-0.03,5.31-0.03,6.05c0,0.58,0.41,1.27,1.51,1.04C42.53,40.99,48.71,28.5,44.83,16.98z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 806 B |
|
|
@ -0,0 +1,26 @@
|
||||||
|
<svg width="936.892" height="240" viewBox="0 0 936.89 240" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="#473a3a"
|
||||||
|
d="M934.29,139.3c-3.08,2.94-6.82,5.09-10.91,6.27c-3.49,1.06-7.1,1.63-10.74,1.71c-6.08,0.08-11.98-2.06-16.6-6.02c-4.78-4.01-7.49-10.63-8.14-19.86l48.01-6.02c0-8.68-2.58-15.71-7.73-21.08c-5.16-5.37-12.72-8.06-22.7-8.06c-7.19-0.04-14.29,1.57-20.75,4.72c-6.37,3.07-11.75,7.86-15.54,13.83c-3.91,6.08-5.86,13.46-5.86,22.14c0,8.03,1.76,14.98,5.29,20.83c3.41,5.76,8.38,10.44,14.32,13.51c6.21,3.19,13.11,4.81,20.1,4.72c9.01,0,16.14-2.2,21.41-6.59c5.51-4.74,9.78-10.74,12.45-17.5L934.29,139.3z M891.64,99.01c2.28-3.85,5.26-5.78,8.95-5.78c3.79,0,6.48,1.84,8.06,5.53c1.68,4.2,2.59,8.66,2.69,13.18l-23.6,2.93C888.06,108.15,889.37,102.86,891.64,99.01" />
|
||||||
|
<path fill="#473a3a"
|
||||||
|
d="M844.61,151.33c-7.06,0-10.58-4.34-10.58-13.02v-34.5c0-4.34,2.17-6.51,6.51-6.51h14.65v-8.62h-21.16c0-4.12,0.05-8.19,0.16-12.21c0.11-4.01,0.59-11.63,0.91-15.76l-25.49,11.81v16.16h-9.77v8.62h9.77v44.27c0,7.16,2.01,13.02,6.02,17.58c4.01,4.56,9.87,6.83,17.58,6.84c4.07,0.13,8.11-0.71,11.8-2.44c3.03-1.49,5.72-3.6,7.89-6.18c1.98-2.37,3.62-5,4.88-7.81l-2.6-2.6C852.42,149.81,848.59,151.4,844.61,151.33" />
|
||||||
|
<path fill="#473a3a"
|
||||||
|
d="M783.25,154.67c-0.64-2.97-0.91-6-0.81-9.03v-38.9c0-5.21,0.08-9.52,0.24-12.94s0.3-5.94,0.41-7.57l-0.98-0.98l-35.48,16.44l1.63,3.74c1.09-0.4,2.2-0.73,3.34-0.98c0.94-0.21,1.89-0.31,2.85-0.32c0.97-0.07,1.92,0.22,2.69,0.81c0.59,0.54,0.89,1.63,0.9,3.26v37.43c0.08,3.03-0.14,6.05-0.65,9.03c-0.44,2.01-1.2,3.34-2.28,3.99c-1.35,0.73-2.86,1.12-4.39,1.14v3.74h41.5v-3.74c-2.06,0-4.1-0.39-6.02-1.14C784.64,157.85,783.56,156.38,783.25,154.67 M771.04,77.28c3.74,0.07,7.35-1.44,9.93-4.15c2.64-2.59,4.11-6.15,4.07-9.85c0.03-3.72-1.44-7.3-4.07-9.93c-2.56-2.75-6.17-4.29-9.93-4.23c-3.81-0.09-7.48,1.45-10.09,4.23c-2.64,2.63-4.1,6.21-4.07,9.93c0.02,7.75,6.32,14.02,14.07,14C770.98,77.29,771.01,77.29,771.04,77.28" />
|
||||||
|
<path fill="#473a3a"
|
||||||
|
d="M732.15,154.68c-0.64-2.97-0.91-6-0.81-9.03v-39.22c0-7.05-1.57-12.18-4.72-15.38c-3.15-3.2-8.08-4.8-14.81-4.8c-4.06,0.01-8.07,0.84-11.8,2.44c-3.08,1.21-6.03,2.75-8.79,4.57c-3.07,2.01-5.99,4.25-8.71,6.72V61.55c0-5.21,0.08-9.52,0.24-12.94c0.16-3.42,0.3-5.94,0.41-7.57L682.11,40l-35.45,16.42l1.66,3.82c1.09-0.4,2.2-0.73,3.34-0.98c0.94-0.21,1.89-0.32,2.85-0.33c0.96-0.07,1.92,0.22,2.68,0.81c0.6,0.55,0.9,1.63,0.9,3.26v82.63c0.08,3.03-0.14,6.05-0.65,9.03c-0.43,2.01-1.19,3.34-2.28,3.99c-1.35,0.73-2.86,1.12-4.4,1.14v3.74h41.5v-3.74c-2.06,0-4.1-0.38-6.02-1.14c-1.54-0.81-2.62-2.28-2.93-3.99c-0.64-2.97-0.91-6-0.82-9.03v-37.92c2.72-1.87,5.71-3.29,8.87-4.23c2.26-0.61,4.58-0.94,6.92-0.98c3.79,0,6.18,1,7.16,3.01c1.06,2.43,1.56,5.08,1.46,7.73v32.39c0.08,3.03-0.14,6.05-0.65,9.03c-0.43,2.01-1.19,3.34-2.28,3.99c-1.35,0.73-2.86,1.12-4.4,1.14v3.74h41.5v-3.74c-2.06,0-4.1-0.38-6.02-1.14c-1.54-0.81-2.62-2.28-2.93-3.99" />
|
||||||
|
<path fill="#473a3a"
|
||||||
|
d="M624.97,90.71c-4.3-2.92-9.37-4.48-14.57-4.48c-5.74-0.16-11.38,1.43-16.19,4.56c-4.26,2.76-7.67,6.65-9.85,11.23h-0.32c0-3.26,0.12-6.35,0.39-9.49c0.14-2.07,0.38-4.14,0.73-6.18l-0.98-0.98l-33.84,15.68l1.63,3.74c1.49-0.4,3.02-0.62,4.56-0.65c0.97-0.07,1.92,0.22,2.69,0.81c0.6,0.54,0.9,1.63,0.9,3.25v73.9c0.08,3.02-0.14,6.05-0.65,9.03c-0.43,2.01-1.19,3.34-2.28,3.99c-1.35,0.72-2.86,1.11-4.39,1.14V200h43.12v-3.74c-2.46,0.01-4.9-0.38-7.24-1.14c-1.71-0.68-2.96-2.18-3.33-3.99c-0.64-2.97-0.91-6-0.81-9.03v-16.76c1.52,0.22,3.17,0.38,4.96,0.49s3.77,0.16,5.94,0.16c5.18-0.03,10.33-0.8,15.3-2.28c5.21-1.52,10.1-4.01,14.4-7.32c4.5-3.5,8.15-7.98,10.66-13.1c2.71-5.37,4.07-11.96,4.07-19.78c0-7.81-1.36-14.49-4.07-20.02C633.4,98.33,629.66,93.92,624.97,90.71 M608.94,150.61c-3.26,5.04-7.27,7.57-12.04,7.57c-5.21,0-9.33-2.39-12.37-7.16v-43.3c1.7-1.75,3.75-3.11,6.02-3.99c2.03-0.79,4.18-1.2,6.35-1.22c4.77,0,8.79,2.31,12.04,6.92c3.26,4.61,4.88,11.64,4.88,21.08C613.82,138.86,612.19,145.57,608.94,150.61" />
|
||||||
|
<path fill="#473a3a"
|
||||||
|
d="M541.31,150.61c-1.17,0.45-2.41,0.7-3.66,0.73c-1.95,0-3.25-0.68-3.91-2.03c-0.74-1.83-1.07-3.81-0.98-5.78v-35.48c0-12.25-7.16-19.5-19.95-21.8c-8.97-1.62-19.39-1.04-28.28,0.57c-5.06,0.92-10.37,2.79-13.57,5.49v23.95h3.71c0.91-5.48,3.36-10.58,7.07-14.72c3.2-3.81,7.96-5.97,12.94-5.86c3.8,0,6.75,1.11,8.87,3.34c2.12,2.23,3.17,5.89,3.17,10.99v8.63c-13.78,3.69-23.95,7.76-30.52,12.21s-9.85,10.25-9.85,17.42c-0.06,4.5,1.47,8.88,4.31,12.36c2.87,3.58,7.29,5.37,13.27,5.37c4.5-0.01,8.92-1.16,12.86-3.34c4.18-2.27,7.62-5.69,9.93-9.85h0.33c0.95,3.66,3.1,6.9,6.1,9.2c2.87,2.12,6.97,3.17,12.29,3.17c4.71,0.08,9.34-1.19,13.35-3.66c4.15-2.73,7.43-6.6,9.44-11.15l-2.6-2.6C544.39,148.99,542.93,149.96,541.31,150.61 M506.73,146.3c-1.27,1.36-2.72,2.54-4.31,3.5c-1.74,1.05-3.75,1.58-5.78,1.54c-2.11,0.12-4.16-0.75-5.53-2.36c-1.32-1.63-2.02-3.68-1.95-5.78c0.09-1.95,0.5-3.88,1.22-5.7c1.09-2.66,2.82-5.01,5.05-6.84c2.55-2.28,6.32-4.12,11.31-5.53L506.73,146.3z" />
|
||||||
|
<path fill="#473a3a"
|
||||||
|
d="M440.68,91.63c-4.8,1.93-9.07,4.75-11.91,9.87h-0.33c-0.02-2.98,0.11-5.96,0.41-8.92c0.13-2.13,0.37-4.25,0.73-6.35l-0.98-0.98l-33.85,15.79l1.63,3.74c1.49-0.4,3.02-0.62,4.56-0.65c0.97-0.07,1.92,0.22,2.69,0.82c0.59,0.54,0.89,1.63,0.9,3.25v37.44c0.08,3.03-0.14,6.05-0.65,9.03c-0.43,2.01-1.19,3.34-2.28,3.99c-1.35,0.73-2.86,1.12-4.4,1.14v3.74h43.13v-3.74c-2.46,0.01-4.9-0.38-7.24-1.14c-1.71-0.68-2.97-2.18-3.34-3.99c-0.64-2.97-0.91-6-0.82-9.03v-36.29c2.1-1.79,4.53-3.15,7.16-3.99c2.49-0.72,5.06-1.08,7.65-1.06c2.42,0.01,4.78,0.68,6.84,1.95c2.17,1.3,3.71,5.12,4.48,10h4.1V92.3C455.3,89.03,446.61,89.25,440.68,91.63" />
|
||||||
|
<path fill="#473a3a"
|
||||||
|
d="M344.13,115.53c2.68,0.05,5.32,0.57,7.81,1.55c1.73,0.81,2.9,2.6,3.5,5.37c0.72,4.38,1.02,8.82,0.9,13.26c0,3.8-0.04,6.29-0.2,9.22c-0.16,2.93-0.39,4.51-1.58,6.47c-1.63,2.71-4.43,4-7.41,4.59c-2.7,0.57-5.46,0.87-8.22,0.9c-6.29,0-12.7-1.98-16.81-5.14c-5.27-4.05-9.38-11.35-12.04-19.92c-2.4-8.27-3.58-16.84-3.51-25.45c0-14.54,4.01-24.17,9.38-31.43c5.46-7.37,14.61-11.25,25-11.89c4.13-0.21,8.27,0.21,12.28,1.25c3.63,1.12,7.4,2.65,10.43,6.07c3.03,3.42,4.67,7.11,6.85,13.4h3.74v-24.9c-4.86-1.84-9.87-3.25-14.97-4.23c-5.73-1.18-11.56-1.78-17.41-1.79c-8.11-0.06-16.17,1.23-23.85,3.82c-7.23,2.44-13.91,6.25-19.69,11.23c-5.77,5.04-10.36,11.29-13.43,18.31c-3.38,7.91-5.05,16.46-4.88,25.07c0,10.96,2.39,20.57,7.16,28.81c4.6,8.07,11.36,14.7,19.53,19.12c8.5,4.57,18.02,6.89,27.67,6.76c7.53,0.11,15.02-0.97,22.22-3.18c5.71-1.74,11.2-4.14,16.36-7.16c3.26-1.87,6.32-4.08,9.11-6.59c-0.63-2.67-1.01-5.4-1.14-8.14c-0.11-2.61-0.16-5.37-0.16-8.3v-9.44c0-2.82,0.3-4.77,0.9-5.86c0.66-1.12,1.87-1.81,3.17-1.79v-3.74h-40.7V115.53z" />
|
||||||
|
<path fill="#f1decd"
|
||||||
|
d="M205.27,93.21l-43.55-75.43c-1.82-2.78-4.85-4.53-8.17-4.72h-87.1c-3.32,0.19-6.35,1.94-8.17,4.72L14.72,93.21c-1.49,2.97-1.49,6.46,0,9.43l43.56,75.44c1.82,2.78,4.85,4.53,8.17,4.71h87.1c3.32-0.18,6.35-1.93,8.17-4.71l43.56-75.44C206.76,99.67,206.76,96.18,205.27,93.21z" />
|
||||||
|
<polygon fill="#3ea8ff" points="174.28,33.39 160.62,9.74 84.53,9.74 149.31,121.45 206.4,89.03" />
|
||||||
|
<polygon fill="#2180ce" points="128.69,59.7 99.86,9.74 60.78,9.74 48.73,26.46 83.12,86.01 113.96,139.45 159.89,113.73" />
|
||||||
|
<polygon fill="#deba92" points="208.65,92.93 154.93,119.15 221.23,219.97" />
|
||||||
|
<polygon fill="#d49b64" points="161.23,116.05 115.65,142.37 209.23,199.18" />
|
||||||
|
<path fill="#473a3a"
|
||||||
|
d="M231.18,218.98l-0.07-0.69c-0.86-9.39-11.15-121.38-11.18-121.86c-0.23-2.84-1.07-5.6-2.45-8.09c-0.03-0.09-0.07-0.17-0.11-0.25l-0.06-0.15l-0.03,0.03l-0.02-0.01l0.04-0.02L205.5,67.5L172.31,10c-3.58-6.19-10.18-10-17.33-10H64.99c-7.14,0-13.74,3.81-17.32,10l-45,77.93c-3.57,6.19-3.57,13.81,0,20l45,77.93c3.57,6.19,10.17,10,17.32,10h89.99c3.86-0.03,7.63-1.19,10.85-3.32l38.59,27.68c-6.97-2.18-14.18-3.47-21.47-3.83c-18.11-0.87-71.2-0.28-131.42,4.63c-24.71,2.01-36.39,7.88-35.03,9.03c3.49,2.98,7.62,4.16,28.2,4.08c18.32-0.06,71.65,1.91,87.76,2.9c11.41,0.71,23.41,2.88,32.04,2.97c9.2-0.12,18.37-0.82,27.48-2.1c13.74-1.89,31.96-5.7,36.15-10.77C230.34,225.03,231.47,222.02,231.18,218.98z M62.49,24.32c1.67-2.55,4.45-4.16,7.5-4.33h79.99c3.04,0.17,5.81,1.77,7.49,4.31l33.26,57.61c-4.99,5.2-9.32,11-12.89,17.26l-24.77,2.75L138.3,122c-7.21-0.04-14.4,0.82-21.4,2.54L60.77,27.31L62.49,24.32z M69.99,175.86c-3.05-0.17-5.83-1.78-7.5-4.33l-40-69.27c-1.37-2.72-1.37-5.94,0-8.66l26.73-46.28l59.6,103.24l0.04-0.02c0.69,1.24,1.64,2.31,2.79,3.15l30.93,22.18L69.99,175.86z M186.75,182.93l-57.9-41.53c6.39-1.39,12.91-2.09,19.45-2.09l14.77-20.07l24.77-2.75c3.26-5.66,7.13-10.95,11.52-15.79l7.03,70.9C198.07,170.71,190.13,175.29,186.75,182.93z M81.64,154.71c1.49,2.33,0.8,5.42-1.52,6.91c-2.33,1.49-5.42,0.8-6.91-1.52c-0.08-0.12-0.15-0.25-0.22-0.38l-35-60.61c-1.49-2.33-0.8-5.42,1.52-6.91c2.33-1.49,5.42-0.8,6.91,1.52c0.08,0.12,0.15,0.25,0.22,0.38L81.64,154.71z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 8.4 KiB |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="#803847" d="M29.51,31.49c0.19,0.26,0.17,0.62-0.05,0.85c-0.83,0.75-1.87,1.25-2.98,1.42c-0.81,0.16-1.63,0.25-2.46,0.25c-0.83,0-1.65-0.09-2.46-0.26c-1.1-0.18-2.13-0.67-2.96-1.42c-0.23-0.24-0.23-0.61,0-0.85c0.24-0.23,0.61-0.23,0.85,0c0.6,0.52,1.32,0.88,2.1,1.04c0.82,0.2,1.66,0.3,2.51,0.3c1.49,0,3.59-0.35,4.61-1.34C28.9,31.25,29.27,31.25,29.51,31.49zM21.25,26.29c0-1.26-1.03-2.29-2.29-2.29c-1.26,0-2.29,1.03-2.29,2.29c0,1.26,1.03,2.29,2.29,2.29C20.22,28.58,21.25,27.55,21.25,26.29z M29.04,24c-1.26,0-2.29,1.03-2.29,2.29c0,1.26,1.03,2.29,2.29,2.29c1.26,0,2.29-1.03,2.29-2.29C31.33,25.03,30.31,24,29.04,24z M29.04,28.58C29.04,28.58,29.04,28.58,29.04,28.58C29.04,28.58,29.04,28.58,29.04,28.58L29.04,28.58z M42.24,36.3c-2.39,3.54-5.75,6.31-9.68,7.97C29.85,45.42,26.94,46.01,24,46c-4.38,0.01-8.67-1.3-12.3-3.76c-3.54-2.39-6.31-5.75-7.97-9.68c-2.9-6.85-2.14-14.7,2.03-20.86c2.39-3.54,5.75-6.31,9.68-7.97c6.85-2.9,14.7-2.14,20.86,2.03c3.54,2.39,6.31,5.75,7.97,9.68C47.17,22.29,46.41,30.14,42.24,36.3z M38.67,24c0-1.78-1.44-3.21-3.22-3.22c-0.83-0.01-1.63,0.32-2.21,0.9c-2.53-1.72-5.51-2.66-8.57-2.73l1.47-6.87l4.76,1c0.05,1.26,1.12,2.25,2.39,2.19c1.26-0.05,2.25-1.12,2.19-2.38c-0.05-1.23-1.06-2.2-2.29-2.2c-0.87-0.01-1.67,0.5-2.03,1.29l-5.33-1.14c-0.04-0.01-0.08-0.01-0.12-0.01c-0.27-0.01-0.52,0.18-0.58,0.45l-1.62,7.67c-3.11,0.02-6.14,0.97-8.7,2.73c-0.6-0.57-1.39-0.89-2.21-0.9c-1.78,0-3.22,1.43-3.22,3.21c0,1.27,0.75,2.42,1.91,2.94c-0.05,0.32-0.08,0.65-0.08,0.98c0,2.39,1.33,4.63,3.76,6.32c2.7,1.76,5.86,2.67,9.08,2.61c3.22,0.06,6.39-0.85,9.08-2.61c2.42-1.68,3.76-3.93,3.76-6.32c0-0.32-0.02-0.64-0.08-0.95C37.94,26.41,38.66,25.26,38.67,24z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="#803847" d="M41.94,11.34c1.95-1.16,3.4-3,4.1-5.16c-1.83,1.09-3.83,1.85-5.92,2.26C36.6,4.69,30.7,4.51,26.95,8.03c-1.88,1.76-2.94,4.22-2.94,6.79c0,0.71,0.08,1.42,0.24,2.12c-7.49-0.37-14.48-3.91-19.21-9.74c-2.47,4.26-1.21,9.71,2.88,12.44C6.44,19.6,4.99,19.2,3.7,18.49v0.12c0,4.44,3.13,8.26,7.47,9.14c-1.37,0.37-2.81,0.42-4.21,0.16c1.22,3.79,4.72,6.39,8.7,6.47c-3.3,2.59-7.37,3.99-11.57,3.98c-0.74,0-1.49-0.04-2.22-0.13c4.26,2.74,9.22,4.19,14.28,4.19c17.14,0,26.51-14.2,26.51-26.51c0-0.4-0.01-0.8-0.03-1.2c1.82-1.32,3.4-2.95,4.65-4.82l0-0.01C45.59,10.63,43.78,11.12,41.94,11.34z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 660 B |
|
|
@ -1,14 +1,17 @@
|
||||||
|
const FLING_VELOCITY_THRESHOLD = 10;
|
||||||
|
const FLING_VELOCITY_WINDOW_SIZE = 20;
|
||||||
|
|
||||||
let carouselImages;
|
let carouselImages;
|
||||||
let carouselDirectionPrev;
|
let carouselDirectionPrev;
|
||||||
let carouselDirectionNext;
|
let carouselDirectionNext;
|
||||||
let carouselDots;
|
let carouselDots;
|
||||||
let carouselDescriptions;
|
let carouselDescriptions;
|
||||||
let carouselDragLastClientX;
|
let carouselDragLastClientX;
|
||||||
let velocityDeltaWindow = Array.from({ length: 20 }, () => ({ time: 0, delta: 0 }));
|
let velocityDeltaWindow = Array.from({ length: FLING_VELOCITY_WINDOW_SIZE }, () => ({ time: 0, delta: 0 }));
|
||||||
|
|
||||||
window.addEventListener("DOMContentLoaded", initializeCarousel);
|
window.addEventListener("DOMContentLoaded", initializeCarousel);
|
||||||
window.addEventListener("pointerup", dragEnd);
|
window.addEventListener("pointerup", () => dragEnd(false));
|
||||||
window.addEventListener("scroll", dragEnd);
|
window.addEventListener("scroll", () => dragEnd(true));
|
||||||
window.addEventListener("pointermove", dragMove);
|
window.addEventListener("pointermove", dragMove);
|
||||||
|
|
||||||
function initializeCarousel() {
|
function initializeCarousel() {
|
||||||
|
|
@ -87,7 +90,7 @@ function dragBegin(event) {
|
||||||
document.querySelector("#screenshots").classList.add("dragging");
|
document.querySelector("#screenshots").classList.add("dragging");
|
||||||
}
|
}
|
||||||
|
|
||||||
function dragEnd() {
|
function dragEnd(dropWithoutVelocity) {
|
||||||
if (!carouselImages) return;
|
if (!carouselImages) return;
|
||||||
|
|
||||||
carouselDragLastClientX = undefined;
|
carouselDragLastClientX = undefined;
|
||||||
|
|
@ -108,7 +111,7 @@ function dragEnd() {
|
||||||
const activeDotIndex = currentActiveDotIndex();
|
const activeDotIndex = currentActiveDotIndex();
|
||||||
|
|
||||||
// If the speed is fast enough, slide to the next or previous image in that direction
|
// If the speed is fast enough, slide to the next or previous image in that direction
|
||||||
if (Math.abs(recentVelocity) > 10) {
|
if (Math.abs(recentVelocity) > FLING_VELOCITY_THRESHOLD && !dropWithoutVelocity) {
|
||||||
// Positive velocity should go to the previous image
|
// Positive velocity should go to the previous image
|
||||||
if (recentVelocity > 0) {
|
if (recentVelocity > 0) {
|
||||||
// Don't apply the velocity-based fling if we're already snapping to the next image
|
// Don't apply the velocity-based fling if we're already snapping to the next image
|
||||||
|
|
@ -128,6 +131,7 @@ function dragEnd() {
|
||||||
}
|
}
|
||||||
|
|
||||||
// If we didn't slide in a direction due to clear velocity, just snap to the closest image
|
// If we didn't slide in a direction due to clear velocity, just snap to the closest image
|
||||||
|
// This can be reached either by not entering the if statement above, or by its inner if statements not returning early and exiting back to this scope
|
||||||
slideTo(clamp(closestImageIndex, 0, carouselDots.length - 1), true);
|
slideTo(clamp(closestImageIndex, 0, carouselDots.length - 1), true);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -138,7 +142,7 @@ function dragMove(event) {
|
||||||
|
|
||||||
const LEFT_MOUSE_BUTTON = 1;
|
const LEFT_MOUSE_BUTTON = 1;
|
||||||
if (!(event.buttons & LEFT_MOUSE_BUTTON)) {
|
if (!(event.buttons & LEFT_MOUSE_BUTTON)) {
|
||||||
dragEnd();
|
dragEnd(false);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,40 +15,6 @@ let activeRippleIndex;
|
||||||
window.addEventListener("DOMContentLoaded", initializeRipples);
|
window.addEventListener("DOMContentLoaded", initializeRipples);
|
||||||
window.addEventListener("resize", () => animate(true));
|
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() {
|
function initializeRipples() {
|
||||||
ripplesInitialized = true;
|
ripplesInitialized = true;
|
||||||
|
|
||||||
|
|
@ -110,6 +76,40 @@ function animate(forceRefresh) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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 ease(x) {
|
function ease(x) {
|
||||||
return 1 - (1 - x) * (1 - x);
|
return 1 - (1 - x) * (1 - x);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
{% block title %}Page not found.{% endblock title %}
|
{% block title %}Page not found.{% endblock title %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<section id="404" class="section-row right">
|
<section id="404" class="section-row">
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h2>Page not found (yet).</h2>
|
<h2>Page not found (yet).</h2>
|
||||||
<p>
|
<p>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<html lang="en-US">
|
<html lang="en-US">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=0.6, maximum-scale=5.0, minimum-scale=0.6">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1">
|
||||||
<title>Graphite | {% block title %}{% endblock title %}</title>
|
<title>Graphite | {% block title %}{% endblock title %}</title>
|
||||||
{% block head %}{% endblock head %}
|
{% block head %}{% endblock head %}
|
||||||
<link rel="stylesheet" href="/base.css">
|
<link rel="stylesheet" href="/base.css">
|
||||||
|
|
|
||||||
|
|
@ -8,33 +8,7 @@
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<section id="logo">
|
<section id="logo">
|
||||||
<svg width="936.892" height="240.004" viewBox="0 0 936.89 240" xmlns="http://www.w3.org/2000/svg">
|
<img src="/images/graphics/logotype.svg" alt="Graphite Logo" />
|
||||||
<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>
|
</section>
|
||||||
|
|
||||||
<img class="pencil-texture" src="https://static.graphite.rs/textures/pencil-texture.png"></img>
|
<img class="pencil-texture" src="https://static.graphite.rs/textures/pencil-texture.png"></img>
|
||||||
|
|
@ -98,7 +72,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="screenshot-description">
|
<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>
|
<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>
|
instantly 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
|
<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>
|
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>
|
<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>
|
||||||
|
|
@ -109,7 +83,7 @@
|
||||||
|
|
||||||
<section id="opener-message" class="section-row right">
|
<section id="opener-message" class="section-row right">
|
||||||
<div class="graphic">
|
<div class="graphic">
|
||||||
<img src="images/graphics/brush.svg" alt="" />
|
<img src="/images/graphics/brush.svg" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h2>Professional 2D content creation for everyone.</h2>
|
<h2>Professional 2D content creation for everyone.</h2>
|
||||||
|
|
@ -117,7 +91,7 @@
|
||||||
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.
|
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>
|
||||||
<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
|
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
|
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.
|
browser</a> or an upcoming native client on Windows, Mac, and Linux.
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -131,7 +105,7 @@
|
||||||
|
|
||||||
<section id="available-now" class="section-row left">
|
<section id="available-now" class="section-row left">
|
||||||
<div class="graphic">
|
<div class="graphic">
|
||||||
<img src="images/graphics/alpha.svg" alt="" />
|
<img src="/images/graphics/alpha.svg" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h2>Available now for alpha testing.</h2>
|
<h2>Available now for alpha testing.</h2>
|
||||||
|
|
@ -197,7 +171,7 @@
|
||||||
color handling (ACES/OpenColorIO). Real-time collaboration. A rich ecosystem of custom nodes.
|
color handling (ACES/OpenColorIO). Real-time collaboration. A rich ecosystem of custom nodes.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Learn more about the planned technology in forthcoming Graphite releases.
|
Learn more about the planned technology in forthcoming Graphite releases:
|
||||||
</p>
|
</p>
|
||||||
<a href="/features" class="link arrow">Features</a>
|
<a href="/features" class="link arrow">Features</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -207,7 +181,7 @@
|
||||||
|
|
||||||
<section id="powered-by-rust" class="section-row left">
|
<section id="powered-by-rust" class="section-row left">
|
||||||
<div class="graphic">
|
<div class="graphic">
|
||||||
<img src="images/graphics/ferris-artist.svg" alt="" />
|
<img src="/images/graphics/ferris-artist.svg" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h2>Built for the future, powered by Rust.</h2>
|
<h2>Built for the future, powered by Rust.</h2>
|
||||||
|
|
@ -249,15 +223,19 @@
|
||||||
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
|
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.
|
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>
|
</p>
|
||||||
<form action="/404">
|
<form action="https://graphite.rs/newsletter-signup" method="post">
|
||||||
<div class="same-line">
|
<div class="same-line">
|
||||||
<div class="column name">
|
<div class="column name">
|
||||||
<label for="newsletter-name">First + last name:</label>
|
<label for="newsletter-name">First + last name:</label>
|
||||||
<input id="newsletter-name" type="text" />
|
<input id="newsletter-name" name="name" type="text" />
|
||||||
|
</div>
|
||||||
|
<div class="column phone">
|
||||||
|
<label for="newsletter-phone">Phone:</label>
|
||||||
|
<input id="newsletter-phone" name="phone" type="text" tabindex="-1" autocomplete="off" />
|
||||||
</div>
|
</div>
|
||||||
<div class="column email">
|
<div class="column email">
|
||||||
<label for="newsletter-email">Email address:</label>
|
<label for="newsletter-email">Email address:</label>
|
||||||
<input id="newsletter-email" type="email" />
|
<input id="newsletter-email" name="email" type="email" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="column submit">
|
<div class="column submit">
|
||||||
|
|
@ -274,38 +252,21 @@
|
||||||
<div class="social-links">
|
<div class="social-links">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<a href="https://discord.graphite.rs" target="_blank">
|
<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">
|
<img src="/images/graphics/discord.svg" alt="Discord" />
|
||||||
<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>
|
<span class="link arrow">Join on Discord</span>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://www.reddit.com/r/graphite/" target="_blank">
|
<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">
|
<img src="/images/graphics/reddit.svg" alt="Reddit" />
|
||||||
<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>
|
<span class="link not-uppercase arrow">/r/Graphite</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<a href="https://github.com/GraphiteEditor/Graphite" target="_blank">
|
<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">
|
<img src="/images/graphics/github.svg" alt="GitHub" />
|
||||||
<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>
|
<span class="link arrow">Star on GitHub</span>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://twitter.com/graphiteeditor" target="_blank">
|
<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">
|
<img src="/images/graphics/twitter.svg" alt="Twitter" />
|
||||||
<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>
|
<span class="link not-uppercase arrow">@GraphiteEditor</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue