clairity.css 0.1.0 → 0.2.0

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

@@ -11,14 +11,18 @@
 // -------------------------------------------------------------------------- */
 
 /* 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 */
+   sectioning children of body should be .readable by default so keep in sync 
+   with .readable in 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 */
 }
 
+/* make bare divs in body grid padded by default; should probably go in shims */
+body > :is(section, div) { grid-column: 2/-2; }
+
 /* bare pages should not have grid applied */
 body:not(:has(main)):has(h1, p) {                       /* [0003] specificity */
   display:                block;
@@ -46,11 +50,36 @@ nav > menu > li {    display: inline;        } /* only direct children, as menu
 }
 
 /* dampen the prominence of links in headings */
-:where(h1, h2, h3, h4, h5, h6) a {
+:where(h1, h2, h3, h4, h5, h6) :is(a, :visited) {
+  color:                  var(--heading);
   font-weight:            unset;
   text-decoration-style:  dotted;
 }
 
+body > footer:last-of-type { margin-top: var(--l); }
+
+
+/* TEMP: moved from states.css ++++++++++++++++++++++++++++++++++++++++++++++ */
+/* -----------------------------------------------------------------------------
+//  #links - for linking to other documents
+// -------------------------------------------------------------------------- */
+
+/* #mailto #tel #sms #file #external #bookmark #download - special link icons -
+   this uses the svg mask technique to place & color icons on hover; as such, it
+   must be in a separate pseudo-element so masking doesn't bleed out to text  */
+/* #icons - set --icon to an svg from icons.css, set color with --icon-color  */
+[href^="tel:"]          { --icon: var(--i-phone);         }
+[href^="sms:"]          { --icon: var(--i-message-2);     }
+[href^="file:"]         { --icon: var(--i-file);          }
+[download]              { --icon: var(--i-file-download); }
+[href^="mailto:"]       { --icon: var(--i-mail);          }
+[rel~="external"]       { --icon: var(--i-external-link); }
+[rel~="bookmark"]       { --icon: var(--i-bookmark);      }
+
+/* give followed fragment links some room at the top - [0010] specificity */
+[id] { scroll-margin-top: var(--l); }
+/* END: moved from states.css +++++++++++++++++++++++++++++++++++++++++++++++ */
+
 
 /* -----------------------------------------------------------------------------
 //  #lists - ordered and unordered lists of items
@@ -71,6 +100,50 @@ ul:where(:has(li [type="checkbox"], li [type="radio"])) {
   list-style:             none;
 }
 
+/* TEMP: moved from states.css ++++++++++++++++++++++++++++++++++++++++++++++ */
+/* #ul #ol - removes vertical gaps for lists within lists - uses :where() to get
+   [0001] specificity rather than [0002] */
+:where(ul, ol) :is(ul, ol) { margin: 0; }
+
+
+/* -----------------------------------------------------------------------------
+//  #tables - for tabular data
+// -------------------------------------------------------------------------- */
+
+/* makes the first column sticky                         - [0012] specificity */
+:not(tfoot) > tr th:first-of-type {
+  position:               sticky;    /* works best w/ <table> display ≅ block */
+  left:                   0;
+  background-color:       var(--background);      /* is transparent otherwise */
+}
+/* makes the table header row sticky                     - [0002] specificity */
+thead th {
+  position:               sticky;
+  top:                    0;
+  z-index:                1;  /* puts header row on top of tbody rows, including
+                                                                header column */
+  background-color:       var(--background);      /* is transparent otherwise */
+}
+/* sticks top left box on top of both header columns/rows - [0012] specificity*/
+thead th:first-child { z-index: 2; }
+
+/* zebra-striping of table rows                          - [0013] specificity */
+tbody tr:nth-child(even), tbody tr:nth-child(even) th {
+  background-color:       var(--bg-contrast);
+}
+/* this is more robust because it excludes hidden rows, but only safari and 
+   chrome support this syntax                            - [0023] specificity */
+@supports selector(:nth-child(even of :not([hidden]))) {
+tbody tr:where(:nth-child( even of :not([hidden]) )), 
+tbody tr:where(:nth-child( even of :not([hidden]) )) th {
+  background-color:       var(--bg-contrast);
+}}
+
+/* adds sticky borders below thead and above tfoot */
+thead tr:last-of-type th {box-shadow: inset 0 -2px var(--secondary, --neutral);}
+tfoot :where(td, th)     {box-shadow: inset 0  2px var(--secondary, --neutral);}
+/* END: moved from states.css +++++++++++++++++++++++++++++++++++++++++++++++ */
+
 
 /* -----------------------------------------------------------------------------
 //  #forms - for submitting data to the server
@@ -78,15 +151,138 @@ ul:where(:has(li [type="checkbox"], li [type="radio"])) {
 
 /* #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
+   display: contents; to pierce the grid instead          - [0002] specificity
 // .......................................................................... */
-form section, form p, form div {
+form section, form p, form div {         /* TODO: should be a shim eventually */
   display:                contents;       /* make contents align to form grid */
   margin:                 0;      /* let contents, not container, set spacing */
+  container-type:         unset; /*let contents adjust to outer form container*/
 }
 /* #h2 - make form headers/paragraphs span the full width - [0002] specificity*/
 form h2, form p { grid-column: full; }
 
+/* #fieldset grid should span full form grid in narrower form containers
+// .......................................................................... */
+@container form (width <= 35rem) {
+  fieldset {
+    grid-column:          full;
+    border-inline:        none;
+    border-color:         var(--deemphasized);
+  }
+  /* #legend should be visually de-emphasized as a separator as well */
+  legend {
+    border:               none;
+    margin-bottom:        var(--m);
+    font-weight:          var(--bold);
+  }
+}
+
+/* TEMP: moved from states.css ++++++++++++++++++++++++++++++++++++++++++++++ */
+/* #form #ul - since lists in forms typically list out form controls, remove
+   the bullet styling from them - [0002] specificity */
+form ul { list-style:     none; }
+
+/* #form #section #p #div - extend the subgrid into common, but strictly 
+// non-semantic, container elements used within forms - subgrid is firefox 71+ &
+// safari 16+ only 20221001
+// .......................................................................... */
+@supports (grid-template-columns: subgrid) {
+  /* :where() can be used here, since @supports is also a recent addition     */
+  form :where(section, p, div) {                        /* [0001] specificity */
+    grid-column:            full;
+    display:                grid;
+    grid-template-columns:  subgrid;
+    gap:                    inherit;
+  }
+
+  /* TEMP: swap the grid placement of radio/checkboxes & their labels */
+  :where(form) :where(section, p, div) :is([type='checkbox'], [type='radio']) {
+    grid-column:          labels;
+    justify-self:         right;
+  }
+  :where(form) :is(:where(section, p, div) 
+      :is([type='checkbox'], [type='radio'])+label) {
+    grid-column:          elements;
+    justify-self:         left;
+  }
+}
+/*form section :where(h1,h2,h3,h4,h5,h6) + p { display: block; }*/
+
+/* chrome/edge doesn't support subgrid yet but does support :has() & :where() */
+@supports selector(:has(*)) {
+  /* set up a form grid on fieldsets that include form elements */
+  fieldset:where(:has(label, input, button, textarea, select, fieldset)) {
+    margin:               0;
+    display:              grid;
+    grid-template-columns:[labels full-start] 3fr [elements] 7fr [full-end];
+    gap:                  var(--m);
+  }
+  /* for fieldsets containing <p> tags that encompass checkboxes/radios, but no
+     other form inputs, remove extraneous gap between label and element */
+  fieldset:where(:has(p :is([type='checkbox'], [type='radio'])):not(:has(select,
+      textarea, [type="text"], [type="date"], [type="email"], [type="password"],
+      [type="datetime-local"], [type="search"]))) {
+    row-gap:              0;
+  }
+  /* since grid properties fall through p tags, assign margin-top to first child
+  elements to get a gap between paragraphs of different input types */
+  fieldset p:has([type='checkbox'], [type='radio']) + p:has([type='radio'], 
+      [type='checkbox']) :is([type='radio'], [type='checkbox'], 
+      label):first-of-type {
+    margin-top:           var(--m);
+  }
+  /* chrome/edge doesn't support subgrid, so pierce the grid barrier instead  */
+  fieldset :where(p:has(label, input, button, textarea, select, fieldset)) {
+    display:              contents;
+  }
+  /* labels go on the labels gridline */
+  :where(fieldset :is(p, div)) label {
+    grid-column:          labels;
+  }
+  /* lists that contain radios/checkboxes go on the elements gridline */
+  form:has(fieldset :where(select, textarea, [type="text"], [type="date"], 
+      [type="email"], [type="password"], [type="datetime-local"], 
+      [type="search"])) fieldset ul:has(li label :where([type='radio'], 
+      [type='checkbox'])) {
+    grid-column:          elements;
+  }
+
+  /* inputs on the elements gridline; pad right side away from fieldset line  */
+  :where(fieldset) :where(p):has(input, button, textarea, select, fieldset) 
+      :where(input:not(:is([type='checkbox'],[type='radio']), button, 
+      textarea, select, fieldset)) {
+    grid-column:          elements;
+    margin-right:         var(--m);
+  }
+  /* for radios & checks, invert the placement of the input and label */
+  /* NOTE: align-self & justify-self are not properly supported for grid by IE
+     anyway, so just use the combined property `place-self` here */
+  :where(fieldset) :where(p):has(label) :where([type='checkbox'], 
+      [type='radio']):has(+ label) {
+    grid-column:          labels;
+    place-self:           center end;
+  }
+  :where(fieldset p:has(label) :is([type='checkbox'], 
+      [type='radio']):has(+ label)) + label {
+    grid-column:          elements;
+    justify-self:         start;
+  }
+  /* for paragraph tags that aren't form element containers, span the grid */
+  :where(fieldset) :where(p, div, h2, h3, h4, h5, h6):not(:has(label, input, 
+      button, textarea, select, fieldset)) {
+    display:              block;
+    grid-column:          full;
+  }
+}
+/*form :where(fieldset, input, select, button, input[type="button"]) { 
+  grid-column:            elements; 
+}*/
+
+fieldset > :last-child {
+  margin-bottom:          0;
+}
+/* END: moved from states.css +++++++++++++++++++++++++++++++++++++++++++++++ */
+
 
 /* -----------------------------------------------------------------------------
 //  #selections - dropdown/selection form controls
@@ -98,6 +294,16 @@ select { background-image: var(--i-chevron); }
 /* only pad options inside optgroups                     - [0002] specificity */
 optgroup option { padding: 0 0 0 var(--m); }
 
+/* TEMP: moved from states.css ++++++++++++++++++++++++++++++++++++++++++++++ */
+/* #label for taller #multiple #textarea should align top - firefox 106 still 
+    doesn't properly support :has() with combinator selectors */
+@supports selector(:has(*)) {
+label:where(:has(+ [multiple],+ textarea,+ select[size])){/*[0001] specificity*/
+  vertical-align:         top;
+  align-self:             start;
+}}
+/* END: moved from states.css +++++++++++++++++++++++++++++++++++++++++++++++ */
+
 
 /* -----------------------------------------------------------------------------
 //  #inputs - core form elements
@@ -106,7 +312,7 @@ optgroup option { padding: 0 0 0 var(--m); }
 /*  #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;
@@ -118,6 +324,56 @@ label + [type="image"] {
   vertical-align:         middle;
 }
 
+/* TEMP: moved from states.css ++++++++++++++++++++++++++++++++++++++++++++++ */
+/* if [size] is set on an input, respect that choice - [0011] specificity */
+input[size] {
+  width:                  fit-content;
+  min-width:              unset;
+  max-width:              unset;
+}
+
+/* -----------------------------------------------------------------------------
+//  specialized inputs - #date #time #datetime-local #month #week #datetime 
+//                       #email #password #search #file #image #url #tel #color 
+//                       #range #number #hidden
+// -------------------------------------------------------------------------- */
+
+/* input images */
+[type="date"],   [type="time"],  [type="datetime"], [type="datetime-local"], 
+[type="month"],  [type="week"],  [type="url"],      [type="email"], 
+[type="number"], [type="tel"],   [type="password"], [type="search"] {
+  padding-left:           var(--height);
+  background-blend-mode:  var(--icon-blend-mode);
+}
+[type="date"], [type="month"], [type="week"] {
+                    background-image: var(--colorize-icon), var(--i-calendar); }
+[type="datetime"], [type="datetime-local"], [type="time"] {
+               background-image: var(--colorize-icon), var(--i-calendar-time); }
+[type="url"]     { background-image: var(--colorize-icon), var(--i-browser);   }
+[type="email"]   { background-image: var(--colorize-icon), var(--i-mail);      }
+[type="number"]  { background-image: var(--colorize-icon), var(--i-numbers);   }
+[type="tel"]     { background-image: var(--colorize-icon), var(--i-phone);     }
+[type="password"]{ background-image: var(--colorize-icon), var(--i-lock);      }
+[type="search"]  { background-image: var(--colorize-icon), var(--i-search);    }
+
+/* hide nav search's placeholder text if the background icon is present; opacity
+   is used here because other methods are disallowed on ::placeholder - [0001]*/
+:where(nav) :where([type="search"])::placeholder { opacity: 0; }
+
+/* if radios/checkboxes are inline, insert a gap between them for readability */
+:where([type="radio"] + label, [type="checkbox"] + label) +
+               :is([type="radio"], [type="checkbox"]) { /* [0010] specificity */
+  margin-left:            var(--m);
+}
+
+/* search decorations - [0011] specificity */
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  appearance:             none; /* needed? */
+}
+/* END: moved from states.css +++++++++++++++++++++++++++++++++++++++++++++++ */
+
+
 /* -----------------------------------------------------------------------------
 //  #blocks - elements that contain text blocks
 // -------------------------------------------------------------------------- */
@@ -128,6 +384,27 @@ pre > code, xmp {
   border-radius:          0 var(--radius) var(--radius) 0;
 }
 
+/* #blockquote
+// ...........................................................................*/
+blockquote::before {         /* [0002] specificity is the least possible here */
+  content:                open-quote;
+  color:                  var(--pale);
+  font-size:              5rem;
+  font-family:            var(--serif);
+  left:                   var(--xs);
+  line-height:            1;
+  position:               absolute;
+  top:                    0;
+  z-index:                -1;
+}
+blockquote > :first-child {                             /* [0011] specificity */
+  margin-top:             0;
+  text-indent:            var(--m);
+}
+blockquote > :last-child {                              /* [0011] specificity */
+  margin-bottom:          0;
+}
+
 
 /* -----------------------------------------------------------------------------
 //  #inline elements - elements that occur principally within text blocks. 
@@ -148,6 +425,43 @@ pre > code {
 }
 
 
+
+/* TEMP: moved from states.css ++++++++++++++++++++++++++++++++++++++++++++++ */
+/* #q - inline quotations - note that the closing smart quote is added manually
+   here as <q>'s automatic quotes are otherwise added via pseudo elements
+// ...........................................................................*/
+q[cite]::after { content: "” (cf. " attr(cite) ") "; }
+
+
+/* -----------------------------------------------------------------------------
+//  #media / #embedded - elements that add multimedia to a page
+// -------------------------------------------------------------------------- */
+
+/* #figure #headings - #h1 #h2 #h3 #h4 #h5 #h6 ~*/
+figure > :where(h1,h2,h3,h4,h5,h6):first-child { margin-top: 0; }
+
+/* #blockquote inside #figure - safari only for now - :where is older than :has
+   so it can be used here to reduce specificity          - [0001] specificity */
+figure:where(:has(blockquote)) {
+  background-color:       revert;
+}
+/* fix doubled margin of a blockquote in a figure        - [0002] specificity */
+figure > blockquote {
+  text-align:             start;
+  margin:                 var(--ms);
+  padding:                var(--ms);
+  max-width:              calc(var(--line-length) - (var(--ms) * 2));
+}
+
+/* #svg - [0001] specificity */
+svg:not(:where(:root)) {
+  width:                  var(--m);
+  /*max-width:              100%;*/
+  overflow:               hidden;
+}
+/* END: moved from states.css +++++++++++++++++++++++++++++++++++++++++++++++ */
+
+
 /* -----------------------------------------------------------------------------
 //  #interactive - built-in interactive components
 // -------------------------------------------------------------------------- */
@@ -155,3 +469,44 @@ pre > code {
 /* 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; }
+
+/* TEMP: moved from states.css ++++++++++++++++++++++++++++++++++++++++++++++ */
+/* #dialog - built-in modal overlay - comes with 'Esc' support with no js! */
+/* wrap long dialogs in a container to scroll the body content sans button */
+dialog > :where(div, section, article) {
+  overflow-y:             auto;     /* scrolls as necessary w/ height set */
+  max-height:             calc(80vh * 0.8); /* container queries needed! */
+}
+
+dialog button {
+  margin-top:             var(--ms);
+}
+
+dialog :where(h1, h2, h3, h4, h5, h6) {
+  border-bottom:          var(--solid) var(--border);
+  border-radius:          var(--radius) var(--radius) 0 0;
+  color:                  var(--distinct);   /* differentiate dialog headings */
+  font-size:              var(--large); /* dialogs typically only need 1 heading
+                                          level, so make it all the same size */
+  margin:                 0 0 0 calc(-1 * var(--m)); /* negative left margin
+                                         lines up heading with paragraph text */
+  padding:                0 var(--m) var(--m); /* top padding provided by dialog
+                                                    padding so remove it here */
+}
+
+/* #details - an accordion-like widget for question & answer style layouts */
+details + details {
+  border-top:             0;
+  border-radius:          0;
+}
+
+details:first-of-type {
+  border-top-left-radius:     var(--radius);
+  border-top-right-radius:    var(--radius);
+}
+
+details:last-of-type {
+  border-bottom-left-radius:  var(--radius);
+  border-bottom-right-radius: var(--radius);
+}
+/* END: moved from states.css +++++++++++++++++++++++++++++++++++++++++++++++ */

data/lib/assets/css/clairity/legacy.css

@@ -0,0 +1,65 @@
+/******************************************************************************\
+LEGACY -  Graceful degradation for "legacy" browsers, which we define as those          
+          that don't support modern css, not just IE11.
+          
+          We'll generally aim for [0010] specificity here, as that's the default
+          specificity of a single class, which can be overridden in later styles
+          using just a single class. Exceptions will be marked with their
+          specificity, as usual.
+          
+\******************************************************************************/
+
+
+/* -----------------------------------------------------------------------------
+//  #containers - 
+// -------------------------------------------------------------------------- */
+
+/* this doesn't work because some items aren't full width, like asides
+body > *:not(.fluid) {
+  margin-inline:              var(--m);
+}
+*/
+
+
+/* -----------------------------------------------------------------------------
+//  #grid - 
+// -------------------------------------------------------------------------- */
+
+
+/* chrome & edge don't support subgrid yet, though in development - 20230423  */
+@supports not (grid-template-columns: subgrid) {
+.subgrid { display:       contents; }
+.subgrid :first-child { /* TODO: this breaks some layouts, like banner images */
+  /*grid-column-start:          2;*/    /* TODO: fix right side guttering too */
+}}
+
+
+/* -----------------------------------------------------------------------------
+//  #card - 
+// -------------------------------------------------------------------------- */
+
+/* TEMP: use media queries for browsers that don't support container queries */
+@supports not (container-type: inline-size) {
+@media (min-width: 47rem) {
+  /*.card { flex-direction: row; }*/  /* interferes with single-card section */
+  .card > img, .cards > article > img {
+    max-height:           var(--width);
+    max-width:            var(--width);
+  }  
+  .cards :last-child:nth-child(3n - 2) {
+    grid-column-end:      span 3;
+    flex-direction:       row;
+  }
+}}
+
+
+/* -----------------------------------------------------------------------------
+//  #tags - 
+// -------------------------------------------------------------------------- */
+
+/* TEMP: add margin-top to buttons for browsers that don't support :has() */
+@supports not (:has(a)) {
+.tags + .buttons {
+  margin-top:             var(--m);
+}}
+