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{