clairity.css 0.1.0

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

@@ -0,0 +1,264 @@
+/******************************************************************************\
+CLASSES - Here is where we first deviate from the classless CSS directive. We'll
+          add alternate styles for many elements and groups of elements here, 
+          but none of these will rise to the level of full-on components. Those 
+          will be the next layer of the CSS hierarchy.
+
+          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.
+
+          Note that class names can start with a number in HTML5, but css
+          selectors can't. For a workaround (used with the .100vw class), see
+  https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
+
+\******************************************************************************/
+
+
+/* -----------------------------------------------------------------------------
+//  #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 {
+  width:                  100%;
+  max-width:              var(--line-length);     /* for horizontal centering */
+  margin-inline:          auto;                    /* centers if width is set */
+}
+
+/* #100vw - take up the full width of the viewport */
+._100vw, [class~="100vw"] {
+  width:                  100vw;
+  max-width:              100vw;     /* still has horizontal scrollbar issues */
+  margin-inline:          calc(50% - 50vw - var(--xs));/*neg. margin if needed*/
+}
+
+/* #100dvi - dynamic full width of the viewport */
+._100dvi, [class~="100dvi"] {
+  /*width:                  100dvi;*/
+  max-width:              100dvi;    /* still has horizontal scrollbar issues */
+  /*margin-inline:          calc(50% - 50dvi - var(--xs));neg margin if needed*/
+}
+
+
+/* -----------------------------------------------------------------------------
+//  #grid helpters - 
+// -------------------------------------------------------------------------- */
+
+/* .subgrid extends grid into descendents - firefox 71+ & safari 16+ only, no
+                                            chrome/edge yet - 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 */
+}
+
+/* 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 */
+}
+
+/* span all but the 1st & last grid columns
+   .......................................................................... */
+.padded {
+  grid-column:            2 / -2;
+}
+
+
+/* -----------------------------------------------------------------------------
+//  #headings - 
+// -------------------------------------------------------------------------- */
+
+/* #h1 #h2 #h3 #h4 #h5 #h6 - allows changing visual heading hierarchy 
+   independent of document outline. keep values in sync with those in base.css
+   .......................................................................... */
+.h1 { --min-font: 1.75;   --max-font: 2.5;    }
+.h2 { --min-font: 1.5;    --max-font: 2;      }
+.h3 { --min-font: 1.375;  --max-font: 1.667;  }
+.h4 { --min-font: 1.25;   --max-font: 1.5;    }
+.h5 { --min-font: 1.125;  --max-font: 1.25;   }
+.h6 { --min-font: 1;      --max-font: 1.125;  }
+.h5, .h6 { font-weight:   var(--bold);        }
+
+/* text providing extra detail to a heading. p-subtitle is a microformat 
+   (plaintext) alternative class name for .subtitle
+// .......................................................................... */
+.subtitle, .p-subtitle {
+  color:                  var(--neutral);
+  font-size:              1rem;
+  font-variant:           small-caps;
+  margin:                 0;
+}
+
+/* remove decorations, typically from hgroup      - [0010] / [0020] specificity
+// .......................................................................... */
+.plain, .plain:hover {  /* [0020] specificity needed to overcome hgroup:hover */
+  border:                 none;
+  padding-left:           unset;
+}
+/* HACK: normalize spacing between headings, typically within hgroups - [0010]*/
+.plain :where(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) + 
+       :where(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) {
+  margin-top:             var(--medium);               /* em relative spacing */
+}
+
+
+/* -----------------------------------------------------------------------------
+//  #colors - provide a set of utility color classes where the --color variable
+//            is employed                                        - EXPERIMENTAL
+// -------------------------------------------------------------------------- */
+
+/* semantic colors for 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 - 
+// -------------------------------------------------------------------------- */
+
+/* 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);
+}
+
+/* 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  */
+.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 {
+  height:                 3rem;
+  margin:                 auto;
+  width:                  unset;
+  max-width:              unset;
+  background-color:       var(--transparent);
+  border:                 var(--solid) var(--transparent);
+  box-shadow:             var(--inset) var(--transparent),
+                          var(--inset) var(--transparent);
+                          /*inset 0 .5em 1.5em rgba(0, 0, 0, .1), 
+                          inset 0 .125em .5em rgba(0, 0, 0, .15);*/
+}
+
+
+/* -----------------------------------------------------------------------------
+//  #icons - convenience classes for icons defined in icons.css - EXPERIMENTAL
+// -------------------------------------------------------------------------- */
+
+.i-burger       { --icon: var(--i-burger);        }
+.i-check        { --icon: var(--i-check);         }
+.i-chevron      { --icon: var(--i-chevron);       }
+.i-dash         { --icon: var(--i-dash);          }
+.i-edit         { --icon: var(--i-edit);          }
+.i-home-edit    { --icon: var(--i-home-edit);     }
+.i-mail         { --icon: var(--i-mail);          }
+.i-mail-check   { --icon: var(--i-mail-check);    }
+.i-mail-x       { --icon: var(--i-mail-x);        }
+.i-send         { --icon: var(--i-send);          }
+.i-server-cog   { --icon: var(--i-server-cog);    }
+.i-trash        { --icon: var(--i-trash);         }
+.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 */
+.unadorned::before, .unadorned::after {
+  content:                unset;
+}