@nationalarchives/frontend 0.1.22-prerelease → 0.1.24-prerelease

package/nationalarchives/utilities/_colour.scss

@@ -0,0 +1,100 @@
+@use "../tools/colour";
+
+:root {
+  @include colour.colour-css-vars;
+}
+
+.tna-template {
+  @include colour.colour-background("page-background");
+
+  accent-color: var(--accent);
+
+  &--system-theme {
+    @include colour.colour-css-vars;
+
+    @media (prefers-color-scheme: dark) {
+      @include colour.colour-css-vars-dark;
+    }
+
+    @media (prefers-contrast: more) {
+      @include colour.colour-css-vars-high-contrast;
+
+      * {
+        background-image: none !important;
+      }
+    }
+
+    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
+      @include colour.colour-css-vars-high-contrast-dark;
+    }
+  }
+
+  &--light-theme {
+    @include colour.colour-css-vars;
+  }
+
+  &--dark-theme {
+    @include colour.colour-css-vars-dark;
+  }
+
+  &--high-contrast-theme {
+    @include colour.colour-css-vars-high-contrast;
+
+    * {
+      background-image: none !important;
+    }
+
+    &.tna-template--dark-theme {
+      @include colour.colour-css-vars-high-contrast-dark;
+    }
+  }
+
+  &--black-accent {
+    @include colour.accent-css-vars("black");
+  }
+
+  &--yellow-accent {
+    @include colour.accent-css-vars("yellow");
+  }
+
+  &--pink-accent {
+    @include colour.accent-css-vars("pink");
+  }
+
+  &--orange-accent {
+    @include colour.accent-css-vars("orange");
+  }
+
+  &--green-accent {
+    @include colour.accent-css-vars("green");
+  }
+
+  &--blue-accent {
+    @include colour.accent-css-vars("blue");
+  }
+
+  @media (prefers-reduced-motion) {
+    * {
+      animation: none !important;
+      transition: none !important;
+    }
+  }
+}
+
+.tna-background {
+  &-tint {
+    @include colour.tint;
+  }
+
+  &-contrast {
+    @include colour.contrast;
+  }
+
+  &-accent {
+    @include colour.accent;
+  }
+
+  &-accent-light {
+    @include colour.accent-light;
+  }
+}

package/nationalarchives/utilities/_global.scss

@@ -3,10 +3,6 @@
 @use "../tools/spacing";
 @use "../variables/typography";
 
-:root {
-  @include colour.colour-css-vars;
-}
-
 .tna-template {
   min-width: 320px;
   width: 100%;
@@ -23,81 +19,6 @@
   -webkit-overflow-scrolling: touch;
 
   font-size: #{typography.$relative-1rem-px}px;
-
-  @include colour.colour-background("page-background");
-
-  accent-color: var(--accent);
-
-  &--system-theme {
-    @include colour.colour-css-vars;
-
-    @media (prefers-color-scheme: dark) {
-      @include colour.colour-css-vars-dark;
-    }
-
-    @media (prefers-contrast: more) {
-      @include colour.colour-css-vars-high-contrast;
-
-      * {
-        background-image: none !important;
-      }
-    }
-
-    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
-      @include colour.colour-css-vars-high-contrast-dark;
-    }
-  }
-
-  &--light-theme {
-    @include colour.colour-css-vars;
-  }
-
-  &--dark-theme {
-    @include colour.colour-css-vars-dark;
-  }
-
-  &--high-contrast-theme {
-    @include colour.colour-css-vars-high-contrast;
-
-    * {
-      background-image: none !important;
-    }
-
-    &.tna-template--dark-theme {
-      @include colour.colour-css-vars-high-contrast-dark;
-    }
-  }
-
-  &--black-accent {
-    @include colour.accent-css-vars("black");
-  }
-
-  &--yellow-accent {
-    @include colour.accent-css-vars("yellow");
-  }
-
-  &--pink-accent {
-    @include colour.accent-css-vars("pink");
-  }
-
-  &--orange-accent {
-    @include colour.accent-css-vars("orange");
-  }
-
-  &--green-accent {
-    @include colour.accent-css-vars("green");
-  }
-
-  &--blue-accent {
-    @include colour.accent-css-vars("blue");
-  }
-
-  @media (prefers-reduced-motion) {
-    * {
-      animation: none !important;
-      transition: none !important;
-    }
-  }
 }
 
 .tna-template__body {
@@ -109,7 +30,7 @@
     display: flex;
     flex-direction: column;
 
-    #main-content[role="main"] {
+    #main-content {
       flex: 1;
     }
   }
@@ -121,6 +42,7 @@ picture,
 video,
 canvas {
   max-width: 100%;
+  height: auto;
 
   display: block;
 }
@@ -169,21 +91,3 @@ hr {
     padding: 1rem;
   }
 }
-
-.tna-background {
-  &--contrast {
-    @include colour.invert;
-  }
-
-  &--accent {
-    @include colour.accent;
-  }
-
-  &--accent-light {
-    @include colour.light-accent-background;
-  }
-
-  &--tint {
-    @include colour.tint-background;
-  }
-}

package/nationalarchives/utilities/_index.scss

@@ -1,4 +1,5 @@
 @use "a11y";
+@use "colour";
 @use "columns";
 @use "debug";
 @use "global";

package/nationalarchives/utilities/_lists.scss

@@ -5,7 +5,7 @@
 
 .tna-ul,
 .tna-ol {
-  margin: 1rem 0;
+  margin: 1rem 0 0;
   padding: 0 0 0 2rem;
 
   &:first-child {
@@ -25,7 +25,7 @@
 }
 
 .tna-dl {
-  margin: 1rem 0;
+  margin: 1rem 0 0;
 
   display: flex;
   flex-wrap: wrap;
@@ -44,7 +44,6 @@
     box-sizing: border-box;
 
     word-wrap: break-word;
-    // word-break: break-all;
   }
 
   &--plain {
@@ -146,11 +145,6 @@
 
       dd {
         padding-top: 0;
-        // padding-left: 2rem;
-
-        + dt {
-          // @include colour.colour-border("keyline", 1px, solid, top);
-        }
       }
     }
 
@@ -170,9 +164,6 @@
 
     dt,
     dd {
-      // padding-left: 0;
-      // padding-right: 0;
-
       background: transparent !important;
 
       @include colour.colour-border("keyline-dark", 1px, solid, top);

package/nationalarchives/utilities/_overrides.scss

@@ -1,52 +1,32 @@
-@use "../variables/spacing";
+@use "sass:map";
 @use "../tools/media";
+@use "../tools/spacing";
 
-@mixin no-spacing-generator($suffix: "") {
-  @if $suffix != "" {
-    $suffix: "-" + $suffix;
-  }
-
-  @each $property in margin, padding {
-    @each $direction in top, bottom {
-      .tna-\!--no-#{$property}-#{$direction}#{$suffix},
-      .tna-\!--no-#{$property}-vertical#{$suffix} {
-        #{$property}-#{$direction}: 0 !important;
-      }
-    }
+@mixin hide-on($suffix) {
+  .tna-\!--hide-on-#{$suffix} {
+    display: none;
   }
 }
 
-@mixin overrides($spacing, $suffix: "") {
-  @if $suffix != "" {
-    $suffix: "-" + $suffix;
-  }
+@include spacing.no-spacing-generator;
+@include spacing.spacing-generator;
 
-  @each $property in margin, padding {
-    @each $direction in top, bottom {
-      @each $size, $amount in $spacing {
-        .tna-\!--#{$property}-#{$direction}-#{$size}#{$suffix},
-        .tna-\!--#{$property}-vertical-#{$size}#{$suffix} {
-          #{$property}-#{$direction}: #{$amount} !important;
-        }
-      }
-    }
-  }
+@include media.on-large {
+  @include spacing.no-spacing-generator("large");
+  @include hide-on("large");
 }
 
-@include no-spacing-generator;
-@include overrides(spacing.$spacing);
-
 @include media.on-medium {
-  @include no-spacing-generator("medium");
-  @include overrides(spacing.$spacing, "medium");
+  @include spacing.no-spacing-generator("medium");
+  @include hide-on("medium");
 }
 
 @include media.on-small {
-  @include no-spacing-generator("small");
-  @include overrides(spacing.$spacing-mobile, "small");
+  @include spacing.no-spacing-generator("small");
+  @include hide-on("small");
 }
 
 @include media.on-tiny {
-  @include no-spacing-generator("tiny");
-  @include overrides(spacing.$spacing-mobile, "tiny");
+  @include spacing.no-spacing-generator("tiny");
+  @include hide-on("tiny");
 }

package/nationalarchives/utilities/_typography.scss

@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:selector";
 @use "../tools/colour";
 @use "../tools/media";
 @use "../tools/spacing";
@@ -7,30 +8,41 @@
 @use "../variables/grid";
 @use "../variables/typography" as typographyVars;
 
-@import "https://use.typekit.net/hkj3kuz.css";
-
-@font-face {
-  font-family: "Open Sans";
-  src: url("#{assets.$tna-font-path}/OpenSans-Medium.ttf");
-  font-weight: normal;
-  font-style: normal;
-  // font-display: swap;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf");
-  font-weight: bold;
-  font-style: normal;
-  // font-display: swap;
-}
-
-@font-face {
-  font-family: "Roboto Mono";
-  src: url("#{assets.$tna-font-path}/RobotoMono-Regular.ttf");
-  font-weight: normal;
-  font-style: normal;
-  // font-display: swap;
+@if typographyVars.$use-local-fonts {
+  @font-face {
+    font-family: "Open Sans";
+    src: url("#{assets.$tna-font-path}/OpenSans-Regular.ttf");
+    font-weight: typographyVars.$main-font-weight;
+    font-style: normal;
+    // font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Open Sans";
+    src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf");
+    font-weight: typographyVars.$main-font-weight-bold;
+    font-style: normal;
+    // font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Roboto Mono";
+    src: url("#{assets.$tna-font-path}/RobotoMono-Regular.ttf");
+    font-weight: typographyVars.$detail-font-weight;
+    font-style: normal;
+    // font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Roboto Mono";
+    src: url("#{assets.$tna-font-path}/RobotoMono-Medium.ttf");
+    font-weight: typographyVars.$detail-font-weight-bold;
+    font-style: normal;
+    // font-display: swap;
+  }
+} @else {
+  // @import "https://use.typekit.net/hkj3kuz.css";
+  @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@#{typographyVars.$main-font-weight};#{typographyVars.$main-font-weight-bold}&family=Roboto+Mono:wght@#{typographyVars.$detail-font-weight};#{typographyVars.$detail-font-weight-bold}&display=swap"); /* stylelint-disable-line */
 }
 
 .tna-template {
@@ -66,18 +78,16 @@ ol {
   margin-top: 0;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
 strong {
   @include typography.main-font-weight-bold;
 }
 
 p {
-  margin: 1rem 0 0;
+  margin: 2rem 0 0;
+
+  + p {
+    margin-top: 1rem;
+  }
 
   &:first-child {
     margin-top: 0;
@@ -85,9 +95,13 @@ p {
 }
 
 a {
-  @include colour.colour-font("link");
   text-decoration-thickness: 1.5px;
 
+  &,
+  &:link {
+    @include colour.colour-font("link");
+  }
+
   &:visited {
     @include colour.colour-font("link-visited");
   }
@@ -96,6 +110,28 @@ a {
   &:active {
     @include typography.interacted-text-decoration;
   }
+
+  &.tna-link--no-visited-state {
+    &:visited {
+      @include colour.colour-font("link");
+    }
+  }
+
+  @include colour.on-high-contrast {
+    &:active {
+      box-shadow: none;
+    }
+
+    &:hover:not(:focus) {
+      box-shadow: 0 0 0 0.3125rem var(--link);
+    }
+  }
+
+  // &[target="_blank"]:not([title*="opens in a new"]) {
+  //   &::after {
+  //     content: "" / " (opens in a new window)"
+  //   }
+  // }
 }
 
 small {
@@ -104,6 +140,47 @@ small {
   );
 }
 
+// .tna-detail[title][data-type] {
+//   padding: 0 0.375rem;
+
+//   display: inline-flex;
+//   flex-flow: row nowrap;
+//   align-items: baseline;
+//   gap: 0.5rem;
+
+//   vertical-align: baseline;
+
+//   background-color: #ccc;
+
+//   &::after {
+//     @include colour.colour-font("font-base");
+//     @include typography.detail-font-small;
+//     vertical-align: baseline;
+
+//     content: attr(data-type) / "";
+//   }
+
+//   &[data-type="misc"] {
+//     background-color: #f28482;
+//   }
+
+//   &[data-type="loc"] {
+//     background-color: #edae49;
+//   }
+
+//   &[data-type="per"] {
+//     background-color: #b5e2fa;
+//   }
+
+//   @at-root #{selector.unify("a", &)} {
+//     @include colour.colour-font("font-base");
+
+//     &::after {
+//       text-decoration: none;
+//     }
+//   }
+// }
+
 .tna-chip-list {
   @include spacing.space-above;
   margin-bottom: 0;
@@ -125,6 +202,7 @@ small {
 
   display: block;
 
+  @include colour.colour-font("font-dark");
   @include typography.detail-font-small;
   line-height: 1;
 
@@ -137,32 +215,34 @@ small {
   @extend %chip;
 
   &--plain {
+    padding: 0;
+
     color: inherit;
 
     background-color: transparent;
 
-    border-color: transparent;
-  }
-}
-
-a.tna-chip {
-  text-decoration: none;
-
-  &,
-  &:link,
-  &:visited {
-    @include colour.colour-font("font-dark");
+    border: none;
   }
 
-  &:hover {
-    @include typography.interacted-text-decoration;
-  }
+  @at-root #{selector.unify("a", &)} {
+    text-decoration: none;
 
-  &--plain {
     &,
     &:link,
     &:visited {
-      color: inherit;
+      @include colour.colour-font("font-dark");
+    }
+
+    &:hover {
+      @include typography.interacted-text-decoration;
+    }
+
+    &--plain {
+      &,
+      &:link,
+      &:visited {
+        color: inherit;
+      }
     }
   }
 }
@@ -170,12 +250,13 @@ a.tna-chip {
 %heading {
   @include colour.colour-font("font-dark");
 
-  text-wrap: balance;
-
   &:not(.tna-heading--no-link-arrow) {
     a {
       display: inline-block;
 
+      text-wrap: balance;
+      // text-decoration-thickness: .1em;
+
       &::after {
         padding-left: 0.25rem;
 
@@ -187,6 +268,8 @@ a.tna-chip {
       }
 
       &:hover {
+        // text-decoration-thickness: .15em;
+
         &::after {
           padding-left: 0.5rem;
         }
@@ -249,7 +332,7 @@ a.tna-chip {
 
 %headings-and-heading-groups {
   @include spacing.space-above;
-  margin-bottom: 1rem;
+  margin-bottom: 0;
   padding-top: 1rem;
 
   &:first-child {
@@ -260,6 +343,10 @@ a.tna-chip {
     margin-bottom: 0;
     padding-bottom: 0;
   }
+
+  + p {
+    margin-top: 1rem;
+  }
 }
 
 .tna-heading {
@@ -296,6 +383,16 @@ a.tna-chip {
     margin: 0 0 0.25rem;
 
     @extend %chip;
+
+    &--plain {
+      padding: 0;
+
+      color: inherit;
+
+      background-color: transparent;
+
+      border: none;
+    }
   }
 
   &__title {
@@ -328,7 +425,7 @@ a.tna-chip {
   margin-left: 0;
   padding: 1rem 1rem 1rem 2rem;
 
-  @include colour.colour-border("accent-background", 0.35rem, solid, left);
+  @include colour.colour-border("accent-background", 0.375rem, solid, left);
 
   &__quote {
     font-weight: 700;
@@ -347,14 +444,21 @@ a.tna-chip {
   }
 }
 
+.tna-large-paragraph {
+  @include spacing.space-above;
+
+  @include typography.relative-font-size(22);
+  @include colour.colour-font("font-dark");
+}
+
 .tna-scene-setter {
+  @include spacing.space-above;
+
   @include typography.detail-font;
   @include colour.colour-font("font-dark");
   @include typography.relative-font-size(30);
   line-height: math.div(50, 30);
 
-  @include spacing.space-above;
-
   @include media.on-mobile {
     @include typography.relative-font-size(24);
     line-height: 2;
@@ -368,4 +472,8 @@ a.tna-chip {
       text-decoration-thickness: 4.5px;
     }
   }
+
+  &--small {
+    @include typography.relative-font-size(24);
+  }
 }