clairity.css 0.1.0

data/lib/assets/css/clairity/cosmetic.css

@@ -0,0 +1,157 @@
+/******************************************************************************\
+  COSMETIC - a few cosmetic adjustments to base.css that make it a little nicer
+             to use with a basic text-oriented site without additional styling.
+             these are generally combo selectors that are separated out because 
+             they're beyond base html elements/pseudos.
+\******************************************************************************/
+
+
+/* -----------------------------------------------------------------------------
+//  #sectioning - block type elements meant to hold other content elements
+// -------------------------------------------------------------------------- */
+
+/* TODO: moved from components.css; make sure no unintended consequences appear;
+   sectioning children of body should be .readable by default - keep in sync 
+   with classes.css                                      - [0001] specificity */
+body > :where(header, nav, main, section, div, figure, footer) {
+  width:                  100%;
+  max-width:              var(--line-length);     /* for horizontal centering */
+  margin-inline:          auto;                    /* centers if width is set */
+}
+
+/* bare pages should not have grid applied */
+body:not(:has(main)):has(h1, p) {                       /* [0003] specificity */
+  display:                block;
+  max-width:              var(--line-length);
+}
+
+/* #aside - to align with main, remove initial top margin- [0011] specificity */
+aside > :first-child { margin-top: 0; }
+
+/* #nav #form #a #menu #li - inline nav elements by default - [0002] / [0003]
+// .......................................................................... */
+nav form        {    display: inline;        }     /* typically a search form */
+nav a           { max-height: var(--height); }   /* contain <a> links/buttons */
+nav > menu > li {    display: inline;        } /* only direct children, as menu
+                                              <li> can contain dropdown lists */
+
+
+/* -----------------------------------------------------------------------------
+//  #headers - #header #hgroup #h1 #h2 #h3 #h4 #h5 #h6 + #p
+// -------------------------------------------------------------------------- */
+
+/* headings/<p>s in headers don't need their own margin  - [0001] specificity */
+:where(header, hgroup) :is(h1, h2, h3, h4, h5, h6, p) {
+  margin:                 0;
+}
+
+/* dampen the prominence of links in headings */
+:where(h1, h2, h3, h4, h5, h6) a {
+  font-weight:            unset;
+  text-decoration-style:  dotted;
+}
+
+
+/* -----------------------------------------------------------------------------
+//  #lists - ordered and unordered lists of items
+// -------------------------------------------------------------------------- */
+
+/* #nav #ul #li - nav lists should let parent nav dictate style- [0002] / [0003]
+// .......................................................................... */
+nav ul {
+  list-style:             none;
+  margin:                 0;
+  padding-left:           0;
+}
+nav ul li { max-width:    100%; }
+
+/* safari 15.4+, chrome 105+ - ignored by other browsers - [0001] specificity */
+ul:where(:has(li [type="checkbox"], li [type="radio"])) {
+  grid-column:            full;       /* otherwise radios/checks get squished */
+  list-style:             none;
+}
+
+
+/* -----------------------------------------------------------------------------
+//  #forms - for submitting data to the server
+// -------------------------------------------------------------------------- */
+
+/* #form #section #p #div - would prefer subgrid to have containers layout 
+   contents on the grid, but its not yet supported by chrome/edge. use 
+  display: contents; to pierce the grid instead           - [0002] specificity
+// .......................................................................... */
+form section, form p, form div {
+  display:                contents;       /* make contents align to form grid */
+  margin:                 0;      /* let contents, not container, set spacing */
+}
+/* #h2 - make form headers/paragraphs span the full width - [0002] specificity*/
+form h2, form p { grid-column: full; }
+
+
+/* -----------------------------------------------------------------------------
+//  #selections - dropdown/selection form controls
+// -------------------------------------------------------------------------- */
+
+/* redefine selects to use the clairity.css icons defined in icons.css */
+select { background-image: var(--i-chevron); }
+
+/* only pad options inside optgroups                     - [0002] specificity */
+optgroup option { padding: 0 0 0 var(--m); }
+
+
+/* -----------------------------------------------------------------------------
+//  #inputs - core form elements
+// -------------------------------------------------------------------------- */
+
+/*  #label #checkbox - checkboxes inside labels is a common layout - firefox 
+    only understands simple :has() selectors, so can't use the direct descendent
+    selector > here until it understands it                - [0011] specificity
+// ...........................................................................*/
+label:has([type="checkbox"]) {
+  grid-column:            elements;
+  justify-self:           left;
+}
+
+label + [type="image"] {
+  max-height:             var(--height);
+  object-fit:             contain;
+  vertical-align:         middle;
+}
+
+/* -----------------------------------------------------------------------------
+//  #blocks - elements that contain text blocks
+// -------------------------------------------------------------------------- */
+
+/* #pre #code #xmp                                         - [0001] specificity
+// ...........................................................................*/
+pre > code, xmp {
+  border-radius:          0 var(--radius) var(--radius) 0;
+}
+
+
+/* -----------------------------------------------------------------------------
+//  #inline elements - elements that occur principally within text blocks. 
+// -------------------------------------------------------------------------- */
+
+/* #pre #code - <code> inside <pre> is apparently the semantic way of marking up
+   code listings according to whatwg via prism.js        - [0002] specificity */
+pre > code {
+/*color:                  var(--text);*/
+/*line-height:            var(--relaxed);*/
+/*background-color:       var(--background);*/
+  display:                block;  /* needed for background to cover container */
+  width:                  max-content; /* needed to stretch background-color or
+                                                      overflowing code blocks */
+  min-width:              var(--line-length);
+/*white-space:            pre;*/                           /* don't wrap text */
+  padding:                var(--m);
+}
+
+
+/* -----------------------------------------------------------------------------
+//  #interactive - built-in interactive components
+// -------------------------------------------------------------------------- */
+
+/* a method="dialog" #form with a plain <button> closes the dialog without js!*/
+/* makes form/close button not be full-width - [0010] specificity */
+[method="dialog"] { width: min-content; }

data/lib/assets/css/clairity/functions.css

@@ -0,0 +1,46 @@
+/******************************************************************************\
+  CSS FUNCTIONS - these are global functions embedded into css variables
+                  
+  * can't use unitless numbers in clamp
+\******************************************************************************/
+
+:root {
+  /* root variables for fluid typography - these are in px, but without the 
+     dimension to facilitate calculatons - for more infor, see
+     https://smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/  */
+  --font-base:            16;                   /* what 1rem represents in px */
+  --min-vw:               400;     /* the lower bound view width for clamping */
+  --max-vw:               800;     /* the upper bound view width for clamping */
+}
+
+/* CSS variables with formulas can't be put in :root, so scope them closer to 
+   their use - https://css-tricks.com/the-big-gotcha-with-custom-properties/  */
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {     /* [0001] / [0010] */
+  /* rise (in rem) over run (in px) * 100 (since vw is a %) * conversion 
+     factor (16px/1rem) => unitless slope */
+  --slope:                ( (var(--max-font) - var(--min-font)) * 100 * 
+                           var(--font-base) / (var(--max-vw) - var(--min-vw)) );
+  --intercept:            ( (var(--min-font) * var(--font-base)) - 
+                                         (var(--slope) * var(--min-vw) / 100) );
+  --clamp:                clamp((var(--min-font) * 1rem), 
+                                 (var(--intercept)/var(--font-base) * 1rem + 
+                                 var(--slope) * 1vw), (var(--max-font) * 1rem));
+}
+
+/* this function suffers from the "big gotcha with custom properties" as well,
+   so scope it closer to where it is used                  [0001] specificity */
+a, i, input {
+  --colorize-icon:        linear-gradient(var(--icon-color), var(--icon-color));
+}
+
+/* grid functions for typical containers */
+body, main, header, footer, aside, article, nav, section, div {
+  /* Layout - note 1rem = 16px; 1 ch ≅ 10px; 2rem = 24 columns at 1200px wide,
+     since --grid + --m padding = 48px; 48px * 24 + 16px padding * 3 = 1200px */
+  --grid:                 2rem;          /* 24 columns @ 1200px & 1rem = 16px */
+  /*--grid:               5rem;*/        /* 12 columns @ 1200px & 1rem = 16px */
+  --gap:                  clamp(var(--s), 2vw, var(--m));      /* 400 - 800px */
+/* padding column on each extent of the grid - 
+   ranges from 2px @ 400px wide to 16px @ 1200px wide, without media queries  */
+  --padding:              clamp(var(--xxs), (1.75vw - 5px), var(--m));
+}

data/lib/assets/css/clairity/icons.css

@@ -0,0 +1,44 @@
+/******************************************************************************\
+  ICONS - svg icons that can be included as CSS variables
+
+  https://css-tricks.com/how-i-made-an-icon-system-out-of-css-custom-properties/
+  * masking applies to the icon as well as any element at the same level, so 
+    background icons need to be put in a pseudo-element
+  * icons are colored using the --icon-color linear-gradient function
+\******************************************************************************/
+
+:root {
+  /* modified from almond.css and other sources */
+  --i-burger:             url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 10 8'><path d='M1 1h8M1 4h 8M1 7h8' stroke='white' stroke-width='2' stroke-linecap='round'/></svg>");
+  --i-check:              url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><title>check</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M5 12l5 5l10 -10' /></svg>");
+  --i-chevron:            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0,10 20,30 40,10' fill='none' stroke='%23999' stroke-width='1.5'/></svg>");
+  --i-dash:               url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
+  --i-download:           url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M5,2 28,2 35,9 35,38 5,38Z M28,2 28,9 35,9 M20,10 20,30 M11,21 20,30 29,21' fill='none' stroke='%23999' stroke-width='1.5'/></svg>");
+  --i-external:           url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M28,4 39,4 39,15 M39,4 23,20 M28,9 7,9 7,34 35,34 35,15' fill='none' stroke='white' stroke-width='1.5'/></svg>");
+  --i-search:             url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M36,36 25,25' stroke='%23ccc' stroke-width='3' /><circle cx='15' cy='15' r='14' fill='none' stroke='%23ccc' stroke-width='1.5' /></svg>");
+  --i-sms:                url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M2,2 38,2 38,28 22,28 12,38 12,28 2,28Z' fill='none' stroke='%23999' stroke-width='1.5'/></svg>");
+  --i-tel:                url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='none' stroke-width='1.5'><path d='M8,1 34,1 34,39 8,39Z M12,5 30,5 30,30 12,30Z' /><circle cx='21' cy='34' r='2'/></g></svg>");
+  /* modified tabler icons */ 
+  --i-bookmark:           url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M9 4h6a2 2 0 0 1 2 2v14l-5 -3l-5 3v-14a2 2 0 0 1 2 -2' /></svg>");
+  --i-browser:            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='4' y='4' width='16' height='16' rx='1' /><line x1='4' y1='8' x2='20' y2='8' /><line x1='8' y1='4' x2='8' y2='8' /></svg>");
+  --i-calendar:           url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='4' y='5' width='16' height='16' rx='2' /><line x1='16' y1='3' x2='16' y2='7' /><line x1='8' y1='3' x2='8' y2='7' /><line x1='4' y1='11' x2='20' y2='11' /><line x1='11' y1='15' x2='12' y2='15' /><line x1='12' y1='15' x2='12' y2='18' /></svg>");
+  --i-calendar-time:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4' /><circle cx='18' cy='18' r='4' /><path d='M15 3v4' /><path d='M7 3v4' /><path d='M3 11h16' /><path d='M18 16.496v1.504l1 1' /></svg>");
+  --i-external-link:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5' /><line x1='10' y1='14' x2='20' y2='4' /><polyline points='15 4 20 4 20 9' /></svg>");
+  --i-edit:               url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>edit</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1' /><path d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z' /><path d='M16 5l3 3' /></svg>");
+  --i-file:               url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M14 3v4a1 1 0 0 0 1 1h4' /><path d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z' /></svg>");
+  --i-file-download:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M14 3v4a1 1 0 0 0 1 1h4' /><path d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z' /><path d='M12 17v-6' /><path d='M9.5 14.5l2.5 2.5l2.5 -2.5' /></svg>");
+  --i-home-edit:          url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M9 21v-6a2 2 0 0 1 2 -2h2c.645 0 1.218 .305 1.584 .78' /><path d='M20.004 11.004l-8.004 -8.004l-9 9h2v7a2 2 0 0 0 2 2h4' /><path d='M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z' /></svg>");
+  --i-lock:               url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='5' y='11' width='14' height='10' rx='2' /><circle cx='12' cy='16' r='1' /><path d='M8 11v-4a4 4 0 0 1 8 0v4' /></svg>");
+  --i-mail:               url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='3' y='5' width='18' height='14' rx='2' /><polyline points='3 7 12 13 21 7' /></svg>");
+  --i-mail-check:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>mail check</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M11 19h-6a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v6' /><path d='M3 7l9 6l9 -6' /><path d='M15 19l2 2l4 -4' /></svg>");
+  --i-mail-x:             url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>mail x</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M13.5 19h-8.5a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v6' /><path d='M3 7l9 6l9 -6' /><path d='M22 22l-5 -5' /><path d='M17 22l5 -5' /></svg>");
+
+  --i-message-2:          url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M12 20l-3 -3h-2a3 3 0 0 1 -3 -3v-6a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-2l-3 3' /><line x1='8' y1='9' x2='16' y2='9' /><line x1='8' y1='13' x2='14' y2='13' /></svg>");
+  --i-numbers:            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M8 10v-7l-2 2' /><path d='M6 16a2 2 0 1 1 4 0c0 .591 -.601 1.46 -1 2l-3 3.001h4' /><path d='M15 14a2 2 0 1 0 2 -2a2 2 0 1 0 -2 -2' /><path d='M6.5 10h3' /></svg>");
+  --i-phone:              url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2' /></svg>");
+  --i-send:               url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>send</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><line x1='10' y1='14' x2='21' y2='3' /><path d='M21 3l-6.5 18a0.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a0.55 .55 0 0 1 0 -1l18 -6.5' /></svg>");
+  --i-server-cog:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>server cog</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='3' y='4' width='18' height='8' rx='3' /><path d='M12 20h-6a3 3 0 0 1 -3 -3v-2a3 3 0 0 1 3 -3h10.5' /><circle cx='18.001' cy='18' r='2' /><path d='M18.001 14.5v1.5' /><path d='M18.001 20v1.5' /><path d='M21.032 16.25l-1.299 .75' /><path d='M16.27 19l-1.3 .75' /><path d='M14.97 16.25l1.3 .75' /><path d='M19.733 19l1.3 .75' /><path d='M7 8v.01' /><path d='M7 16v.01' /></svg>");
+  --i-trash:              url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>delete</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><line x1='4' y1='7' x2='20' y2='7' /><line x1='10' y1='11' x2='10' y2='17' /><line x1='14' y1='11' x2='14' y2='17' /><path d='M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12' /><path d='M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3' /></svg>");
+  --i-user-circle:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><circle cx='12' cy='12' r='9' /><circle cx='12' cy='10' r='3' /><path d='M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855' /></svg>");
+  --i-user-off:           url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>disable</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M14.274 10.291a4 4 0 1 0 -5.554 -5.58m-.548 3.453a4.01 4.01 0 0 0 2.62 2.65' /><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 1.147 .167m2.685 2.681a4 4 0 0 1 .168 1.152v2' /><line x1='3' y1='3' x2='21' y2='21' /></svg>");
+}

data/lib/assets/css/clairity/normalize.css

@@ -0,0 +1,239 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css | as
+    reformatted by clairity.css */
+
+/* Document - [0001] specificity unless otherwise noted
+   ========================================================================== */
+/** #html
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+html {
+  line-height:              1.15;         /* 1 */
+  -webkit-text-size-adjust: 100%;         /* 2 */
+}
+
+
+/* Sections
+   ========================================================================== */
+
+/** #body - Remove the margin in all browsers. */
+body { margin:            0; }
+
+/** #mail - Render the `main` element consistently in IE. */
+main { display:           block; }
+
+/** #h1
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+h1 {
+  font-size:              2em;
+  margin:                 0.67em 0;
+}
+
+
+/* Grouping content
+   ========================================================================== */
+
+/** #hr
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+hr {
+  box-sizing:             content-box;  /* 1 */
+  height:                 0;            /* 1 */
+  overflow:               visible;      /* 2 */
+}
+
+/** #pre
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+pre {
+  font-family:            monospace, monospace; /* 1 */
+  font-size:              1em;          /* 2 */
+}
+
+
+/* Text-level semantics
+   ========================================================================== */
+
+/** #a - Remove the gray background on active links in IE 10. */
+a { background-color:     transparent; }
+
+/** #abbr
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+abbr[title] {                           /* [0011] specificity */
+  border-bottom:          none;         /* 1 */
+  text-decoration:        underline;    /* 2 */
+  text-decoration:        underline dotted; /* 2 */
+}
+
+/** #b #strong - Add the correct font weight in Chrome, Edge, and Safari. */
+b, strong { font-weight:  bolder; }
+
+/** #code #kbd #samp
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code, kbd, samp {
+  font-family:            monospace, monospace; /* 1 */
+  font-size:              1em;          /* 2 */
+}
+
+/** #small - Add the correct font size in all browsers. */
+small { font-size:        80%; }
+
+/** #sub #sup - Prevent sub & sup from affecting line height in all browsers. */
+sub, sup {
+  font-size:              75%;
+  line-height:            0;
+  position:               relative;
+  vertical-align:         baseline;
+}
+sub { bottom:             -0.25em; }
+sup { top:                -0.5em; }
+
+
+/* Embedded content
+   ========================================================================== */
+
+/** #img - Remove the border on images inside links in IE 10. */
+img { border-style:       none; }
+
+
+/* Forms
+   ========================================================================== */
+
+/** #button #input #optgroup #select #textarea
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button, input, optgroup, select, textarea {
+  font-family:            inherit;      /* 1 */
+  font-size:              100%;         /* 1 */
+  line-height:            1.15;         /* 1 */
+  margin:                 0;            /* 2 */
+}
+
+/** #button #input
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input {       /* 1 */
+  overflow:               visible;
+}
+
+/** #button #select
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select {      /* 1 */
+  text-transform:         none;
+}
+
+/** #button #reset #submit - Correct inability to style clickable types in iOS 
+    and Safari. - [0001] / [0010] specificity */
+button, [type="button"], [type="reset"], [type="submit"] {
+  -webkit-appearance:     button;
+}
+
+/** #button #reset #submit - Remove the inner border and padding in Firefox. - 
+    [0002] / [0011] specificity */
+button::-moz-focus-inner, [type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
+  border-style:           none;
+  padding:                0;
+}
+/** button #reset #submit - Restore focus styles unset by the previous rule. -
+    [0011] / [0020] specificity */
+button:-moz-focusring, [type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
+  outline:                1px dotted ButtonText;
+}
+
+/** #fieldset - Correct the padding in Firefox. */
+fieldset { padding:       0.35em 0.75em 0.625em; }
+
+/** #legend
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+legend {
+  box-sizing:             border-box;   /* 1 */
+  color:                  inherit;      /* 2 */
+  display:                table;        /* 1 */
+  max-width:              100%;         /* 1 */
+  padding:                0;            /* 3 */
+  white-space:            normal;       /* 1 */
+}
+
+/** #progress - Add correct vertical alignment in Chrome, Firefox, and Opera. */
+progress { vertical-align: baseline; }
+
+/** #textarea - Remove the default vertical scrollbar in IE 10+. */
+textarea { overflow:      auto; }
+
+/** #checkbox #radio - [0010] specificity
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+[type="checkbox"], [type="radio"] {
+  box-sizing:             border-box;   /* 1 */
+  padding:                0;            /* 2 */
+}
+
+/** #number - Correct cursor style of increment/decrement buttons in Chrome. - 
+    [0011] specificity */
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height:                 auto;
+}
+
+/** #search - [0010] specificity
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[type="search"] {
+  -webkit-appearance:     textfield;    /* 1 */
+  outline-offset:         -2px;         /* 2 */
+}
+
+/** #search - Remove the inner padding in Chrome and Safari on macOS. - 
+    [0011] specificity */
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance:     none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance:     button;       /* 1 */
+  font:                   inherit;      /* 2 */
+}
+
+
+/* Interactive
+   ========================================================================== */
+/** #details - Add the correct display in Edge, IE 10+, and Firefox. */
+details { display:        block; }
+
+/** #summary - Add the correct display in all browsers. */
+summary { display:        list-item; }
+
+
+/* Misc
+   ========================================================================== */
+/** #template - Add the correct display in IE 10+. */
+template { display:       none; }
+
+/** #hidden - Add the correct display in IE 10. - [0010] specificity */
+[hidden] { display:       none; }