From 7dbc83d19070df35fa90a366157ed688cafb9fe9 Mon Sep 17 00:00:00 2001 From: Ben Goldsworthy Date: Thu, 20 Feb 2025 01:22:07 +0100 Subject: [PATCH 1/7] style: fix `font-variant-numeric` and superscript text --- assets/css/base/_typography.scss | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/assets/css/base/_typography.scss b/assets/css/base/_typography.scss index cbe2a88..3b08501 100644 --- a/assets/css/base/_typography.scss +++ b/assets/css/base/_typography.scss @@ -44,7 +44,7 @@ html { color: $dark; background-color: $light; font-family: $default-font; - font-variant-numeric: 'oldstyle-nums slashed-zero'; + font-variant-numeric: oldstyle-nums slashed-zero; writing-mode: horizontal-tb; } @@ -305,7 +305,9 @@ kbd { font-family: Arial, Helvetica, sans-serif; background-color: #f7f7f7; color: #333; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px white inset; + box-shadow: + 0 1px 0 rgba(0, 0, 0, 0.2), + 0 0 0 2px white inset; border-radius: 3px; display: inline-block; margin-block: 0; @@ -350,3 +352,8 @@ kbd { dfn { font-variant: small-caps; } + +sub, +sup { + line-height: 0; +} From d70d779f32c62f9ca7ca84a96eadb5c71530e1c2 Mon Sep 17 00:00:00 2001 From: Ben Goldsworthy Date: Thu, 20 Feb 2025 01:22:27 +0100 Subject: [PATCH 2/7] style: fix chart figures --- assets/css/components/_chart.scss | 7 ++----- assets/css/components/_figure.scss | 5 +++++ 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/assets/css/components/_chart.scss b/assets/css/components/_chart.scss index 2137a19..fa49bd0 100644 --- a/assets/css/components/_chart.scss +++ b/assets/css/components/_chart.scss @@ -1,20 +1,17 @@ .chart-container { position: relative; - margin-inline: auto; - block-size: 100vh; - inline-size: 95vw; + inline-size: 100%; + min-block-size: 50vh; display: flex; justify-content: center; @media (orientation: landscape) { block-size: 75vh; - inline-size: 95vw; } @include mq("large") { block-size: auto; max-block-size: 80vh; - inline-size: 50vw; } & + .chart-container { diff --git a/assets/css/components/_figure.scss b/assets/css/components/_figure.scss index c8bc1a1..5a2d69d 100644 --- a/assets/css/components/_figure.scss +++ b/assets/css/components/_figure.scss @@ -2,6 +2,11 @@ inline-size: fit-content; margin: 16px auto; + &--chart { + margin: 0; + width: 100%; + } + &__caption { block-size: auto; margin: auto; From 16e7d6ef838b8ea4c6429c93f451f1e76044a52e Mon Sep 17 00:00:00 2001 From: Ben Goldsworthy Date: Thu, 20 Feb 2025 01:22:43 +0100 Subject: [PATCH 3/7] style: replace Grid with Flexbox --- assets/css/pages/_single.scss | 28 ++++++++++------------------ 1 file changed, 10 insertions(+), 18 deletions(-) diff --git a/assets/css/pages/_single.scss b/assets/css/pages/_single.scss index f957ac7..0f48be6 100644 --- a/assets/css/pages/_single.scss +++ b/assets/css/pages/_single.scss @@ -2,7 +2,6 @@ display: grid; column-gap: 2em; grid-template-columns: 0.4fr 0.6fr; - grid-template-rows: auto auto auto auto 60px; @include mq("large") { grid-template-rows: auto auto auto auto; @@ -15,6 +14,7 @@ grid-column-end: 3; background-color: $light; filter: brightness(80%); + padding-block-start: 2em; @include mq("large") { border: 2px solid $dark; @@ -52,10 +52,6 @@ } &__featured-image { - display: grid; - grid-template-columns: 15% 1fr 15%; - grid-template-rows: 20% 1fr 20%; - grid-template-areas: ". . ." ". post-header-details ." ". . ."; background-position: center center; background-repeat: no-repeat; background-size: cover; @@ -63,18 +59,21 @@ min-block-size: 380px; inline-size: 100%; border: 2px solid $dark; + align-content: center; + position: relative; & .attr { + position: absolute; background-color: $dark; font-size: 0.7em; color: $light; inline-size: fit-content; - position: fixed; padding-block: 0.2em; padding-inline: 0.5em; opacity: 0.8; margin-block: 0; margin-inline: auto; + top: 0; & a { color: $light; @@ -94,17 +93,15 @@ } &__title-wrapper { - display: grid; - grid-area: post-header-details; + display: flex; + flex-direction: column; background-color: $dark; opacity: 0.8; text-align: center; - grid-template-columns: 1fr; padding: 20px; - grid-template-rows: 1fr auto auto 1fr; - justify-items: center; - align-items: center; - grid-template-areas: "." "post-title" "post-subtitle" "."; + margin: auto; + width: 80%; + margin-block: auto; &--no-title { visibility: hidden; @@ -116,17 +113,12 @@ } & .article-header__title { - grid-area: post-title; font-weight: bold; &--long { font-size: 1.5em; } } - - & .article-header__subtitle { - grid-area: post-subtitle; - } } &__word-count, From 312c4ed725760674866db8d2e9cfb2215ea0f691 Mon Sep 17 00:00:00 2001 From: Ben Goldsworthy Date: Thu, 20 Feb 2025 01:23:36 +0100 Subject: [PATCH 4/7] fix: map in locations view --- layouts/locations/list.html | 52 +++++++------ layouts/partials/cv/locations/heatmap.js | 73 ++++++++++--------- .../leaflet-fullscreen/leaflet.fullscreen.css | 0 3 files changed, 68 insertions(+), 57 deletions(-) rename static/{css => js}/leaflet-fullscreen/leaflet.fullscreen.css (100%) diff --git a/layouts/locations/list.html b/layouts/locations/list.html index 7bb3625..fc5d1ec 100644 --- a/layouts/locations/list.html +++ b/layouts/locations/list.html @@ -1,45 +1,53 @@ {{ define "title" }} - Locations | {{ .Site.Title }} + Locations | + {{ .Site.Title }} {{ end }} {{ define "main-class" }}--section location-map{{ end }} {{ define "header-scripts" }} - - - + + + {{ end }} {{ define "footer-scripts" }} - - + + - - + + - - + + - + {{- partial "cv/locations/heatmap.js" ( dict "all_pages" $.Site.AllPages "locations" $.Site.Data.locations ) -}} {{ end }} {{ define "main-header" }} -
-

{{ .Title | safeHTML }}.

- {{ .Content }} -
+
+

{{ .Title | safeHTML }}.

+ {{ .Content }} +
{{ end }} {{ define "main-body" }} -
-
+
+
{{- with ( partial "util/render_recursive_list.html" ( dict "sc" $ "pc" . "items" $.Site.Data.locations "schemaType" "Place" ) ) -}} -
+
{{- . -}} -
+
{{- end -}} -
+
{{ end }} diff --git a/layouts/partials/cv/locations/heatmap.js b/layouts/partials/cv/locations/heatmap.js index 1465b5a..6427bdb 100644 --- a/layouts/partials/cv/locations/heatmap.js +++ b/layouts/partials/cv/locations/heatmap.js @@ -1,47 +1,50 @@ -/* +{{/* Recursively render an ordered or unordered list from a set of arbitrarily- deeply-nested items. @params all_pages All site pages -*/ - -var map = L.map('map', { - fullscreenControl: true -}).setView([55, -3], 3); - -L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { - maxZoom: 19, - attribution: '© OpenStreetMap' -}).addTo(map); - -{{- $locations := partialCached "util/get_location_leaf_nodes.html" $.Site.Data.locations -}} - -{{/* -{{- range .Site.AllPages -}} - {{- with .Params.locations -}} - {{- range . -}} - {{- with ( index $locations ( replaceRE `, [A-Z]+` "" . ) ) -}} - L.marker([{{ .lat }}, {{ .lon }}]).addTo(map); - {{- end -}} - {{- end -}} - {{- end -}} -{{- end -}} + @params locations All locations */}} -L.heatLayer( - [ - {{- range .all_pages -}} + diff --git a/static/css/leaflet-fullscreen/leaflet.fullscreen.css b/static/js/leaflet-fullscreen/leaflet.fullscreen.css similarity index 100% rename from static/css/leaflet-fullscreen/leaflet.fullscreen.css rename to static/js/leaflet-fullscreen/leaflet.fullscreen.css From a599cb5ebc0cfef0a0c1efdce5d6c88568d15b91 Mon Sep 17 00:00:00 2001 From: Ben Goldsworthy Date: Thu, 20 Feb 2025 01:24:11 +0100 Subject: [PATCH 5/7] a11y: add ARIA labels --- layouts/partials/header/site-header.html | 60 ++++++++++++++++++++++-- 1 file changed, 55 insertions(+), 5 deletions(-) diff --git a/layouts/partials/header/site-header.html b/layouts/partials/header/site-header.html index 024dd25..607d37c 100644 --- a/layouts/partials/header/site-header.html +++ b/layouts/partials/header/site-header.html @@ -1,12 +1,62 @@ -