diff --git a/css/base.scss b/css/base.scss
index 0a9d0f1..22236d1 100644
--- a/css/base.scss
+++ b/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;
-}
\ No newline at end of file
+}
+
+.noprint {
+  @media print {
+    display: none !important;
+  }
+}
diff --git a/docstyle.css b/docstyle.css
index 8ebbf5f..c74a81e 100644
--- a/docstyle.css
+++ b/docstyle.css
@@ -6,6 +6,11 @@
   --card-head-active: hsl(220, 80%, 70%);
   --focus: hsl(220, 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) {
@@ -28,6 +33,88 @@ body {
   color: var(--color);
   background-color: var(--back);
 }
+html.sitelayout,
+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;
+}
+html.sitelayout:has(aside),
+body.sitelayout:has(aside) {
+  grid-template-columns: auto var(--sidebar-width);
+  grid-template-areas: "header header" "main sidebar" "footer footer";
+}
+@media (width <= 1000px) {
+  html.sitelayout:has(aside),
+  body.sitelayout:has(aside) {
+    grid-template-areas: "header" "main" "sidebar" "footer";
+  }
+}
+html header,
+body header {
+  grid-area: header;
+  /* background-color: #f0f0f0; */
+  display: flex;
+}
+@media print {
+  html header,
+  body header {
+    display: none !important;
+  }
+}
+html header > *,
+body header > * {
+  align-self: flex-end;
+  display: inline-block;
+}
+html header > *:not(:first-child),
+body header > *:not(:first-child) {
+  margin-left: var(--layout-gap);
+}
+html header > .logo,
+body header > .logo {
+  font-size: 160%;
+  font-weight: bold;
+}
+html header a,
+body header a {
+  text-decoration: none;
+  width: 12ch;
+  text-align: center;
+  padding: 0.2ch 1ch;
+  transition: box-shadow 0.3s ease-in-out;
+}
+html header a:hover,
+body header a:hover {
+  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
+}
+html aside,
+body aside {
+  grid-area: sidebar;
+  background-color: lime;
+  padding: var(--layout-gap);
+}
+@media print {
+  html aside,
+  body aside {
+    display: none !important;
+  }
+}
+html main,
+body main {
+  grid-area: main;
+  background-color: var(--content-back);
+  padding: var(--layout-gap);
+}
+html footer,
+body footer {
+  grid-area: footer;
+  background-color: lightblue;
+  padding: var(--layout-gap);
+}
 
 @media (width > 800px) {
   body {
@@ -407,6 +494,12 @@ main {
   color: #111111;
 }
 
+@media print {
+  .noprint {
+    display: none !important;
+  }
+}
+
 h2 {
   clear: both;
 }
diff --git a/docstyle.css.map b/docstyle.css.map
index 07d5fe2..b5b2d02 100644
--- a/docstyle.css.map
+++ b/docstyle.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["css/base.scss","css/doc.scss"],"names":[],"mappings":"AAgEA;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EAZF;IAaI;IACA;IACA;IACA;IACA;;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA,aA9BkB;EA+BlB;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;AACA;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AAKF;EACE;;AAEA;EACE;EACA;;AAEA;EACE,MA7GM;EA8GN;;AAGF;EACE,MA1GM;EA2GN;;AAIJ;EACE;;;AAMJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;;AAEA;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;EACE;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,YA1HO;;;AA+HX;AAAA;AAAA;EAGE;EACA;EACA;;;AAIF;AAAA;AAAA;EAGE;EACA,aA7HkB;EA8HlB;;;AAIF;EACE;EACA;;;AAIF;EACE;EACA;;;AAIF;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA,OAxMO;EAyMP;EACA;;AAEA;EATF;AAAA;AAAA;AAAA;IAUI;;;;AAIJ;EACE;EACA,eAjMe;;;AAoMjB;EACE;EACA,eArMgB;EAsMhB,SAvMe;;;AA4MjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;EACA;EACA;EACA,QAjNc;EAkNd;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,eApVS;;AAsVT;EACE,cAvVO;EAwVP;EACA;EACA;;AAGF;EACE;EACA;EACA,aAjVgB;EAkVhB;;;AAMJ;EACE;EACA;EACA,eA1WS;EA2WT;EACA,kBA1YU;EA2YV,OAnXc;;AAqXd;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;;AAGF;EACE,aAvYQ;;AA0YV;EApCF;IAqCI;;;;AAIJ;AAAA;AAAA;EAGE;EACA;EACA,OAtbO;;;AAybT;EACE;EACA;EACA,OA5bO;;;ACNT;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;;AAKJ;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;;;AAKJ;EACE,SDVU;ECWV;;;AAIF;EACE;EACA;;AAEA;EACE;EACA,KDtBO;ECuBP,MDvBO;ECwBP;EACA;;;AAKJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;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/doc.scss"],"names":[],"mappings":"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","file":"docstyle.css"}
\ No newline at end of file
diff --git a/iotstyle.css b/iotstyle.css
index 1243a06..260c205 100644
--- a/iotstyle.css
+++ b/iotstyle.css
@@ -6,6 +6,11 @@
   --card-head-active: hsl(220, 80%, 70%);
   --focus: hsl(220, 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) {
@@ -28,6 +33,88 @@ body {
   color: var(--color);
   background-color: var(--back);
 }
+html.sitelayout,
+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;
+}
+html.sitelayout:has(aside),
+body.sitelayout:has(aside) {
+  grid-template-columns: auto var(--sidebar-width);
+  grid-template-areas: "header header" "main sidebar" "footer footer";
+}
+@media (width <= 1000px) {
+  html.sitelayout:has(aside),
+  body.sitelayout:has(aside) {
+    grid-template-areas: "header" "main" "sidebar" "footer";
+  }
+}
+html header,
+body header {
+  grid-area: header;
+  /* background-color: #f0f0f0; */
+  display: flex;
+}
+@media print {
+  html header,
+  body header {
+    display: none !important;
+  }
+}
+html header > *,
+body header > * {
+  align-self: flex-end;
+  display: inline-block;
+}
+html header > *:not(:first-child),
+body header > *:not(:first-child) {
+  margin-left: var(--layout-gap);
+}
+html header > .logo,
+body header > .logo {
+  font-size: 160%;
+  font-weight: bold;
+}
+html header a,
+body header a {
+  text-decoration: none;
+  width: 12ch;
+  text-align: center;
+  padding: 0.2ch 1ch;
+  transition: box-shadow 0.3s ease-in-out;
+}
+html header a:hover,
+body header a:hover {
+  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
+}
+html aside,
+body aside {
+  grid-area: sidebar;
+  background-color: lime;
+  padding: var(--layout-gap);
+}
+@media print {
+  html aside,
+  body aside {
+    display: none !important;
+  }
+}
+html main,
+body main {
+  grid-area: main;
+  background-color: var(--content-back);
+  padding: var(--layout-gap);
+}
+html footer,
+body footer {
+  grid-area: footer;
+  background-color: lightblue;
+  padding: var(--layout-gap);
+}
 
 @media (width > 800px) {
   body {
@@ -407,6 +494,12 @@ main {
   color: #111111;
 }
 
+@media print {
+  .noprint {
+    display: none !important;
+  }
+}
+
 :root {
   --grid-width: 20ch;
   --grid-gap: 1ch;
diff --git a/iotstyle.css.map b/iotstyle.css.map
index bbb7559..80b7dc9 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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A;AAAA;EACE;;AAGF;AAAA;AAAA;EAEE,cD3JS;EC4JT,kBD5JS;;AC+JX;AAAA;EACE;EACA;;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,wBDxMW;ECyMX,2BDzMW;;AC4Mb;EACE,yBD7MW;EC8MX,4BD9MW;;;ACkNf;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/iot.scss"],"names":[],"mappings":"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BP;;AAKA;AAAA;EACE;;AAIJ;EACE;EACA;EACA,SDhDc;ECiDd;;AAEA;EACE;EACA,yBDrDY;ECsDZ,wBDtDY;ECuDZ;EACA;;AAEA;AAAA;EAEE;;AAIJ;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAQJ;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,eDnHa;ECoHb,cDrJU;ECsJV,kBDtJU;ECuJV,ODtJe;ECuJf;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;AAAA;EAEE,cD3JS;EC4JT,kBD5JS;;AC+JX;AAAA;EACE;EACA;;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,wBDxMW;ECyMX,2BDzMW;;AC4Mb;EACE,yBD7MW;EC8MX,4BD9MW;;;ACkNf;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
diff --git a/package.json b/package.json
index 4b22fa9..f1a09b9 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
     "build:ts": "tsc -p src",
     "build:ts-mini": "tsc -p src --project src/tsconfig.mini.json",
     "build:ts-watch": "npm run build:ts -- -w",
-    "test:css": "stylelint *.scss css/*.scss",
+    "test:css": "stylelint css/*.scss",
     "test:server": "eslint ./server/*.ts",
     "test:ts": "eslint ./src/*.ts",
     "pack:dist": "node packdist.js",
diff --git a/packdist.js b/packdist.js
index bcb7dd3..76d9473 100644
--- a/packdist.js
+++ b/packdist.js
@@ -123,7 +123,7 @@ const assets = [
   // { m: 'c', src: 'favicon270.png' },
   // { m: 'c', src: 'favicon512.png' },
   { m: 'xml', src: 'icons.svg' },
-  { m: 'css', src: 'iotstyle.scss', tar: 'iotstyle.css' },
+  { m: 'css', src: 'css/iot.scss', tar: 'iotstyle.css' },
 
   { m: 'js', src: 'sfc/loader.js' },
   { m: 'm', src: 'sfc/u-colorpick.vue' },
diff --git a/packminimal.js b/packminimal.js
index 7ea2440..bb126d5 100644
--- a/packminimal.js
+++ b/packminimal.js
@@ -117,7 +117,7 @@ const assets = [
   { m: 'json', src: 'site.min.webmanifest', tar: 'site.webmanifest'},
   { m: 'xml', src: 'favicon.svg' },
   // { m: 'xml', src: 'icons-mini.svg', tar:'icons.svg'},
-  { m: 'css', src: 'iotstyle.scss', tar: 'iotstyle.css' },
+  { m: 'css', src: 'css/iot.scss', tar: 'iotstyle.css' },
   { m: 'js', src: 'micro-mini.js', tar: 'micro.js' },
   { m: 'm', src: 'ding.htm' },
   { m: 'm', src: 'microide.htm' },