From 8e0e8739d7be952d6cfc199793806f5efae18565 Mon Sep 17 00:00:00 2001
From: Matthias Hertel <mathertel@hotmail.com>
Date: Sat, 15 Feb 2025 18:37:59 +0100
Subject: [PATCH] new page layout system fixed.

---
 css/base.scss      |  148 +-----
 css/card.scss      |  161 +++++--
 css/doc.scss       |   82 +---
 css/iot.scss       |   81 +---
 css/page.scss      |  178 ++++++++
 docstyle.css       |  376 ++++++++-------
 docstyle.css.map   |    2 +-
 iotstyle.css       |  482 ++++++++++++++------
 iotstyle.css.map   |    2 +-
 publishDoku.bat    |   10 +-
 test-iotstyle.htm  | 1084 ++++++++++++++++++++++----------------------
 test/test.time.htm |   73 +++
 12 files changed, 1497 insertions(+), 1182 deletions(-)
 create mode 100644 css/page.scss
 create mode 100644 test/test.time.htm

diff --git a/css/base.scss b/css/base.scss
index 488379d..79ccf73 100644
--- a/css/base.scss
+++ b/css/base.scss
@@ -2,32 +2,31 @@
 // colors, dark mode, sizes, page level layout
 // This is part of the micro css implementation.
 
-@use "sass:color";
-
 // ===== Colors =====
 // hue of 220 is signature of this style
 
-$u-hue: 220;
-$u-background: #c2c3c5;
+@use 'sass:color';
+
+// the u-hue value is the main color of the style
+$u-hue: 220deg;
+$u-background: #d4d6da;
 $u-background-darkmode: #111111;
 $u-text: #111111; // any text
 $u-text-darkmode: #eeeeee; // any text
 
-$u-primary: hsl(220deg 80% 30%); // active objects
+$u-primary: hsl($u-hue 80% 30%); // active objects
 $u-primary-text: white;
 
 $u-border-color: #555555;
-$u-border-color-active: hsl(220deg 100% 30%);
+$u-border-color-active: hsl($u-hue 100% 30%);
 
 $u-disabled: gray; // disabled objects
 $u-heading: $u-primary; // any headlines
 $u-connect: #00cc00; // connectivity / net
 
-// $u-on: lighten(green, 10%);
-$u-on: color.adjust(green, $lightness: 10%);
+$u-on: color.scale(green, $lightness: 10%);
 $u-off: red;
 
-
 $u-padding-text: 4px;
 $u-padding-block: calc(2 * $u-padding-text);
 
@@ -36,8 +35,6 @@ $u-border: $u-border-size solid $u-border-color;
 $u-border-none: $u-border-size solid transparent;
 $u-border-active: $u-border-size solid $u-border-color-active;
 
-$u-navbar: $u-primary;
-$u-navbar-text: white;
 
 
 // ===== Content Box Sizes =====
@@ -53,12 +50,6 @@ $u-btn-radius: calc($u-padding-block / 2);
 $u-output-border: $u-border-none;
 
 
-// ===== global Layout =====
-
-$u-card-border: none;
-$u-card-radius: $u-padding-block;
-
-
 // ===== font =====
 
 $u-font-sans-serif: arial, ui-sans-serif, sans-serif;
@@ -69,18 +60,9 @@ $u-font-sans-serif: arial, ui-sans-serif, sans-serif;
   --color: #{$u-text};
   --back: #{$u-background};
 
-  --card-back: white;
-  --card-head: #{hsl($u-hue, 20%, 85%)};
-  --card-head-active: #{hsl($u-hue, 80%, 70%)};
   --focus: #{hsl($u-hue, 50%, 50%)};
   --code: rgb(255 255 185);
 
-  --sidebar-width: 200px;
-  --content-width: 1168px;
-  --layout-gap: 16px;
-  --doc-body-width: calc(var(--content-width) + var(--sidebar-width) + 2 * var(--layout-gap));
-  --content-back: #f8f8f8;
-
   --text-spacing: #{$u-text-spacing};
 
   color-scheme: dark light;
@@ -88,9 +70,6 @@ $u-font-sans-serif: arial, ui-sans-serif, sans-serif;
   @media (prefers-color-scheme: dark) {
     --color: #{$u-text-darkmode};
     --back: #{$u-background-darkmode};
-    --card-back: #{color.adjust($u-background-darkmode, $lightness: 15%)};
-    --card-head: #{hsl($u-hue, 20%, 30%)};
-    --card-head-active: #{hsl($u-hue, 80%, 30%)};
   }
 }
 
@@ -113,7 +92,7 @@ body {
   }
 }
 
-/* apply a natural box layout model to all elements, but allowing components to change */
+// apply a natural box layout model to all elements, but allowing components to change
 *,
 *::before,
 *::after {
@@ -234,7 +213,7 @@ p>code {
 
 pre>code {
   display: block;
-  border-radius: $u-card-radius;
+  border-radius: 1em;
   padding: $u-padding-text;
 }
 
@@ -344,113 +323,6 @@ dialog {
   }
 }
 
-// ===== Page Layout =====
-
-nav {
-  position: fixed;
-  min-height: 100%;
-  width: 24ch;
-  z-index: 1;
-  left: -24ch;
-  transition: all 0.2s;
-  padding: 1rem 0.2rem 0.2rem;
-  background-color: var(--card-back);
-
-  &.inpage {
-    position: absolute;
-  }
-
-  &.open {
-    left: 0;
-  }
-
-  &.inpage.open+main {
-    margin-left: 24ch;
-
-    @media print {
-      margin-left: 0;
-    }
-  }
-
-  a,
-  a:hover {
-    text-decoration: none;
-  }
-
-  @media print {
-    display: none;
-  }
-}
-
-main {
-  transition: margin-left 0.2s;
-}
-
-// The header in the micro css is used to display the primary icon of the device and title.
-
-.u-header {
-  display: flex;
-  flex-flow: row nowrap;
-  margin-bottom: $u-gutter;
-
-  .icon {
-    margin-right: $u-gutter;
-    width: 2.6rem;
-    height: 2.6rem;
-    vertical-align: top;
-  }
-
-  h1 {
-    margin: 0;
-    font-size: 2.4rem;
-    font-family: $u-font-sans-serif;
-    font-weight: bold;
-  }
-}
-
-// u-navbar is a horizontal always visible menu just below the header.
-
-.u-navbar {
-  display: flex;
-  flex-flow: row nowrap;
-  margin-bottom: $u-gutter;
-  padding: 2 * $u-padding-text 4 * $u-padding-text;
-  background-color: $u-navbar;
-  color: $u-navbar-text;
-
-  >.gap {
-    flex-grow: 2;
-  }
-
-  >a {
-    text-decoration: none;
-    font-size: 1.25em;
-    min-width: 2em;
-    padding: 0 $u-gutter2;
-
-    &:hover {
-      border-color: var(--focus);
-      background-color: var(--focus);
-    }
-  }
-
-  >img,
-  >svg {
-    padding: 0;
-    min-width: 1.4em !important;
-    width: 1.4em !important;
-    height: 1.4em !important;
-  }
-
-  >*:not(:first-child) {
-    margin-left: $u-gutter2;
-  }
-
-  @media print {
-    display: none;
-  }
-}
-
 .error,
 .warning,
 .invalid {
diff --git a/css/card.scss b/css/card.scss
index 47ed675..5a75b5e 100644
--- a/css/card.scss
+++ b/css/card.scss
@@ -1,17 +1,21 @@
-// @use "sass:color";
-@use "base";
-
 // CSS for HTML cards and card design without any dependencies.
 
+@use "base";
+
 // ===== card Layout settings =====
+// The card layout is based on a grid of cards with a fixed width and height.
+// The values are available as sass variables '$u-card-NNN'
+// to be used in @media and @container rules
+// and as CSS variables '--card-NNN' to enable overriding on card-containers.
+// CSS variables cannot be used in @media and @container rules.
+
 // 365 px
 
+// pixel units are required to create exact card sizes.
 $u-card-width: 280px;
 $u-card-gap: 16px;
-$u-card-height: 320px;
-$u-card-padding: 1em;
-$u-card-radius: 1em;
 
+$u-card-radius: 1em;
 $u-card-border: none;
 
 // ===== card style settings =====
@@ -19,26 +23,29 @@ $u-card-border: none;
 // $u-card-shadow: 0.2em 0.2em 0.4em rgba(0, 0, 0, 0.2);
 
 :root {
-  // When cards must be positioned using multiple columns
-  // the cards width and gap width must be constant. This is true as we need the width in the container queries.
-  // CSS variables cannot be used there.
-
   /* pixel units are preferred to create exact card sizes. */
   --card-width: #{$u-card-width};
   --card-gap: #{$u-card-gap};
 
-  /* cards can have fixed or variable height specified by the --card-height variable. */
-  --card-height: #{$u-card-height};
+  // cards can have fixed or variable height specified by the --card-height variable.
+  --card-height: 320px;
 
   /* horizontal cards have fixed height and are stretched to the total width of the card-container. See below */
 
   /* Design of cards, colors borders, paddings,  */
-  --card-head: hsl(220deg 20% 85%);
-  --card-head-active: hsl(220deg 80% 70%);
-  --card-back: #f2f2f2;
+  --card-back: #fcfcfc;
+  --card-head: hsl(#{base.$u-hue 20% 80%});
+  --card-head-active: #{hsl(base.$u-hue, 80%, 70%)};
+  --card-border: $u-card-border;
   --card-padding: 0.5em;
   --card-image-size: 120px;
-  --card-radius: 0;
+  --card-radius: $u-card-radius;
+
+  @media (prefers-color-scheme: dark) {
+    --card-back: rgb(55 55 55);
+    --card-head: hsl(220deg 20% 30%);
+    --card-head-active: #{hsl(base.$u-hue 80% 30%)};
+  }
 }
 
 // ===== card container =====
@@ -47,36 +54,37 @@ $u-card-border: none;
 // By using some flags based on supplement class names
 // Also it acts as a variable holder for card implementations that can overwrite the default values.
 .card-container {
-  container-name: card;
-  container-type: inline-size;
   display: flex;
   flex-wrap: wrap;
 
   // same as .col1
   width: 100%;
-  gap: $u-card-gap;
-
-  /* container marked with class='horizontal' for horizontal oriented cards
-      stretching on the whole with with image on the left */
+  gap: var(--card-gap); // $u-card-gap;
 
-  /* https://getbootstrap.com/docs/4.3/components/card/#horizontal */
+  // center in container by default
+  margin: 0 auto;
 
-  /* https://codingyaar.com/bootstrap-4-card-image-left-responsive/ */
-  &.horizontal>.card {
+  // container marked with class='horizontal' for horizontal oriented cards
+  // stretching on the whole with with image on the left */
+  &.horizontal {
     --card-width: 100%;
     --card-height: 7.2rem;
 
-    flex-direction: row;
-    align-items: stretch;
-
-    >svg:first-of-type,
-    >img:first-of-type {
-      display: block;
-      float: left;
-      margin-right: var(--card-padding);
-      width: var(--card-image-size);
-      height: 100%;
-      object-fit: cover;
+    >.card {
+        // container-name: card;
+        // container-type: inline-size;
+      flex-direction: row;
+      align-items: stretch;
+
+      >svg:first-of-type,
+      >img:first-of-type {
+        display: block;
+        float: left;
+        margin-right: var(--card-padding);
+        width: var(--card-image-size);
+        height: 100%;
+        object-fit: cover;
+      }
     }
   }
 
@@ -91,9 +99,6 @@ $u-card-border: none;
     // N columns of 280px cards with 16px gap
     // 280*N + 16*(N-1)) = 280, 576, 872,  1168, ... in reverse with container queries
 
-    // center in container by default
-    margin: 0 auto;
-
     // 4 columns maximum
     width: calc($u-card-width * 4 + $u-card-gap * 3);
 
@@ -112,7 +117,32 @@ $u-card-border: none;
 
   }
 
-  /* One column only. */
+  &.col365 {
+    // N columns of 365px cards with 10px gap
+    // 280*N + 16*(N-1)) = 365, 740, 1115, 1490, ... in reverse with container queries
+
+    --card-width: 365px;
+    --card-gap: 10px;
+
+    // 4 columns maximum
+    width: calc(365px * 4 + 10px * 3);
+
+    // @container main (width < #{$u-card-4col}) {
+    @container main (width <= #{365px * 4 + 10px * 3}) {
+      width: calc(365px * 3 + 10px * 2);
+    }
+
+    @container main (width < #{365px * 3 + 10px * 2}) {
+      width: calc(365px * 2 + 10px);
+    }
+
+    @container main (width < #{365px * 2}) {
+      width: 365px;
+    }
+  }
+
+
+  // One column only.
   &.col1 {
     width: 100%;
   }
@@ -122,15 +152,21 @@ $u-card-border: none;
 /* The cards are sized according to the given variables from :root or from the card-container)  */
 .card {
   position: relative;
-  display: inline-block;
+  display: flex;
+  flex-direction: column;
   width: var(--card-width);
   height: var(--card-height);
   margin: 0;
   padding: 0;
-  border-radius: var(--card-radius);
   page-break-inside: avoid;
   overflow: hidden;
   background-color: var(--card-back);
+  border: var(--card-border);
+  border-radius: var(--card-radius);
+
+  @media print {
+    border: 1px solid base.$u-text;
+  }
 
   /* cards can be marked with class='wide' covering 2 columns  */
   &.wide {
@@ -143,26 +179,59 @@ $u-card-border: none;
     height: calc((var(--card-height) - var(--card-gap)) / 2);
   }
 
+  // images as first element in card
+  >svg:first-of-type,
   >img:first-of-type {
     display: block;
     width: 100%;
     height: var(--card-image-size);
     object-fit: cover;
+
+    &.icon {
+      width: 2.75rem;
+      height: 2.75rem;
+    }
   }
 
+  .header {
+    background-color: var(--card-head);
+    padding: var(--card-padding);
+    min-height: 2.75em; // with or without icon
+    max-height: 4rem;
+
+    h3,
+    h4 {
+      margin: 0;
+    }
+
+    // images in header
+    >svg:first-of-type,
+    >img:first-of-type {
+      display: block;
+      float: left;
+      height: 2.75rem;
+      aspect-ratio: 1/1;
+      margin-right: var(--card-padding);
+    }
+
+  }
+
+  .main,
   .body {
+    flex: 1;
+
     /* background-color: lime; */
     padding: var(--card-padding);
   }
 
+  .footer,
   .actions {
-    position: absolute;
-    bottom: 0;
-    left: 0;
+    // position: absolute;
+    align-self: flex-end;
     height: auto;
     width: 100%;
     padding: var(--card-padding);
-    border-top: 1px solid black;
+    border-top: 1px solid rgb(0 0 0 / 12.5%);
     background-color: inherit;
   }
 
diff --git a/css/doc.scss b/css/doc.scss
index 176e3b7..de7ae8a 100644
--- a/css/doc.scss
+++ b/css/doc.scss
@@ -3,89 +3,9 @@
 // This is part of the micro css implementation.
 
 @use "base";
+@use "page";
 @use "card";
 
-body.sitelayout {
-  display: grid;
-  grid-template-columns: auto;
-  grid-template-areas: "header" "main" "sidebar" "footer";
-  gap: var(--layout-gap);
-  max-width: var(--doc-body-width);
-  margin: 0 auto;
-
-  &:has(aside) {
-    grid-template-columns: auto var(--sidebar-width);
-    grid-template-areas: "header header" "main sidebar" "footer footer";
-
-    @media (width <=1000px) {
-      grid-template-areas: "header" "main" "sidebar" "footer";
-    }
-  }
-
-  header {
-    grid-area: header;
-
-    /* background-color: #f0f0f0; */
-    display: flex;
-
-    @media print {
-      display: none !important;
-    }
-
-    >* {
-      align-self: flex-end;
-      display: inline-block;
-    }
-
-    >*:not(:first-child) {
-      margin-left: var(--layout-gap);
-    }
-
-    >.logo {
-      font-size: 160%;
-      font-weight: bold;
-    }
-
-    a {
-      text-decoration: none;
-      width: 12ch;
-      text-align: center;
-      padding: 0.2ch 1ch;
-      transition: box-shadow 0.3s ease-in-out;
-
-      &:hover {
-        box-shadow: 0 5px 12px rgb(0 0 0 / 30%);
-      }
-    }
-  }
-
-  aside {
-    grid-area: sidebar;
-    background-color: lime;
-    padding: var(--layout-gap);
-
-    @media print {
-      display: none !important;
-    }
-  }
-
-  main {
-    grid-area: main;
-    container-name: main;
-    container-type: inline-size;
-    background-color: var(--content-back);
-    padding: var(--layout-gap);
-  }
-
-  footer {
-    grid-area: footer;
-    background-color: lightblue;
-    padding: var(--layout-gap);
-  }
-
-}
-
-
 h2 {
   clear: both;
 }
diff --git a/css/iot.scss b/css/iot.scss
index ed316ba..8330a30 100644
--- a/css/iot.scss
+++ b/css/iot.scss
@@ -1,4 +1,7 @@
+@use "sass:color";
 @use "base";
+@use "card";
+@use "page";
 
 // file: iot.scss
 // Element and card rules for iot dashboards
@@ -10,8 +13,6 @@
 // open class: nav is visible, maybe main needs to shift
 
 
-@use "sass:color";
-
 
 // ===== Cards layout =====
 
@@ -20,31 +21,8 @@
   --grid-gap: 1ch;
 }
 
+// iot specific card modifications
 .card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--card-back);
-  border: base.$u-card-border;
-  border-radius: base.$u-card-radius;
-
-  @media print {
-    border: 1px solid base.$u-text;
-  }
-
-  &.small {
-    // reduced width and text size
-    font-size: 0.8rem;
-
-    .form-grid {
-      grid-template-columns: auto;
-
-      >label {
-        text-align: left;
-      }
-    }
-  }
-
   &.active {
     .border {
       border-color: base.$u-border-color-active;
@@ -54,19 +32,11 @@
       border-color: base.$u-border-color-active transparent;
     }
 
-    >.block.header {
+    >.header {
       background-color: var(--card-head-active);
     }
   }
 
-  .icon {
-    width: 2.75rem;
-    height: 2.75rem;
-    float: left;
-    margin-right: base.$u-gutter;
-    overflow: hidden;
-  }
-
   img,
   svg {
     &.active {
@@ -74,30 +44,6 @@
     }
   }
 
-  >.block {
-    position: relative;
-    flex: 1 1 auto;
-    padding: base.$u-padding-block;
-    min-height: 2rem;
-
-    &.header {
-      background-color: var(--card-head);
-      border-top-right-radius: base.$u-card-radius;
-      border-top-left-radius: base.$u-card-radius;
-      min-height: 2.75em; // with or without icon
-      max-height: 4rem;
-
-      h3,
-      h4 {
-        margin: 0;
-      }
-    }
-
-    &.footer {
-      border-top: 1px solid rgb(0 0 0 / 12.5%);
-    }
-  }
-
   >hr {
     background-color: rgb(0 0 0 / 12.5%);
     border: 0;
@@ -105,8 +51,13 @@
     margin: 0;
     padding: 0;
   }
-}
 
+  .icon {
+    width: 2.6rem;
+    height: 2.6rem;
+    vertical-align: top;
+  }
+}
 
 // ===== Dashboard of cards =====
 
@@ -274,6 +225,12 @@ input.switch[type='range'] {
   >.wide {
     grid-column: 1/-1;
   }
+
+  .icon {
+    width: 1.2em;
+    height: 1.2em;
+    margin: 0.2em;
+  }
 }
 
 .form-inline {
@@ -407,7 +364,7 @@ input.switch[type='range'] {
   border: base.$u-border;
 }
 
-/* === Display Element === */
+// ===== Display Element =====
 
 .display {
   position: relative;
@@ -472,7 +429,7 @@ input.switch[type='range'] {
   }
 }
 
-/* === Light input sliders === */
+// ===== Light input sliders =====
 
 input.band {
   width: 100%;
diff --git a/css/page.scss b/css/page.scss
new file mode 100644
index 0000000..a406836
--- /dev/null
+++ b/css/page.scss
@@ -0,0 +1,178 @@
+// page level layout using areas header, navbar, main, aside*, footer
+// nav and aside is optional
+
+@use 'base';
+
+:root {
+  --sidebar-width: 200px;
+  --content-width: 1168px;
+
+  --layout-gap: 16px;
+
+  --content-back: #f8f8f8;
+
+  --navbar-back: #{base.$u-primary};
+  --navbar-color: white;
+  --navbar-spacing: 0.5em;
+}
+
+body.sitelayout {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-areas: "header" "navbar" "main" "sidebar" "footer";
+  gap: var(--layout-gap);
+  max-width: calc(var(--content-width) + var(--sidebar-width) + 2 * var(--layout-gap));
+  margin: 0 auto;
+
+  &:has(aside) {
+    grid-template-columns: auto var(--sidebar-width);
+    grid-template-areas: "header header" "navbar navbar" "main sidebar" "footer footer";
+
+    @media (width <=1000px) {
+      grid-template-areas: "header" "navbar" "main" "sidebar" "footer";
+    }
+  }
+
+  header {
+    grid-area: header;
+
+    /* background-color: #f0f0f0; */
+    display: flex;
+
+    @media print {
+      display: none !important;
+    }
+
+    >.icon {
+      width: 2.6rem;
+      height: 2.6rem;
+    }
+
+    >h1 {
+      margin: 0;
+    }
+
+    >* {
+      align-self: flex-end;
+      display: inline-block;
+    }
+
+    >*:not(:first-child) {
+      margin-left: var(--layout-gap);
+    }
+
+    >.logo {
+      font-size: 160%;
+      font-weight: bold;
+    }
+
+    a {
+      text-decoration: none;
+      width: 12ch;
+      text-align: center;
+      padding: 0.2ch 1ch;
+      transition: box-shadow 0.3s ease-in-out;
+
+      &:hover {
+        box-shadow: 0 5px 12px rgb(0 0 0 / 30%);
+      }
+    }
+  }
+
+  // div.navbar is a horizontal always visible menu just below the header.
+  div.navbar {
+    grid-area: navbar;
+    display: flex;
+    flex-flow: row nowrap;
+    margin-bottom: var(--navbar-spacing);
+    padding: var(--navbar-spacing);
+    background-color: var(--navbar-back);
+    color: var(--navbar-color);
+
+    >.gap {
+      flex-grow: 2;
+    }
+
+    >a {
+      text-decoration: none;
+      font-size: 1.25em;
+      min-width: 2em;
+      padding: 0 calc(var(--navbar-spacing) / 2);
+
+      &:hover {
+        border-color: var(--focus);
+        background-color: var(--focus);
+      }
+    }
+
+    >img,
+    >svg {
+      padding: 0;
+      min-width: 1.4em !important;
+      width: 1.4em !important;
+      height: 1.4em !important;
+    }
+
+    >*:not(:first-child) {
+      margin-left: var(--navbar-spacing);
+    }
+
+    @media print {
+      display: none;
+    }
+
+  }
+
+  aside {
+    grid-area: sidebar;
+    background-color: lime;
+    padding: var(--layout-gap);
+
+    @media print {
+      display: none !important;
+    }
+  }
+
+  main {
+    grid-area: main;
+    container-name: main;
+    container-type: inline-size;
+    background-color: var(--content-back);
+    padding: var(--layout-gap);
+  }
+
+  footer {
+    grid-area: footer;
+    background-color: lightblue;
+    padding: var(--layout-gap);
+  }
+
+  // ===== Page Layout =====
+
+  nav {
+    position: absolute;
+    min-height: 100%;
+    width: 24ch;
+    z-index: 1;
+    top: 80px;
+    left: -24ch;
+    transition: all 0.2s;
+    padding: 1rem 0.2rem 0.2rem;
+    background-color: yellowgreen;
+
+    &.open {
+      left: 0;
+    }
+
+    a,
+    a:hover {
+      text-decoration: none;
+    }
+
+    @media print {
+      display: none;
+    }
+  }
+
+
+}
\ No newline at end of file
diff --git a/docstyle.css b/docstyle.css
index 537b841..46b7c35 100644
--- a/docstyle.css
+++ b/docstyle.css
@@ -1,16 +1,8 @@
 :root {
   --color: #111111;
-  --back: #c2c3c5;
-  --card-back: white;
-  --card-head: hsl(220, 20%, 85%);
-  --card-head-active: hsl(220, 80%, 70%);
+  --back: #d4d6da;
   --focus: hsl(220, 50%, 50%);
   --code: rgb(255 255 185);
-  --sidebar-width: 200px;
-  --content-width: 1168px;
-  --layout-gap: 16px;
-  --doc-body-width: calc(var(--content-width) + var(--sidebar-width) + 2 * var(--layout-gap));
-  --content-back: #f8f8f8;
   --text-spacing: 0.5rem;
   color-scheme: dark light;
 }
@@ -18,9 +10,6 @@
   :root {
     --color: #eeeeee;
     --back: #111111;
-    --card-back: rgb(55.25, 55.25, 55.25);
-    --card-head: hsl(220, 20%, 30%);
-    --card-head-active: hsl(220, 80%, 30%);
   }
 }
 
@@ -40,7 +29,6 @@ body {
     padding: 8px;
   }
 }
-/* apply a natural box layout model to all elements, but allowing components to change */
 *,
 *::before,
 *::after {
@@ -180,7 +168,7 @@ p > code {
 
 pre > code {
   display: block;
-  border-radius: 8px;
+  border-radius: 1em;
   padding: 4px;
 }
 
@@ -282,151 +270,209 @@ dialog::before {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M0 0h48v48h-16v-32h-32z' fill='red' /></svg>");
 }
 
-nav {
-  position: fixed;
-  min-height: 100%;
-  width: 24ch;
-  z-index: 1;
-  left: -24ch;
-  transition: all 0.2s;
-  padding: 1rem 0.2rem 0.2rem;
-  background-color: var(--card-back);
-}
-nav.inpage {
-  position: absolute;
-}
-nav.open {
-  left: 0;
-}
-nav.inpage.open + main {
-  margin-left: 24ch;
-}
-@media print {
-  nav.inpage.open + main {
-    margin-left: 0;
-  }
+.error,
+.warning,
+.invalid {
+  border: 2px solid #ff1111 !important;
+  background-color: #ffcccc !important;
+  color: #111111;
 }
-nav a,
-nav a:hover {
-  text-decoration: none;
+
+.valid {
+  border: 2px solid #00cc00 !important;
+  background-color: #ccffcc !important;
+  color: #111111;
 }
+
 @media print {
-  nav {
-    display: none;
+  .noprint {
+    display: none !important;
   }
 }
 
-main {
-  transition: margin-left 0.2s;
+:root {
+  --sidebar-width: 200px;
+  --content-width: 1168px;
+  --layout-gap: 16px;
+  --content-back: #f8f8f8;
+  --navbar-back: hsl(220, 80%, 30%);
+  --navbar-color: white;
+  --navbar-spacing: 0.5em;
 }
 
-.u-header {
+body.sitelayout {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-areas: "header" "navbar" "main" "sidebar" "footer";
+  gap: var(--layout-gap);
+  max-width: calc(var(--content-width) + var(--sidebar-width) + 2 * var(--layout-gap));
+  margin: 0 auto;
+}
+body.sitelayout:has(aside) {
+  grid-template-columns: auto var(--sidebar-width);
+  grid-template-areas: "header header" "navbar navbar" "main sidebar" "footer footer";
+}
+@media (width <= 1000px) {
+  body.sitelayout:has(aside) {
+    grid-template-areas: "header" "navbar" "main" "sidebar" "footer";
+  }
+}
+body.sitelayout header {
+  grid-area: header;
+  /* background-color: #f0f0f0; */
   display: flex;
-  flex-flow: row nowrap;
-  margin-bottom: 0.5rem;
 }
-.u-header .icon {
-  margin-right: 0.5rem;
+@media print {
+  body.sitelayout header {
+    display: none !important;
+  }
+}
+body.sitelayout header > .icon {
   width: 2.6rem;
   height: 2.6rem;
-  vertical-align: top;
 }
-.u-header h1 {
+body.sitelayout header > h1 {
   margin: 0;
-  font-size: 2.4rem;
-  font-family: arial, ui-sans-serif, sans-serif;
+}
+body.sitelayout header > * {
+  align-self: flex-end;
+  display: inline-block;
+}
+body.sitelayout header > *:not(:first-child) {
+  margin-left: var(--layout-gap);
+}
+body.sitelayout header > .logo {
+  font-size: 160%;
   font-weight: bold;
 }
-
-.u-navbar {
+body.sitelayout header a {
+  text-decoration: none;
+  width: 12ch;
+  text-align: center;
+  padding: 0.2ch 1ch;
+  transition: box-shadow 0.3s ease-in-out;
+}
+body.sitelayout header a:hover {
+  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
+}
+body.sitelayout div.navbar {
+  grid-area: navbar;
   display: flex;
   flex-flow: row nowrap;
-  margin-bottom: 0.5rem;
-  padding: 8px 16px;
-  background-color: hsl(220, 80%, 30%);
-  color: white;
+  margin-bottom: var(--navbar-spacing);
+  padding: var(--navbar-spacing);
+  background-color: var(--navbar-back);
+  color: var(--navbar-color);
 }
-.u-navbar > .gap {
+body.sitelayout div.navbar > .gap {
   flex-grow: 2;
 }
-.u-navbar > a {
+body.sitelayout div.navbar > a {
   text-decoration: none;
   font-size: 1.25em;
   min-width: 2em;
-  padding: 0 0.25rem;
+  padding: 0 calc(var(--navbar-spacing) / 2);
 }
-.u-navbar > a:hover {
+body.sitelayout div.navbar > a:hover {
   border-color: var(--focus);
   background-color: var(--focus);
 }
-.u-navbar > img,
-.u-navbar > svg {
+body.sitelayout div.navbar > img,
+body.sitelayout div.navbar > svg {
   padding: 0;
   min-width: 1.4em !important;
   width: 1.4em !important;
   height: 1.4em !important;
 }
-.u-navbar > *:not(:first-child) {
-  margin-left: 0.25rem;
+body.sitelayout div.navbar > *:not(:first-child) {
+  margin-left: var(--navbar-spacing);
 }
 @media print {
-  .u-navbar {
+  body.sitelayout div.navbar {
     display: none;
   }
 }
-
-.error,
-.warning,
-.invalid {
-  border: 2px solid #ff1111 !important;
-  background-color: #ffcccc !important;
-  color: #111111;
-}
-
-.valid {
-  border: 2px solid #00cc00 !important;
-  background-color: #ccffcc !important;
-  color: #111111;
+body.sitelayout aside {
+  grid-area: sidebar;
+  background-color: lime;
+  padding: var(--layout-gap);
 }
-
 @media print {
-  .noprint {
+  body.sitelayout aside {
     display: none !important;
   }
 }
+body.sitelayout main {
+  grid-area: main;
+  container-name: main;
+  container-type: inline-size;
+  background-color: var(--content-back);
+  padding: var(--layout-gap);
+}
+body.sitelayout footer {
+  grid-area: footer;
+  background-color: lightblue;
+  padding: var(--layout-gap);
+}
+body.sitelayout nav {
+  position: absolute;
+  min-height: 100%;
+  width: 24ch;
+  z-index: 1;
+  top: 80px;
+  left: -24ch;
+  transition: all 0.2s;
+  padding: 1rem 0.2rem 0.2rem;
+  background-color: yellowgreen;
+}
+body.sitelayout nav.open {
+  left: 0;
+}
+body.sitelayout nav a,
+body.sitelayout nav a:hover {
+  text-decoration: none;
+}
+@media print {
+  body.sitelayout nav {
+    display: none;
+  }
+}
 
 :root {
   /* pixel units are preferred to create exact card sizes. */
   --card-width: 280px;
   --card-gap: 16px;
-  /* cards can have fixed or variable height specified by the --card-height variable. */
   --card-height: 320px;
   /* horizontal cards have fixed height and are stretched to the total width of the card-container. See below */
   /* Design of cards, colors borders, paddings,  */
-  --card-head: hsl(220deg 20% 85%);
-  --card-head-active: hsl(220deg 80% 70%);
-  --card-back: #f2f2f2;
+  --card-back: #fcfcfc;
+  --card-head: hsl(220deg 20% 80%);
+  --card-head-active: hsl(220, 80%, 70%);
+  --card-border: $u-card-border;
   --card-padding: 0.5em;
   --card-image-size: 120px;
-  --card-radius: 0;
+  --card-radius: $u-card-radius;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --card-back: rgb(55 55 55);
+    --card-head: hsl(220deg 20% 30%);
+    --card-head-active: hsl(220, 80%, 30%);
+  }
 }
 
 .card-container {
-  container-name: card;
-  container-type: inline-size;
   display: flex;
   flex-wrap: wrap;
   width: 100%;
-  gap: 16px;
-  /* container marked with class='horizontal' for horizontal oriented cards
-      stretching on the whole with with image on the left */
-  /* https://getbootstrap.com/docs/4.3/components/card/#horizontal */
-  /* https://codingyaar.com/bootstrap-4-card-image-left-responsive/ */
-  /* One column only. */
+  gap: var(--card-gap);
+  margin: 0 auto;
 }
-.card-container.horizontal > .card {
+.card-container.horizontal {
   --card-width: 100%;
   --card-height: 7.2rem;
+}
+.card-container.horizontal > .card {
   flex-direction: row;
   align-items: stretch;
 }
@@ -440,7 +486,6 @@ main {
   object-fit: cover;
 }
 .card-container.col280 {
-  margin: 0 auto;
   width: 1168px;
 }
 @container main (width < 1168px) {
@@ -458,6 +503,26 @@ main {
     width: 280px;
   }
 }
+.card-container.col365 {
+  --card-width: 365px;
+  --card-gap: 10px;
+  width: 1490px;
+}
+@container main (width <= 1490px) {
+  .card-container.col365 {
+    width: 1115px;
+  }
+}
+@container main (width < 1115px) {
+  .card-container.col365 {
+    width: 740px;
+  }
+}
+@container main (width < 730px) {
+  .card-container.col365 {
+    width: 365px;
+  }
+}
 .card-container.col1 {
   width: 100%;
 }
@@ -465,18 +530,25 @@ main {
 /* The cards are sized according to the given variables from :root or from the card-container)  */
 .card {
   position: relative;
-  display: inline-block;
+  display: flex;
+  flex-direction: column;
   width: var(--card-width);
   height: var(--card-height);
   margin: 0;
   padding: 0;
-  border-radius: var(--card-radius);
   page-break-inside: avoid;
   overflow: hidden;
   background-color: var(--card-back);
+  border: var(--card-border);
+  border-radius: var(--card-radius);
   /* cards can be marked with class='wide' covering 2 columns  */
   /* cards can be marked with class='wide' covering 2 columns  */
 }
+@media print {
+  .card {
+    border: 1px solid #111111;
+  }
+}
 .card.wide {
   width: calc(var(--card-width) * 2 + var(--card-gap));
 }
@@ -484,24 +556,49 @@ main {
   width: calc((var(--card-width) - var(--card-gap)) / 2);
   height: calc((var(--card-height) - var(--card-gap)) / 2);
 }
+.card > svg:first-of-type,
 .card > img:first-of-type {
   display: block;
   width: 100%;
   height: var(--card-image-size);
   object-fit: cover;
 }
+.card > svg:first-of-type.icon,
+.card > img:first-of-type.icon {
+  width: 2.75rem;
+  height: 2.75rem;
+}
+.card .header {
+  background-color: var(--card-head);
+  padding: var(--card-padding);
+  min-height: 2.75em;
+  max-height: 4rem;
+}
+.card .header h3,
+.card .header h4 {
+  margin: 0;
+}
+.card .header > svg:first-of-type,
+.card .header > img:first-of-type {
+  display: block;
+  float: left;
+  height: 2.75rem;
+  aspect-ratio: 1/1;
+  margin-right: var(--card-padding);
+}
+.card .main,
 .card .body {
+  flex: 1;
   /* background-color: lime; */
   padding: var(--card-padding);
 }
+.card .footer,
 .card .actions {
-  position: absolute;
-  bottom: 0;
-  left: 0;
+  align-self: flex-end;
   height: auto;
   width: 100%;
   padding: var(--card-padding);
-  border-top: 1px solid black;
+  border-top: 1px solid rgba(0, 0, 0, 0.125);
   background-color: inherit;
 }
 .card.autolink a:first-of-type::before {
@@ -559,77 +656,6 @@ main {
   max-height: 7.2rem;
 }
 
-body.sitelayout {
-  display: grid;
-  grid-template-columns: auto;
-  grid-template-areas: "header" "main" "sidebar" "footer";
-  gap: var(--layout-gap);
-  max-width: var(--doc-body-width);
-  margin: 0 auto;
-}
-body.sitelayout:has(aside) {
-  grid-template-columns: auto var(--sidebar-width);
-  grid-template-areas: "header header" "main sidebar" "footer footer";
-}
-@media (width <= 1000px) {
-  body.sitelayout:has(aside) {
-    grid-template-areas: "header" "main" "sidebar" "footer";
-  }
-}
-body.sitelayout header {
-  grid-area: header;
-  /* background-color: #f0f0f0; */
-  display: flex;
-}
-@media print {
-  body.sitelayout header {
-    display: none !important;
-  }
-}
-body.sitelayout header > * {
-  align-self: flex-end;
-  display: inline-block;
-}
-body.sitelayout header > *:not(:first-child) {
-  margin-left: var(--layout-gap);
-}
-body.sitelayout header > .logo {
-  font-size: 160%;
-  font-weight: bold;
-}
-body.sitelayout header a {
-  text-decoration: none;
-  width: 12ch;
-  text-align: center;
-  padding: 0.2ch 1ch;
-  transition: box-shadow 0.3s ease-in-out;
-}
-body.sitelayout header a:hover {
-  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
-}
-body.sitelayout aside {
-  grid-area: sidebar;
-  background-color: lime;
-  padding: var(--layout-gap);
-}
-@media print {
-  body.sitelayout aside {
-    display: none !important;
-  }
-}
-body.sitelayout main {
-  grid-area: main;
-  container-name: main;
-  container-type: inline-size;
-  background-color: var(--content-back);
-  padding: var(--layout-gap);
-}
-body.sitelayout footer {
-  grid-area: footer;
-  background-color: lightblue;
-  padding: var(--layout-gap);
-}
-
 h2 {
   clear: both;
 }
diff --git a/docstyle.css.map b/docstyle.css.map
index 918f461..bb334ff 100644
--- a/docstyle.css.map
+++ b/docstyle.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["css/base.scss","css/card.scss","css/doc.scss"],"names":[],"mappings":"AAmEA;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EAEA;;AAEA;EApBF;IAqBI;IACA;IACA;IACA;IACA;;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA,aAtCkB;EAuClB;EACA;EACA;;;AAKF;EACE;IACE;;;AAIJ;AACA;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AAKF;EACE;;AAEA;EACE;EACA;;AAEA;EACE,MA1HM;EA2HN;;AAGF;EACE,MAvHM;EAwHN;;AAIJ;EACE;;;AAMJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;;AAIJ;AAAA;AAAA;EAGE;EACA;EACA;;;AAIF;AAAA;AAAA;EAGE;EACA,aAlIkB;EAmIlB;;;AAIF;EACE;EACA;;;AAIF;EACE;EACA;;;AAIF;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA,OAhNO;EAiNP;EACA;;AAEA;EATF;AAAA;AAAA;AAAA;IAUI;;;;AAIJ;EACE;EACA,eAzMe;;;AA4MjB;EACE;EACA,eA7MgB;EA8MhB,SA/Me;;;AAoNjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;EACA;EACA;EACA,QAzNc;EA0Nd;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;AAAA;EAGE;EACA;EACA;;;AAIJ;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA;;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EAHF;IAII;;;AAIJ;AAAA;EAEE;;AAGF;EA/BF;IAgCI;;;;AAIJ;EACE;;;AAKF;EACE;EACA;EACA,eA5VS;;AA8VT;EACE,cA/VO;EAgWP;EACA;EACA;;AAGF;EACE;EACA;EACA,aAtVgB;EAuVhB;;;AAMJ;EACE;EACA;EACA,eAlXS;EAmXT;EACA,kBAlZU;EAmZV,OA3Xc;;AA6Xd;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;;AAGF;EACE,aA/YQ;;AAkZV;EApCF;IAqCI;;;;AAIJ;AAAA;AAAA;EAGE;EACA;EACA,OA9bO;;;AAicT;EACE;EACA;EACA,OApcO;;;AAwcP;EADF;IAEI;;;;ACjcJ;AAKE;EACA;EACA;AAEA;EACA;AAEA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQF;EACE;EACA;EACA;EACA;EAGA;EACA,KA/CW;AAiDX;AAAA;AAGA;AAEA;AAmDA;;AAlDA;EACE;EACA;EAEA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAWJ;EAKE;EAGA;;AAGA;EAXF;IAYI;;;AAGF;EAfF;IAgBI;;;AAGF;EAnBF;IAoBI,OArGS;;;AA2Gb;EACE;;;AAKJ;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;AAKA;;AAJA;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;AACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAMJ;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;;;AAKJ;EACE,SDvJU;ECwJV;;;AAIF;EACE;EACA;;AAEA;EACE;EACA,KDnKO;ECoKP,MDpKO;ECqKP;EACA;;;AAKJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AC3NJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EAJF;IAKI;;;AAIJ;EACE;AAEA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;;AAKJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;AAAA;IAEE;IACA;;EAGF;IACE","file":"docstyle.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["css/base.scss","css/page.scss","css/card.scss","css/doc.scss"],"names":[],"mappings":"AA0DA;EACE;EACA;EAEA;EACA;EAEA;EAEA;;AAEA;EAXF;IAYI;IACA;;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA,aA1BkB;EA2BlB;EACA;EACA;;;AAKF;EACE;IACE;;;AAKJ;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AAKF;EACE;;AAEA;EACE;EACA;;AAEA;EACE,MApGM;EAqGN;;AAGF;EACE,MAjGM;EAkGN;;AAIJ;EACE;;;AAMJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;;AAIJ;AAAA;AAAA;EAGE;EACA;EACA;;;AAIF;AAAA;AAAA;EAGE;EACA,aAtHkB;EAuHlB;;;AAIF;EACE;EACA;;;AAIF;EACE;EACA;;;AAIF;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA,OA1LO;EA2LP;EACA;;AAEA;EATF;AAAA;AAAA;AAAA;IAUI;;;;AAIJ;EACE;EACA,eArLe;;;AAwLjB;EACE;EACA;EACA,SA3Le;;;AAgMjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;EACA;EACA;EACA,QArMc;EAsMd;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;AAAA;EAGE;EACA;EACA;;;AAIJ;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA;;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;AAAA;EAGE;EACA;EACA,OA7TO;;;AAgUT;EACE;EACA;EACA,OAnUO;;;AAuUP;EADF;IAEI;;;;AChVJ;EACE;EACA;EAEA;EAEA;EAEA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EAJF;IAKI;;;AAIJ;EACE;AAEA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EArCF;IAsCI;;;AAKJ;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;EAEE;;AAGF;EApBF;IAqBI;;;;ACpJN;AACE;EACA;EACA;EAGA;AAEA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAnBF;IAoBI;IACA;IACA;;;;AASJ;EACE;EACA;EAGA;EACA;EAGA;;AAIA;EACE;EACA;;AAEA;EAGE;EACA;;AAEA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAYN;EAKE;;AAGA;EARF;IASI;;;AAGF;EAZF;IAaI;;;AAGF;EAhBF;IAiBI,OApGS;;;AAyGb;EAIE;EACA;EAGA;;AAGA;EAXF;IAYI;;;AAGF;EAfF;IAgBI;;;AAGF;EAnBF;IAoBI;;;AAMJ;EACE;;;AAKJ;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;AAKA;;AATA;EAdF;IAeI;;;AAIF;EACE;;AAIF;EACE;EACA;;AAIF;AAAA;EAEE;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;AAAA;EAEE;;AAIF;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAKJ;AAAA;EAEE;AAEA;EACA;;AAGF;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAMJ;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;;;AAKJ;EACE,SF/NU;EEgOV;;;AAIF;EACE;EACA;;AAEA;EACE;EACA,KF3OO;EE4OP,MF5OO;EE6OP;EACA;;;AAKJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AC/RJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;;AAKJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;AAAA;IAEE;IACA;;EAGF;IACE","file":"docstyle.css"}
\ No newline at end of file
diff --git a/iotstyle.css b/iotstyle.css
index 672e23d..8138e12 100644
--- a/iotstyle.css
+++ b/iotstyle.css
@@ -1,16 +1,8 @@
 :root {
   --color: #111111;
-  --back: #c2c3c5;
-  --card-back: white;
-  --card-head: hsl(220, 20%, 85%);
-  --card-head-active: hsl(220, 80%, 70%);
+  --back: #d4d6da;
   --focus: hsl(220, 50%, 50%);
   --code: rgb(255 255 185);
-  --sidebar-width: 200px;
-  --content-width: 1168px;
-  --layout-gap: 16px;
-  --doc-body-width: calc(var(--content-width) + var(--sidebar-width) + 2 * var(--layout-gap));
-  --content-back: #f8f8f8;
   --text-spacing: 0.5rem;
   color-scheme: dark light;
 }
@@ -18,9 +10,6 @@
   :root {
     --color: #eeeeee;
     --back: #111111;
-    --card-back: rgb(55.25, 55.25, 55.25);
-    --card-head: hsl(220, 20%, 30%);
-    --card-head-active: hsl(220, 80%, 30%);
   }
 }
 
@@ -40,7 +29,6 @@ body {
     padding: 8px;
   }
 }
-/* apply a natural box layout model to all elements, but allowing components to change */
 *,
 *::before,
 *::after {
@@ -180,7 +168,7 @@ p > code {
 
 pre > code {
   display: block;
-  border-radius: 8px;
+  border-radius: 1em;
   padding: 4px;
 }
 
@@ -282,186 +270,410 @@ dialog::before {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M0 0h48v48h-16v-32h-32z' fill='red' /></svg>");
 }
 
-nav {
-  position: fixed;
-  min-height: 100%;
-  width: 24ch;
-  z-index: 1;
-  left: -24ch;
-  transition: all 0.2s;
-  padding: 1rem 0.2rem 0.2rem;
-  background-color: var(--card-back);
+.error,
+.warning,
+.invalid {
+  border: 2px solid #ff1111 !important;
+  background-color: #ffcccc !important;
+  color: #111111;
 }
-nav.inpage {
-  position: absolute;
+
+.valid {
+  border: 2px solid #00cc00 !important;
+  background-color: #ccffcc !important;
+  color: #111111;
 }
-nav.open {
-  left: 0;
+
+@media print {
+  .noprint {
+    display: none !important;
+  }
 }
-nav.inpage.open + main {
-  margin-left: 24ch;
+
+:root {
+  /* pixel units are preferred to create exact card sizes. */
+  --card-width: 280px;
+  --card-gap: 16px;
+  --card-height: 320px;
+  /* horizontal cards have fixed height and are stretched to the total width of the card-container. See below */
+  /* Design of cards, colors borders, paddings,  */
+  --card-back: #fcfcfc;
+  --card-head: hsl(220deg 20% 80%);
+  --card-head-active: hsl(220, 80%, 70%);
+  --card-border: $u-card-border;
+  --card-padding: 0.5em;
+  --card-image-size: 120px;
+  --card-radius: $u-card-radius;
 }
-@media print {
-  nav.inpage.open + main {
-    margin-left: 0;
+@media (prefers-color-scheme: dark) {
+  :root {
+    --card-back: rgb(55 55 55);
+    --card-head: hsl(220deg 20% 30%);
+    --card-head-active: hsl(220, 80%, 30%);
   }
 }
-nav a,
-nav a:hover {
-  text-decoration: none;
+
+.card-container {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: var(--card-gap);
+  margin: 0 auto;
+}
+.card-container.horizontal {
+  --card-width: 100%;
+  --card-height: 7.2rem;
+}
+.card-container.horizontal > .card {
+  flex-direction: row;
+  align-items: stretch;
+}
+.card-container.horizontal > .card > svg:first-of-type,
+.card-container.horizontal > .card > img:first-of-type {
+  display: block;
+  float: left;
+  margin-right: var(--card-padding);
+  width: var(--card-image-size);
+  height: 100%;
+  object-fit: cover;
+}
+.card-container.col280 {
+  width: 1168px;
+}
+@container main (width < 1168px) {
+  .card-container.col280 {
+    width: 872px;
+  }
+}
+@container main (width < 872px) {
+  .card-container.col280 {
+    width: 576px;
+  }
+}
+@container main (width < 560px) {
+  .card-container.col280 {
+    width: 280px;
+  }
+}
+.card-container.col365 {
+  --card-width: 365px;
+  --card-gap: 10px;
+  width: 1490px;
+}
+@container main (width <= 1490px) {
+  .card-container.col365 {
+    width: 1115px;
+  }
+}
+@container main (width < 1115px) {
+  .card-container.col365 {
+    width: 740px;
+  }
+}
+@container main (width < 730px) {
+  .card-container.col365 {
+    width: 365px;
+  }
+}
+.card-container.col1 {
+  width: 100%;
+}
+
+/* The cards are sized according to the given variables from :root or from the card-container)  */
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: var(--card-width);
+  height: var(--card-height);
+  margin: 0;
+  padding: 0;
+  page-break-inside: avoid;
+  overflow: hidden;
+  background-color: var(--card-back);
+  border: var(--card-border);
+  border-radius: var(--card-radius);
+  /* cards can be marked with class='wide' covering 2 columns  */
+  /* cards can be marked with class='wide' covering 2 columns  */
 }
 @media print {
-  nav {
-    display: none;
+  .card {
+    border: 1px solid #111111;
   }
 }
+.card.wide {
+  width: calc(var(--card-width) * 2 + var(--card-gap));
+}
+.card.small {
+  width: calc((var(--card-width) - var(--card-gap)) / 2);
+  height: calc((var(--card-height) - var(--card-gap)) / 2);
+}
+.card > svg:first-of-type,
+.card > img:first-of-type {
+  display: block;
+  width: 100%;
+  height: var(--card-image-size);
+  object-fit: cover;
+}
+.card > svg:first-of-type.icon,
+.card > img:first-of-type.icon {
+  width: 2.75rem;
+  height: 2.75rem;
+}
+.card .header {
+  background-color: var(--card-head);
+  padding: var(--card-padding);
+  min-height: 2.75em;
+  max-height: 4rem;
+}
+.card .header h3,
+.card .header h4 {
+  margin: 0;
+}
+.card .header > svg:first-of-type,
+.card .header > img:first-of-type {
+  display: block;
+  float: left;
+  height: 2.75rem;
+  aspect-ratio: 1/1;
+  margin-right: var(--card-padding);
+}
+.card .main,
+.card .body {
+  flex: 1;
+  /* background-color: lime; */
+  padding: var(--card-padding);
+}
+.card .footer,
+.card .actions {
+  align-self: flex-end;
+  height: auto;
+  width: 100%;
+  padding: var(--card-padding);
+  border-top: 1px solid rgba(0, 0, 0, 0.125);
+  background-color: inherit;
+}
+.card.autolink a:first-of-type::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  content: "";
+}
+
+.plaincard,
+.imgcard,
+.iconcard {
+  position: relative;
+  margin: 0.5rem 0.5rem 0.5rem 0;
+  width: 100%;
+  max-width: 100%;
+  background-color: var(--card-back);
+  page-break-inside: avoid;
+}
+.plaincard > h3,
+.imgcard > h3,
+.iconcard > h3 {
+  margin-top: 0;
+}
+
+.plaincard {
+  padding: 0.25rem;
+  min-height: 6rem;
+}
+
+.iconcard {
+  padding: 0.5rem 0.5rem 0.5rem 5rem;
+  min-height: 5.4rem;
+}
+.iconcard svg {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  height: 4rem;
+  width: 4rem;
+}
 
-main {
-  transition: margin-left 0.2s;
+.imgcard {
+  padding: 0.25rem 0.25rem 0 9.85rem;
+  min-height: 7.2rem;
+}
+.imgcard img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: auto;
+  width: 9.6rem;
+  max-height: 7.2rem;
 }
 
-.u-header {
+:root {
+  --sidebar-width: 200px;
+  --content-width: 1168px;
+  --layout-gap: 16px;
+  --content-back: #f8f8f8;
+  --navbar-back: hsl(220, 80%, 30%);
+  --navbar-color: white;
+  --navbar-spacing: 0.5em;
+}
+
+body.sitelayout {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-areas: "header" "navbar" "main" "sidebar" "footer";
+  gap: var(--layout-gap);
+  max-width: calc(var(--content-width) + var(--sidebar-width) + 2 * var(--layout-gap));
+  margin: 0 auto;
+}
+body.sitelayout:has(aside) {
+  grid-template-columns: auto var(--sidebar-width);
+  grid-template-areas: "header header" "navbar navbar" "main sidebar" "footer footer";
+}
+@media (width <= 1000px) {
+  body.sitelayout:has(aside) {
+    grid-template-areas: "header" "navbar" "main" "sidebar" "footer";
+  }
+}
+body.sitelayout header {
+  grid-area: header;
+  /* background-color: #f0f0f0; */
   display: flex;
-  flex-flow: row nowrap;
-  margin-bottom: 0.5rem;
 }
-.u-header .icon {
-  margin-right: 0.5rem;
+@media print {
+  body.sitelayout header {
+    display: none !important;
+  }
+}
+body.sitelayout header > .icon {
   width: 2.6rem;
   height: 2.6rem;
-  vertical-align: top;
 }
-.u-header h1 {
+body.sitelayout header > h1 {
   margin: 0;
-  font-size: 2.4rem;
-  font-family: arial, ui-sans-serif, sans-serif;
+}
+body.sitelayout header > * {
+  align-self: flex-end;
+  display: inline-block;
+}
+body.sitelayout header > *:not(:first-child) {
+  margin-left: var(--layout-gap);
+}
+body.sitelayout header > .logo {
+  font-size: 160%;
   font-weight: bold;
 }
-
-.u-navbar {
+body.sitelayout header a {
+  text-decoration: none;
+  width: 12ch;
+  text-align: center;
+  padding: 0.2ch 1ch;
+  transition: box-shadow 0.3s ease-in-out;
+}
+body.sitelayout header a:hover {
+  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
+}
+body.sitelayout div.navbar {
+  grid-area: navbar;
   display: flex;
   flex-flow: row nowrap;
-  margin-bottom: 0.5rem;
-  padding: 8px 16px;
-  background-color: hsl(220, 80%, 30%);
-  color: white;
+  margin-bottom: var(--navbar-spacing);
+  padding: var(--navbar-spacing);
+  background-color: var(--navbar-back);
+  color: var(--navbar-color);
 }
-.u-navbar > .gap {
+body.sitelayout div.navbar > .gap {
   flex-grow: 2;
 }
-.u-navbar > a {
+body.sitelayout div.navbar > a {
   text-decoration: none;
   font-size: 1.25em;
   min-width: 2em;
-  padding: 0 0.25rem;
+  padding: 0 calc(var(--navbar-spacing) / 2);
 }
-.u-navbar > a:hover {
+body.sitelayout div.navbar > a:hover {
   border-color: var(--focus);
   background-color: var(--focus);
 }
-.u-navbar > img,
-.u-navbar > svg {
+body.sitelayout div.navbar > img,
+body.sitelayout div.navbar > svg {
   padding: 0;
   min-width: 1.4em !important;
   width: 1.4em !important;
   height: 1.4em !important;
 }
-.u-navbar > *:not(:first-child) {
-  margin-left: 0.25rem;
+body.sitelayout div.navbar > *:not(:first-child) {
+  margin-left: var(--navbar-spacing);
 }
 @media print {
-  .u-navbar {
+  body.sitelayout div.navbar {
     display: none;
   }
 }
-
-.error,
-.warning,
-.invalid {
-  border: 2px solid #ff1111 !important;
-  background-color: #ffcccc !important;
-  color: #111111;
-}
-
-.valid {
-  border: 2px solid #00cc00 !important;
-  background-color: #ccffcc !important;
-  color: #111111;
+body.sitelayout aside {
+  grid-area: sidebar;
+  background-color: lime;
+  padding: var(--layout-gap);
 }
-
 @media print {
-  .noprint {
+  body.sitelayout aside {
     display: none !important;
   }
 }
-
-:root {
-  --grid-width: 20ch;
-  --grid-gap: 1ch;
+body.sitelayout main {
+  grid-area: main;
+  container-name: main;
+  container-type: inline-size;
+  background-color: var(--content-back);
+  padding: var(--layout-gap);
 }
-
-.card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--card-back);
-  border: none;
-  border-radius: 8px;
+body.sitelayout footer {
+  grid-area: footer;
+  background-color: lightblue;
+  padding: var(--layout-gap);
 }
-@media print {
-  .card {
-    border: 1px solid #111111;
-  }
+body.sitelayout nav {
+  position: absolute;
+  min-height: 100%;
+  width: 24ch;
+  z-index: 1;
+  top: 80px;
+  left: -24ch;
+  transition: all 0.2s;
+  padding: 1rem 0.2rem 0.2rem;
+  background-color: yellowgreen;
 }
-.card.small {
-  font-size: 0.8rem;
+body.sitelayout nav.open {
+  left: 0;
 }
-.card.small .form-grid {
-  grid-template-columns: auto;
+body.sitelayout nav a,
+body.sitelayout nav a:hover {
+  text-decoration: none;
 }
-.card.small .form-grid > label {
-  text-align: left;
+@media print {
+  body.sitelayout nav {
+    display: none;
+  }
 }
+
+:root {
+  --grid-width: 20ch;
+  --grid-gap: 1ch;
+}
+
 .card.active .border {
   border-color: hsl(220, 100%, 30%);
 }
 .card.active .band::-webkit-slider-thumb {
   border-color: hsl(220, 100%, 30%) transparent;
 }
-.card.active > .block.header {
+.card.active > .header {
   background-color: var(--card-head-active);
 }
-.card .icon {
-  width: 2.75rem;
-  height: 2.75rem;
-  float: left;
-  margin-right: 0.5rem;
-  overflow: hidden;
-}
 .card img.active,
 .card svg.active {
   background-color: limegreen;
 }
-.card > .block {
-  position: relative;
-  flex: 1 1 auto;
-  padding: 8px;
-  min-height: 2rem;
-}
-.card > .block.header {
-  background-color: var(--card-head);
-  border-top-right-radius: 8px;
-  border-top-left-radius: 8px;
-  min-height: 2.75em;
-  max-height: 4rem;
-}
-.card > .block.header h3,
-.card > .block.header h4 {
-  margin: 0;
-}
-.card > .block.footer {
-  border-top: 1px solid rgba(0, 0, 0, 0.125);
-}
 .card > hr {
   background-color: rgba(0, 0, 0, 0.125);
   border: 0;
@@ -469,6 +681,11 @@ main {
   margin: 0;
   padding: 0;
 }
+.card .icon {
+  width: 2.6rem;
+  height: 2.6rem;
+  vertical-align: top;
+}
 
 body {
   container-type: size;
@@ -612,6 +829,11 @@ input.switch[type=range] {
 .form-grid > .wide {
   grid-column: 1/-1;
 }
+.form-grid .icon {
+  width: 1.2em;
+  height: 1.2em;
+  margin: 0.2em;
+}
 
 .form-inline {
   height: 1.6em;
@@ -672,7 +894,7 @@ input.switch[type=range] {
 }
 
 .u-bool[value="1"] {
-  background-image: linear-gradient(145deg, #4dff4d, #00b300);
+  background-image: linear-gradient(145deg, rgb(64.2, 255, 64.2), rgb(0, 166.2, 0));
 }
 
 .u-bool[value="0"] {
@@ -728,7 +950,6 @@ input.switch[type=range] {
   border: 1px solid #555555;
 }
 
-/* === Display Element === */
 .display {
   position: relative;
   box-sizing: content-box;
@@ -783,7 +1004,6 @@ input.switch[type=range] {
   margin: 0;
 }
 
-/* === Light input sliders === */
 input.band {
   width: 100%;
   border-radius: 0;
diff --git a/iotstyle.css.map b/iotstyle.css.map
index f8f6048..4609586 100644
--- a/iotstyle.css.map
+++ b/iotstyle.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["css/base.scss","css/iot.scss"],"names":[],"mappings":"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AAGF;AAAA;EACE;EACA;;;AAMJ;EACE,OD7KW;;;ACkLb;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE,wBDrMW;ECsMX,2BDtMW;;ACyMb;EACE,yBD1MW;EC2MX,4BD3MW;;;AC+Mf;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA,KDnPU;;;ACyPZ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EACA,cDvVU;ECwVV;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE,QDpXS;;;ACuXX;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,ODnaG;;ACsaL;EACE;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OD1bK;EC2bL;;;AAOJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EAGE","file":"iotstyle.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["css/base.scss","css/card.scss","css/page.scss","css/iot.scss"],"names":[],"mappings":"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EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EArCF;IAsCI;;;AAKJ;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;EAEE;;AAGF;EApBF;IAqBI;;;;AC1JN;EACE;EACA;;;AAME;EACE,cHPkB;;AGUpB;EACE;;AAGF;EACE;;AAMF;AAAA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAOJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAXF;IAYI;;;AAGF;EAfF;IAgBI;;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;AAQJ;AAAA;EAEE;EACA;EAGA;EACA,eHlEa;EGmEb,cHnGU;EGoGV,kBHpGU;EGqGV,OHpGe;EGqGf;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;AAAA;EAEE,cHzGS;EG0GT,kBH1GS;;AG6GX;AAAA;EACE;EACA;;AAGF;AAAA;EACE;EACA;;;AAMJ;EACE,OH3HW;;;AGgIb;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE,wBHvJW;EGwJX,2BHxJW;;AG2Jb;EACE,yBH5JW;EG6JX,4BH7JW;;;AGiKf;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA,KH3MU;;;AGiNZ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EACA,cH3SU;EG4SV;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE,QH1US;;;AG+UX;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,OHvXG;;AG0XL;EACE;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OH9YK;EG+YL;;;AAOJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAMJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EAGE","file":"iotstyle.css"}
\ No newline at end of file
diff --git a/publishDoku.bat b/publishDoku.bat
index 4a6bc93..b9dc79c 100644
--- a/publishDoku.bat
+++ b/publishDoku.bat
@@ -2,8 +2,9 @@
 echo.
 echo *** HomeDing Update of API documentation files. ***
 echo *** This utility copies some files to the HomeDing WebFiles to share API data and visualization. ***
-echo.
 
+echo.
+echo *** Copy to homeding-docu...
 set tar=%USERPROFILE%\Projects\homeding-docu
 
 copy elements.json %tar%
@@ -14,6 +15,11 @@ copy microsvg.js %tar%
 copy icons.svg %tar%
 copy css\*.scss %tar%\css
 copy iotstyle.css %tar%
-copy docstyle.css %USERPROFILE%\Projects\blog\src\docstyle.css
+
+
+echo.
+echo *** Copy to blog...
+set tar=%USERPROFILE%\Projects\blog\src
+copy docstyle.css %tar%
 
 :end
\ No newline at end of file
diff --git a/test-iotstyle.htm b/test-iotstyle.htm
index cb8576c..28e6283 100644
--- a/test-iotstyle.htm
+++ b/test-iotstyle.htm
@@ -64,20 +64,20 @@
   </style>
 
   <script>
-    window.loadComponent('u-colorpick', '/sfc');
+    window.loadComponent('u-colorpick', '/sfc/');
   </script>
 
 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/lifespy/css-and-js-hub/css/responsive.css">
</head>
 
-<body>
-  <div class="u-header">
+<body class="sitelayout" style="max-width:100%;--layout-gap: 0;--content-back:none">
+  <header>
     <svg class="icon">
       <use href="./icons.svg#device" />
     </svg>
     <h1>IoT Style Check Page Header</h1>
-  </div>
+  </header>
 
-  <div class="u-navbar">
+  <div class="navbar">
     <svg tabindex=0>
       <use href="./icons.svg#menu" id="menuButton" />
     </svg>
@@ -100,10 +100,10 @@ <h4>Colors:</h4>
     <p style="background-color: var(--code);">
       text: <u-colorpick cssvar="color"></u-colorpick>
       background: <u-colorpick cssvar="back"></u-colorpick>
-      card-back: <u-colorpick cssvar="card-back"></u-colorpick> 
-      card-head: <u-colorpick cssvar="card-head"></u-colorpick> 
-      card-head-active: <u-colorpick cssvar="card-head-active"></u-colorpick> 
-      code: <u-colorpick cssvar="code"></u-colorpick> 
+      card-back: <u-colorpick cssvar="card-back"></u-colorpick>
+      card-head: <u-colorpick cssvar="card-head"></u-colorpick>
+      card-head-active: <u-colorpick cssvar="card-head-active"></u-colorpick>
+      code: <u-colorpick cssvar="code"></u-colorpick>
       focus: <u-colorpick cssvar="focus"></u-colorpick>
     </p>
     <!-- <p>Use <code>class="hidden-xs"</code> and <span class="code">class="hidden-xs"</span> to hide text elements.</p> -->
@@ -118,642 +118,636 @@ <h4>Code blocks:</h4>
 </code></pre>
 
     <h2>Cards:</h2>
-  </main>
 
-  <div class="panel">
-    <div class="card">
-      <div class="block header">
-        <svg class="icon">
-          <use href="./icons.svg#switch" />
-        </svg>
-        <h3>Setup Pages</h3>
-      </div>
-      <div class="block">
-        <p>Links: <a href="$setup.htm">WiFi Setup</a>
-          <a href="$boot.htm">Web Update</a>
-          <a href="$upload.htm">File Upload</a>
-        </p>
-        <p><a href="updateicons.htm">Update FavIcons</a> <a href="/panel.htm">Panel</a></p>
-      </div>
-      <div class="block footer form-actions">
-        <button>action</button><button disabled>disabled</button>
+          <div class="col365 card-container" style="--card-height: auto;">
+      <div class="card">
+        <div class="header">
+          <svg>
+            <use href="./icons.svg#switch" />
+          </svg>
+          <h3>Setup Pages</h3>
+        </div>
+        <div class="main">
+          <p>Links: <a href="$setup.htm">WiFi Setup</a>
+            <a href="$boot.htm">Web Update</a>
+            <a href="$upload.htm">File Upload</a>
+          </p>
+          <p><a href="updateicons.htm">Update FavIcons</a> <a href="/panel.htm">Panel</a></p>
+        </div>
+        <div class="footer form-actions">
+          <button>action</button><button disabled>disabled</button>
+        </div>
       </div>
-    </div>
-
 
-    <div class="card active" u-control="timer" microID="${id}" u-is="timer">
-      <div class="block header">
-        <svg class="icon">
-          <use href="./icons.svg#timer" />
-        </svg>
-        <h3 u-text="title">{h3} Title here.</h3>
-        <h4 u-text="description">{h4} Description</h4>
-        <svg class="setconfig">
-          <use href="./icons.svg#config" />
-        </svg>
-      </div>
-      <div class="block">
-        <span class="u-bool ux-value border" value="1" u-active="value"></span>
-        <span>form-grid:</span>
-        <div class="form-grid">
-          <label>label:</label><span class="form-inline">{span} out-text.</span>
-          <label>label:</label><input placeholder="{input} enter here">
-          <label>label:</label>
-          <select>
-            <option>{select}Please choose...</option>
-            <option>Option Text 1</option>
-            <option>Option Text 2</option>
-          </select>
-          <div class="form-inline">
-            <label><input name="mode" u-value="mode" type="radio" value="off">Off</label>
-            <label><input name="mode" u-value="mode" type="radio" value="on">On</label>
-            <label><input name="mode" u-value="mode" type="radio" value="timer">Timer</label>
-          </div>
-          <label>label:</label>
-          <span><label><input type="checkbox">done.</label></span>
-          <div class="btn-group">
-            <label><input name="mode" u-value="mode" type="radio" value="off">Off</label>
-            <label><input name="mode" u-value="mode" type="radio" value="on">On</label>
-            <label><input name="mode" u-value="mode" type="radio" value="timer">Timer</label>
-          </div>
 
-          <label>volume:</label>
-          <div u-is="input">
-            <span class="down"><svg class="icon">
+      <div class="card active" u-control="timer" microID="${id}" u-is="timer">
+        <div class="header">
+          <svg class="icon">
+            <use href="./icons.svg#timer" />
+          </svg>
+          <h3 u-text="title">{h3} Title here.</h3>
+          <h4 u-text="description">{h4} Description</h4>
+          <svg class="setconfig">
+            <use href="./icons.svg#config" />
+          </svg>
+        </div>
+        <div class="main">
+          <span class="u-bool ux-value border" value="1" u-active="value"></span>
+          <span>form-grid:</span>
+          <div class="form-grid">
+            <label>label:</label><span class="form-inline">{span} out-text.</span>
+            <label>label:</label><input placeholder="{input} enter here">
+            <label>label:</label>
+            <select>
+              <option>{select}Please choose...</option>
+              <option>Option Text 1</option>
+              <option>Option Text 2</option>
+            </select>
+            <div class="form-inline">
+              <label><input name="mode" u-value="mode" type="radio" value="off">Off</label>
+              <label><input name="mode" u-value="mode" type="radio" value="on">On</label>
+              <label><input name="mode" u-value="mode" type="radio" value="timer">Timer</label>
+            </div>
+            <label>label:</label>
+            <span><label><input type="checkbox">done.</label></span>
+            <div class="btn-group">
+              <label><input name="mode" u-value="mode" type="radio" value="off">Off</label>
+              <label><input name="mode" u-value="mode" type="radio" value="on">On</label>
+              <label><input name="mode" u-value="mode" type="radio" value="timer">Timer</label>
+            </div>
+
+            <label>volume:</label>
+            <div u-is="input">
+              <svg class="down icon">
                 <use href="./icons.svg#minus" />
-              </svg></span>
-            <input type="range" min="0" max="8">
-            <span class="up"><svg class="icon">
+              </svg>
+              <input type="range" min="0" max="8">
+              <svg class="up icon">
                 <use href="./icons.svg#plus" />
-              </svg></span>
-          </div>
+              </svg>
+            </div>
 
-          <label>hue:</label>
-          <input type="range" class="band hue" style="width: 100%;">
+            <label>hue:</label>
+            <input type="range" class="band hue" style="width: 100%;">
 
-          <label>mute:</label>
-          <div u-is="input" u-active="value">
-            <span class="down">off</span>
-            <input class="switch" type="range">
-            <span class="up">on</span>
-          </div>
+            <label>mute:</label>
+            <div u-is="input" u-active="value">
+              <span class="down">off</span>
+              <input class="switch" type="range">
+              <span class="up">on</span>
+            </div>
 
+          </div>
+        </div>
+        <div class="footer form-actions">
+          <button u-action="start" value="1">Start</button>
+          <button u-action="next" value="1">Next</button>
+          <button u-action="stop" value="1">Stop</button>
+          <button>...</button>
         </div>
       </div>
-      <div class="block footer form-actions">
-        <button u-action="start" value="1">Start</button>
-        <button u-action="next" value="1">Next</button>
-        <button u-action="stop" value="1">Stop</button>
-        <button>...</button>
-      </div>
-    </div>
 
-    <div class="card">
-      <div class="block header">
-        <svg class="icon">
-          <use href="./icons.svg#timer" />
-        </svg>
-        <h3>.block.header</h3>
-        <!-- <p> 376 px</p> -->
-        <h4>min-height: 3.6rem;</h4>
-      </div>
-      <div class="block">
-        <h3>.card</h3>
-        <p>width: 376 px</p>
-        <p>height:variable</p>
+      <div class="card">
+        <div class="header">
+          <svg class="icon">
+            <use href="./icons.svg#timer" />
+          </svg>
+          <h3>.header</h3>
+          <!-- <p> 376 px</p> -->
+          <h4>min-height: 3.6rem;</h4>
+        </div>
+        <div class="main">
+          <h3>.card</h3>
+          <p>width: 376 px</p>
+          <p>height:variable</p>
+        </div>
       </div>
-    </div>
 
-  </div>
-  <hr />
-
-  <div class="panel">
-    <div class="card small active">
-      <div class="block header">
-        <svg class="icon">
-          <use href="./icons.svg#timer" />
-        </svg>
-        <h3>.block.head</h3>
-        <!-- <p> 376 px</p> -->
-        <h4>h4-text</h4>
-      </div>
-      <div class="block">
-        <h3>.card.small</h3>
-        <p>width: 184 px</p>
-        <p>height:variable</p>
+      <div class="card small active">
+        <div class="header">
+          <svg class="icon">
+            <use href="./icons.svg#timer" />
+          </svg>
+          <h3>h3-text</h3>
+          <h4>h4-text</h4>
+        </div>
+        <div class="main">
+          <h3>.card.small</h3>
+          <p>width: 184 px</p>
+          <p>height:variable</p>
+        </div>
       </div>
-    </div>
 
-    <div class="card small">
-      <div class="block header">
-        <svg class="icon">
-          <use href="./icons.svg#timer" />
-        </svg>
-        <h3>.block.head</h3>
-        <!-- <p> 376 px</p> -->
-        <h4>h4-text</h4>
-      </div>
-      <div class="block">
-        <h3>.card.small</h3>
-        <p>width: 184 px</p>
-        <p>height:variable</p>
+      <div class="card small">
+        <div class="header">
+          <svg class="icon">
+            <use href="./icons.svg#timer" />
+          </svg>
+          <h3>.header</h3>
+          <h4>h4-text</h4>
+        </div>
+        <div class="main">
+          <h3>.card.small</h3>
+          <p>width: 184 px</p>
+          <p>height:variable</p>
+        </div>
       </div>
-    </div>
 
-    <div class="card small">
-      <div class="block">
-        <svg class="icon small">
-          <use href="./icons.svg#timer" />
-        </svg>
-        <h3>.icon.small</h3>
-        <div u-is="input" u-active="value">
-          <span class="down">off</span>
-          <input class="switch" type="range">
-          <span class="up">on</span>
+      <div class="card small">
+        <div class="main">
+          <svg class="icon small">
+            <use href="./icons.svg#timer" />
+          </svg>
+          <h3>.icon.small</h3>
+          <div u-is="input" u-active="value">
+            <span class="down">off</span>
+            <input class="switch" type="range">
+            <span class="up">on</span>
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="card small">
-      <div class="block">
-        <h3>Small</h3>
-        <span class="u-bool ux-value border" value="1" u-active="value"></span>
-        <div class="form-grid">
-          <label>enter:</label><input />
-          <label>result:</label><output>out-text.</output>
+      <div class="card small">
+        <div class="main">
+          <h3>Small</h3>
+          <span class="u-bool ux-value border" value="1" u-active="value"></span>
+          <div class="form-grid">
+            <label>enter:</label><input />
+            <label>result:</label><output>out-text.</output>
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="card small active">
-      <div class="block">
-        <h3>Small</h3>
-        <h4>with active</h4>
-        <span class="u-bool ux-value" value="1"></span>
+      <div class="card small active">
+        <div class="main">
+          <h3>Small</h3>
+          <h4>with active</h4>
+          <span class="u-bool ux-value" value="1"></span>
+        </div>
       </div>
-    </div>
 
-    <div class="card small">
-      <div class="block">
-        <h3>Small</h3>
-        <h4>not active</h4>
-        <span class="u-bool ux-value" value="1"></span>
+      <div class="card small">
+        <div class="main">
+          <h3>Small</h3>
+          <h4>not active</h4>
+          <span class="u-bool ux-value" value="1"></span>
+        </div>
       </div>
     </div>
-  </div>
 
-  <hr />
+    <hr />
 
-  <div>
-    <label>System Color Checks:</label>
-    <span class="probe" style="background-color: Canvas;Color:CanvasText">Canvas</span>
-    <span class="probe" style="background-color: Highlight;Color:HighlightText">Highlight</span>
-  </div>
+    <div>
+      <label>System Color Checks:</label>
+      <span class="probe" style="background-color: Canvas;Color:CanvasText">Canvas</span>
+      <span class="probe" style="background-color: Highlight;Color:HighlightText">Highlight</span>
+    </div>
 
-  <hr />
+    <hr />
 
-  <div>
-    <label>Checks:</label>
-    <span class="tag" id="checkDefault">Default Parameters</span>
-    <span class="tag" id="checkArrow">Arrow functions</span>
-    <span class="tag" id="checkEvery">Every iterator</span>
-  </div>
+    <div>
+      <label>Checks:</label>
+      <span class="tag" id="checkDefault">Default Parameters</span>
+      <span class="tag" id="checkArrow">Arrow functions</span>
+      <span class="tag" id="checkEvery">Every iterator</span>
+    </div>
 
-  <hr />
+    <hr />
 
-  <h2>Icons:</h2>
+    <h2>Icons:</h2>
 
-  <div class="panel">
-    <div class="card small">
-      <div class="block">
-        <h3>add</h3><svg class="icon">
-          <use href="icons.svg#add" />
-        </svg>
+    <div class="card-container col365">
+      <div class="card small">
+        <div class="main">
+          <h3>add</h3><svg class="icon">
+            <use href="icons.svg#add" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>analog</h3><svg class="icon">
-          <use href="icons.svg#analog" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>analog</h3><svg class="icon">
+            <use href="icons.svg#analog" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>and</h3><svg class="icon">
-          <use href="icons.svg#and" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>and</h3><svg class="icon">
+            <use href="icons.svg#and" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>bme680</h3><svg class="icon">
-          <use href="icons.svg#bme680" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>bme680</h3><svg class="icon">
+            <use href="icons.svg#bme680" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>bmp280</h3><svg class="icon">
-          <use href="icons.svg#bmp280" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>bmp280</h3><svg class="icon">
+            <use href="icons.svg#bmp280" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>bulb</h3><svg class="icon">
-          <use href="icons.svg#bulb" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>bulb</h3><svg class="icon">
+            <use href="icons.svg#bulb" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>button</h3><svg class="icon">
-          <use xlink:href="icons.svg#button" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>button</h3><svg class="icon">
+            <use xlink:href="icons.svg#button" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>config</h3><svg class="icon">
-          <use xlink:href="icons.svg#config" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>config</h3><svg class="icon">
+            <use xlink:href="icons.svg#config" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>dcftime</h3><svg class="icon">
-          <use xlink:href="icons.svg#dcftime" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>dcftime</h3><svg class="icon">
+            <use xlink:href="icons.svg#dcftime" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>default</h3><svg class="icon">
-          <use xlink:href="icons.svg#default" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>default</h3><svg class="icon">
+            <use xlink:href="icons.svg#default" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>device</h3><svg class="icon">
-          <use xlink:href="icons.svg#device" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>device</h3><svg class="icon">
+            <use xlink:href="icons.svg#device" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>dht</h3><svg class="icon">
-          <use xlink:href="icons.svg#dht" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>dht</h3><svg class="icon">
+            <use xlink:href="icons.svg#dht" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>digitalin</h3><svg class="icon">
-          <use xlink:href="icons.svg#digitalin" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>digitalin</h3><svg class="icon">
+            <use xlink:href="icons.svg#digitalin" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>digitalout</h3><svg class="icon">
-          <use xlink:href="icons.svg#digitalout" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>digitalout</h3><svg class="icon">
+            <use xlink:href="icons.svg#digitalout" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>displaybar</h3><svg class="icon">
-          <use xlink:href="icons.svg#displaybar" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>displaybar</h3><svg class="icon">
+            <use xlink:href="icons.svg#displaybar" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>displaydot</h3><svg class="icon">
-          <use xlink:href="icons.svg#displaydot" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>displaydot</h3><svg class="icon">
+            <use xlink:href="icons.svg#displaydot" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>displaylcd</h3><svg class="icon">
-          <use xlink:href="icons.svg#displaylcd" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>displaylcd</h3><svg class="icon">
+            <use xlink:href="icons.svg#displaylcd" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>displayline</h3><svg class="icon">
-          <use xlink:href="icons.svg#displayline" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>displayline</h3><svg class="icon">
+            <use xlink:href="icons.svg#displayline" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>displaysh1106</h3><svg class="icon">
-          <use xlink:href="icons.svg#displaysh1106" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>displaysh1106</h3><svg class="icon">
+            <use xlink:href="icons.svg#displaysh1106" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>displayssd1306</h3><svg class="icon">
-          <use xlink:href="icons.svg#displayssd1306" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>displayssd1306</h3><svg class="icon">
+            <use xlink:href="icons.svg#displayssd1306" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>displaytext</h3><svg class="icon">
-          <use xlink:href="icons.svg#displaytext" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>displaytext</h3><svg class="icon">
+            <use xlink:href="icons.svg#displaytext" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>door</h3><svg class="icon">
-          <use xlink:href="icons.svg#door" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>door</h3><svg class="icon">
+            <use xlink:href="icons.svg#door" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>dallas</h3><svg class="icon">
-          <use xlink:href="icons.svg#dallas" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>dallas</h3><svg class="icon">
+            <use xlink:href="icons.svg#dallas" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>dstime</h3><svg class="icon">
-          <use xlink:href="icons.svg#dstime" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>dstime</h3><svg class="icon">
+            <use xlink:href="icons.svg#dstime" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>edit</h3><svg class="icon">
-          <use xlink:href="icons.svg#edit" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>edit</h3><svg class="icon">
+            <use xlink:href="icons.svg#edit" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>element</h3><svg class="icon">
-          <use xlink:href="icons.svg#element" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>element</h3><svg class="icon">
+            <use xlink:href="icons.svg#element" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>ide</h3><svg class="icon">
-          <use xlink:href="icons.svg#ide" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>ide</h3><svg class="icon">
+            <use xlink:href="icons.svg#ide" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>led</h3><svg class="icon">
-          <use xlink:href="icons.svg#led" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>led</h3><svg class="icon">
+            <use xlink:href="icons.svg#led" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>log</h3><svg class="icon">
-          <use xlink:href="icons.svg#log" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>log</h3><svg class="icon">
+            <use xlink:href="icons.svg#log" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>max7219</h3><svg class="icon">
-          <use xlink:href="icons.svg#max7219" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>max7219</h3><svg class="icon">
+            <use xlink:href="icons.svg#max7219" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>menu</h3><svg class="icon">
-          <use xlink:href="icons.svg#menu" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>menu</h3><svg class="icon">
+            <use xlink:href="icons.svg#menu" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>minus</h3><svg class="icon">
-          <use xlink:href="icons.svg#minus" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>minus</h3><svg class="icon">
+            <use xlink:href="icons.svg#minus" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>neo</h3><svg class="icon">
-          <use xlink:href="icons.svg#neo" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>neo</h3><svg class="icon">
+            <use xlink:href="icons.svg#neo" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>no</h3><svg class="icon">
-          <use xlink:href="icons.svg#no" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>no</h3><svg class="icon">
+            <use xlink:href="icons.svg#no" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>ntptime</h3><svg class="icon">
-          <use xlink:href="icons.svg#ntptime" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>ntptime</h3><svg class="icon">
+            <use xlink:href="icons.svg#ntptime" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>ota</h3><svg class="icon">
-          <use xlink:href="icons.svg#ota" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>ota</h3><svg class="icon">
+            <use xlink:href="icons.svg#ota" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>pin</h3><svg class="icon">
-          <use xlink:href="icons.svg#pin" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>pin</h3><svg class="icon">
+            <use xlink:href="icons.svg#pin" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>pined</h3><svg class="icon">
-          <use xlink:href="icons.svg#pined" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>pined</h3><svg class="icon">
+            <use xlink:href="icons.svg#pined" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>plus</h3><svg class="icon">
-          <use xlink:href="icons.svg#plus" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>plus</h3><svg class="icon">
+            <use xlink:href="icons.svg#plus" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>pms</h3><svg class="icon">
-          <use xlink:href="icons.svg#pms" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>pms</h3><svg class="icon">
+            <use xlink:href="icons.svg#pms" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>power</h3><svg class="icon">
-          <use xlink:href="icons.svg#power" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>power</h3><svg class="icon">
+            <use xlink:href="icons.svg#power" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>pwmout</h3><svg class="icon">
-          <use xlink:href="icons.svg#pwmout" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>pwmout</h3><svg class="icon">
+            <use xlink:href="icons.svg#pwmout" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>radio</h3><svg class="icon">
-          <use xlink:href="icons.svg#radio" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>radio</h3><svg class="icon">
+            <use xlink:href="icons.svg#radio" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>reload</h3><svg class="icon">
-          <use xlink:href="icons.svg#reload" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>reload</h3><svg class="icon">
+            <use xlink:href="icons.svg#reload" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>remove</h3><svg class="icon">
-          <use xlink:href="icons.svg#remove" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>remove</h3><svg class="icon">
+            <use xlink:href="icons.svg#remove" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>remote</h3><svg class="icon">
-          <use xlink:href="icons.svg#remote" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>remote</h3><svg class="icon">
+            <use xlink:href="icons.svg#remote" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>rfsend</h3><svg class="icon">
-          <use xlink:href="icons.svg#rfsend" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>rfsend</h3><svg class="icon">
+            <use xlink:href="icons.svg#rfsend" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>rotary</h3><svg class="icon">
-          <use xlink:href="icons.svg#rotary" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>rotary</h3><svg class="icon">
+            <use xlink:href="icons.svg#rotary" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>schedule</h3><svg class="icon">
-          <use xlink:href="icons.svg#schedule" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>schedule</h3><svg class="icon">
+            <use xlink:href="icons.svg#schedule" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>serialcmd</h3><svg class="icon">
-          <use xlink:href="icons.svg#serialcmd" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>serialcmd</h3><svg class="icon">
+            <use xlink:href="icons.svg#serialcmd" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>socket</h3><svg class="icon">
-          <use xlink:href="icons.svg#socket" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>socket</h3><svg class="icon">
+            <use xlink:href="icons.svg#socket" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>ssdp</h3><svg class="icon">
-          <use xlink:href="icons.svg#ssdp" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>ssdp</h3><svg class="icon">
+            <use xlink:href="icons.svg#ssdp" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>start</h3><svg class="icon">
-          <use xlink:href="icons.svg#start" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>start</h3><svg class="icon">
+            <use xlink:href="icons.svg#start" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>stop</h3><svg class="icon">
-          <use xlink:href="icons.svg#stop" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>stop</h3><svg class="icon">
+            <use xlink:href="icons.svg#stop" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>switch</h3><svg class="icon">
-          <use xlink:href="icons.svg#switch" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>switch</h3><svg class="icon">
+            <use xlink:href="icons.svg#switch" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>time</h3><svg class="icon">
-          <use xlink:href="icons.svg#time" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>time</h3><svg class="icon">
+            <use xlink:href="icons.svg#time" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>timer</h3><svg class="icon">
-          <use xlink:href="icons.svg#timer" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>timer</h3><svg class="icon">
+            <use xlink:href="icons.svg#timer" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>value</h3><svg class="icon">
-          <use xlink:href="icons.svg#value" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>value</h3><svg class="icon">
+            <use xlink:href="icons.svg#value" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>washing</h3><svg class="icon">
-          <use xlink:href="icons.svg#washing" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>washing</h3><svg class="icon">
+            <use xlink:href="icons.svg#washing" />
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="card small">
-      <div class="block">
-        <h3>weatherfeed</h3><svg class="icon">
-          <use xlink:href="icons.svg#weatherfeed" />
-        </svg>
+      <div class="card small">
+        <div class="main">
+          <h3>weatherfeed</h3><svg class="icon">
+            <use xlink:href="icons.svg#weatherfeed" />
+          </svg>
+        </div>
       </div>
     </div>
-  </div>
 
-  <hr />
+    <hr />
 
-  <h2>Colors</h2>
+    <h2>Colors</h2>
 
-  <div class="panel">
+    <div class="card-container col365">
 
-    <a href="https://colors.artyclick.com/color-names-dictionary/color-names/mariner-color/">Mariner Color</a>
-  </div>
+      <a href="https://colors.artyclick.com/color-names-dictionary/color-names/mariner-color/">Mariner Color</a>
+    </div>
+  </main>
 
   <script>
 
diff --git a/test/test.time.htm b/test/test.time.htm
new file mode 100644
index 0000000..8b03951
--- /dev/null
+++ b/test/test.time.htm
@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en-US">
+
+<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Date and Time</title>
+
+  <link rel='stylesheet' href='/docstyle.css' media='all' />
+
+  <style>
+    time[is="u-time"] {
+      background-color: lightgoldenrodyellow;
+      padding: 0 0.2em;
+    }
+
+  </style>
+  <script src="/sfc/loader.js"></script>
+</head>
+
+<body>
+
+  <h1>Date and Time</h1>
+
+  <div style="background-color: azure;padding:0.2em">
+    values: <button id="b1">noon</button> <button id="b2">now</button>
+    formatting: <button id="fd">date</button> <button id="ft">time</button> <button id="f1">short</button> <button
+      id="f4">full</button>
+  </div>
+  <hr>
+  <p>The time is: <time id="t1" is="u-time" datetime="2025-01-28 14:02" datestyle="long" timestyle="short"></time> </p>
+  <p>The time is: <time is="u-time" datetime="2025-01-28" datestyle="short" timestyle="none">2025-01-28</time></p>
+  <p>The time is: <time datetime="2025-01-28" datestyle="short" timestyle="none">2025-01-28</time></p>
+
+  <script>
+    const tObj = document.querySelector('#t1');
+
+    window.loadComponent('u-time').then(() => {
+      console.log('Page', 'all components loaded.');
+    });
+
+    document.querySelector('#b1').addEventListener('click', (e) => {
+      tObj.setAttribute('datetime', '2024-12-25 12:00:00');
+    });
+
+    document.querySelector('#b2').addEventListener('click', (e) => {
+      tObj.setAttribute('datetime', Date.now());
+    });
+
+    document.querySelector('#fd').addEventListener('click', (e) => {
+      tObj.setAttribute('datestyle', 'medium');
+      tObj.setAttribute('timestyle', '');
+    });
+
+    document.querySelector('#ft').addEventListener('click', (e) => {
+      tObj.setAttribute('datestyle', '');
+      tObj.setAttribute('timestyle', 'medium');
+    });
+
+    document.querySelector('#f1').addEventListener('click', (e) => {
+      tObj.setAttribute('datestyle', 'short');
+      tObj.setAttribute('timestyle', 'short');
+    });
+
+    document.querySelector('#f4').addEventListener('click', (e) => {
+
+      tObj.setAttribute('datestyle', 'full');
+      tObj.setAttribute('timestyle', 'full');
+    });
+  </script>
+<script src="//cdn.jsdelivr.net/gh/lifespy/css-and-js-hub/js/polish.js" type="text/javascript"></script>
</body>
+
+</html>
\ No newline at end of file