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

Fix website styling

Browse Source
This commit is contained in:
Keavon Chambers
2022-05-25 00:27:07 -07:00
parent 020f700c92
commit d12d805e2f
20 changed files with 422 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/sass/base.scss
+18 -13
View File
@@ -1,16 +1,11 @@
:root {
--color-walnut: #473a3a;
--color-manilla: #f1decd;
--color-mustard: #deba92;
--color-crimson: #803847;
--color-navy: #16323f;
--color-white: #ffffff;
--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);
--page-edge-padding: 40px;
--border-thickness: 2px;
--color-navy: #16323f;
--color-walnut: #473a3a;
--color-crimson: #803847;
--color-mustard: #e5c299;
--font-size-intro-heading: 60px;
--font-size-intro-body: 22px;
--font-size-link: 24px;
@@ -20,6 +15,13 @@
--font-size-article-h1: 32px;
--font-size-article-h2: 24px;
--font-size-article-h3: 18px;
--max-width: 1600px;
--max-width-plus-padding: calc(var(--max-width) + 40px * 2);
--variable-px: Min(1px, 0.15vw);
--page-edge-padding: 40px;
--border-thickness: 2px;
@media screen and (max-width: 760px) {
--font-size-intro-heading: 40px;
@@ -27,6 +29,7 @@
--font-size-link: 20px;
--font-size-heading: 32px;
--font-size-body: 16px;
--page-edge-padding: 28px;
}
@@ -36,8 +39,9 @@
--font-size-link: 16px;
--font-size-heading: 28px;
--font-size-body: 16px;
--border-thickness: 1px;
--page-edge-padding: 20px;
--border-thickness: 1px;
}
@media screen and (max-width: 400px) {
@@ -46,6 +50,7 @@
--font-size-link: 14px;
--font-size-heading: 24px;
--font-size-body: 16px;
--page-edge-padding: 12px;
}
}
@@ -57,7 +62,7 @@ body {
width: 100%;
height: 100%;
margin: 0;
background: white;
background: var(--color-white);
font-family: "Inter", sans-serif;
line-height: 1.5;
font-weight: 500;
website/sass/index.scss
+7 -7
View File
@@ -125,8 +125,8 @@
mask-size: contain;
&.left {
padding-left: 120px;
margin-left: -120px;
padding-left: 80px;
margin-left: -80px;
-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;
@@ -208,16 +208,16 @@
}
@media screen and (max-width: 1000px) {
margin-left: -40px;
margin-right: -40px;
margin-left: calc(-1 * var(--page-edge-padding));
margin-right: calc(-1 * var(--page-edge-padding));
.screenshot-details {
margin-left: 40px;
margin-right: 40px;
margin-left: var(--page-edge-padding);
margin-right: var(--page-edge-padding);
}
hr {
width: calc(100% - (32px + 40px) * 2);
width: calc(100% - (32px + var(--page-edge-padding)) * 2);
margin-left: auto;
margin-right: auto;
}
website/sass/logo.scss
+4 -4
View File
@@ -11,12 +11,12 @@
}
&.color {
background-color: var(--color-fog);
background-blend-mode: color-burn;
background-color: var(--color-white);
background-blend-mode: hard-light;
}
&.light {
background-color: var(--color-manilla);
background-color: var(--color-fog);
background-blend-mode: color-burn;
}