chore: Tweek Typo for UX

macx · May 7, 2024 · 71f4f73 · 71f4f73
1 parent 42bcd2d
commit 71f4f73
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/src/styles/base/_typo.scss b/src/styles/base/_typo.scss
@@ -105,7 +105,7 @@ small {
 code {
   display: inline-block;
   font-family: var(--ff-code);
-  font-size: 1em;
+  font-size: 0.95em;
   font-variation-settings:
     'wght' 700,
     'slnt' 0;

diff --git a/src/styles/base/_variables.scss b/src/styles/base/_variables.scss
@@ -70,7 +70,7 @@
   --ff-code: 'JetBrains Mono Variable', monospace;
 
   // Font Weights
-  --fw: 300;
+  --fw: 350;
   --fw-bold: 500;
   --fw-headings: 700;
 
@@ -86,7 +86,7 @@
   --fs-l: 1.25rem;
 
   // Line Heights
-  --lh: 1.6;
+  --lh: 1.5;
   --lh-s: 1.3;
 
   --footer-bg: linear-gradient(

diff --git a/src/styles/components/_content.scss b/src/styles/components/_content.scss
@@ -1,20 +1,22 @@
+@use '../base/mixins' as mx;
+
 .content {
-  font-size: clamp(1rem, 5vw - 1rem, 1.25rem);
+  font-size: clamp(1.125em, 5vw - 1rem, 1.25rem);
   counter-reset: footnotes;
 
   > :where(h2, h3, h4)[id],
   > article > :where(h2, h3, h4)[id] {
     --icon-size: 1.25rem;
     --inline-size: 1.75rem;
 
-    a:any-link {
+    :any-link {
       color: currentColor;
     }
 
     .heading-icon {
       position: absolute;
-      top: 50%;
-      left: 0;
+      inset-block-start: 50%;
+      inset-inline-start: 0;
       opacity: 0;
       inline-size: var(--inline-size);
       transform: translateY(-59%);
@@ -30,7 +32,7 @@
     &:focus {
       .heading-icon {
         opacity: 1;
-        left: calc(var(--inline-size) * -1);
+        inset-inline-start: calc(var(--inline-size) * -1);
 
         &:hover,
         &:focus {
@@ -69,10 +71,8 @@
         content: counter(ordered-list) '.';
         color: var(--clr-primary);
         font-weight: var(--fw-bold);
-        //   border-radius: 50%;
         float: left;
         margin-inline-start: calc(var(--padding-inline) * -1);
-        // margin-inline-end: var(--sp-s);
         width: 3ch;
         text-align: right;
       }
@@ -113,7 +113,7 @@
     dd {
       margin-block-start: 0.2em;
       margin-inline-start: 0;
-      font-size: var(--fs-s);
+      font-size: 0.9em;
 
       + dt {
         margin-block-start: 0.8em;
@@ -154,4 +154,7 @@
     margin-block: var(--sp-content);
     border-color: var(--clr-line);
   }
+
+  @inlcude mx.respond('m') {
+  }
 }