Add Modern Font Stacks (#498)

* add fonts * remove --font-emoji * remove fallback fonts, fixed #500 * remove quotes * fix quotes * remove fonts * fix formatting * fix removed fonts * add fonts, better description, and use details element * adjust .font-family-grid styles * grammar, link to danklammer's gh * fix test * Update src/extra/normalize.src.css * add old fonts * Update src/props.fonts.css Co-authored-by: Adam Argyle <[email protected]> * update --monospace-code everywhere * update --font-serif * add notice for monospace-code font stack * formatting --------- Co-authored-by: Adam Argyle <[email protected]>
argyleink · Jul 2, 2024 · e273213 · e273213
1 parent bbf5bb7
commit e273213
Show file tree

Hide file tree

Showing 6 changed files with 203 additions and 32 deletions.
diff --git a/docsite/index.css b/docsite/index.css
@@ -1053,22 +1053,32 @@ pre[class*="language-"] {
 }
 
 .font-family-grid {
+  --grid-cols: repeat(9, minmax(3rem, 1fr));
+
   display: grid;
+  grid-template-columns: var(--grid-cols);
   gap: var(--size-2);
-  justify-items: flex-start;
 
-  & > div {
+  & > details {
+    grid-column: 1 / -1;
+  }
+
+  & > details > div {
     display: grid;
-    grid-template-columns: repeat(9, minmax(3rem, 1fr));
     place-items: center;
-    font-size: var(--font-size-5);
+    grid-template-columns: var(--grid-cols);
+    grid-column: 1 / -1;
     color: var(--text-1);
+    font-size: var(--font-size-5);
 
     @media (--md-n-below) {
-      grid-template-columns: repeat(6, minmax(2rem, 1fr));
       font-size: var(--font-size-3);
     }
   }
+
+  @media (--md-n-below) {
+    --grid-cols: repeat(6, minmax(2rem, 1fr));
+  }
 }
 
 #colors details h3 {