variables

Ferase · Apr 9, 2024 · 9b4f338 · 9b4f338
1 parent f7094ff
commit 9b4f338
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 32 deletions.
diff --git 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
@@ -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,24 +77,24 @@ hr{
         var(--clr-accent2) 50%,
         var(--clr-accent3) 100%
     ) 1;
-    margin: 2rem 0;
+    margin: var(--space-large) 0;
 }
 
 
 
 /* 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
@@ -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{