summaryrefslogtreecommitdiff
path: root/website
diff options
context:
space:
mode:
Diffstat (limited to 'website')
-rw-r--r--website/public/css/base.css99
-rw-r--r--website/public/css/hcard.css92
2 files changed, 145 insertions, 46 deletions
diff --git a/website/public/css/base.css b/website/public/css/base.css
index 64df3a6..2de6805 100644
--- a/website/public/css/base.css
+++ b/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);
+}
diff --git a/website/public/css/hcard.css b/website/public/css/hcard.css
index c0e2280..78f82b5 100644
--- a/website/public/css/hcard.css
+++ b/website/public/css/hcard.css
@@ -1,57 +1,57 @@
.h-card div:has(img) {
- width: 6rem;
- height: 6rem;
- margin-inline: auto;
+ width: 6rem;
+ height: 6rem;
+ margin-inline: auto;
}
.h-card img {
- width: 6rem;
- height: 6rem;
- border-radius: 1rem;
- filter: contrast(1.25);
+ width: 6rem;
+ height: 6rem;
+ border-radius: 1rem;
+ filter: contrast(1.25);
}
.h-card div:has(img)::after {
- /* Colour overlay */
- background-color: var(--colour-primary-80);
- opacity: 0.3;
-
- /* Same size and shape as the img */
- border-radius: 1rem;
- width: 6rem;
- height: 6rem;
-
- /* Positioned on top of the img */
- display: block;
- position: relative;
- top: -6rem;
-
- /* A content value is needed to get the ::after to render */
- content: '';
+ /* Colour overlay */
+ background-color: var(--colour-primary-80);
+ opacity: 0.3;
+
+ /* Same size and shape as the img */
+ border-radius: 1rem;
+ width: 6rem;
+ height: 6rem;
+
+ /* Positioned on top of the img */
+ display: block;
+ position: relative;
+ top: -6rem;
+
+ /* A content value is needed to get the ::after to render */
+ content: "";
}
-
@media (min-width: 36rem) {
- .h-card {
- grid-column: media-start / content-end;
- display: grid;
- grid-template-columns: subgrid; /** Subgrid of main column layout */
- grid-template-rows: min-content 1fr;
- grid-template-areas:
- "empty heading"
- "photo text";
- }
-
- .h-card div:has(img) {
- grid-area: photo;
- margin-block-start: var(--spacing-block-sm);
- }
-
- .h-card header {
- grid-area: heading;
- }
-
- .h-card__text {
- grid-area: text;
- }
+ .h-card {
+ grid-column: media-start / content-end;
+ display: grid;
+ grid-template-columns: subgrid; /** Subgrid of main column layout */
+ grid-template-rows: min-content 1fr;
+ grid-template-areas:
+ "empty heading"
+ "photo text";
+ column-gap: var(--spacing-block-sm);
+ }
+
+ .h-card div:has(img) {
+ grid-area: photo;
+ margin-block-start: var(--spacing-block-sm);
+ }
+
+ .h-card header {
+ grid-area: heading;
+ }
+
+ .h-card__text {
+ grid-area: text;
+ }
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-09-08 20:09:09 +0000