clairity.css 0.1.0 → 0.2.0

data/lib/assets/css/clairity/classes.css

@@ -20,12 +20,6 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
 //  #containers - 
 // -------------------------------------------------------------------------- */
 
-/* this doesn't work because some items aren't full width, like asides
-body > *:not(.fluid) {
-  margin-inline:              var(--m);
-}
-*/
-
 /* for constraining width to a reasonable line length - keep in sync
    with sectioning children of the body element in components.css */
 .readable {
@@ -38,52 +32,43 @@ body > *:not(.fluid) {
 ._100vw, [class~="100vw"] {
   width:                  100vw;
   max-width:              100vw;     /* still has horizontal scrollbar issues */
-  margin-inline:          calc(50% - 50vw - var(--xs));/*neg. margin if needed*/
+  margin-inline:          calc(50% - 50vw);    /* neg. margin where necessary */
 }
 
-/* #100dvi - dynamic full width of the viewport */
+/* #100dvi - full dynamic viewport width - unfortunately doesn't account for 
+   scrollbars, so its utility for full-bleed breakouts is severely limited
+   ...........................................................................*/
 ._100dvi, [class~="100dvi"] {
-  /*width:                  100dvi;*/
+  width:                  100dvi;
   max-width:              100dvi;    /* still has horizontal scrollbar issues */
-  /*margin-inline:          calc(50% - 50dvi - var(--xs));neg margin if needed*/
+  margin-inline:          calc(50% - 50dvi);   /* neg. margin where necessary */
 }
 
 
 /* -----------------------------------------------------------------------------
-//  #grid helpters - 
+//  #grid - subgrid is ff 71+ & safari 16+ only, chrome/edge in dev - 20230423
 // -------------------------------------------------------------------------- */
 
-/* .subgrid extends grid into descendents - firefox 71+ & safari 16+ only, no
-                                            chrome/edge yet - EXPERIMENTAL
+/* .subgrid extends grid into descendents                       - EXPERIMENTAL
    ...........................................................................*/
 .subgrid {
-  grid-column:            padded;     /* place subgrid on the parent grid */
-  display:                inherit; /* inherits grid, otherwise no subgrid */
-  grid-template-columns:  subgrid;                /* only subgrid columns */
-  gap:                    inherit;             /* inherit parent grid gap */
-  max-width:              unset;         /* let parent grid dictate width */
+  grid-column:            padded;         /* place subgrid on the parent grid */
+  display:                inherit;     /* inherits grid, otherwise no subgrid */
+  grid-template-columns:  subgrid;                    /* only subgrid columns */
+  gap:                    inherit;                 /* inherit parent grid gap */
+  max-width:              unset;             /* let parent grid dictate width */
 }
 
-/* HACK: chrome & edge do not yet support subgrid as of 20221001 */
-@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 */
-}}
-
 /* span the full width of the grid
    .......................................................................... */
 .full {
-  /*grid-column:            full;*/
-  grid-column:            1 / -1;
-  max-width:              none;            /* remove other width restrictions */
+  grid-column:            1 / -1;     /* more foolproof than `full` grid area */
+  /*max-width:              none;*/      /* interferes with .full in .subgrid */
 }
 
 /* span all but the 1st & last grid columns
    .......................................................................... */
-.padded {
-  grid-column:            2 / -2;
-}
+.padded { grid-column:    2 / -2; } /* 1st/last columns are typically padding */
 
 
 /* -----------------------------------------------------------------------------
@@ -101,6 +86,13 @@ body > *:not(.fluid) {
 .h6 { --min-font: 1;      --max-font: 1.125;  }
 .h5, .h6 { font-weight:   var(--bold);        }
 
+/* dampen the prominence of links in headings; keep in sync with cosmetic.css */
+:where(.h1, .h2, .h3, .h4, .h5, .h6) :is(a, :visited) {
+  color:                  var(--heading);
+  font-weight:            unset;
+  text-decoration-style:  dotted;
+}
+
 /* text providing extra detail to a heading. p-subtitle is a microformat 
    (plaintext) alternative class name for .subtitle
 // .......................................................................... */
@@ -125,27 +117,14 @@ body > *:not(.fluid) {
 
 
 /* -----------------------------------------------------------------------------
-//  #colors - provide a set of utility color classes where the --color variable
-//            is employed                                        - EXPERIMENTAL
+//  #colors - semantic classes for setting the --color variable - EXPERIMENTAL
 // -------------------------------------------------------------------------- */
 
-/* semantic colors for states */
+/* semantic colors for icon states */
 .valid    { --color:      var(--valid);   }
 .invalid  { --color:      var(--invalid); }
 .unknown  { --color:      var(--unknown); }
 
-.red      { --color:      var(--error);   }
-.orange   { --color:      var(--error);   }
-.yellow   { --color:      var(--warning); }
-.lime     { --color:      var(--error);   }
-.green    { --color:      var(--success); }
-.aqua     { --color:      var(--error);   }
-.blue     { --color:      var(--info);    }
-.indigo   { --color:      var(--error);   }
-.purple   { --color:      var(--error);   }
-.violet   { --color:      var(--error);   }
-.magenta  { --color:      var(--error);   }
-
 
 /* -----------------------------------------------------------------------------
 //  #backgrounds - 
@@ -153,79 +132,27 @@ body > *:not(.fluid) {
 
 /* https://css-tricks.com/background-patterns-simplified-by-conic-gradients/  */
 .checkerboard {
-  background: repeating-conic-gradient(var(--neutral) 0% 25%, 
-              transparent 0% 50%) 50% / 20px 20px;
-}
-
-/* -----------------------------------------------------------------------------
-//  #spacing - 
-// -------------------------------------------------------------------------- */
-
-/* for inserting an icon using the background-blend-mode technique */
-.icon {
-  display:                inline-block;
-  padding-right:          var(--inline-padding);
-  background-size:        var(--text-icon);
-  background-position:    var(--center-right);
-  background-blend-mode:  lighten, normal;
-}
-
-/* leading space for inline ::before elements, typically icons */
-.leading {
-  padding-left:           var(--inline-padding);
+  background:             repeating-conic-gradient(var(--neutral) 0% 25%, 
+                          transparent 0% 50%) 50% / 20px 20px;
 }
 
-/* trailing space for inline ::after elements, typically icons */
-.trailing {
-  padding-right:          var(--inline-padding);
-}
 
 /* -----------------------------------------------------------------------------
 //  #layout - 
 // -------------------------------------------------------------------------- */
 
-/* a grid with columns of width var(--column)
-// .......................................................................... */
-.grid {
-  display:                grid;
-  grid-template-columns:  [full-start] repeat(auto-fit, 
-                                       minmax(var(--column), 1fr)) [full-end];
-  column-gap:             var(--m);
-  container-type:         none;    /* containment clashes with grid on safari */
-}
-
 /* main content placement in the holy grail 3-column grid
+// firefox is not forgiving with :has() rules, so this must be separated out
 // .......................................................................... */
-/* firefox is not forgiving with :has() rules, so this must be separated out  */
 .dual-aside { grid-column: 2 / -2; }
 
 
-/* a basic flex container
- ............................................................................ */
-.flex {
-  --flex-break:           100rem;    /* TODO/TEMP - a bit of a magical number */
-  display:                flex;
-  flex-wrap:              wrap;
-  gap:                    var(--m);
-}
-
-/* flex all the children of .flex to single column below --flex-break */
-:where(.flex) > * {                                     /* [0000] specificity */
-  flex-grow:              1;
-  flex-basis:             calc((var(--flex-break) - 100%) * 999);
-}
-
-.flex > :where(.column, .main) {
-  /*flex: 1 1 auto;*/
-}
-
-
 /* -----------------------------------------------------------------------------
 //  #breaks - #br #wbr #hr - line breaks and the horizontal rule
 // -------------------------------------------------------------------------- */
 
-/* #hr #section - the sectioning horizontal rule         - [0011] specificity */
-hr.section {
+/* #sectioning - a significant break between sections */
+.sectioning {
   height:                 3rem;
   margin:                 auto;
   width:                  unset;
@@ -240,9 +167,26 @@ hr.section {
 
 
 /* -----------------------------------------------------------------------------
-//  #icons - convenience classes for icons defined in icons.css - EXPERIMENTAL
+//  #icons - helper classes for icons                           - EXPERIMENTAL
 // -------------------------------------------------------------------------- */
 
+/* for inserting an icon using the background-blend-mode technique */
+.icon {
+  display:                inline-block;
+  padding-right:          var(--inline-padding);
+  background-size:        var(--text-icon);
+  background-position:    var(--center-right);
+  background-blend-mode:  lighten, normal;
+}
+
+/* leading/trailing space for inline ::before elements, typically icons
+//   TODO: investigate using :has() for this on the parent of .icon
+// ........................................................................... */
+.leading  { padding-left: var(--inline-padding);  }
+.trailing {padding-right: var(--inline-padding);  }
+
+/* convenience classes for icons defined in icons.css
+// ........................................................................... */
 .i-burger       { --icon: var(--i-burger);        }
 .i-check        { --icon: var(--i-check);         }
 .i-chevron      { --icon: var(--i-chevron);       }
@@ -258,7 +202,8 @@ hr.section {
 .i-user-circle  { --icon: var(--i-user-circle);   }
 .i-user-off     { --icon: var(--i-user-off);      }
 
-/* #unadorned removes a ::before or ::after icon         - [0011] specificity */
+/* removes a ::before or ::after icon                     - [0011] specificity
+// ........................................................................... */
 .unadorned::before, .unadorned::after {
   content:                unset;
 }

data/lib/assets/css/clairity/components.css

@@ -9,22 +9,22 @@
 // -------------------------------------------------------------------------- */
 
 /* #body - auto-grid by default - overrides base.css default body definition. 
-   set --columns to the number of columns desired */
+   set --columns to the number of columns desired
+// .......................................................................... */
 body {
   display:                grid;
   grid-template-columns:  [full-start] var(--padding, var(--m))
                           [padded-start] repeat(var(--columns, auto-fit), 
                                          minmax(var(--grid), 1fr)) [padded-end]
                                          var(--padding, var(--m))    [full-end];
-  column-gap:             var(--gap);     /* flexible between 400 - 800px */
+  column-gap:             var(--gap);   /* --gap is fluid between 400 - 800px */
   max-width:              unset;
 }
 
 /* some containers should span full or padded width by default if in the grid */
-:where(:not(.grid)) > main { grid-column: padded; }
-nav, header, footer {
-  grid-column:            full;
-}
+:where(:not(.grid)) > main  { grid-column: padded;  }
+nav, header, footer         { grid-column: full;    }
+
 
 /* the top header typically should sit flush to the top of the page and use 
      padding; TODO: this seems to be over-specified */
@@ -39,11 +39,39 @@ footer {
   grid-auto-rows:         min-content;     /* don't unnecessarily expand rows */
   column-gap:             var(--m);
   container-type:         unset;     /* safari doesn't like contain with grid */
-  padding-inline:         var(--padding, var(--m));       /* flexible padding */
+  /*padding-inline:         var(--padding, var(--m));*/   /* flexible padding */
 }
 
 footer > p { grid-column: 1 / -1; }        /* take up a whole row in the grid */
 
+/* HACK: because .100dvi uses a negative margin hack to break out of the parent 
+   container and extra negative margin to compensate for the vertical scrollbar,
+   the content needs more padding on narrower screens to stay visible */
+body > footer:last-of-type:is(._100dvi, [class~="100dvi"]) {
+  margin-inline:          calc(50% - 50dvi - var(--s));
+  padding-inline:         var(--m) var(--s); /* asymmetric due to neg. margin;
+                          centers because --m is twice --s & --s used above */
+}
+
+/* a basic flex container
+// .......................................................................... */
+.flex {
+  --flex-break:           100rem;    /* TODO/TEMP - a bit of a magical number */
+  display:                flex;
+  flex-wrap:              wrap;
+  gap:                    var(--m);
+}
+
+/* flex all the children of .flex to single column below --flex-break */
+:where(.flex) > * {                                     /* [0000] specificity */
+  flex-grow:              1;
+  flex-basis:             calc((var(--flex-break) - 100%) * 999);
+}
+
+.flex > :where(.column, .main) {
+  /*flex: 1 1 auto;*/
+}
+
 
 /* -----------------------------------------------------------------------------
 //  #headings - 
@@ -53,13 +81,15 @@ header:not(.banner) {
   display:                flex;
   flex-wrap:              wrap;
   justify-content:        space-between;
+  align-items:            baseline; /* make sure flexed text lines up visually*/
 }
 
 header :where(h1,h2,h3,h4,h5,h6) {
 }
 
-header :where(p) {
-  flex:                   1 0 100%;
+/* use <span>, not <p>, for text that sits alongside a heading within a header*/
+header :where(p, .subtitle) {
+  flex:                   1 0 100%; /* flex to a full row, forcing a line wrap*/
 }
 
 
@@ -91,7 +121,8 @@ header :where(p) {
   grid-column:            unset;
   flex-direction:         column;
   flex-grow:              1;            /* take up the whole role if orphaned */
-  flex-basis:             calc((40vw - 100%) * 999);
+  /* flex-basis unnecessary? seems to wrap weirdly at larger viewport widths  */
+  /*flex-basis:             calc((40vw - 100%) * 999);*/ 
   align-items:            start;           /* some items will float otherwise */
   row-gap:                var(--s);              /* add some vertical spacing */
   justify-content:        start;
@@ -139,7 +170,7 @@ header :where(p) {
 
 
 /* -----------------------------------------------------------------------------
-//  #icons - svg icons
+//  #i #icons - standalone svg icons
 // -------------------------------------------------------------------------- */
 
 i[class^='i-'] {
@@ -154,6 +185,7 @@ i[class^='i-'] {
 
 /* -----------------------------------------------------------------------------
 //  #banner - header that usually includes a hero image and perhaps a nav
+//            uses the grid `place-items: center` technique on all children
 // -------------------------------------------------------------------------- */
 
 .banner {
@@ -164,6 +196,7 @@ i[class^='i-'] {
   grid-template-areas:    "banner";
   place-items:            center;
   align-self:             flex-start;
+  max-width:              unset; /* override header max-width in cosmetic.css */
   height:                 var(--banner-height);
   /*max-height:             var(--banner-max-height);*/
   /*background-color:       var(--primary-transparent);*/ /* bg color was meant 
@@ -176,20 +209,30 @@ i[class^='i-'] {
 /*.banner menu { margin-block: var(--ml); }*/
 
 /* banner #content - constrain content width with a css variable set on parent*/
-.banner .content { width: var(--content-width); }
+.banner .content {
+  width:                  var(--content-width);
+  max-width:              100dvi;      /* don't let content overflow viewport */
+  z-index:                0;            /* safari uses source order otherwise */
+}
 
 /* banner grid */
 .banner > * { grid-area:  banner; }
 .banner > nav {
-  place-self:             start center;
+  place-self:             flex-start center;
   width:                  var(--line-length);
+  max-width:              100dvi;      /* make sure nav doesn't go off-screen */
 }
 .banner nav menu { /*flex:  auto;*/ }
 
+/* TODO: use fluid padding on non-hero children rather than container query?  */
+@container (width <= 50rem) {
+  .banner > :not(img, .hero) { padding-inline: var(--s); }
+}
+
 .banner > img, .hero {
   height:                 min(var(--banner-height), var(--banner-max-height));
   width:                  100%;
-  max-width:              none;
+  max-width:              none; /* TODO: should this be broken out separately?*/
   z-index:                -1;
 }
 
@@ -295,7 +338,7 @@ body > nav a, body > header > nav a {
   max-height:             2.75rem;
 }
 /* visited links in the nav menu shouldn't be different colors */
-:where([aria-label="primary"], nav menu li) a:visited { color: var(--link); }
+:where([aria-label="primary"], nav menu li) :visited { color: var(--link); }
 
 /*body > nav a.button, body > header > nav a.button {
   white-space:            nowrap;
@@ -312,6 +355,7 @@ body > nav a, body > header > nav a {
   outline:                none;
   border:                 none;
   width:                  var(--height);             /* form icons are square */
+  max-width:              100cqi;
   min-width:              0;
   padding:                0;
   cursor:                 pointer;    /* unconventional usage for 'clickable' */
@@ -559,7 +603,7 @@ button.tertiary, .tertiary.button {            /* [0011] / [0020] specificity */
 // .......................................................................... */
 
 /* TODO: the main form grid should inline elements rather than forcing it here
-  .bottons inlines/wraps multiple buttons where necessary - [0010] specificity*/
+  .buttons inlines/wraps multiple buttons where necessary - [0010] specificity*/
 .buttons {
   list-style:             none;
   display:                flex;                   /* overwrite display: grid; */
@@ -580,11 +624,12 @@ form .buttons { max-width: var(--field-max) }
 .roomy.buttons { gap:     var(--ml); }
 
 /* fix buttons floating and getting squished at smaller screen widths */
-@container (max-width: 28rem) {
+@container (width <= 28rem) {
   form { max-width:       unset; }
   form .buttons {
-    max-width:            unset;
-    grid-column:          -1/1;
+    max-width:            unset;  /* don't constrain width in narrow confines */
+    grid-column:          -1/1;         /* span the entire grid for more room */
+    justify-content:      flex-end; /* end-align looks more natural than start*/
   }
   label { font-size:      var(--small); }
 }
@@ -654,6 +699,18 @@ nav:has(.toggle[aria-expanded=false]) > menu {
 [rel~="external"].button:hover::after { background-color: var(--foreground); }
 
 
+/* #button_to - a rails class set on forms that look like buttons - minimize the
+//              form width while maximizing the button within to that form width
+// .......................................................................... */
+.button_to {
+  width:                  min-content;
+/*HACK: an inline-size container-type make forms zero-width, so make it normal*/
+  container-type:         normal;
+}
+.button_to > [type="submit"] {
+  width:                  max-content;
+}
+
 
 /* -----------------------------------------------------------------------------
 //  #selectmenu - Open UI replacement to the standard select element - 
@@ -728,7 +785,7 @@ selectmenu::part(listbox) {
   margin-top:             auto;        /* make sure buttons are at the bottom */
 }
 
-@container (min-width: 35rem) {
+@container (width >= 35rem) {
   /*.card { flex-direction: row; }*/  /* interferes with single-card section */
   .card > img, .cards > article > img {
     max-height:           var(--width);
@@ -741,19 +798,6 @@ selectmenu::part(listbox) {
   }
 }
 
-/* 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 - an inline list of metatags; can be text, links, icons, or other
@@ -767,7 +811,8 @@ selectmenu::part(listbox) {
   padding:                0;
 }
 
-.tags > li {
+/* TODO: .tag should be in classes.css and kept in sync with this rule?       */
+.tags > li, .tag {
   display:                inline-block;
   color:                  var(--secondary);
   font-size:              var(--small);
@@ -789,12 +834,6 @@ selectmenu::part(listbox) {
   margin-bottom:          var(--m);
 }
 
-/* TEMP: add margin-top to buttons for browsers that don't support :has() */
-@supports not (:has(a)) {
-.tags + .buttons {
-  margin-top:             var(--m);
-}}
-
 
 /* -----------------------------------------------------------------------------
 //  #grid - multi-column grid adjustments
@@ -810,12 +849,6 @@ selectmenu::part(listbox) {
   container-type:         none;    /* containment clashes with grid on safari */
 }
 
-/* for layouts with left & right asides, put main in the middle grid columns  */
-/* grrr, firefox is not forgiving with :has() rules, so this must be separated*/
-.dual-aside {
-  grid-column:            2 / -2;
-}
-
 /*full is a grid area for a row that spans all columns   - [0000] specificity */
 :where(.grid) > :where(header,hgroup,h1,h2,h3,h4,h5,h6,nav:not(.column),footer){
   grid-column:            full;
@@ -907,7 +940,7 @@ selectmenu::part(listbox) {
 //  #progressbar - a circular progress bar component - from almond.css
 // -------------------------------------------------------------------------- */
 
-[role="progressbar"]  {
+[role="progressbar"] {
   --value:                50;
   --thick:                50%;
   --medium:               58%;