Refactor css into smaller files

src/css/reset/3rd-party/fork-me.less

@@ -0,0 +1,52 @@
+// Fork me on GitHub
+// Append to body>header:
+//    <a id=fork-me href=https://github.com/org/proj>Fork me on GitHub</a>
+
+@import "../static/utility-box";
+
+#fork-me {
+   display: none;
+   }
+body >header >#fork-me-container {  //dynamically added wrapper element
+   position: absolute;
+   top: 0px;
+   right: 0px;
+   width: 200px;
+   height: 200px;
+   overflow: hidden;
+   z-index: 150;
+   pointer-events: none;
+   >a#fork-me {
+      display: block;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      font-size: 14px;
+      font-weight: bold;
+      color: white;
+      background-color: rgba(180, 180, 180, 0.8);
+      border: 1px solid dimgray;
+      transform: rotate(45deg);
+      margin: 60px -50px 0px 0px;
+      transition: all 500ms;
+      pointer-events: auto;
+      &:hover {
+         color: white;
+         background-color: rgba(180, 180, 180, 1);
+         outline: none;
+         }
+      }
+   >i.font-icon {
+      display: none;
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      font-size: 40px;
+      color: dimgray;
+      pointer-events: auto;
+      }
+   }
+.MobileMode({
+   body >header >#fork-me-container >a#fork-me { display: none }
+   body >header >#fork-me-container >i.font-icon { display: block }
+   });

src/css/reset/core.less

@@ -0,0 +1,72 @@
+// Core
+
+@import "static/utility-box";
+
+* { box-sizing: border-box; }
+html { display: flex; flex-direction: column; height: 100%; min-height: 100%; }
+html { font-size: 115%; font-family: system-ui, geneva, tahoma, sans-serif; }  //override font-size percent to resize base font
+body { width: 100%; flex: 1; }
+body, h1, h2, h3, h4, h5, h6, p, figure, nav ul, nav ul li { padding: 0px; margin: 0px; }
+h1, h2, h3, h4, h5, h6 { letter-spacing: 0.04em; margin-bottom: 0.2em; }
+section, header, figure { margin-bottom: 20px; }
+p, ul, ol { margin-bottom: 0.9em; }
+section, figure, p, ul, ol {
+   &:last-child {
+      margin-bottom: 0px;
+      }
+   }
+ul, ol { margin-top: 2px; }
+ul li, ol li { font-size: 0.9em; padding-left: 1.2em; text-indent: -1.3em; }
+nav ul { list-style-type: none; }
+nav ul li { text-indent: 0px; }
+pre, code { font-family: menlo, consolas, monospace; font-style: normal; font-weight: bold; line-height: 1.3em; margin: 0px; }
+p code, ul code, ol code, figure figcaption code, p a, p span { white-space: nowrap; }
+p code { padding: 0px 3px; }
+figure { text-align: center; }
+figure img { max-width: 100%; max-height: 100%; }
+figcaption { font-weight: bold; padding: 3px 0px; }
+img { border: none; }
+hr { border: none; border-top: 1px solid silver; }
+sup, sub { font-size: 0.7rem; }
+iframe { border: none; }
+
+// Basic styling
+body { max-width: 900px; color: dimgray; padding: 40px 15px; margin: 0px auto; }
+body >header { text-align: center; }
+main { min-height: 300px; }
+header { margin-bottom: 20px; }
+aside { float: right; clear: right; font-size: 0.9rem; margin: 0px 0px 20px 20px; }
+aside.left { float: left; clear: left; margin: 0px 20px 20px 0px; }
+main section aside { max-width: 35%; background-color: whitesmoke; border: 1px solid silver; padding: 10px; }
+main section aside.simple { background-color: transparent; border: none; padding: 0px; }
+main section aside h2 { font-size: 1.1rem; }
+main section aside img { width: 100%; max-width: 100%; }
+main section aside p:last-child { margin-bottom: 0px; }
+section:after { content: " "; display: table; clear: both; }  //a section with an aside will self clear
+body >footer { display: flex; justify-content: space-between; align-items: center; clear: both; text-align: center; font-size: 0.9rem; color: darkgray; padding: 30px 0px; }
+body >footer >div { min-width: 20%; }  //centers middle child
+body >footer >div:first-child:last-child { width: 100%; }
+body >footer >div:first-child:not(:last-child) { text-align: left; }
+body >footer >div:last-child:not(:first-child) { text-align: right; }
+body >footer a img[alt=logo] { height: 50px; }
+h1 { font-size: 2.5rem; font-family: Chango, system-ui, sans-serif; }
+h2 { font-size: 1.5rem; }
+h3 { font-size: 1.2rem; }
+h4 { font-size: 0.9rem; font-weight: normal; text-transform: uppercase; letter-spacing: 0.14em; }
+h1+h2 { font-weight: lighter; text-shadow: 0px 0px 0.2em white; margin: -0.2em 0px 0.4em 0px; }
+quoteblock:before { content: open-quote; }
+quoteblock:after  { content: close-quote; }
+i.font-icon { font-size: 1.5em; }
+
+// Responsive design
+.MobileMode({
+   h1 { font-size: 2.0rem; }
+   h1+h2 { font-size: 1.3rem; }
+   main section aside,
+   main section aside.left { clear: both; float: none; max-width: none; text-align: center; margin: 0px 0px 20px 0px; }
+   main section aside img { width: auto; max-height: 200px }
+   body { padding: 20px 10px; }
+   body >footer { flex-direction: column; padding: 20px 2px; }
+   body >footer >div { text-align: center !important; }
+   body >footer >*:not(:last-child) { margin-bottom: 15px; }
+   });

src/css/reset/forms.less

@@ -0,0 +1,105 @@
+// Forms and Input Controls
+
+@import "static/utility-box";
+
+form, fieldset, label {
+   display: block;
+   max-width: 25em;
+   margin-bottom: 1em;
+   &:last-child {
+      margin-bottom: 0px;
+      }
+   }
+label >span:first-child { display: block; }
+input, textarea, select, fieldset >aside { width: 100%; max-width: 25em; font-size: 1.1em; }
+input, textarea { border: 1px solid silver; border-radius: 5px; padding: 0.3em; }
+select { font-size: 1.1em; }
+textarea { height: 4.1em; }  //display 3 lines
+label:has(input[type=checkbox],input[type=radio]) { display: flex; align-items: center; padding-left: 1.2em; margin-bottom: 0.1em; }
+label:has(:disabled) { opacity: 0.7; }
+input[type=checkbox], input[type=radio] { width: auto; margin-right: 0.3em; }
+input[type=range] { appearance: none; height: 1.2em; padding: 0px; cursor: grab; }
+input[type=range]:active { cursor: grabbing; }
+button, input[type=checkbox], input[type=radio], input[type=file], select { cursor: pointer; }
+button, input, select, optgroup, option, textarea { transition: all 500ms; }
+*:disabled { opacity: 0.7; cursor: not-allowed; pointer-events: none; }
+input:out-of-range { background-color: pink; }
+form nav, fieldset nav { text-align: right; margin-bottom: 1em; }
+form nav:last-child, fieldset nav:last-child { margin-bottom: 0px; }
+form nav button, fieldset nav button { margin-left: 0.5em; }
+
+// Form colors
+input, textarea { background-color: mintcream; }
+
+// Flat buttons
+button             { font-size: 1.1rem; font-weight: bold; white-space: nowrap; color: white; border: none; border-radius: 0.4em; padding: 0.6em 1.2em; outline: none; transition: all 500ms; }
+button i.font-icon { font-size: 1.2em; vertical-align: top; padding-right: 0.4em; }
+button:disabled    { background-color: silver; }
+
+// Drop-down selectors
+//    <label>
+//       <span>Color:</span>
+//       <select>
+//          <option>Plum</option>
+///         <option>Pink</option>
+//       </select>
+//    </label>
+label:has(select) {
+   position: relative;
+   text-align: left;
+   padding: 0px;
+   &::after {
+      content: @symbolAngleRight;  //character: ❯
+      position: absolute;
+      top: 0.1em;  //assume no label text above drop-down
+      right: 0.4em;
+      font-size: 1.5em;
+      transform: rotate(90deg);  //point down
+      pointer-events: none;
+      }
+   span {
+      }
+   select {
+      appearance: none;
+      color: black;
+      background-color: mintcream;
+      border: 1px solid silver;
+      padding: 0.3em 2.0em 0.3em 0.5em;
+      margin: 0px;
+      &:focus {
+         background-color: honeydew;
+         }
+      &:invalid {
+         color: firebrick;
+         }
+      }
+   &:has(span+select)::after { top: auto; bottom: 0.03em; }  //label text above drop-down
+   }
+
+// Fieldsets (unless for checkbox or radio buttons)
+//    <fieldset>
+//       <legend>Survey</legend>
+//       <lable><span>Name:</span><input></label>
+//    </fieldset>
+fieldset {
+   border: 1px solid silver;
+   border-radius: 5px;
+   padding: 0.8em 1.0em;
+   &:has(>label>input[type=checkbox],>label>input[type=radio]) {
+      border: none;
+      padding: 0px;
+      >legend {
+         font-size: 1em;
+         font-weight: normal;
+         border: none;
+         padding: 0px;
+         }
+      }
+   >legend {
+      font-size: 1.1em;
+      font-weight: bold;
+      border: 1px solid silver;
+      border-radius: 1000px;
+      padding: 0.3em 1.0em;
+      }
+   }

src/css/reset/lib-x.less

@@ -0,0 +1,116 @@
+// LibX
+
+@import "static/utility-box";
+
+.reveal-button       { display: inline-block; border: 1px solid; padding: 3px 10px; margin-bottom: 20px; transition: all 500ms; cursor: pointer; }
+.reveal-button:hover { color: white; border-color: transparent; }
+.reveal-target       { display: none; margin-bottom: 20px; }
+
+[data-href-popup] { cursor: pointer; }
+
+i.font-icon[data-href], i.font-icon[data-click] { opacity: 0.9; transition: all 500ms; }
+i.font-icon[data-href]:hover, i.font-icon[data-click]:hover { opacity: 1.0; }
+
+@keyframes jiggle-it {  //'jiggle-it 200ms 3'
+   0%  { transform: rotate(-10deg); }
+   50% { transform: rotate( 10deg); }
+   }
+
+// Bubble help
+//    <button class=bubble-help-hover>
+//       Hover over me
+//       <span class=bubble-wrap>
+//          <span class=bubble-help>Help!</span>
+//          <span class=bubble-pointer>▼</span>
+//       </span>
+//    </button>
+.bubble-help {
+   display: none;
+   }
+.bubble-help-hover {
+   position: relative;
+   &.bubble-help-show {
+      >.bubble-wrap {
+         opacity: 1;
+         }
+      }
+   >.bubble-wrap {
+      position: absolute;
+      top: 5px;  //let pointer slightly overlap hover target
+      left: 0px;
+      transform: translateY(-100%);  //sit directly on top of target
+      font-family: system-ui, sans-serif;
+      font-size: 0.8rem;
+      font-weight: bold;
+      pointer-events: none;
+      z-index: 200;
+      opacity: 0;
+      transition: opacity 600ms 300ms;  //300ms delay to prevent flicker
+      >.bubble-help {
+         display: block;
+         white-space: nowrap;
+         border-radius: 5px;
+         padding: 10px 20px;
+         }
+      >.bubble-pointer {
+         display: block;
+         font-size: 120%;
+         text-align: left;
+         padding-left: 12px;
+         margin-top: -0.4em;
+         }
+      }
+   }
+
+
+// Social buttons
+#social-buttons span i.font-icon {
+   display: inline-block;
+   width: 24px;
+   height: 24px;
+   line-height: 24px;
+   font-size: 18px;
+   vertical-align: top;
+   text-align: center;
+   color: dimgray;
+   background-color: white;
+   border: 1px solid silver;
+   border-radius: 0.2em;
+   transition: all 500ms;
+   &:not(:last-child) {
+      margin-right: 8px;
+      }
+   &:hover {
+      color: cornflowerblue;
+      box-shadow: 0px 0px 0.4em skyblue;
+      }
+   }
+
+// Popup image
+img.popup-image, img[data-popup-image] { max-width: 120px; max-height: 120px; opacity: 0.9; transition: all 500ms; cursor: pointer; }
+img.popup-image:hover, img[data-popup-image]:hover { opacity: 1 }
+img.popup-image + .popup-image-layer { position: absolute; top: 10px; left: 10px; background-color: white; z-index: 5000; opacity: 0; }
+img.popup-image + .popup-image-layer i[data-icon] { position: absolute; right: -0.7em; top: -0.7em; width: 1.6em; height: 1.6em; font-size: 1.8rem; text-align: center; color: gray; background-color: silver; border-radius: 1000px; padding-top: 0.3em; transition: all 500ms; }
+img.popup-image + .popup-image-layer i[data-icon]:hover { color: white; }
+img.popup-image + .popup-image-layer img { display: block; width: auto; height: auto; border: 20px solid silver; }
+
+// Montage loop
+.montage-loop {
+   position: relative;
+   }
+.montage-loop >img {
+   position: absolute;
+   display: block;
+   object-fit: cover;
+   width: 100%;
+   height: 100%;
+   opacity: 0;
+   }
+.montage-loop >img.previous {
+   opacity: 1;
+   z-index: 1000;
+   }
+.montage-loop >img.current {
+   opacity: 1;
+   z-index: 2000;
+   }

src/css/reset/links.less

@@ -0,0 +1,16 @@
+// Links
+
+@import "static/utility-box";
+
+a         { color: dimgray; text-decoration: none; border-bottom: 1px dotted; outline: 2px solid transparent; transition: all 500ms; }
+a:visited { color: darkgray; }
+a:hover   { color: white; }
+a[title]  { cursor: pointer; }
+a img,       a i.font-icon       { opacity: 0.9; transition: all 500ms; }
+a img:hover, a i.font-icon:hover { opacity: 1.0; }
+a figure figcaption { text-align: center; transition: all 500ms; }
+a figure:hover figcaption { color: black; }
+.plain a, a.plain, a.image-link, nav a { border-bottom: none; }
+.plain a:visited, a.plain:visited, a.image-link:visited, nav a:visited { color: inherit; }
+.plain a:hover, a.plain:hover, a.image-link:hover, nav a:hover { color: inherit; background-color: transparent; outline-color: transparent; }
+.plain a img, a.plain img, a img.plain { opacity: 1 }

src/css/reset/tables.less

@@ -1,6 +1,26 @@
 // Tables
 
-@import "reset/utility-box";
+@import "static/utility-box";
+
+table { border-collapse: collapse; border-spacing: 0px; margin: 0px auto 20px auto; }
+table caption { caption-side: bottom; font-size: 0.7rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.16em; margin-top: 0.4rem; }
+table tr { border-bottom: 1px solid steelblue; transition: all 500ms; }
+table thead tr { border-bottom-width: 3px; }
+table tbody tr:hover { background-color: aliceblue; }
+table tbody tr th[colspan] { font-size: 0.8rem; font-weight: normal; text-align: center; text-transform: uppercase; color: white; background-color: steelblue; padding: 3px 0px; }
+table tbody tr td { font-size: 0.9rem; vertical-align: top; text-align: center; }
+table th, table td { padding: 6px 15px; }
+table.data-box { background-color: aliceblue; border: 3px solid gainsboro; }
+table.data-box tr { border: none; }
+table.data-box th, table.data-box td { font-size: 0.9rem; text-align: left; padding: 4px 15px; }
+table.data-box thead tr { background-color: gainsboro; }
+table.data-box tbody tr:nth-child(odd) { background-color: mintcream; }
+table.data-box tbody tr:hover { background-color: floralwhite; }
+table.data-box tbody tr th[colspan] { background-color: darkgray; }
+.plain-tables table tr { border-bottom: none; }
+.plain-tables table tbody td { text-align: left; }
+.plain-tables table tbody tr:hover { background-color: transparent; }
+.MobileMode({ table th, table td { padding: 6px 6px; } });
 
 // data-code-column
 table {