refactor: update SCSS imports and improve text spacing in styles

css/base.scss

@@ -46,6 +46,9 @@ $u-white-space: 1rem;
 $u-gutter: calc($u-white-space / 2);
 $u-gutter2: calc($u-white-space / 4);
 
+// distance between paragraphs and other textual blocks
+$u-text-spacing: calc($u-white-space / 2);
+
 $u-btn-radius: calc($u-padding-block / 2);
 $u-output-border: $u-border-none;
 
@@ -73,11 +76,12 @@ $u-font-sans-serif: arial, ui-sans-serif, sans-serif;
   --code: rgb(255 255 185);
 
   --sidebar-width: 200px;
-  --content-width: 800px;
-  --layout-gap: 0.5em;
+  --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;
 
@@ -153,7 +157,8 @@ pre,
 code,
 h2,
 h3,
-h4 {
+h4,
+.text {
   margin: 0;
   min-height: 1rem;
 
@@ -168,15 +173,9 @@ h4 {
     }
   }
 
-  +p,
-  +pre,
-  +code,
-  +h2,
-  +h3,
-  +h4 {
-    margin-top: $u-gutter;
+  &:not(:first-child) {
+    margin-top: var(--text-spacing);
   }
-
 }
 
 a,

css/card.scss

@@ -0,0 +1,228 @@
+// @use "sass:color";
+@use "base";
+
+// CSS for HTML cards and card design without any dependencies.
+
+// ===== card Layout settings =====
+// 365 px
+
+$u-card-width: 280px;
+$u-card-gap: 16px;
+$u-card-height: 320px;
+$u-card-padding: 1em;
+$u-card-radius: 1em;
+
+$u-card-border: none;
+
+// ===== card style settings =====
+
+// $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};
+
+  /* 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-padding: 0.5em;
+  --card-image-size: 120px;
+  --card-radius: 0;
+}
+
+// ===== card container =====
+
+// The card-container will contain and position all cards according to the given rules.
+// 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 */
+
+  /* https://getbootstrap.com/docs/4.3/components/card/#horizontal */
+
+  /* https://codingyaar.com/bootstrap-4-card-image-left-responsive/ */
+  &.horizontal>.card {
+    --card-width: 100%;
+    --card-height: 7.2rem;
+
+    flex-direction: row;
+    align-items: stretch;
+
+    >img:first-of-type {
+      display: block;
+      float: left;
+      margin-right: var(--card-padding);
+      width: var(--card-image-size);
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+
+  // Cards with a defined, fixed width can be placed multiple times on one row when the with is giving enough space.
+  // For these cases the card-container implements the layout allowing centering the card collection in the center of the main content.
+  // Marking the card-container with class='col280' to provide multiple columns with width 280px.
+  // As css variables cannot be used in the css selectors they are hard-calculated here (with the help of sass if you like)
+
+
+  &.col280 {
+    // 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);
+
+    // @container main (width < #{$u-card-4col}) {
+    @container main (width < #{$u-card-width * 4 + $u-card-gap * 3}) {
+      width: calc($u-card-width * 3 + $u-card-gap * 2);
+    }
+
+    @container main (width < #{$u-card-width * 3 + $u-card-gap * 2}) {
+      width: calc($u-card-width * 2 + $u-card-gap);
+    }
+
+    @container main (width < #{$u-card-width * 2}) {
+      width: $u-card-width;
+    }
+
+  }
+
+  /* One column only. */
+  &.col1 {
+    width: 100%;
+  }
+
+}
+
+/* The cards are sized according to the given variables from :root or from the card-container)  */
+.card {
+  position: relative;
+  display: inline-block;
+  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);
+
+  /* cards can be marked with class='wide' covering 2 columns  */
+  &.wide {
+    width: calc(var(--card-width) * 2 + var(--card-gap));
+  }
+
+  /* cards can be marked with class='wide' covering 2 columns  */
+  &.small {
+    width: calc((var(--card-width) - var(--card-gap)) / 2);
+    height: calc((var(--card-height) - var(--card-gap)) / 2);
+  }
+
+  >img:first-of-type {
+    display: block;
+    width: 100%;
+    height: var(--card-image-size);
+    object-fit: cover;
+  }
+
+  .body {
+    /* background-color: lime; */
+    padding: var(--card-padding);
+  }
+
+  .actions {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: auto;
+    width: 100%;
+    padding: var(--card-padding);
+    border-top: 1px solid black;
+    background-color: inherit;
+  }
+
+  &.autolink a:first-of-type::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    content: "";
+  }
+}
+
+
+// simple content cards with image + text
+.plaincard,
+.imgcard,
+.iconcard {
+  position: relative;
+  margin: base.$u-gutter base.$u-gutter base.$u-gutter 0;
+  width: 100%;
+  max-width: 100%;
+  background-color: var(--card-back);
+  page-break-inside: avoid;
+
+  >h3 {
+    margin-top: 0;
+  }
+}
+
+// card with text only
+.plaincard {
+  padding: base.$u-gutter2;
+  min-height: 6rem;
+}
+
+// cards with icon
+.iconcard {
+  padding: base.$u-gutter base.$u-gutter base.$u-gutter calc(4rem + 2 * base.$u-gutter);
+  min-height: 5.4rem;
+
+  svg {
+    position: absolute;
+    top: base.$u-gutter;
+    left: base.$u-gutter;
+    height: 4rem;
+    width: 4rem;
+  }
+}
+
+// picture with 4:3 ratio + text
+.imgcard {
+  padding: base.$u-gutter2 base.$u-gutter2 0 calc(9.6rem + base.$u-gutter2);
+  min-height: 7.2rem;
+
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: auto;
+    width: 9.6rem;
+    max-height: 7.2rem;
+  }
+}

css/doc.scss

@@ -3,6 +3,7 @@
 // This is part of the micro css implementation.
 
 @use "base";
+@use "card";
 
 body.sitelayout {
   display: grid;
@@ -70,6 +71,8 @@ body.sitelayout {
 
   main {
     grid-area: main;
+    container-name: main;
+    container-type: inline-size;
     background-color: var(--content-back);
     padding: var(--layout-gap);
   }
@@ -115,56 +118,6 @@ table {
   }
 }
 
-// simple content cards with image + text
-.plaincard,
-.imgcard,
-.iconcard {
-  position: relative;
-  margin: base.$u-gutter base.$u-gutter base.$u-gutter 0;
-  width: 100%;
-  max-width: 100%;
-  background-color: var(--card-back);
-  page-break-inside: avoid;
-
-  >h3 {
-    margin-top: 0;
-  }
-}
-
-// card with text only
-.plaincard {
-  padding: base.$u-gutter2;
-  min-height: 6rem;
-}
-
-// cards with icon
-.iconcard {
-  padding: base.$u-gutter base.$u-gutter base.$u-gutter calc(4rem + 2 * base.$u-gutter);
-  min-height: 5.4rem;
-
-  svg {
-    position: absolute;
-    top: base.$u-gutter;
-    left: base.$u-gutter;
-    height: 4rem;
-    width: 4rem;
-  }
-}
-
-// picture with 4:3 ratio + text
-.imgcard {
-  padding: base.$u-gutter2 base.$u-gutter2 0 calc(9.6rem + base.$u-gutter2);
-  min-height: 7.2rem;
-
-  img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: auto;
-    width: 9.6rem;
-    max-height: 7.2rem;
-  }
-}
 
 img[title='w200'] {
   width: 200px;

css/iot.scss

@@ -1,5 +1,5 @@
-@use "base";
-
+@use "base";
+
 // file: iot.scss
 // Element and card rules for iot dashboards
 // This is part of the micro css implementation.