@nationalarchives/frontend 0.1.18-prerelease → 0.1.20-prerelease

package/nationalarchives/components/grid/grid.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/utilities/_typography.scss","../../../../src/nationalarchives/utilities/_a11y.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/utilities/_global.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/utilities/_overrides.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/variables/_grid.scss","../../../../src/nationalarchives/components/grid/grid.scss","../../../../src/nationalarchives/tools/_grid.scss"],"names":[],"mappings":"CAQQ,6CCRR,qBACE,qBACA,sBACA,oBACA,qBAEA,6BACA,uBACA,wBACA,sBAEA,2BAEA,iCAEA,oBAEA,0CAEA,yDAEE,YCkJJ,0BACE,uCACA,uCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAhFA,yBAEA,4CAPA,4BACA,uBAuHF,0DACE,qCACA,qCACA,uCACA,2BACA,2CACA,iCACA,2CA1HA,sBAEA,0CAPA,4BACA,uBAiJF,8BA7IE,yBAEA,gDA8IA,qBACA,kBACA,oCACA,aACA,wBACA,gBACA,wBACA,oBACA,0BAIA,0BAIA,gCC/PF,4EACE,mBAEA,8IACE,gBCDJ,MFKI,olCEDJ,cACE,gBACA,WACA,YAEA,kBACA,gBACA,iCAEA,eF+EA,yBAEA,wCE7EA,2BFwBE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DE5BF,4BFdE,olCEiBA,mCAHF,4BFRE,snCEeA,+BAPF,4BFFE,8/BEYE,8BACE,kCAIJ,+DAfF,4BFIE,kjCEgBF,2BFlCE,olCEsCF,0BFhCE,qnCEoCF,mCF9BE,8/BEiCA,qCACE,iCAGF,4DF/BA,ijCE0CF,6BFpCE,0BACA,qCACA,8CACA,oCACA,oCACA,mDACA,+BACA,uCACA,gDACA,qDACA,4CE8BF,2BF5BE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DASE,sCAEE,6BACA,wCACA,8CACA,+CEYN,6BFhCE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DASE,sCAOE,6BACA,wCACA,8CACA,+CEWN,4BFpCE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DASE,sCAYE,6BACA,wCACA,8CACA,+CEUN,2BFxCE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DASE,sCAiBE,6BACA,wCACA,8CACA,+CESN,+BACE,gBACE,0BACA,4BAKN,oBACE,gBACA,SACA,UAEA,cAEA,oFACE,aACA,sBAEA,6GACE,OAKN,6BAKE,eAEA,cAGF,aAEE,WAGF,SACE,aAGF,QAEE,uBFSA,sBAEA,mCETA,uBAGF,GACE,c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","file":"grid.css","sourcesContent":["@use \"sass:math\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n@use \"../variables/assets\";\n@use \"../variables/grid\";\n\n@import \"https://use.typekit.net/hkj3kuz.css\";\n\n@font-face {\n  font-family: \"Open Sans\";\n  src: url(\"#{assets.$tna-font-path}/OpenSans-Medium.ttf\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Open Sans\";\n  src: url(\"#{assets.$tna-font-path}/OpenSans-Bold.ttf\");\n  font-weight: bold;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Roboto Mono\";\n  src: url(\"#{assets.$tna-font-path}/RobotoMono-Regular.ttf\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n.tna-template {\n  @include colour.colour-font(\"font-base\");\n  @include typography.main-font;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n  -webkit-text-size-adjust: none;\n  direction: ltr;\n}\n\n.tna-template__body {\n  color: inherit;\n  @include typography.relative-font-size(18);\n  // line-height: 1.6;\n  line-height: #{math.div(16, 18) * 2};\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nul,\nol {\n  margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n  @include typography.main-font-weight-bold;\n}\n\np {\n  margin: 0 0 1.5rem;\n\n  @include media.on-tiny {\n    margin-bottom: 1rem;\n  }\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\na {\n  @include colour.colour-font(\"link\");\n  text-decoration-thickness: 1.5px;\n\n  &:visited {\n    @include colour.colour-font(\"link-visited\");\n  }\n\n  &:hover,\n  &:active {\n    @include typography.interacted-text-decoration;\n  }\n\n  &.tna-chip {\n    text-decoration: none;\n\n    &,\n    &:link,\n    &:visited {\n      @include colour.colour-font(\"font-dark\");\n    }\n\n    &:hover {\n      @include typography.interacted-text-decoration;\n    }\n  }\n}\n\n.tna-ul,\n.tna-ol {\n  margin-top: 0;\n  margin-right: 0;\n  margin-left: 0;\n  padding: 0 0 0 2rem;\n\n  @include spacing.space-below;\n\n  li::marker {\n    @include colour.colour-font(\"accent-background\");\n    font-weight: 700;\n  }\n\n  &--plain {\n    padding-left: 0;\n\n    list-style: none;\n  }\n}\n\n%chip {\n  max-width: max-content;\n  padding: 0.375em 0.5rem;\n\n  display: block;\n\n  @include colour.colour-font(\"font-dark\");\n  @include typography.detail-font-small;\n  line-height: 1;\n\n  @include colour.accent;\n}\n\n.tna-chip {\n  @extend %chip;\n}\n\n.tna-chip-list {\n  padding-left: 0;\n\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n\n  list-style: none;\n\n  @include spacing.space-below;\n\n  &__item {\n  }\n}\n\n%heading {\n  @include colour.colour-font(\"font-dark\");\n  @include typography.heading-font;\n\n  a {\n    display: inline-block;\n\n    &::after {\n      padding-left: 0.25rem;\n\n      display: inline-block;\n\n      font-weight: 700;\n\n      content: \"\\203A\";\n    }\n\n    &:hover {\n      &::after {\n        padding-left: 0.5rem;\n      }\n    }\n  }\n}\n\n%heading-xl {\n  @include typography.relative-font-size(64);\n  line-height: 1.2;\n\n  @include media.on-medium {\n    // @include typography.relative-font-size(42);\n    @include typography.relative-font-size(50);\n  }\n\n  @include media.on-mobile {\n    @include typography.relative-font-size(36);\n  }\n}\n\n%heading-l {\n  @include typography.relative-font-size(32);\n  line-height: 1.4;\n\n  @include media.on-medium {\n    // @include typography.relative-font-size(26);\n    @include typography.relative-font-size(28);\n  }\n\n  @include media.on-mobile {\n    @include typography.relative-font-size(24);\n  }\n}\n\n%heading-m {\n  @include typography.relative-font-size(20);\n  line-height: 1.6;\n}\n\n%heading-s {\n  @include typography.relative-font-size(18);\n  line-height: 1.6;\n}\n\n.tna-heading {\n  @extend %heading;\n\n  &--xl {\n    @extend %heading-xl;\n  }\n\n  &--l {\n    @extend %heading-l;\n  }\n\n  &--m {\n    @extend %heading-m;\n  }\n\n  &--s {\n    @extend %heading-s;\n  }\n}\n\n.tna-hgroup {\n  &__supertitle {\n    margin: 0 0 0.5rem;\n\n    @extend %chip;\n  }\n\n  &__title {\n    margin: 0;\n\n    display: block;\n\n    @extend %heading;\n  }\n\n  &--xl &__title {\n    @extend %heading-xl;\n  }\n\n  &--l &__title {\n    @extend %heading-l;\n  }\n\n  &--m &__title {\n    @extend %heading-m;\n  }\n\n  &--s &__title {\n    @extend %heading-s;\n  }\n}\n\n.tna-heading,\n.tna-hgroup {\n  margin-top: 3rem;\n  margin-bottom: 1rem;\n\n  &:first-child {\n    margin-top: 0;\n  }\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n.tna-blockquote {\n  margin-top: 0;\n  margin-right: 0;\n  margin-left: 0;\n  padding: 1rem 1rem 1rem 2rem;\n\n  @include colour.colour-border(\"accent-background\", 0.35rem, solid, left);\n\n  @include spacing.space-below;\n\n  &__quote {\n    font-weight: 700;\n  }\n\n  &__author {\n    font-style: italic;\n\n    .tna-blockquote & {\n      margin: 1rem 0 0;\n    }\n\n    &::before {\n      content: \"\\2014\" \" \";\n    }\n  }\n}\n\n.tna-scene-setter {\n  @include typography.detail-font;\n  @include colour.colour-font(\"font-dark\");\n  @include typography.relative-font-size(30);\n  line-height: math.div(50, 30);\n\n  @include spacing.space-below;\n\n  @include media.on-mobile {\n    @include typography.relative-font-size(24);\n    line-height: 2;\n  }\n\n  a {\n    color: inherit;\n    text-decoration-thickness: 2px;\n\n    &:hover {\n      text-decoration-thickness: 4.5px;\n    }\n  }\n}\n\n.tna-columns {\n  column-gap: grid.$gutter-width;\n\n  &--2 {\n    column-count: 2;\n  }\n\n  &--3 {\n    column-count: 3;\n  }\n\n  @include media.on-mobile {\n    column-gap: grid.$gutter-width-mobile;\n  }\n\n  @include media.on-small {\n    @for $i from 1 through 4 {\n      &--#{$i}-small {\n        column-count: $i;\n      }\n    }\n  }\n\n  @include media.on-tiny {\n    @for $i from 1 through 4 {\n      &--#{$i}-tiny {\n        column-count: $i;\n      }\n    }\n  }\n\n  &__block {\n    break-inside: avoid;\n  }\n\n  &:has(&__block:only-of-type) {\n    column-count: 1;\n  }\n}\n",".tna-visually-hidden {\n  width: 1px !important;\n  height: 1px !important;\n  margin: 0 !important;\n  padding: 0 !important;\n\n  position: absolute !important;\n  top: -9999px !important;\n  left: -9999px !important;\n  z-index: -1 !important;\n\n  overflow: hidden !important;\n\n  clip: rect(0, 0, 0, 0) !important;\n\n  border: 0 !important;\n\n  background-color: transparent !important;\n\n  &::before,\n  &::after {\n    content: \"\\00a0\";\n  }\n}\n","@use \"sass:map\";\n@use \"../features\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour) {\n  @return map.get(colour.$colour-palette-brand, $colour);\n}\n\n@mixin colour-css-vars() {\n  @each $name, $value in colour.$colour-palette-default {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin colour-css-vars-dark() {\n  @each $name, $value in colour.$colour-palette-dark {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin colour-css-vars-high-contrast() {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent: #{brand-colour(\"yellow\")} !important;\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{rgba(brand-colour(\"black\"), 0.7)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{rgba(brand-colour(\"black\"), 0.5)} !important;\n    --accent-keyline-dark: #{rgba(brand-colour(\"black\"), 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{rgba(brand-colour(\"white\"), 0.7)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{rgba(brand-colour(\"white\"), 0.5)} !important;\n    --accent-keyline-dark: #{rgba(brand-colour(\"white\"), 0.8)} !important;\n\n    @if $colour == \"black\" {\n      // --accent: #{brand-colour(\"light-grey\")} !important;\n      // --accent-background: #{brand-colour(\"black\")} !important;\n      // --accent-background-light: #{brand-colour(\"light-grey\")} !important;\n      // --button-accent-text: #{brand-colour(\"black\")} !important;\n      // --button-accent-background: #{brand-colour(\"grey\")} !important;\n    } @else {\n      --button-accent-text: #{brand-colour(\"white\")} !important;\n      @if $colour == \"pink\" {\n        --accent: #{brand-colour(\"pink\")} !important;\n        --accent-background: #{brand-colour(\"maroon\")} !important;\n        --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n        --button-accent-background: #{brand-colour(\"maroon\")} !important;\n      } @else if $colour == \"orange\" {\n        --accent: #{brand-colour(\"orange\")} !important;\n        --accent-background: #{brand-colour(\"chestnut\")} !important;\n        --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n        --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n      } @else if $colour == \"green\" {\n        --accent: #{brand-colour(\"green\")} !important;\n        --accent-background: #{brand-colour(\"forest\")} !important;\n        --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n        --button-accent-background: #{brand-colour(\"forest\")} !important;\n      } @else if $colour == \"blue\" {\n        --accent: #{brand-colour(\"blue\")} !important;\n        --accent-background: #{brand-colour(\"navy\")} !important;\n        --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n        --button-accent-background: #{brand-colour(\"navy\")} !important;\n      }\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $important: false) {\n  outline-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  outline-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%fixed {\n  @include colour-css-vars;\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin fixed {\n  @extend %fixed;\n}\n\n%invert {\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"contrast-background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin invert {\n  @extend %invert;\n}\n\n%invert-on-mobile {\n  @include media.on-mobile {\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"contrast-background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin invert-on-mobile {\n  @extend %invert-on-mobile;\n}\n\n%accent {\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link-visited);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"accent-background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%light-accent-background {\n  @include colour-background(\"accent-background-light\");\n\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --link: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n}\n\n@mixin light-accent-background {\n  @extend %light-accent-background;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n","@use \"sass:map\";\n@use \"../variables/spacing\";\n\n%space-below {\n  margin-bottom: 2rem;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n@mixin space-below {\n  @extend %space-below;\n}\n\n@function spacing($size) {\n  @return map.get(spacing.$spacing, $size);\n}\n\n@function spacing-mobile($size) {\n  @return map.get(spacing.$spacing-mobile, $size);\n}\n","@use \"../features\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../variables/typography\";\n\n:root {\n  @include colour.colour-css-vars;\n}\n\n.tna-template {\n  min-width: 320px;\n  width: 100%;\n  height: 100%;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n\n  font-size: #{typography.$base-font-size-px}px;\n\n  @include colour.colour-background(\"page-background\");\n\n  accent-color: var(--accent);\n\n  &--system-theme {\n    @include colour.colour-css-vars;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour.colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) {\n      @include colour.colour-css-vars-high-contrast;\n\n      * {\n        background-image: none !important;\n      }\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour.colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  &--light-theme {\n    @include colour.colour-css-vars;\n  }\n\n  &--dark-theme {\n    @include colour.colour-css-vars-dark;\n  }\n\n  &--high-contrast-theme {\n    @include colour.colour-css-vars-high-contrast;\n\n    * {\n      background-image: none !important;\n    }\n\n    &.tna-template--dark-theme {\n      @include colour.colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  @include colour.accent-css-vars(\"black\"); // TODO: Temp\n\n  // &--black-accent {\n  //   @include colour.accent-css-vars(\"black\");\n  // }\n\n  &--yellow-accent {\n    @include colour.accent-css-vars(\"yellow\");\n  }\n\n  &--pink-accent {\n    @include colour.accent-css-vars(\"pink\");\n  }\n\n  &--orange-accent {\n    @include colour.accent-css-vars(\"orange\");\n  }\n\n  &--green-accent {\n    @include colour.accent-css-vars(\"green\");\n  }\n\n  &--blue-accent {\n    @include colour.accent-css-vars(\"blue\");\n  }\n\n  @media (prefers-reduced-motion) {\n    * {\n      animation: none !important;\n      transition: none !important;\n    }\n  }\n}\n\n.tna-template__body {\n  min-height: 100%;\n  margin: 0;\n  padding: 0;\n\n  overflow: auto;\n\n  &:has(.tna-header):has(#main-content[role=\"main\"]):has(.tna-footer) {\n    display: flex;\n    flex-direction: column;\n\n    #main-content[role=\"main\"] {\n      flex: 1;\n    }\n  }\n}\n\nimg,\nsvg,\npicture,\nvideo,\ncanvas {\n  max-width: 100%;\n\n  display: block;\n}\n\nvideo,\ncanvas {\n  width: 100%;\n}\n\n[hidden] {\n  display: none;\n}\n\n*:focus {\n  // outline: 0.3125rem colour.$focus-colour solid;\n  outline: 0.3125rem solid;\n  @include colour.colour-outline(\"focus-outline\");\n  outline-offset: 0.125rem;\n}\n\nhr {\n  margin: 2rem 0;\n\n  border-width: 1px 0 0;\n  @include colour.colour-border(\"keyline\");\n  border-style: solid;\n\n  // @include colour.on-high-contrast {\n  //   border-style: solid;\n  // }\n}\n\n.tna-section {\n  padding-top: 3rem;\n  padding-bottom: 3rem;\n\n  @include media.on-mobile {\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n  }\n}\n\n.tna-aside {\n  padding: 2rem;\n\n  @include spacing.space-below;\n\n  @include media.on-mobile {\n    padding: 1rem;\n  }\n\n  @include colour.on-high-contrast {\n    @include colour.colour-border(\"keyline-dark\", 1px);\n  }\n}\n\n.tna-background--contrast {\n  @include colour.invert;\n}\n\n.tna-background--accent {\n  @include colour.accent;\n}\n\n.tna-background--accent-light {\n  @include colour.light-accent-background;\n}\n","@use \"../variables/media\";\n\n//   0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n//   |         .     |         |      |\n//   |-TINY----------|-SMALL---|-MED--|-LARGE------------------------\n//   |         .     |         |      |\n//   |<------------->|         |      |            on-tiny\n//   |<----------------------->|      |            on-mobile\n//   |<------------------------------>|            on-smaller-than-large\n//   |         .     |<------->|      |            on-small\n//   |         .     |<-------------------------   on-larger-than-tiny\n//   |         .     |         |<---->|            on-medium\n//   |         .     |         |<---------------   on-larger-than-mobile\n//   |         .     |         |      |<--------   on-large\n//   |<------->.     |         |      |            Smallest device\n\n@mixin on-large() {\n  @media #{media.$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{media.$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{media.$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{media.$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{media.$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{media.$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{media.$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{media.$media-mobile} {\n    @content;\n  }\n}\n","@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n@mixin no-spacing-generator($suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n      .tna-\\!--no-#{$property}-vertical#{$suffix} {\n        #{$property}-#{$direction}: 0 !important;\n      }\n    }\n  }\n}\n\n@mixin overrides($spacing, $suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      @each $size, $amount in $spacing {\n        .tna-\\!--#{$property}-#{$direction}-#{$size}#{$suffix},\n        .tna-\\!--#{$property}-vertical-#{$size}#{$suffix} {\n          #{$property}-#{$direction}: #{$amount} !important;\n        }\n      }\n    }\n  }\n}\n\n@include no-spacing-generator;\n@include overrides(spacing.$spacing);\n\n@include media.on-medium {\n  @include no-spacing-generator(\"medium\");\n  @include overrides(spacing.$spacing, \"medium\");\n}\n\n@include media.on-small {\n  @include no-spacing-generator(\"small\");\n  @include overrides(spacing.$spacing-mobile, \"small\");\n}\n\n@include media.on-tiny {\n  @include no-spacing-generator(\"tiny\");\n  @include overrides(spacing.$spacing-mobile, \"tiny\");\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n  font-size: #{math.div($fontSizePx, typography.$base-font-size-px)}rem;\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$font-weight-main;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$font-weight-main-bold;\n}\n\n@mixin main-font {\n  font-family: typography.$font-family-main;\n  @include main-font-weight;\n}\n\n@mixin heading-font {\n  font-family: typography.$font-family-heading;\n  font-weight: typography.$font-weight-heading;\n}\n\n@mixin detail-font {\n  font-family: typography.$font-family-detail;\n  font-weight: typography.$font-weight-detail;\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include relative-font-size(14);\n  text-transform: uppercase;\n  line-height: #{math.div(typography.$base-font-size-px, 14)};\n  // line-height: 1;\n}\n","$base-font-size-px: 16;\n\n$interactive-text-decoration-thickness: 3.5px;\n\n$font-family-main: \"Open Sans\", serif;\n// $font-weight-main: 500;\n$font-weight-main: normal;\n// $font-weight-main-bold: 700;\n$font-weight-main-bold: bold;\n\n$font-family-heading: supria-sans-condensed, \"Arial Narrow\", sans-serif;\n$font-weight-heading: 400;\n\n$font-family-detail: \"Roboto Mono\", monospace;\n// $font-weight-detail: 400;\n$font-weight-detail: normal;\n","$largest-container-width: 75.25rem !default;\n\n$gutter-width: 2rem !default;\n$gutter-width-mobile: 1.5rem !default;\n\n$column-count: 12 !default;\n$column-count-medium: 6 !default;\n$column-count-small: 4 !default;\n$column-count-tiny: 2 !default;\n","@use \"sass:math\";\n@use \"../../variables/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/grid\" as tools;\n@use \"../../utilities\";\n\n.tna-container {\n  max-width: grid.$largest-container-width;\n  width: 100%;\n  margin-right: auto;\n  margin-left: auto;\n  padding-right: math.div(grid.$gutter-width, 2);\n  padding-left: math.div(grid.$gutter-width, 2);\n\n  box-sizing: border-box;\n\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: stretch;\n  align-items: stretch;\n\n  &--no-padding,\n  &--no-padding-all {\n    max-width: grid.$largest-container-width - (grid.$gutter-width * 2);\n  }\n\n  &--max {\n    max-width: none;\n  }\n}\n\n.tna-column {\n  margin: 0;\n  padding-right: math.div(grid.$gutter-width, 2);\n  padding-left: math.div(grid.$gutter-width, 2);\n\n  box-sizing: border-box;\n\n  &--container {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: stretch;\n    align-items: stretch;\n  }\n}\n\n@include tools.columns-generator(grid.$column-count);\n\n@include media.on-medium {\n  @include tools.columns-generator(grid.$column-count-medium, \"medium\");\n}\n\n@include media.on-mobile {\n  .tna-container {\n    padding-right: math.div(grid.$gutter-width-mobile, 2);\n    padding-left: math.div(grid.$gutter-width-mobile, 2);\n  }\n\n  .tna-column {\n    padding-right: math.div(grid.$gutter-width-mobile, 2);\n    padding-left: math.div(grid.$gutter-width-mobile, 2);\n  }\n}\n\n@include media.on-small {\n  @include tools.columns-generator(grid.$column-count-small, \"small\");\n}\n\n@include media.on-tiny {\n  @include tools.columns-generator(grid.$column-count-tiny, \"tiny\");\n}\n\n.tna-container--no-padding,\n.tna-container--no-padding-all,\n.tna-container--no-padding-all > .tna-column,\n.tna-column--no-padding,\n.tna-column--container--no-padding-all,\n.tna-column--container--no-padding-all > .tna-column {\n  padding-right: 0;\n  padding-left: 0;\n}\n","@use \"sass:math\";\n@use \"../variables/grid\";\n\n@mixin columns-generator($count, $suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n\n  .tna-column {\n    &--full#{$suffix} {\n      width: 100%;\n      flex: none;\n    }\n\n    @for $i from 1 through $count - 1 {\n      $simplest-fraction-found: false;\n\n      @for $j from math.div($count, 2) through 1 {\n        @if (\n          $count % $j == 0 and $i % $j == 0 and $simplest-fraction-found != true\n        ) {\n          &--width-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n            width: math.div(100%, $count) * $i;\n            flex: none;\n          }\n\n          // .column--margin-right-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n          //   margin-right: math.div(100%, $count) * $i;\n          // }\n\n          // .column--margin-left-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n          //   margin-left: math.div(100%, $count) * $i;\n          // }\n\n          $simplest-fraction-found: true;\n        }\n      }\n\n      @if $simplest-fraction-found != true {\n        &--width-#{$i}-#{$count}#{$suffix} {\n          width: math.div(100%, $count) * $i;\n          flex: none;\n        }\n\n        //   .column--margin-right-#{$i}-#{$count}#{$suffix} {\n        //     margin-right: math.div(100%, $count) * $i;\n        //   }\n\n        //   .column--margin-left-#{$i}-#{$count}#{$suffix} {\n        //     margin-left: math.div(100%, $count) * $i;\n        //   }\n      }\n    }\n\n    @for $i from 1 through 3 {\n      &--flex-#{$i}#{$suffix} {\n        width: auto;\n\n        flex: $i 0;\n      }\n    }\n\n    @for $i from 1 through 4 {\n      &--order-#{$i}#{$suffix} {\n        order: $i;\n      }\n    }\n  }\n}\n"]}

package/nationalarchives/components/grid/grid.scss

@@ -0,0 +1,81 @@
+@use "sass:math";
+@use "../../variables/grid";
+@use "../../tools/media";
+@use "../../tools/grid" as tools;
+@use "../../utilities";
+
+.tna-container {
+  max-width: grid.$largest-container-width;
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: math.div(grid.$gutter-width, 2);
+  padding-left: math.div(grid.$gutter-width, 2);
+
+  box-sizing: border-box;
+
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: stretch;
+  align-items: stretch;
+
+  &--no-padding,
+  &--no-padding-all {
+    max-width: grid.$largest-container-width - (grid.$gutter-width * 2);
+  }
+
+  &--max {
+    max-width: none;
+  }
+}
+
+.tna-column {
+  margin: 0;
+  padding-right: math.div(grid.$gutter-width, 2);
+  padding-left: math.div(grid.$gutter-width, 2);
+
+  box-sizing: border-box;
+
+  &--container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: stretch;
+    align-items: stretch;
+  }
+}
+
+@include tools.columns-generator(grid.$column-count);
+
+@include media.on-medium {
+  @include tools.columns-generator(grid.$column-count-medium, "medium");
+}
+
+@include media.on-mobile {
+  .tna-container {
+    padding-right: math.div(grid.$gutter-width-mobile, 2);
+    padding-left: math.div(grid.$gutter-width-mobile, 2);
+  }
+
+  .tna-column {
+    padding-right: math.div(grid.$gutter-width-mobile, 2);
+    padding-left: math.div(grid.$gutter-width-mobile, 2);
+  }
+}
+
+@include media.on-small {
+  @include tools.columns-generator(grid.$column-count-small, "small");
+}
+
+@include media.on-tiny {
+  @include tools.columns-generator(grid.$column-count-tiny, "tiny");
+}
+
+.tna-container--no-padding,
+.tna-container--no-padding-all,
+.tna-container--no-padding-all > .tna-column,
+.tna-column--no-padding,
+.tna-column--container--no-padding-all,
+.tna-column--container--no-padding-all > .tna-column {
+  padding-right: 0;
+  padding-left: 0;
+}