Merge branch 'main' into 40c3

assets/css/_custom.css

@@ -2,6 +2,7 @@
 @import './_tour-map.css';
 
 .header__intro_headline {
+  margin: 0;
   font: bold var(--fs-xxl) "Arial";
   padding-bottom: 10px;
 }
@@ -33,6 +34,7 @@ th, td {
         --color-header-bg: #242424;
         --color-text: #faf5f5;
         --color-link: #66f2ff;
+        --color-link-visited: #66f2ff;
         --color-footer-bg: #242424;
         --color-border: #faf5f5;
         --color-button: #141414;
@@ -50,7 +52,9 @@ th, td {
     .main-menu a:active {
         text-decoration: none;
     }
-    a {
+    /* Links in text keep their underline: the link colour alone is too close to the text colour. */
+    nav a,
+    .header a {
         text-decoration: none;
     }
 }
@@ -61,4 +65,44 @@ h2 a {
 
 .title-post-date {
   margin-left: 0em;
-}
+}
+/* Visible when focused with the keyboard; the visually-hidden class hides it otherwise. */
+.skip-link:focus {
+  position: absolute;
+  inset-block-start: 0.5rem;
+  inset-inline-start: 0.5rem;
+  z-index: 100;
+  padding: 0.5rem 1rem;
+  background: var(--color-button);
+  color: var(--color-button-text);
+}
+
+#main-content:focus {
+  outline: none;
+}
+
+/* Content images with their credit, see layouts/_markup/render-image.html. */
+.content-image {
+  margin: 1rem 0;
+
+  img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+span.content-image {
+  display: inline-block;
+  vertical-align: top;
+  max-width: 100%;
+  margin: 0 0.5rem 0.5rem 0;
+}
+
+.content-image__credit {
+  display: block;
+  margin-block-start: 0.25rem;
+  font-family: var(--ff-alt);
+  font-size: var(--fs-xs);
+  color: var(--color-text-meta);
+}