summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--public/css/base/typography.css1
-rw-r--r--public/css/layout/grid.css54
-rw-r--r--public/css/layout/grid.xs.css55
-rw-r--r--public/css/layout/index.css1
-rw-r--r--public/css/modules/index.css2
-rw-r--r--public/css/modules/link-gallery.css15
-rw-r--r--public/css/modules/link-gallery.xs.css21
-rw-r--r--public/css/modules/nav.css20
-rw-r--r--public/css/modules/nav.xs.css19
-rw-r--r--public/css/variables/index.css1
-rw-r--r--public/css/variables/spacing.css23
-rw-r--r--public/css/variables/spacing.xs.css6
-rw-r--r--public/css/variables/typography.css14
-rw-r--r--public/css/variables/typography.xs.css9
14 files changed, 143 insertions, 98 deletions
diff --git a/public/css/base/typography.css b/public/css/base/typography.css
index 6cd6422..fb2ac17 100644
--- a/public/css/base/typography.css
+++ b/public/css/base/typography.css
@@ -4,6 +4,7 @@ body {
font-weight: 400;
letter-spacing: 0.03rem;
line-height: 1.5;
+ word-wrap: break-word;
}
h1 {
diff --git a/public/css/layout/grid.css b/public/css/layout/grid.css
index a4fb251..25cdd95 100644
--- a/public/css/layout/grid.css
+++ b/public/css/layout/grid.css
@@ -11,12 +11,14 @@
width: var(--grid-column-width);
}
+/* On screens narrower than 16rem, there is only one column. */
+
.grid-span-2 {
- width: calc(var(--grid-column-width) * 2 + var(--grid-gutter-width));
+ width: var(--grid-column-width);
}
.grid-span-3 {
- width: calc(var(--grid-column-width) * 3 + var(--grid-gutter-width) * 2);
+ width: var(--grid-column-width);
}
.width-prose {
@@ -26,51 +28,3 @@
.grid-span-full {
width: var(--grid-total-width);
}
-
-.grid-span-1.grid-end {
- margin-inline-start: calc(
- var(--grid-column-width) * (var(--grid-column-count) - 1) +
- var(--grid-gutter-width) * (var(--grid-column-count) - 1)
- );
- margin-inline-end: 0;
-}
-
-.grid-span-2.grid-end {
- margin-inline-start: calc(
- var(--grid-column-width) * (var(--grid-column-count) - 2) +
- var(--grid-gutter-width) * (var(--grid-column-count) - 2)
- );
- margin-inline-end: 0;
-}
-
-.grid-span-3.grid-end {
- margin-inline-start: calc(
- var(--grid-column-width) * (var(--grid-column-count) - 3) +
- var(--grid-gutter-width) * (var(--grid-column-count) - 3)
- );
- margin-inline-end: 0;
-}
-
-.grid-span-1.grid-prose-end {
- margin-inline-start: calc(
- var(--grid-column-width) * (var(--grid-prose-column-count) - 1) +
- var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1)
- );
- margin-inline-end: 0;
-}
-
-.grid-span-2.grid-prose-end {
- margin-inline-start: calc(
- var(--grid-column-width) * (var(--grid-prose-column-count) - 2) +
- var(--grid-gutter-width) * (var(--grid-prose-column-count) - 2)
- );
- margin-inline-end: 0;
-}
-
-.grid-span-3.grid-prose-end {
- margin-inline-start: calc(
- var(--grid-column-width) * (var(--grid-prose-column-count) - 3) +
- var(--grid-gutter-width) * (var(--grid-prose-column-count) - 3)
- );
- margin-inline-end: 0;
-} \ No newline at end of file
diff --git a/public/css/layout/grid.xs.css b/public/css/layout/grid.xs.css
new file mode 100644
index 0000000..e7c6d1a
--- /dev/null
+++ b/public/css/layout/grid.xs.css
@@ -0,0 +1,55 @@
+.grid-span-2 {
+ width: calc(var(--grid-column-width) * 2 + var(--grid-gutter-width));
+}
+
+.grid-span-3 {
+ width: calc(var(--grid-column-width) * 3 + var(--grid-gutter-width) * 2);
+}
+
+.grid-span-1.grid-end {
+ margin-inline-start: calc(
+ var(--grid-column-width) * (var(--grid-column-count) - 1) +
+ var(--grid-gutter-width) * (var(--grid-column-count) - 1)
+ );
+ margin-inline-end: 0;
+}
+
+.grid-span-2.grid-end {
+ margin-inline-start: calc(
+ var(--grid-column-width) * (var(--grid-column-count) - 2) +
+ var(--grid-gutter-width) * (var(--grid-column-count) - 2)
+ );
+ margin-inline-end: 0;
+}
+
+.grid-span-3.grid-end {
+ margin-inline-start: calc(
+ var(--grid-column-width) * (var(--grid-column-count) - 3) +
+ var(--grid-gutter-width) * (var(--grid-column-count) - 3)
+ );
+ margin-inline-end: 0;
+}
+
+.grid-span-1.grid-prose-end {
+ margin-inline-start: calc(
+ var(--grid-column-width) * (var(--grid-prose-column-count) - 1) +
+ var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1)
+ );
+ margin-inline-end: 0;
+}
+
+.grid-span-2.grid-prose-end {
+ margin-inline-start: calc(
+ var(--grid-column-width) * (var(--grid-prose-column-count) - 2) +
+ var(--grid-gutter-width) * (var(--grid-prose-column-count) - 2)
+ );
+ margin-inline-end: 0;
+}
+
+.grid-span-3.grid-prose-end {
+ margin-inline-start: calc(
+ var(--grid-column-width) * (var(--grid-prose-column-count) - 3) +
+ var(--grid-gutter-width) * (var(--grid-prose-column-count) - 3)
+ );
+ margin-inline-end: 0;
+} \ No newline at end of file
diff --git a/public/css/layout/index.css b/public/css/layout/index.css
index 0d378e0..0bede83 100644
--- a/public/css/layout/index.css
+++ b/public/css/layout/index.css
@@ -1,3 +1,4 @@
@import './grid.css';
+@import './grid.xs.css' (min-width: 16rem);
@import './grid.md.css' (min-width: 48rem);
@import './section-margins.css'; \ No newline at end of file
diff --git a/public/css/modules/index.css b/public/css/modules/index.css
index 800a920..56ba45e 100644
--- a/public/css/modules/index.css
+++ b/public/css/modules/index.css
@@ -6,7 +6,9 @@
@import './schedule.css';
@import './schedule.md.css' (min-width: 48rem);
@import './link-gallery.css';
+@import './link-gallery.xs.css' (min-width: 16rem);
@import './nav.css';
+@import './nav.xs.css' (min-width: 16rem);
@import './nav.md.css' (min-width: 48rem);
@import './nav.lg.css' (min-width: 64rem);
@import './skip-to-content.css';
diff --git a/public/css/modules/link-gallery.css b/public/css/modules/link-gallery.css
index acb77e2..12ba16f 100644
--- a/public/css/modules/link-gallery.css
+++ b/public/css/modules/link-gallery.css
@@ -1,16 +1,11 @@
.link-gallery {
display: grid;
grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
- grid-auto-rows: calc(
- var(--gallery-row-image-height) +
- var(--margin-block-sm) +
- var(--gallery-row-title-height)
- );
gap: var(--grid-gutter-width);
padding-block: var(--margin-block-md);
- --gallery-item-column-span: 2;
+ --gallery-item-column-span: 1;
--gallery-row-image-height: 12rem;
- --gallery-row-title-height: 11ex;
+ --gallery-row-title-height: fit-content;
text-align: center;
}
@@ -38,12 +33,6 @@
.link-gallery__title {
width: 100%;
height: min-content;
- max-height: 100%;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;
- overflow: hidden;
text-align: center;
margin-inline: var(--spacing-inline-xs);
}
diff --git a/public/css/modules/link-gallery.xs.css b/public/css/modules/link-gallery.xs.css
new file mode 100644
index 0000000..729ff01
--- /dev/null
+++ b/public/css/modules/link-gallery.xs.css
@@ -0,0 +1,21 @@
+.link-gallery {
+ grid-auto-rows: calc(
+ var(--gallery-row-image-height) +
+ var(--margin-block-sm) +
+ var(--gallery-row-title-height)
+ );
+ --gallery-item-column-span: 2;
+ --gallery-row-title-height: 11ex;
+ text-align: center;
+}
+
+.link-gallery__title {
+ width: 100%;
+ height: min-content;
+ max-height: 100%;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
diff --git a/public/css/modules/nav.css b/public/css/modules/nav.css
index 6af1c77..bd41dbc 100644
--- a/public/css/modules/nav.css
+++ b/public/css/modules/nav.css
@@ -17,26 +17,6 @@
margin: 0;
}
-.nav__nav-links li:nth-child(1) {
- grid-column: 1 / 3;
-}
-
-.nav__nav-links li:nth-child(2) {
- grid-column: 3 / 5;
-}
-
-.nav__nav-links li:nth-child(3) {
- grid-column: 1 / 4;
-}
-
-.nav__nav-links li:nth-child(4) {
- grid-column: 1 / 3;
-}
-
-.nav__nav-links li:nth-child(5) {
- grid-column: 3 / 5;
-}
-
.nav__logo {
font-family: var(--font-serif);
font-size: var(--font-size-5);
diff --git a/public/css/modules/nav.xs.css b/public/css/modules/nav.xs.css
new file mode 100644
index 0000000..708652c
--- /dev/null
+++ b/public/css/modules/nav.xs.css
@@ -0,0 +1,19 @@
+.nav__nav-links li:nth-child(1) {
+ grid-column: 1 / 3;
+}
+
+.nav__nav-links li:nth-child(2) {
+ grid-column: 3 / 5;
+}
+
+.nav__nav-links li:nth-child(3) {
+ grid-column: 1 / 4;
+}
+
+.nav__nav-links li:nth-child(4) {
+ grid-column: 1 / 3;
+}
+
+.nav__nav-links li:nth-child(5) {
+ grid-column: 3 / 5;
+}
diff --git a/public/css/variables/index.css b/public/css/variables/index.css
index db7d45f..20b9126 100644
--- a/public/css/variables/index.css
+++ b/public/css/variables/index.css
@@ -1,5 +1,6 @@
@import 'colours.css';
@import 'spacing.css';
+@import 'spacing.xs.css' (min-width: 16rem);
@import 'spacing.sm.css' (min-width: 30rem);
@import 'spacing.md.css' (min-width: 48rem);
@import 'spacing.lg.css' (min-width: 64rem);
diff --git a/public/css/variables/spacing.css b/public/css/variables/spacing.css
index c384783..a4d1d91 100644
--- a/public/css/variables/spacing.css
+++ b/public/css/variables/spacing.css
@@ -1,12 +1,12 @@
:root {
- --margin-inline-md: calc(8 * var(--relative-eighth-rem));
+ --margin-inline-md: calc(2 * var(--relative-eighth-rem));
--margin-block-lg: calc(16 * var(--relative-eighth-rem));
--margin-block-md: calc(10 * var(--relative-eighth-rem));
--margin-block-sm: calc(5 * var(--relative-eighth-rem));
- --padding-inline-lg: calc(22 * var(--relative-eighth-rem));
- --padding-inline-md: calc(12 * var(--relative-eighth-rem));
- --padding-inline-sm: calc(3 * var(--relative-eighth-rem));
+ --padding-inline-lg: calc(4 * var(--relative-eighth-rem));
+ --padding-inline-md: calc(2 * var(--relative-eighth-rem));
+ --padding-inline-sm: calc(1 * var(--relative-eighth-rem));
--padding-block-lg: calc(12 * var(--relative-eighth-rem));
--padding-block-md: calc(8 * var(--relative-eighth-rem));
--padding-block-sm: calc(5 * var(--relative-eighth-rem));
@@ -31,10 +31,17 @@
--grid-column-width-relative-eighth-rem: 32;
--grid-gutter-width-relative-eighth-rem: 4;
- /* small screens */
+ /***********************************************************
+ * Generally, we will use columns to keep things laid out *
+ * nicely. However, on screens narrower than xs, this gets *
+ * pretty much impossible. So for those screens, we use a *
+ * single-column layout taking up 100vw. In effect, this *
+ * is just default CSS layout plus a wee bit padding. From *
+ * xs widewards, we use multiple columns on a fixed width. *
+ ***********************************************************/
- --grid-total-width: 15rem;
+ --grid-total-width: 100vw;
--grid-padding-relative-eighth-rem: 8;
- --grid-column-count: 4;
- --grid-prose-column-count: 4;
+ --grid-column-count: 1;
+ --grid-prose-column-count: 1;
}
diff --git a/public/css/variables/spacing.xs.css b/public/css/variables/spacing.xs.css
new file mode 100644
index 0000000..fb7c01a
--- /dev/null
+++ b/public/css/variables/spacing.xs.css
@@ -0,0 +1,6 @@
+:root {
+ --grid-total-width: 15rem;
+ --grid-padding-relative-eighth-rem: 8;
+ --grid-column-count: 4;
+ --grid-prose-column-count: 4;
+}
diff --git a/public/css/variables/typography.css b/public/css/variables/typography.css
index e0b0a18..e59703a 100644
--- a/public/css/variables/typography.css
+++ b/public/css/variables/typography.css
@@ -1,11 +1,11 @@
:root {
- --font-size-0: calc(7 * var(--relative-eighth-rem));
- --font-size-1: calc(9 * var(--relative-eighth-rem));
- --font-size-2: calc(12 * var(--relative-eighth-rem));
- --font-size-3: calc(16 * var(--relative-eighth-rem));
- --font-size-4: calc(20 * var(--relative-eighth-rem));
- --font-size-5: calc(26 * var(--relative-eighth-rem));
- --font-size-6: calc(32 * var(--relative-eighth-rem));
+ --font-size-0: calc(8 * var(--relative-eighth-rem));
+ --font-size-1: calc(8 * var(--relative-eighth-rem));
+ --font-size-2: calc(8 * var(--relative-eighth-rem));
+ --font-size-3: calc(8 * var(--relative-eighth-rem));
+ --font-size-4: calc(8 * var(--relative-eighth-rem));
+ --font-size-5: calc(8 * var(--relative-eighth-rem));
+ --font-size-6: calc(8 * var(--relative-eighth-rem));
--font-serif: Alegreya, -apple-system-ui-serif, 'Goudy Old Style', Garamond, serif;
--font-sans-serif: 'Alegreya Sans', -apple-system-ui-sans, Lato, Calibri, 'sans-serif';
diff --git a/public/css/variables/typography.xs.css b/public/css/variables/typography.xs.css
new file mode 100644
index 0000000..2c36d1d
--- /dev/null
+++ b/public/css/variables/typography.xs.css
@@ -0,0 +1,9 @@
+:root {
+ --font-size-0: calc(7 * var(--relative-eighth-rem));
+ --font-size-1: calc(9 * var(--relative-eighth-rem));
+ --font-size-2: calc(12 * var(--relative-eighth-rem));
+ --font-size-3: calc(16 * var(--relative-eighth-rem));
+ --font-size-4: calc(20 * var(--relative-eighth-rem));
+ --font-size-5: calc(26 * var(--relative-eighth-rem));
+ --font-size-6: calc(32 * var(--relative-eighth-rem));
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2026-09-08 17:26:15 +0000