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

Add website revisions and many new pages

Browse Source
This commit is contained in:
Keavon Chambers
2022-03-12 08:31:12 -08:00
parent 2f6722fb40
commit d4f62ba01d
37 changed files with 1039 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/sass/article.scss
+25
View File
@@ -0,0 +1,25 @@
#article {
max-width: 800px;
.details {
display: flex;
flex-direction: column;
gap: 20px;
.publication {
font-weight: 800;
}
.banner {
margin-top: 0;
display: block;
width: 100%;
height: auto;
}
hr {
margin-top: calc(40px - 20px);
margin-bottom: 40px;
}
}
}
website/sass/base.scss
+134 -77
View File
@@ -13,7 +13,9 @@
--font-size-intro-body: 22px;
--font-size-link: 24px;
--font-size-heading: 40px;
--font-size-subheading: 24px;
--font-size-body: 18px;
--border-thickness: 2px;
@media screen and (max-width: 760px) {
--font-size-intro-heading: 40px;
@@ -29,6 +31,7 @@
--font-size-link: 16px;
--font-size-heading: 28px;
--font-size-body: 16px;
--border-thickness: 1px;
}
@media screen and (max-width: 400px) {
@@ -59,35 +62,9 @@ a {
color: var(--color-crimson);
}
h1,
h2,
h3,
h4 {
margin: 0;
display: inline-block;
}
h1 {
font-family: "Bona Nova", serif;
font-feature-settings: "lnum";
line-height: 1.25;
font-weight: 700;
font-size: var(--font-size-intro-heading);
~ p {
font-size: var(--font-size-intro-body);
}
}
h2 {
font-family: "Bona Nova", serif;
font-feature-settings: "lnum";
line-height: 1.25;
font-weight: 700;
font-size: var(--font-size-heading);
}
h3 {
h1.box-header {
font-family: "Inter", sans-serif;
line-height: 1.5;
font-size: var(--font-size-link);
font-weight: 800;
text-transform: uppercase;
@@ -96,17 +73,33 @@ h3 {
white-space: pre;
}
~ .divider {
~ hr {
margin-top: 20px;
}
+ .divider + .diptych,
+ .divider + .triptych {
+ hr + .diptych,
+ hr + .triptych {
margin-top: 40px;
}
}
h4 {
h1.hero {
font-size: var(--font-size-intro-heading);
~ p {
font-size: var(--font-size-intro-body);
}
}
h1 {
font-family: "Bona Nova", serif;
font-feature-settings: "lnum";
line-height: 1.25;
font-weight: 700;
font-size: var(--font-size-heading);
}
h2 {
font-family: "Bona Nova", serif;
font-feature-settings: "lnum";
line-height: 1.25;
@@ -114,22 +107,74 @@ h4 {
font-weight: 400;
}
h3 {
font-size: var(--font-size-subheading);
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
display: inline-block;
}
p {
margin: 0;
hyphens: auto;
text-align: justify;
}
p ~ p {
margin-top: 1.5em;
}
h1 ~ p,
h2 ~ p,
h4 ~ p,
h4 ~ img,
h3 ~ p,
h1 ~ ol li p,
h2 ~ ol li p,
h3 ~ ol li p,
h1 ~ img,
h2 ~ img,
h3 ~ img,
p ~ h1,
p ~ h2,
p ~ h3,
p ~ details summary,
p + .link {
margin-top: 20px;
}
p + p {
margin-top: calc(1em * 1.5);
h1 ~ hr {
margin-top: 40px;
margin-bottom: 20px;
}
ol + p {
margin-top: 0;
}
code {
background: var(--color-fog);
padding: 0 4px;
}
pre {
padding: 20px;
background: var(--color-navy);
color: var(--color-fog);
code {
background: initial;
padding: 0;
}
}
summary {
cursor: pointer;
}
.link {
@@ -148,9 +193,9 @@ p + p {
.button.button.button.button {
color: var(--color-crimson);
display: inline-block;
border: 2px solid currentColor;
border: var(--border-thickness) solid currentColor;
height: calc(var(--font-size-link) * 2);
line-height: calc(var(--font-size-link) * 2 - 2 * 2px);
line-height: calc(var(--font-size-link) * 2 - 2 * var(--border-thickness));
font-size: var(--font-size-link);
padding: 0 var(--font-size-link);
box-sizing: border-box;
@@ -164,21 +209,27 @@ p + p {
font-family: "Inter", sans-serif;
}
.divider {
margin: 0 32px;
hr {
overflow: visible;
}
hr,
.ripple {
width: calc(100% - 32px * 2);
height: 2px;
height: var(--border-thickness);
margin: 0 32px;
background: currentColor;
position: relative;
border: none;
&::before {
left: -40px;
border-width: 0 0 2px 40px;
border-width: 0 0 var(--border-thickness) 40px;
}
&::after {
right: -40px;
border-width: 0 40px 2px 0;
border-width: 0 40px var(--border-thickness) 0;
}
&::before,
@@ -254,7 +305,7 @@ p + p {
max-width: var(--max-width);
margin: 0 auto;
.section h4 + .graphic {
.section h2 + .graphic {
margin-top: 20px;
img {
@@ -317,18 +368,16 @@ p + p {
padding: 0 40px;
color: var(--color-walnut);
// max-width + (80px + 32px) * 2
// var(--max-width) + (80px + 32px) * 2
@media screen and (max-width: 1824px) {
.divider {
&.ripple {
width: calc(100% + (40px * 2));
margin-left: -40px;
margin-right: -40px;
}
.ripple {
width: calc(100% + (40px * 2));
margin-left: -40px;
margin-right: -40px;
}
&:not(.ripple) {
display: none;
}
hr {
display: none;
}
}
@@ -367,16 +416,15 @@ p + p {
height: var(--height);
padding-left: var(--button-padding);
padding-right: var(--button-padding);
line-height: calc(var(--height) - 2 * 2px);
line-height: calc(var(--height) - 2 * var(--border-thickness));
font-size: var(--nav-font-size);
&::after {
content: " »";
}
}
svg {
fill: currentColor;
img {
display: block;
width: var(--height);
height: var(--height);
@@ -456,25 +504,26 @@ p + p {
}
}
.divider {
.ripple {
display: block;
background: none;
fill: none;
stroke: currentColor;
--ripple-height: 16px;
height: var(--ripple-height);
margin-top: calc(-1 * var(--ripple-height) + var(--border-thickness));
margin-bottom: calc(-1 * var(--border-thickness));
stroke-width: var(--border-thickness);
&.ripple {
display: block;
fill: none;
stroke: currentColor;
--ripple-height: 16px;
height: var(--ripple-height);
margin-top: calc(-1 * var(--ripple-height) + 2px);
margin-bottom: -2px;
stroke-width: 2px;
&::before,
&::after {
content: none;
}
&::before,
&::after {
content: none;
}
}
hr {
background: none;
}
}
main {
@@ -505,16 +554,24 @@ p + p {
gap: 40px;
padding: 40px;
padding-top: 0;
nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 40px;
@media screen and (max-width: 800px) {
@media screen and (max-width: 900px) {
max-width: 500px;
}
@media screen and (max-width: 760px) {
max-width: 440px;
}
@media screen and (max-width: 400px) {
gap: 6px 20px;
}
}
span {
website/sass/blog.scss
+85
View File
@@ -0,0 +1,85 @@
#intro {
.section {
flex: 1 1 100%;
.left-right-split {
width: 100%;
margin-top: 20px;
display: flex;
gap: 20px;
justify-content: space-between;
flex-wrap: wrap;
}
.feed {
margin-top: -4px;
a {
text-decoration: none;
display: flex;
gap: 8px;
.icon {
vertical-align: top;
width: calc(var(--font-size-link) * 1.5);
height: calc(var(--font-size-link) * 1.5);
}
.link {
vertical-align: top;
}
}
}
}
}
#articles {
display: flex;
flex-direction: column;
gap: 80px;
article {
display: flex;
gap: 80px;
.details {
display: flex;
flex-direction: column;
gap: 20px;
.headline a {
text-decoration: none;
color: var(--color-navy);
}
.publication {
font-weight: 800;
}
.summary {
flex-direction: column;
gap: 20px;
text-align: justify;
hyphens: auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
}
.banner {
width: 400px;
flex: 0 0 auto;
img {
display: block;
width: 100%;
height: auto;
}
}
}
}
website/sass/index.scss
+36 -5
View File
@@ -27,6 +27,18 @@
display: flex;
gap: calc(var(--font-size-link) * 0.8);
flex-wrap: wrap;
div {
display: flex;
gap: calc(var(--font-size-link) * 0.8);
flex-direction: row;
img {
width: 48px;
display: block;
}
}
}
#hero-message {
@@ -172,7 +184,7 @@
height: 16px;
box-sizing: border-box;
border-radius: 50%;
border: 2px solid currentColor;
border: var(--border-thickness) solid currentColor;
&.active {
border: none;
@@ -205,7 +217,7 @@
margin-right: 40px;
}
.divider.divider {
hr {
width: calc(100% - (32px + 40px) * 2);
margin-left: auto;
margin-right: auto;
@@ -320,7 +332,7 @@
height: calc(var(--font-size-link) * 2);
font-size: calc(var(--font-size-link) * 0.9);
color: inherit;
border: 2px solid currentColor;
border: var(--border-thickness) solid currentColor;
outline: none;
margin: 0;
padding: 0 var(--font-size-link);
@@ -380,7 +392,26 @@
background-color: var(--color-mustard);
color: var(--color-navy);
a {
color: var(--color-crimson);
article {
display: flex;
flex-direction: column;
gap: 20px;
.headline a {
text-decoration: none;
color: var(--color-navy);
}
.publication {
font-weight: 800;
}
.summary {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 8;
}
}
}
website/sass/logo.scss
+61
View File
@@ -0,0 +1,61 @@
.logo-view {
display: flex;
margin: 0 auto;
&.logo-view.logo-view {
margin-top: 0;
&:first-of-type {
margin-top: 20px;
}
}
&.color {
background-color: var(--color-manilla);
background-blend-mode: hard-light;
}
&.dark {
color: var(--color-fog);
background-color: var(--color-navy);
background-blend-mode: soft-light;
a {
color: var(--color-mustard);
}
}
&.light {
background-color: var(--color-fog);
background-blend-mode: color-burn;
}
.box {
display: flex;
flex-wrap: wrap;
gap: 80px 160px;
div {
display: flex;
flex-direction: column;
img {
max-width: calc(100vw - 2 * 80 * var(--variable-px));
}
span {
font-weight: 800;
margin-top: 20px;
white-space: nowrap;
}
a {
white-space: nowrap;
}
}
}
+ h3 {
margin-top: 20px;
}
}
website/sass/page.scss
View File