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

Website responsive resizing improvements

Browse Source
This commit is contained in:
Keavon Chambers
2022-02-19 02:16:30 -08:00
parent 8baa1b1213
commit 1fd8e9f0e9
14 changed files with 275 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/sass/base.scss
+117 -34
View File
@@ -9,6 +9,35 @@
--max-width: 1600px;
--max-width-plus-padding: calc(var(--max-width) + 40px * 2);
--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
@@ -22,7 +51,7 @@ body {
font-family: "Inter", sans-serif;
line-height: 1.5;
font-weight: 500;
font-size: 18px;
font-size: var(--font-size-body);
color: var(--color-navy);
}
@@ -43,10 +72,10 @@ h1 {
font-feature-settings: "lnum";
line-height: 1.25;
font-weight: 700;
font-size: 60px;
font-size: var(--font-size-intro-heading);
~ p {
font-size: 22px;
font-size: var(--font-size-intro-body);
}
}
@@ -55,11 +84,11 @@ h2 {
font-feature-settings: "lnum";
line-height: 1.25;
font-weight: 700;
font-size: 40px;
font-size: var(--font-size-heading);
}
h3 {
font-size: 24px;
font-size: var(--font-size-link);
font-weight: 800;
text-transform: uppercase;
@@ -81,7 +110,7 @@ h4 {
font-family: "Bona Nova", serif;
font-feature-settings: "lnum";
line-height: 1.25;
font-size: 32px;
font-size: var(--font-size-heading);
font-weight: 400;
}
@@ -105,7 +134,7 @@ p + p {
.link {
display: inline-block;
font-size: 24px;
font-size: var(--font-size-link);
font-weight: 800;
text-decoration: none;
color: var(--color-crimson);
@@ -120,10 +149,10 @@ p + p {
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;
height: calc(var(--font-size-link) * 2);
line-height: calc(var(--font-size-link) * 2 - 2 * 2px);
font-size: var(--font-size-link);
padding: 0 var(--font-size-link);
box-sizing: border-box;
text-decoration: none;
font-weight: 800;
@@ -189,6 +218,11 @@ p + p {
display: block;
width: 100%;
height: auto;
@media screen and (max-width: 800px) {
width: auto;
height: 120px;
}
}
}
@@ -248,6 +282,13 @@ p + p {
min-width: 280px;
}
@media screen and (max-width: 600px) {
&.diptych .section,
&.triptych .section {
min-width: 100%;
}
}
img[alt=""]{
display: block;
@@ -270,7 +311,7 @@ p + p {
.page {
box-sizing: border-box;
overflow: hidden;
min-width: 600px;
min-width: 320px;
header {
padding: 0 40px;
@@ -299,7 +340,10 @@ p + p {
display: flex;
justify-content: space-between;
padding: 30px 0;
gap: 80px;
@media screen and (max-width: 760px) {
padding: 20px 0;
}
.left,
.right {
@@ -316,19 +360,18 @@ p + p {
text-decoration: none;
--height: 60px;
--button-padding: 24px;
--font-size: 36px;
font-size: var(--font-size);
--nav-font-size: 32px;
font-size: var(--nav-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);
font-size: var(--nav-font-size);
&::after {
content: "»";
margin-left: 8px
content: " »";
}
}
@@ -339,34 +382,74 @@ p + p {
height: var(--height);
}
}
}
@media screen and (max-width: 960px) {
gap: 60px;
.left,
.right {
@media screen and (max-width: 960px) {
gap: 30px;
a {
--height: 50px;
--button-padding: 16px;
--font-size: 26px;
--nav-font-size: 26px;
}
}
}
@media screen and (max-width: 760px) {
gap: 40px;
.left,
.right {
@media screen and (max-width: 760px) {
gap: 20px;
a {
--height: 40px;
--button-padding: 16px;
--font-size: 22px;
--button-padding: 12px;
--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;
}
}
}
website/sass/index.scss
+54 -14
View File
@@ -1,25 +1,40 @@
#logo {
display: flex;
img {
width: auto;
max-width: 100%;
max-height: 240px;
}
}
svg {
display: block;
height: auto;
.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)), -50px);
width: 100px;
mix-blend-mode: multiply;
@media screen and (max-width: 1000px) {
width: 40px;
top: 400px;
left: -10px;
}
}
#quick-links {
margin-bottom: calc(120 * var(--variable-px));
display: flex;
gap: 20px;
gap: calc(var(--font-size-link) * 0.8);
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;
#hero-message {
@media screen and (max-width: 1400px) {
p {
max-width: unset !important;
}
}
}
.hexagons {
@@ -196,6 +211,13 @@
margin-right: auto;
}
}
// 1600px is var(--max-width)
@media screen and (max-width: 1600px) {
.carousel.torn {
display: none;
}
}
}
#upcoming-tech {
@@ -209,6 +231,7 @@
#community {
#newsletter form {
width: 100%;
margin-top: 40px;
display: flex;
gap: 20px;
@@ -238,6 +261,11 @@
&.name {
flex: 1 0 0;
min-width: 240px;
}
&.phone {
display: none;
}
&.email {
@@ -245,6 +273,13 @@
min-width: 240px;
}
@media screen and (max-width: 400px) {
&.name,
&.email {
min-width: 100%;
}
}
&.submit {
flex: 1 0 0;
}
@@ -255,7 +290,7 @@
}
label {
font-size: 24px;
font-size: var(--font-size-link);
font-weight: 800;
margin-bottom: 10px;
line-height: 1;
@@ -264,13 +299,13 @@
input:not([type="submit"]) {
flex: 0 0 auto;
width: 100%;
height: 48px;
font-size: 22px;
height: calc(var(--font-size-link) * 2);
font-size: calc(var(--font-size-link) * 0.9);
color: inherit;
border: 2px solid currentColor;
outline: none;
margin: 0;
padding: 0 24px;
padding: 0 var(--font-size-link);
font-family: inherit;
font-weight: inherit;
box-sizing: border-box;
@@ -308,6 +343,11 @@
text-decoration: none;
display: flex;
img {
width: 48px;
height: 48px;
}
span {
line-height: 48px;
margin-left: 20px;