css system updated

Author: mathertel

css/base.scss

@@ -59,10 +59,7 @@ $u-font-sans-serif: arial, ui-sans-serif, sans-serif;
 :root {
   --color: #{$u-text};
   --back: #{$u-background};
-
   --focus: #{hsl($u-hue, 50%, 50%)};
-  --code: rgb(255 255 185);
-
   --text-spacing: #{$u-text-spacing};
 
   color-scheme: dark light;
@@ -133,7 +130,7 @@ svg {
 // ===== Text containers =====
 p,
 pre,
-code,
+h1,
 h2,
 h3,
 h4,
@@ -151,21 +148,29 @@ h4,
       margin-right: 0.2em;
     }
   }
+}
 
-  &:not(:first-child) {
-    margin-top: var(--text-spacing);
-  }
+p:not(:first-child),
+pre:not(:first-child),
+.text:not(:first-child) {
+  margin-top: var(--text-spacing);
+}
+
+h1:not(:first-child),
+h2:not(:first-child),
+h3:not(:first-child),
+h4:not(:first-child) {
+  margin-top: calc(var(--text-spacing) * 3);
 }
 
 a,
-a:visited,
-a:hover {
+a:any-link {
   color: inherit;
   text-decoration: underline;
   cursor: pointer;
 }
 
-// h1 Page title is always inside u-header
+h1,
 h2,
 h3,
 h4 {
@@ -192,30 +197,6 @@ h4 {
   min-height: 1em;
 }
 
-code,
-.code,
-code.hljs,
-pre>code {
-  background-color: var(--code);
-  color: $u-text;
-  font-size: 1rem;
-  font-family: 'Courier New', Courier, monospace;
-
-  @media print {
-    border: 1px solid $u-text;
-  }
-}
-
-p>code {
-  padding-left: 2 * $u-padding-text;
-  padding-right: $u-padding-text;
-}
-
-pre>code {
-  display: block;
-  border-radius: 1em;
-  padding: $u-padding-text;
-}
 
 // form elements
 

css/card.scss

@@ -60,7 +60,6 @@ $u-card-border: none;
   // one column only as default
   width: 100%;
   gap: var(--card-gap); // $u-card-gap;
-
   // center in main container by default
   margin: 0 auto;
 
@@ -71,13 +70,10 @@ $u-card-border: none;
 
     // used a card grid for normal cards (not horizonal)
     display: grid;
-    grid-template-columns: auto;
-    grid-template-areas: "header" "main" "footer";
-    grid-template-rows: auto 1fr auto;
+    grid-template: "header" auto "main" 1fr "footer" auto / auto;
     gap: 0;
     margin: 0;
     padding: 0;
-
     page-break-inside: avoid;
     overflow: hidden;
     background-color: var(--card-back);
@@ -99,6 +95,10 @@ $u-card-border: none;
       height: calc((var(--card-height) - var(--card-gap)) / 2);
     }
 
+    &.shadow {
+      box-shadow: var(--dropshadow);
+    }
+
     // images as first element in card
     >svg:first-child,
     >img:first-child {
@@ -134,7 +134,6 @@ $u-card-border: none;
         aspect-ratio: 1/1;
         margin-right: var(--card-padding);
       }
-
     }
 
     .main,
@@ -156,7 +155,7 @@ $u-card-border: none;
       background-color: inherit;
     }
 
-    &.autolink a:first-of-type::before {
+    &.autolink h3>a::before {
       position: absolute;
       top: 0;
       left: 0;
@@ -166,18 +165,15 @@ $u-card-border: none;
     }
   }
 
-
   // 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;
 
     >.card {
-      grid-template-areas: "header main" "header footer";
-      grid-template-columns: max-content auto;
-      grid-template-rows: 1fr auto;
-  
+      grid-template: "header main" 1fr "header footer" auto / max-content auto;
+
       >svg:first-child,
       >img:first-child {
         width: var(--card-image-size);
@@ -186,7 +182,6 @@ $u-card-border: none;
     }
   }
 
-
   // 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.
@@ -196,7 +191,6 @@ $u-card-border: none;
   &.col280 {
     // N columns of 280px cards with 16px gap
     // 280*N + 16*(N-1)) = 280, 576, 872,  1168, ... in reverse with container queries
-
     // 4 columns maximum
     width: calc($u-card-width * 4 + $u-card-gap * 3);
 
@@ -212,7 +206,6 @@ $u-card-border: none;
     @container main (width < #{$u-card-width * 2}) {
       width: $u-card-width;
     }
-
   }
 
   &.col365 {
@@ -226,7 +219,7 @@ $u-card-border: none;
     width: calc(365px * 4 + 10px * 3);
 
     // @container main (width < #{$u-card-4col}) {
-    @container main (width <=#{365px * 4 + 10px * 3}) {
+    @container main (width <= #{365px * 4 + 10px * 3}) {
       width: calc(365px * 3 + 10px * 2);
     }
 

css/code.scss

@@ -0,0 +1,66 @@
+// file: code.scss
+// styling of regions for code and code-terms
+// This is part of the micro css implementation.
+
+// valid code regions are: <pre><code> (block level) and <p><code> (inline)
+// re-using some variables from base.scss
+
+// * no need for specifying a ont on code tags as it is monospaced by default.
+// * minimal syntax coloring is added
+
+// ===== Colors =====
+
+// ===== main =====
+
+:root {
+  --code-back: rgb(245 245 230);
+  --code-text: black;
+  --code-border: 1px solid var(--code-text);
+  --code-radius: var(--text-spacing);
+}
+
+// ===== Text containers =====
+pre:has(>code) {
+  display: block;
+  padding: 0; // var(--text-spacing);
+  font-size: 1rem;
+  border: var(--code-border);
+  border-left: var(--code-radius) solid #4060A0;
+  border-radius: var(--code-radius);
+  background-color: var(--code-back);
+  background-image: linear-gradient(transparent 50%, rgb(0 0 0 / 6%) 50%);
+  background-size: auto 2.4em ;
+  background-origin: content-box;
+  background-attachment: local;
+
+  &:not(:first-child) {
+    margin-top: calc(var(--text-spacing) * 3);
+  }
+
+  code {
+    display: block;
+    color: var(--code-text);
+
+    // font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;
+    font-size: 1rem;
+    line-height: 1.2;
+    padding-left:0.2em;
+
+    .comment,.block-comment { color: #7d8b99 }
+    .property,.tag,.boolean,.number,.function-name,.constant,.symbol { color: #c92c2c }
+    .selector,.attr-name,.string,.char,.function,.builtin { color: #2f9c0a }
+    .attr-value, .keyword, .class-name { color: #1990b8; }
+
+    @media print {
+      border: 1px solid var(--code-text);
+    }
+  }
+}
+
+
+p > code {
+  // font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;
+  font-size: 1rem;
+  padding: 0 var(--text-spacing);
+  background-color: var(--code-back);
+}

css/doc.scss

@@ -5,6 +5,8 @@
 @use "base";
 @use "page";
 @use "card";
+@use "code";
+@use "iot";
 
 h2 {
   clear: both;

css/page.scss

@@ -14,6 +14,8 @@
   --navbar-back: #{base.$u-primary};
   --navbar-color: white;
   --navbar-spacing: 0.5em;
+
+  --dropshadow: rgb(0 0 0 / 40%) 4px 4px 12px 0;
 }
 
 body.sitelayout {
@@ -74,7 +76,7 @@ body.sitelayout {
       transition: box-shadow 0.3s ease-in-out;
 
       &:hover {
-        box-shadow: 0 5px 12px rgb(0 0 0 / 30%);
+        box-shadow: var(--dropshadow);
       }
     }
   }
@@ -148,6 +150,7 @@ body.sitelayout {
 
   nav {
     position: absolute;
+    background-color: var(--content-back);
     min-height: 100%;
     width: 24ch;
     z-index: 1;