inits http ssg with mkws

1 files changed, 516 insertions, 0 deletions

diff --git a/http/share/css/base.uppcss b/http/share/css/base.uppcss
new file mode 100644
index 0000000..ea9bace
--- /dev/null
+++ b/http/share/css/base.uppcss
@@ -0,0 +1,516 @@
+/** Variables */
+
+:root {
+  --colour-primary-10: #060300;
+  --colour-primary-15: #150800;
+  --colour-primary-20: #1f1400;
+  --colour-primary-30: #3c2b00;
+  --colour-primary-40: #5c4300;
+  --colour-primary-50: #7f5d00;
+  --colour-primary-60: #a37800;
+  --colour-primary-70: #c89500;
+  --colour-primary-80: #efb300;
+  --colour-primary-90: #ffd98c;
+  --colour-primary-95: #ffecc8;
+
+  --colour-hyperlink-10: #000409;
+  --colour-hyperlink-20: #001829;
+  --colour-hyperlink-30: #00314d;
+  --colour-hyperlink-40: #004d75;
+  --colour-hyperlink-50: #006a9f;
+  --colour-hyperlink-60: #1388c9;
+  --colour-hyperlink-70: #41a8ea;
+  --colour-hyperlink-80: #78c7ff;
+  --colour-hyperlink-90: #bfe3ff;
+  --colour-hyperlink-95: #e0f1ff;
+
+  --colour-grey-10: oklch(0.1 0.01 84);
+  --colour-grey-20: oklch(0.2 0.01 84);
+  --colour-grey-30: oklch(0.3 0.01 84);
+  --colour-grey-40: oklch(0.4 0.01 84);
+  --colour-grey-50: oklch(0.5 0.01 84);
+  --colour-grey-60: oklch(0.6 0.01 84);
+  --colour-grey-70: oklch(0.7 0.01 84);
+  --colour-grey-80: oklch(0.8 0.01 84);
+  --colour-grey-90: oklch(0.9 0.01 84);
+  --colour-grey-95: oklch(0.95 0.01 84);
+
+  --colour-error-10: oklch(0.1 0.2 26);
+  --colour-error-20: oklch(0.2 0.2 26);
+  --colour-error-30: oklch(0.3 0.2 26);
+  --colour-error-40: oklch(0.4 0.2 26);
+  --colour-error-50: oklch(0.5 0.2 26);
+  --colour-error-60: oklch(0.6 0.2 26);
+  --colour-error-70: oklch(0.7 0.2 26);
+  --colour-error-80: oklch(0.8 0.2 26);
+  --colour-error-90: oklch(0.9 0.2 26);
+  --colour-error-95: oklch(0.95 0.2 26);
+
+  --colour-warn-10: oklch(0.1 0.2 46);
+  --colour-warn-20: oklch(0.2 0.2 46);
+  --colour-warn-30: oklch(0.3 0.2 46);
+  --colour-warn-40: oklch(0.4 0.2 46);
+  --colour-warn-50: oklch(0.5 0.2 46);
+  --colour-warn-60: oklch(0.6 0.2 46);
+  --colour-warn-70: oklch(0.7 0.2 46);
+  --colour-warn-80: oklch(0.8 0.2 46);
+  --colour-warn-90: oklch(0.9 0.2 46);
+  --colour-warn-95: oklch(0.95 0.2 46);
+
+  --colour-primary-fg: var(--colour-primary-90);
+  --colour-primary-fg-accent: var(--colour-primary-80);
+  --colour-primary-bg: var(--colour-primary-10);
+  --colour-primary-bg-accent: var(--colour-primary-20);
+  --colour-code-fg: var(--colour-primary-90);
+  --colour-code-bg: var(--colour-primary-15);
+  --colour-hyperlink: var(--colour-hyperlink-80);
+  --colour-grey-fg: var(--colour-grey-70);
+  --colour-grey-bg: var(--colour-grey-30);
+  --colour-error-fg: var(--colour-error-90);
+  --colour-error-bg: var(--colour-error-40);
+  --colour-warn-fg: var(--colour-warn-20);
+  --colour-warn-bg: var(--colour-warn-80);
+
+  --font-size-sm: 1rem;
+  --font-size-base: 1.125rem;
+  --font-size-md: 1.5rem;
+  --font-size-lg: 2rem;
+  --font-size-xl: 3rem;
+
+  --spacing-block-xs: 0.5rem;
+  --spacing-block-sm: 1.75rem;
+  --spacing-block-md: 2.5rem;
+  --spacing-block-lg: 3.5rem;
+  --spacing-block-xl: 5rem;
+  --spacing-inline-xs: 0.25rem;
+  --spacing-inline-sm: 0.5rem;
+  --spacing-inline-md: 1.5rem;
+  --spacing-inline-lg: 3rem;
+  --spacing-inline-xl: 6rem;
+}
+
+/** Light theme */
+@media (prefers-color-scheme: light) {
+  :root {
+    --colour-primary-fg: var(--colour-primary-20);
+    --colour-primary-fg-accent: var(--colour-primary-40);
+    --colour-primary-bg: var(--colour-primary-95);
+    --colour-hyperlink: var(--colour-hyperlink-40);
+    --colour-grey-fg: var(--colour-grey-40);
+    --colour-grey-bg: var(--colour-grey-80);
+    --colour-error-fg: var(--colour-error-20);
+    --colour-error-bg: var(--colour-error-80);
+  }
+}
+
+/** Base typography */
+
+body {
+  font-size: var(--font-size-base);
+  color: var(--colour-primary-fg);
+  font-weight: light;
+  background-color: var(--colour-primary-bg);
+  line-height: 1.5;
+
+  /* Geometric Humanist stack from https://modernfontstacks.com */
+  font-family:
+    Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
+}
+
+small {
+  font-size: var(--font-size-sm);
+}
+
+:is(p, h1, h2, h3, h4, h5, h6, hr, img, figure, ul, ol, blockquote) {
+  margin-block-start: var(--spacing-block-sm);
+}
+
+hr {
+  height: 2px;
+}
+
+/** Base layout */
+
+body {
+  --body-margin-inline-start: var(--spacing-inline-lg);
+  --body-margin-inline-end: var(--body-margin-inline-start);
+  --body-margin-block-end: var(--spacing-block-xl);
+  margin-inline: var(--body-margin-inline-start) var(--body-margin-inline-end);
+  margin-block-end: var(--body-margin-block-end);
+}
+
+:is(h1, h2, h3, h4, h5, h6) {
+  text-align: center;
+}
+
+img {
+  margin-inline: auto;
+  height: auto;
+}
+
+@media (min-width: 60rem) {
+  body {
+    display: grid;
+    grid-template-columns:
+      [grid-start media-start]
+      var(--grid-margin-inline)
+      [media-end content-start]
+      minmax(var(--grid-max-content-width), auto)
+      [content-end grid-end];
+    grid-auto-rows: max-content;
+    column-gap: var(--spacing-block-sm);
+    max-width: var(--grid-total-width);
+
+    --body-margin-inline-end: 6rem;
+    --grid-margin-inline: 6rem;
+    --grid-total-width: 48rem;
+    --grid-max-content-width: calc(
+      var(--grid-total-width) - var(--body-margin-inline-start) -
+        var(--grid-margin-inline) - var(--spacing-block-sm) -
+        var(--grid-margin-inline)
+    );
+  }
+
+  :is(main, article, nav) {
+    display: grid;
+    grid-column: grid;
+    grid-template-columns: subgrid;
+
+    > :is(section, header, aside, form) {
+      display: grid;
+      grid-template-columns: subgrid;
+      grid-column: grid;
+
+      > :not(.not-grid-content) {
+        grid-column: content;
+      }
+    }
+  }
+
+  :is(h1, h2, h3, h4, h5, h6) {
+    text-align: start;
+  }
+}
+
+@media (min-width: 80rem) {
+  body {
+    grid-template-columns:
+      [grid-start media-start]
+      var(--grid-margin-inline)
+      [media-end content-start]
+      minmax(auto, var(--grid-max-content-width))
+      [content-end margin-start]
+      auto
+      [margin-end grid-end];
+
+    --grid-total-width: 80rem;
+    --grid-max-content-width: 40rem;
+  }
+}
+
+/** Headings */
+
+h1 {
+  font-size: var(--font-size-xl);
+  font-weight: 900;
+  margin-block-start: 0;
+}
+
+h2 {
+  font-size: var(--font-size-lg);
+  font-weight: 900;
+  margin-block-start: var(--spacing-block-xl);
+}
+
+h3,
+h4,
+h5,
+h6 {
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  margin-block-start: var(--spacing-block-lg);
+}
+
+/** Hyperlinks */
+
+a:is(:link, :visited) {
+  color: var(--colour-hyperlink);
+  text-decoration: underline;
+  display: inline;
+}
+
+a:hover {
+  text-decoration: wavy;
+}
+
+/** Definition lists */
+dl {
+  margin-block-start: var(--spacing-block-md);
+}
+
+dl dt {
+  font-weight: bold;
+}
+
+dl dd + dt {
+  margin-block-start: var(--spacing-block-md);
+}
+
+/** figcaptions */
+
+figcaption {
+  font-size: var(--font-size-sm);
+  font-style: italic;
+  text-align: center;
+}
+
+/** Lists */
+
+:is(ol, ul) {
+  margin-inline-start: var(--spacing-inline-lg);
+}
+
+/** Navigation bar */
+
+nav {
+  margin-block: var(--spacing-block-sm);
+}
+
+nav ul {
+  grid-column: media-start / content-end;
+  display: flex;
+  justify-content: center;
+  gap: var(--spacing-inline-md);
+  list-style: none;
+  margin: 0;
+}
+
+@media (min-width: 36rem) {
+  nav {
+    display: grid;
+    grid-template-columns: subgrid;
+  }
+
+  nav ul {
+    justify-content: end;
+  }
+}
+
+/** Emphasis */
+
+strong {
+  font-weight: bold;
+  font-style: italic;
+}
+
+/** Blog feed */
+
+.h-feed ul {
+  list-style: none;
+  margin-inline: 0;
+}
+
+/** Block quotes */
+blockquote {
+  padding-inline-start: var(--spacing-inline-lg);
+  border-inline-start: 2px solid var(--colour-primary-fg);
+  font-style: italic;
+}
+
+blockquote footer {
+  font-style: initial;
+}
+
+blockquote :is(b, strong) {
+  font-style: italic;
+  font-weight: bold;
+}
+
+blockquote :is(i, em) {
+  font-style: normal;
+}
+
+/** Small caps */
+.small-caps {
+  font-variant: small-caps;
+}
+
+/** Pre-formatted blocks */
+pre {
+  border: 2px solid var(--colour-primary-fg);
+  border-radius: 2px;
+  background-color: var(--colour-code-bg) !important;
+  margin-block-start: var(--spacing-block-sm);
+  padding-inline: var(--spacing-inline-sm);
+  padding-block: var(--spacing-block-xs);
+}
+
+/** Code blocks */
+code {
+  border: 2px solid var(--colour-primary-fg);
+  border-radius: 2px;
+  padding-inline: var(--spacing-inline-xs);
+  color: var(--colour-code-fg);
+  background-color: var(--colour-code-bg);
+  font-size: var(--font-size-sm);
+}
+pre code {
+  border: none;
+  border-radius: none;
+  padding: none;
+}
+
+/* verse */
+.verse {
+  span {
+    display: block;
+  }
+}
+.verse--hanging-indents {
+  span + span:not(.not-hanging) {
+    margin-inline-start: var(--spacing-inline-md);
+  }
+}
+
+/* block-comment */
+block-comment {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: grid;
+
+  > * {
+    grid-column: content;
+  }
+
+  > blockquote:last-of-type {
+    padding-block: var(--spacing-block-sm);
+    padding-inline: var(--spacing-inline-md);
+    overflow-y: scroll;
+    border: 2px solid var(--colour-primary-fg);
+    --colour-scroll-shadow: color-mix(
+      in srgb,
+      var(--colour-primary-fg),
+      transparent 20%
+    );
+
+    background:
+      linear-gradient(var(--colour-primary-bg) 30%, transparent) center top,
+      linear-gradient(transparent, var(--colour-primary-bg) 70%) center bottom,
+      radial-gradient(
+          farthest-side at 50% 0,
+          var(--colour-scroll-shadow),
+          transparent
+        )
+        center top,
+      radial-gradient(
+          farthest-side at 50% 100%,
+          var(--colour-scroll-shadow),
+          transparent
+        )
+        center bottom;
+    background-repeat: no-repeat;
+    background-size:
+      100% 2rem,
+      100% 2rem,
+      100% 1rem,
+      100% 1rem;
+    background-attachment: local, local, scroll, scroll;
+
+    > :first-child {
+      margin-block-start: 0;
+    }
+  }
+}
+
+@media (min-width: 80rem) {
+  block-comment > blockquote:last-of-type {
+    grid-column: margin;
+    max-height: 67vh;
+  }
+}
+
+/* forms */
+form {
+  margin-inline: auto;
+  max-width: max-content;
+
+  :is(button, fieldset, input, label, object, output, select, textarea, img) {
+    display: block;
+  }
+
+  label {
+    margin-block-end: var(--spacing-block-xs);
+  }
+
+  * + :is(label, input[type="submit"], button) {
+    margin-block-start: var(--spacing-block-md);
+  }
+
+  :is(input[type="submit"], input[type="button"], button) {
+    padding-inline: var(--spacing-inline-sm);
+    max-width: max-content;
+    &:not(dialog *) {
+      margin-inline-start: auto;
+    }
+  }
+
+  :is(input[type="email"], input[type="text"], select) {
+    max-width: 100%;
+    width: 16rem;
+  }
+
+  textarea {
+    max-width: 100%;
+    width: 40rem;
+  }
+}
+
+/* dialogs */
+
+dialog {
+  background: var(--colour-primary-bg-accent);
+  border: 2px solid var(--colour-primary-fg-accent);
+  bottom: auto;
+  color: var(--colour-primary-fg);
+  left: calc(0.5 * (100vw - min(90vw, 36rem)));
+  margin: 0;
+  padding-block: var(--spacing-block-sm);
+  padding-inline: var(--spacing-inline-sm);
+  text-align: center;
+  top: auto;
+  width: min(90vw, 36rem);
+}
+
+@media (min-width: 80rem) {
+  dialog {
+    left: calc(
+      var(--body-margin-inline-start) + var(--grid-margin-inline) + 2 *
+        var(--spacing-inline-md)
+    );
+  }
+}
+
+/* utilities */
+:is(
+  .para-spacing-tight:is(p, h1, h2, h3, h4, h5, h6, hr, img, figure, ul, ol),
+  .para-spacing-tight :is(p, h1, h2, h3, h4, h5, h6, hr, img, figure, ul, ol)
+) {
+  margin-block-start: var(--spacing-block-xs);
+}
+
+.error {
+  background: var(--colour-error-bg);
+  border: 2px solid var(--colour-error-fg);
+  color: var(--colour-error-fg);
+  padding-block: var(--spacing--block-sm);
+  padding-inline: var(--spacing-inline-sm);
+}
+
+.warn {
+  background: var(--colour-warn-bg);
+  border: 2px solid var(--colour-warn-fg);
+  color: var(--colour-warn-fg);
+  padding-block: var(--spacing--block-sm);
+  padding-inline: var(--spacing-inline-sm);
+  --colour-hyperlink: var(--colour-hyperlink-40);
+}