Replaces px units with relative eighth rem units

5 files changed, 9 insertions, 12 deletions

diff --git a/public/css/modules/btn.css b/public/css/modules/btn.css
index fcfd02e..142463c 100644
--- a/public/css/modules/btn.css
+++ b/public/css/modules/btn.css
@@ -2,7 +2,7 @@
   display: block;
   box-sizing: border-box;
   color: var(--text-color);
-  border: solid 2px var(--text-color);
+  border: solid var(--relative-eighth-rem) var(--text-color);
   font-weight: 500;
   text-align: center;
   margin-block-start: var(--margin-block-sm);
diff --git a/public/css/modules/link.css b/public/css/modules/link.css
index 71dd753..4bf2fc7 100644
--- a/public/css/modules/link.css
+++ b/public/css/modules/link.css
@@ -2,10 +2,10 @@
   color: var(--special-text-color);
   text-decoration-line: underline;
   text-decoration-color: var(--special-text-color);
-  text-decoration-thickness: 2px;
-  text-underline-offset: 2px;
-  border: dotted transparent 2px;
-  border-radius: 0.375rem;
+  text-decoration-thickness: var(--relative-eighth-rem);
+  text-underline-offset: var(--relative-eighth-rem);
+  border: dotted transparent var(--relative-eighth-rem);
+  border-radius: calc(3 * var(--relative-eighth-rem));
   transition:
     color 100ms,
     text-decoration-color 100ms,
@@ -19,8 +19,8 @@
 .link:is(:hover, :focus, :focus-visible, :focus-within),
 .group-hover:is(:hover, :focus, :focus-visible, :focus-within) .link {
   text-decoration-color: currentColor;
-  text-decoration-thickness: 8px;
-  text-underline-offset: 4px;
+  text-decoration-thickness: calc(4 * var(--relative-eighth-rem));
+  text-underline-offset: calc(3 * var(--relative-eighth-rem));
   font-weight: 700;
   transition:
     color 300ms,
diff --git a/public/css/modules/nav.css b/public/css/modules/nav.css
index f2e2c45..6af1c77 100644
--- a/public/css/modules/nav.css
+++ b/public/css/modules/nav.css
@@ -45,7 +45,7 @@
 
 .nav__logo a {
   text-decoration: none;
-  border: 2px dotted transparent;
+  border: var(--relative-eighth-rem) dotted transparent;
   transition: border-color 100ms;
 }
 
diff --git a/public/css/modules/news-index.css b/public/css/modules/news-index.css
index 078d11f..0050f70 100644
--- a/public/css/modules/news-index.css
+++ b/public/css/modules/news-index.css
@@ -1,7 +1,7 @@
 .news-index__item {
   display: block;
   box-sizing: border-box;
-  border: 2px solid var(--text-color);
+  border: var(--relative-eighth-rem) solid var(--text-color);
   transition: background 100ms;
   padding-block: var(--margin-block-md);
   padding-inline: var(--padding-inline-sm);
diff --git a/public/css/variables/layout.css b/public/css/variables/layout.css
index 904f5dc..b261b26 100644
--- a/public/css/variables/layout.css
+++ b/public/css/variables/layout.css
@@ -1,7 +1,4 @@
 :root {
   --max-width-prose-content: 35rem;
   --max-width-all-content: 56.6rem; /* golden ratio * prose content width */
-  
-  --breakpoint-sm: 640px;
-  --breakpoint-lg: 1280px;
 }
\ No newline at end of file