updates styles

website/public/css/base.css

@@ -24,12 +24,39 @@
   --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-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);
 
   --font-size-sm: 1rem;
   --font-size-base: 1.125rem;
@@ -56,6 +83,10 @@
     --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);
   }
 }
 
@@ -113,6 +144,7 @@ img {
       [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);
 
@@ -384,6 +416,65 @@ block-comment {
   }
 }
 
+/* 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;
+    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),
@@ -391,3 +482,11 @@ block-comment {
 ) {
   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);
+}

website/public/css/hcard.css

@@ -1,57 +1,57 @@
 .h-card div:has(img) {
-	width: 6rem;
+  width: 6rem;
-	height: 6rem;
+  height: 6rem;
-	margin-inline: auto;
+  margin-inline: auto;
 }
 
 .h-card img {
-	width: 6rem;
+  width: 6rem;
-	height: 6rem;
+  height: 6rem;
-	border-radius: 1rem;
+  border-radius: 1rem;
-	filter: contrast(1.25);
+  filter: contrast(1.25);
 }
 
 .h-card div:has(img)::after {
-	/* Colour overlay */
+  /* Colour overlay */
-	background-color: var(--colour-primary-80);
+  background-color: var(--colour-primary-80);
-	opacity: 0.3;
+  opacity: 0.3;
 
-	/* Same size and shape as the img */
+  /* Same size and shape as the img */
-	border-radius: 1rem;
+  border-radius: 1rem;
-	width: 6rem;
+  width: 6rem;
-	height: 6rem;
+  height: 6rem;
 
-	/* Positioned on top of the img */
+  /* Positioned on top of the img */
-	display: block;
+  display: block;
-	position: relative;
+  position: relative;
-	top: -6rem;
+  top: -6rem;
 
-	/* A content value is needed to get the ::after to render */
+  /* A content value is needed to get the ::after to render */
-	content: '';
+  content: "";
 }
 
-
 @media (min-width: 36rem) {
-	.h-card {
+  .h-card {
-		grid-column: media-start / content-end;
+    grid-column: media-start / content-end;
-		display: grid;
+    display: grid;
-		grid-template-columns: subgrid; /** Subgrid of main column layout */
+    grid-template-columns: subgrid; /** Subgrid of main column layout */
-		grid-template-rows: min-content 1fr;
+    grid-template-rows: min-content 1fr;
-		grid-template-areas:
+    grid-template-areas:
-			"empty heading"
+      "empty heading"
-			"photo text";
+      "photo text";
-	}
+    column-gap: var(--spacing-block-sm);
+  }
 
-	.h-card div:has(img) {
+  .h-card div:has(img) {
-		grid-area: photo;
+    grid-area: photo;
-		margin-block-start: var(--spacing-block-sm);
+    margin-block-start: var(--spacing-block-sm);
-	}
+  }
 
-	.h-card header {
+  .h-card header {
-		grid-area: heading;
+    grid-area: heading;
-	}
+  }
 
-	.h-card__text {
+  .h-card__text {
-		grid-area: text;
+    grid-area: text;
-	}
+  }
 }