diff --git a/inktrinket_v2/about.html b/inktrinket_v2/about.html
index 1160489..fffc407 100644
--- a/inktrinket_v2/about.html
+++ b/inktrinket_v2/about.html
@@ -22,11 +22,11 @@
grid-area: a;
}
.grid-main__a p{
- margin-bottom: 1.4rem;
+ margin-bottom: var(--space-small);
}
.steph-img{
- --gap: 2.1rem;
+ --gap: var(--space-large);
display: grid;
gap: calc(var(--gap) / 2);
float: right;
diff --git a/inktrinket_v2/core.css b/inktrinket_v2/core.css
index 86cde3c..d0d29e7 100644
--- a/inktrinket_v2/core.css
+++ b/inktrinket_v2/core.css
@@ -12,6 +12,13 @@ body,html{scrollbar-width: none;}
/* Variables ------------------------ */
:root{
+ --space-smallest: 1rem;
+ --space-small: 1.5rem;
+ --space-large: 2rem;
+ --space-largest: 2.5rem;
+
+ --nl-position: 80%;
+
--clr-lightest: hsl(0, 100%, 100%);
--clr-darkest: #111111;
--clr-accent1: hsl(180, 100%, 50%);
@@ -25,6 +32,28 @@ body,html{scrollbar-width: none;}
--clr-palette-05: hsla(8, 100%, 65%, 1);
}
+/* 4K */
+@media only screen and (min-width: 2500px){ /* 2500px or bigger */
+ :root{
+ --space-smallest: 1.25rem;
+ --space-small: 1.75rem;
+ --space-large: 2.25rem;
+ --space-largest: 2.75rem;
+ }
+}
+
+/* Phone */
+@media only screen and (max-width: 768px){ /* 768px or smaller */
+ :root{
+ --space-smallest: 0.75rem;
+ --space-small: 1.25rem;
+ --space-large: 1.75rem;
+ --space-largest: 2.25rem;
+
+ --nl-position: 90%;
+ }
+}
+
/* Body ------------------------ */
@@ -48,7 +77,7 @@ hr{
var(--clr-accent2) 50%,
var(--clr-accent3) 100%
) 1;
- margin: 2rem 0;
+ margin: var(--space-large) 0;
}
@@ -56,16 +85,16 @@ hr{
/* Spacing ------------------------ */
.up_margin{
- margin-top: 1.4rem;
+ margin-top: var(--space-small);
}
.low_margin{
- margin-bottom: 1.4rem;
+ margin-bottom: var(--space-small);
}
.up_margin_large{
- margin-top: 2.1rem;
+ margin-top: var(--space-large);
}
.low_margin_large{
- margin-bottom: 2.1rem;
+ margin-bottom: var(--space-large);
}
@@ -108,8 +137,9 @@ hr{
justify-content: center;
align-items: center;
flex-wrap: wrap;
- gap: 2rem;
- padding: 1.4rem 0;
+ gap: var(--space-large);
+ padding: var(--space-small) 0;
+ margin-bottom: var(--space-large);
}
.header_icon{
@@ -120,42 +150,25 @@ hr{
display: grid;
grid-auto-flow: column;
align-items: center;
- gap: 1.4rem;
+ gap: var(--space-small);
}
.header_nav_grid li:not(:first-child){
- padding: 1.4rem;
+ padding: var(--space-small);
}
.header_nav_grid a:link{
font-family: "peridot-pe-variable", sans-serif;
font-variation-settings: "wght" 400, "wdth" 100, "ital" 0;
- font-size: 1.4rem;
-}
-
-@media only screen and (min-width: 2500px){
- .header_nav_grid{
- gap: 1.8rem;
- }
- .header_nav_grid li:not(:first-child){
- padding: 1.8rem;
- }
- .header_nav_grid a:link{
- font-size: 1.8rem;
- }
- .header_flex{
- gap: 2.2rem;
- padding: 1.8rem 0;
- }
+ font-size: var(--space-small);
}
-
/* Night Light ------------------------ */
#night-light{
position: fixed;
top: -24px;
- left: 80%;
+ left: var(--nl-position);
transform-box: fill-box;
transform-origin: 50px 24px;
animation: night-light-onload 1000ms ease;
diff --git a/inktrinket_v2/index.html b/inktrinket_v2/index.html
index 94738dd..b77987d 100644
--- a/inktrinket_v2/index.html
+++ b/inktrinket_v2/index.html
@@ -15,7 +15,7 @@
grid-template-areas:
"a a a b"
"c c c c";
- gap: 1.4rem;
+ gap: var(--space-small);
max-width: 50%;
margin: 0 auto;
}
@@ -39,7 +39,7 @@
fill: #111;
font-family: "peridot-pe-variable", sans-serif;
font-size: 6rem;
- font-variation-settings: 'wght' 400, 'wdth' 100, 'ital' 0;
+ font-variation-settings: 'wght' 600, 'wdth' 100, 'ital' 0;
}
.hero-banner__border{