css updates

css/base.scss

@@ -72,6 +72,13 @@ $u-font-sans-serif: arial, ui-sans-serif, sans-serif;
   --focus: #{hsl($u-hue, 50%, 50%)};
   --code: rgb(255 255 185);
 
+  --sidebar-width: 200px;
+  --content-width: 800px;
+  --layout-gap: 0.5em;
+  --doc-body-width: calc(var(--content-width) + var(--sidebar-width) + 2 * var(--layout-gap));
+  --content-back: #f8f8f8;
+
+
   color-scheme: dark light;
 
   @media (prefers-color-scheme: dark) {
@@ -92,6 +99,84 @@ body {
   font-size: 1em;
   color: var(--color);
   background-color: var(--back);
+
+  &.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;
+    background-color: var(--content-back);
+    padding: var(--layout-gap);
+  }
+
+  footer {
+    grid-area: footer;
+    background-color: lightblue;
+    padding: var(--layout-gap);
+  }
+
 }
 
 @media (width > 800px) {
@@ -455,4 +540,10 @@ main {
   border: 2px solid #00cc00 !important;
   background-color: #ccffcc !important;
   color: $u-text;
-}
+}
+
+.noprint {
+  @media print {
+    display: none !important;
+  }
+}