From 1c5e214540b5ca31cf40e12c68dd4e3a4c75d84b Mon Sep 17 00:00:00 2001 From: Jothsa <58094796+Jothsa@users.noreply.github.com> Date: Wed, 5 Jun 2024 13:43:24 -0500 Subject: [PATCH] add fonts, better description, and use details element --- docsite/index.html | 221 +++++++++++++++++++++++---------------------- 1 file changed, 115 insertions(+), 106 deletions(-) diff --git a/docsite/index.html b/docsite/index.html index 3463d9e8..d17ff02d 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -2124,135 +2124,144 @@
Usage Sample

Font Families

+

The rad font-families from modern font stacks provide great typefaces that are entirely local. With these font stacks you won't have to worry about slowing down your page load or layout shift from external fonts!


-          --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
-          --font-serif: ui-serif, serif;
-          --font-mono: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, monospace;
           --font-system-ui: system-ui, sans-serif;
-          --font-transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
-          --font-old-style: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
-          --font-humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
-          --font-geometric-humanist: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
-          --font-classical-humanist: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
-          --font-neo-grotesque: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
-          --font-monospace-slab-serif: 'Nimbus Mono PS', 'Courier New', monospace;
-          --font-monospace-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
-          --font-industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
-          --font-rounded-sans: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
-          --font-slab-serif: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
-          --font-antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
-          --font-didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
-          --font-handwritten: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
-          --font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+          --font-transitional: Charter, Bitstream Charter, Sitka Text, Cambria, serif;
+          --font-old-style: Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif;
+          --font-humanist: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
+          --font-geometric-humanist: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif;
+          --font-classical-humanist: Optima, Candara, Noto Sans, source-sans-pro, sans-serif;
+          --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;
+          --font-monospace-slab-serif: Nimbus Mono PS, Courier New, monospace;
+          --font-monospace-code: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;
+          --font-industrial: Bahnschrift, DIN Alternate, Franklin Gothic Medium, Nimbus Sans Narrow, sans-serif-condensed, sans-serif;
+          --font-rounded-sans: ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold, Calibri, source-sans-pro, sans-serif;
+          --font-slab-serif: Rockwell, Rockwell Nova, Roboto Slab, DejaVu Serif, Sitka Small, serif;
+          --font-antique: Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif;
+          --font-didone: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;
+          --font-handwritten: Segoe Print, Bradley Hand, Chilanka, TSCu_Comic, casual, cursive;
- --font-sans -
- ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& -
-
-
- --font-serif -
- ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& -
-
-
- --font-mono -
- ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& -
-
-
- --font-system-ui -
- ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& -
+
+ --font-system-ui +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& +
+
- --font-transitional -
- ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& -
+
+ --font-transitional +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& +
+
-
- --font-old-style -
- ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& -
+
+
+ --font-old-style +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& +
+
- --font-humanist -
- ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& -
+
+ --font-humanist +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& +
+
- --font-geometric-humanist -
- ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& -
+
+ --font-geometric-humanist +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& +
+
- --font-classical-humanist -
- ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& -
+
+ --font-classical-humanist +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& +
+
- --font-neo-grotesque -
- ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& -
+
+ --font-neo-grotesque +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& +
+
-
- --font-monospace-slab-serif -
- ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& -
+
+
+ --font-monospace-slab-serif +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& +
+
-
- --font-monospace-code -
- ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& -
+
+
+ --font-monospace-code +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& +
+
-
- --font-industrial -
- ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& -
+
+
+ --font-industrial +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& +
+
-
- --font-rounded-sans -
- ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& -
+
+
+ --font-rounded-sans +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& +
+
-
- --font-slab-serif -
- ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& -
+
+
+ --font-slab-serif +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& +
+
-
- --font-antique -
- ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& -
+
+
+ --font-antique +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& +
+
-
- --font-didone -
- ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& -
+
+
+ --font-didone +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& +
+
-
- --font-handwritten -
- ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& -
+
+
+ --font-handwritten +
+ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^& +
+
@@ -2566,7 +2575,7 @@
Ease Elastic Out
ease-elastic-out-1
ease-elastic-out-2
-
ease-elastic-out-3
+
ease-elastic-out-3
ease-elastic-out-4
ease-elastic-out-5