npm - @nationalarchives/frontend - Versions diffs - 0.1.36 → 0.1.38 - Mend

@nationalarchives/frontend 0.1.36 → 0.1.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (100) hide show

package/nationalarchives/components/global-header/global-header.css.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/utilities/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/utilities/_a11y.scss","../../../../src/nationalarchives/utilities/_colour.scss","../../../../src/nationalarchives/utilities/_columns.scss","../../../../src/nationalarchives/variables/_grid.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/utilities/_forms.scss","../../../../src/nationalarchives/utilities/_global.scss","../../../../src/nationalarchives/utilities/_lists.scss","../../../../src/nationalarchives/utilities/_overrides.scss","../../../../src/nationalarchives/utilities/_tables.scss","../../../../src/nationalarchives/components/grid/grid.scss","../../../../src/nationalarchives/tools/_grid.scss","../../../../src/nationalarchives/components/global-header/global-header.scss"],"names":[],"mappings":"CAmDU,qICyKV,sLACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAlJA,mCAPA,4BACA,uBA6LF,mHACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CAhMA,mCAPA,4BACA,uBAiNF,qBA7ME,yBAEA,wCAPA,cACA,uBAkOF,6BACE,6CACA,qBACA,0BACA,8BACA,iCAGA,8BACA,wBACA,kCACA,kCAIA,kCAIA,8CA/OA,mCAPA,cACA,uBA8PE,mCADF,yDAEI,gBACA,yBAIJ,uDACE,gBACA,wBCrVJ,8CAEE,qBACA,sBACA,oBACA,qBAEA,6BACA,uBACA,wBACA,sBAEA,2BAEA,iCAEA,oBAEA,0CAEA,0HAEE,YASJ,QACE,UDoGE,+BAIA,4CC5GF,uBAUA,8BACE,aCnCJ,cF+EE,yBAEA,wCE9EA,4BFCE,4hDEEA,mCAHF,4BFOE,ymDEPF,4BFaE,89CEHE,8BACE,kCAIJ,+DAfF,4BFmBE,ykDECF,2BFnBE,4hDEuBF,0BFjBE,ykDEqBF,mCFfE,89CEkBA,qCACE,iCAGF,4DFhBA,wkDEqBF,6BFfE,iDACA,yDACA,4CACA,4CACA,+CACA,gDACA,uCACA,+CACA,4CACA,iDACA,wDESF,2BFPE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDACA,oDAEE,iDACA,yDACA,wDEDJ,6BFXE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDACA,oDAME,iDACA,yDACA,wDEDJ,4BFfE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDACA,oDAUE,+CACA,yDACA,sDEDJ,2BFnBE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDACA,oDAcE,gDACA,yDACA,uDEDJ,+BACE,gBACE,0BACA,4BAwBJ,oBFuBI,oCAIA,gCEvBJ,yBFmBI,yBAIA,qCGxHN,aACE,WCFa,KDIb,gBACE,eAGF,gBACE,eEwBF,wBFhCF,aAYI,WCZgB,MC0BlB,kDFTI,sBACE,aAFS,EACX,sBACE,aAFS,EACX,sBACE,aAFS,EACX,sBACE,aAFS,GEgBf,wBFPI,qBACE,aAFS,EACX,qBACE,aAFS,EACX,qBACE,aAFS,EACX,qBACE,aAFS,GAOf,oBACE,mBAGF,mDACE,eGnCJ,wPACE,gBAEA,ocACE,aP8CJ,cC0BE,cACA,uBO3DA,YCTiB,uBDCjB,gBR2CA,kCACA,mCACA,kCACA,8BACA,sBACA,cAGF,oBACE,cQ7DA,mBR+DA,YS5DiB,aHmDjB,wBNMF,oBQ5DE,qBRwEF,EACE,SACA,UAGF,OQhEE,YCHsB,IT0EtB,IAIE,gBAQJ,EACE,gCAEA,SCxBA,cACA,kBD4BA,UC7BA,cACA,0BDgCA,iBQxGA,0BACA,gCR6GE,qCCvCF,cACA,kBDkDF,MQ9HE,qBRoIF,kCACE,sBACA,sBAEA,aACA,mBACA,UC/DA,cACA,uBOzCA,YCpBmB,wBDYnB,YCXmB,IDhBnB,mBA0CA,yBACA,yBRmGA,cAGF,gDACE,UAEA,+BAEA,YAGF,4FCvCM,0BAIA,8CDwCJ,0ICtCI,qBAEA,wCDsDJ,wCCrGA,yBACA,wBA+QA,8GDtKI,oBAEA,cCxFA,+BAIA,2CA6PF,+BADF,gGD1KI,oBAEA,cCxFA,+BAIA,4CD0FK,WACP,qBAEA,iBQ5LF,0BACA,gCR+LE,0CAEE,cAKN,eAGE,aACA,eACA,iBAEA,gBAEA,qBACE,aACA,mBAIJ,8SC/IE,WACA,uBDgJA,iBAGE,qvBACE,qBAEA,g1BACE,mBAEA,qBAEA,gBAEA,YAIA,85BACE,oBAOV,yEQ/NE,YCVoB,gDDWpB,YCVoB,IDbpB,eR0PA,gBMxOA,kDNmOF,yEQrPE,oBFsDA,wBN+LF,yEQrPE,mBRqQF,sEQ/OE,YCVoB,gDDWpB,YCVoB,IDbpB,eR0QA,gBMxPA,kDNmPF,sEQrQE,oBFsDA,wBN+MF,sEQrQE,kBRqRF,sEQxQE,YCHsB,IDVtB,mBR0RA,gBMpOA,wBN+NF,sEQrRE,mBRiSF,sEQpRE,YCHsB,IDVtB,mBRsSA,gBAGF,sHAEE,gBACA,iBAEA,sNACE,cAGF,sIACE,gBAkCF,wBACE,kBAaF,mBACE,SAEA,cAoBJ,gBAEE,eACA,gBACA,cACA,4BChSI,+BAIA,mDDgSJ,uBACE,gBAGF,wBQvYA,eR0YE,wCACE,gBAGF,gCACE,gBMjXJ,wBN4VF,gBA0BI,gCAIJ,qBQxZE,mBP2EA,WACA,uBDmVF,kBQ5XE,YCpBmB,wBDYnB,YCXmB,IR2DnB,WACA,uBO5EA,mBRqaA,yBM/WA,wBNyWF,kBQ/ZE,iBRyaE,eAGF,oBACE,cACA,8BAEA,0BACE,gCAIJ,yBQrbA,iBEKE,wBACE,kBTyFA,8BAIA,2CSvFJ,oBACE,OAEA,YAGF,qCAEE,aACA,sBACA,uBACA,UAGF,sEAEE,mBACA,uBJyBF,wBI5BA,sEAMI,uBAIJ,0BACE,aAGF,kBACE,oBAGF,mBACE,SAoBA,uBACE,cFjDJ,YCTiB,uBDCjB,gBEiEA,gBACE,aF3EF,eP2EA,sBACA,wBSKA,yBACE,aTPF,WACA,wBO/DA,YCHsB,IEVxB,cACE,gBACA,WACA,YAUA,iCAEA,eAGF,oBACE,gBACA,SACA,UAEA,oFACE,aACA,sBAEA,kGACE,OAKN,6BAKE,eACA,YAEA,cAGF,aAEE,WAGF,SACE,aAGF,GACE,SAEA,qBVgEI,gCAEA,4BUhEJ,mBAGF,aACE,iBACA,oBLTA,wBKOF,aAKI,iBACA,qBAIJ,WACE,aLlBA,wBKiBF,WAMI,cV8QF,8CAzOI,yBAIA,qCA0OF,+BADF,uCA7OI,yBAIA,sCUlCJ,kBACE,aCrFJ,gBAEE,gBACA,mBAEA,wCACE,aAGF,sCXkEA,WACA,+BWjEE,gBAGF,8BACE,eAEA,gBAGF,gEAEE,aA4CJ,QACE,gBAEA,aACA,eAEA,oBACE,aAGF,sBAEE,SACA,mBAEA,kBAEA,sBAEA,qBAIA,kBACE,cACA,eAGF,kBACE,cACA,gBAIJ,WACE,UJxFF,YCHsB,IGgGtB,WACE,UAEA,cACE,gBAKF,yBACE,6BAEA,kBAEA,mCACE,iBAEA,kBACA,QACA,UXlDN,yBACA,wBWoDM,gBAEA,2BAMJ,uCACE,6BAEA,iDACE,oBAEA,OAIJ,uCACE,kBAKF,gJXxEF,yBAEA,wCK1DA,kDMwIE,WACE,UAGF,WACE,UAEA,cACE,iBA7IN,wCAEE,WACA,cAGF,oBACE,kBAIA,kCACE,cACA,iBAEA,4CACE,aAIJ,kCACE,cACA,cAKF,wCX0BF,yBAEA,wCWxBE,wCACE,oCAEA,cN/BJ,wBMHA,sBAEE,WACA,cAGF,WACE,kBAIA,yBACE,cACA,iBAEA,mCACE,aAIJ,yBACE,cACA,cAKF,+BX0BF,yBAEA,wCWxBE,+BACE,oCAEA,eX0SJ,8BWrSF,QX6BM,gCAIA,4CWqFF,sBAEE,oCX3FA,6BAIA,0CAwPJ,2CA5PI,gCAIA,4CWqFF,4FAEE,oCX3FA,6BAIA,yCA6PF,+BADF,oCAhQI,gCAIA,4CWqFF,8EAEE,oCX3FA,6BAIA,0CMnEE,mDAEE,wBAFF,sDAEE,2BAFF,qDAEE,yBAFF,wDAEE,4BA2BE,mDAEE,6BAFF,iDAEE,2BAFF,iDAEE,2BAFF,iDAEE,2BAFF,mDAEE,2BAFF,qDAEE,2BAFF,sDAEE,gCAFF,oDAEE,8BAFF,oDAEE,8BAFF,oDAEE,8BAFF,sDAEE,8BAFF,wDAEE,8BAFF,qDAEE,8BAFF,mDAEE,4BAFF,mDAEE,4BAFF,mDAEE,4BAFF,qDAEE,4BAFF,uDAEE,4BAFF,wDAEE,iCAFF,sDAEE,+BAFF,sDAEE,+BAFF,sDAEE,+BAFF,wDAEE,+BAFF,0DAEE,+BDTZ,wBCqCY,mDAEE,6BAFF,iDAEE,8BAFF,iDAEE,6BAFF,iDAEE,2BAFF,mDAEE,2BAFF,qDAEE,2BAFF,sDAEE,gCAFF,oDAEE,iCAFF,oDAEE,gCAFF,oDAEE,8BAFF,sDAEE,8BAFF,wDAEE,8BAFF,qDAEE,8BAFF,mDAEE,+BAFF,mDAEE,8BAFF,mDAEE,4BAFF,qDAEE,4BAFF,uDAEE,4BAFF,wDAEE,iCAFF,sDAEE,kCAFF,sDAEE,iCAFF,sDAEE,+BAFF,wDAEE,+BAFF,0DAEE,gCDjFd,6BCoBM,+DAEE,wBAFF,kEAEE,2BAFF,iEAEE,yBAFF,oEAEE,4BMlCR,uBACE,yBPiBF,kDCcM,iEAEE,wBAFF,oEAEE,2BAFF,mEAEE,yBAFF,sEAEE,4BMlCR,wBACE,yBPuBF,kDCQM,+DAEE,wBAFF,kEAEE,2BAFF,iEAEE,yBAFF,oEAEE,4BMlCR,uBACE,yBP6BF,wBCEM,6DAEE,wBAFF,gEAEE,2BAFF,+DAEE,yBAFF,kEAEE,4BMlCR,sBACE,yBCGJ,WACE,WAGA,yBAEA,gBAEA,uBACE,aAGF,oBACE,gBNJF,YCHsB,IK2BtB,oCAEE,oBbwDE,2CAIA,uCaxDF,4DACE,eAGF,0DACE,gBAIJ,oCb2CI,mCAIA,+Ca1CF,eACE,kBAKN,mBACE,WAEA,aTrEa,KSsEb,cTtEa,KSwEb,kBACA,WAEA,cR1CA,wBQiCF,mBAYI,aT7EgB,KS8EhB,cT9EgB,KSgFhB,YC7EJ,eACE,UVPwB,SUQxB,WACA,kBACA,iBACA,mBACA,kBAEA,sBAEA,aACA,eACA,2BACA,oBAEA,0DAEE,mBAGF,oBACE,eAGF,wBACE,uBAIJ,YACE,SACA,mBACA,kBAEA,sBAEA,uBACE,aACA,eACA,wBACA,oBAGF,uBACE,sBAGF,0BACE,kBAGF,0BACE,oBCjDA,kBACE,WACA,UAUI,wBACE,oBACA,UAGF,+BACE,2BAGF,8BACE,0BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,yBACE,qBACA,UAGF,gCACE,4BAGF,+BACE,2BAwBN,oBACE,WAEA,SAHF,oBACE,WAEA,SAHF,oBACE,WAEA,SAKF,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,EVvCf,kDUdE,yBACE,WACA,UAUI,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,UACA,UAGF,qCACE,iBAGF,oCACE,gBAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAwBN,2BACE,WAEA,SAHF,2BACE,WAEA,SAHF,2BACE,WAEA,SAKF,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,GV3Bf,wBSkCA,eACE,oBACA,mBAGF,YACE,oBACA,oBT/CF,kDUpBE,wBACE,WACA,UAUI,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAwBN,0BACE,WAEA,SAHF,0BACE,WAEA,SAHF,0BACE,WAEA,SAKF,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,GV3Bf,wBU1BE,uBACE,WACA,UAUI,4BACE,UACA,UAGF,mCACE,iBAGF,kCACE,gBAwBN,yBACE,WAEA,SAHF,yBACE,WAEA,SAHF,yBACE,WAEA,SAKF,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,GD0BjB,uNAME,gBACA,eEvFF,mBACE,iBAIA,8CACE,wEAQA,oCADF,+CAEI,yEAQJ,yBACE,sBAGF,iCACE,iBAEA,aAGF,yBACE,aACA,SACA,qBAEA,qBAEA,+BACE,qBhBqFF,4BAIA,wCgBtFE,mBAIJ,6BACE,cACA,eAGF,mCACE,sBTnCF,YCVoB,gDDWpB,YCVoB,IDbpB,kBS6DE,yBACA,oBAGF,8CACE,aAGF,8BACE,WACA,cAEA,chBOF,sBAEA,kCgBLE,2EAEE,cAEA,cAEA,kBACA,QACA,OAEA,yBAEA,WAGF,sCACE,MAGF,qCACE,SAIJ,sCACE,YACA,UAEA,cAEA,kBAEA,gBAEA,YAEA,gBAEA,6BACA,sBAEA,eAGE,4EACE,SAEA,oFACE,YAEA,0BAGF,mFACE,eAEA,yBAMR,+BACE,iBACA,YAEA,kBAEA,UACA,gBACA,gBAGF,oCACE,mBAGF,yCACE,gBACA,eAEA,cACA,sBT/JF,oBSkKE,qBACA,oBhBpEE,4CAIA,wCgBoEF,+CTnKF,0BACA,gCSuKA,mCACE,kBAEA,aACA,yBACA,WTjLF,oBSoLE,gBAMF,wCACE,aACA,UACA,mBAEA,qBAEA,qIhBtHF,sBACA,wBgB2HE,8ChB5HF,cACA,uBOxEA,0BACA,gCFaA,kDW4LE,yCT9MF,eSkNE,8EACE,WAGF,kFACE,OACA,QAGF,gEACE,oBAGF,gEACE,WAGF,wEACE,iBACA,oBAGF,iDACE,WACA,YAGF,0EACE,4BAGF,sEACE,oBAGF,iOAGE,aXlMJ,wBWuME,yBACE,iBAGF,+EAEE,aACA,mBAGF,yBACE,WAGF,8CACE,aACA,mBAGF,4GAGE,YAGF,+BACE,aAEA,UAEA,sChB5LA,6BAIA,yCAJA,gCAIA,4CgB8LF,oCACE,sBACA,uBAGF,yCACE,oBAGF,wFACE,mBAGF,6CACE,cAGF,6CACE,mBACA,mBAGF,mCACE,iBACA,oBAEA,4BXnSJ,kDWwSE,6BACE,WACA,YAGF,mCACE,oBAGF,+BACE,wBAEA,WAGF,yCACE,oBXlTJ,wBWuTE,6BACE,aACA,cAGF,mCACE,cAGF,+BACE,wBAEA,WAGF,yCACE","file":"global-header.css","sourcesContent":["@use \"sass:math\";\n@use \"sass:selector\";\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@use \"../variables/typography\" as typographyVars;\n\n@if typographyVars.$use-local-fonts {\n @font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Regular.ttf\");\n font-weight: typographyVars.$main-font-weight;\n font-style: normal;\n // font-display: swap;\n }\n\n // @font-face {\n // font-family: \"Open Sans\";\n // src: url(\"#{assets.$tna-font-path}/OpenSans-Italic.ttf\");\n // font-weight: typographyVars.$main-font-weight;\n // font-style: italic;\n // // font-display: swap;\n // }\n\n @font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Bold.ttf\");\n font-weight: typographyVars.$main-font-weight-bold;\n font-style: normal;\n // font-display: swap;\n }\n\n @font-face {\n font-family: \"Roboto Mono\";\n src: url(\"#{assets.$tna-font-path}/RobotoMono-Regular.ttf\");\n font-weight: typographyVars.$detail-font-weight;\n font-style: normal;\n // font-display: swap;\n }\n\n @font-face {\n font-family: \"Roboto Mono\";\n src: url(\"#{assets.$tna-font-path}/RobotoMono-Medium.ttf\");\n font-weight: typographyVars.$detail-font-weight-bold;\n font-style: normal;\n // font-display: swap;\n }\n} @else {\n @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,#{typographyVars.$main-font-weight};0,#{typographyVars.$main-font-weight-bold};1,#{typographyVars.$main-font-weight}&family=Roboto+Mono:wght@#{typographyVars.$detail-font-weight};#{typographyVars.$detail-font-weight-bold}&display=swap\"); /* stylelint-disable-line */\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 text-size-adjust: none;\n direction: ltr;\n}\n\n.tna-template__body {\n color: inherit;\n @include typography.relative-font-size(typographyVars.$body-font-size-px);\n line-height: typographyVars.$body-line-height;\n\n @include media.on-mobile {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px-mobile\n );\n }\n}\n\n* {\n margin: 0;\n padding: 0;\n}\n\nstrong {\n @include typography.main-font-weight-bold;\n}\n\np {\n @include spacing.space-above;\n\n + p/*,\n + .tna-ul,\n + .tna-ol,\n + .tna-blockquote*/ {\n margin-top: 1rem;\n }\n\n // + :is(p, .tna-ul, .tna-ol, .tna-blockquote) {\n // margin-top: 1rem;\n // }\n}\n\na {\n text-decoration-thickness: 1.5px;\n\n &,\n &:link {\n @include colour.colour-font(\"link\");\n }\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-link--no-visited-state {\n &:visited {\n @include colour.colour-font(\"link\");\n }\n }\n\n // &[target=\"_blank\"]:not([title*=\"opens in a new\"]) {\n // &::after {\n // content: \"\" / \" (opens in a new window)\"\n // }\n // }\n}\n\nsmall {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px * 0.85\n );\n}\n\n%chip-base {\n max-width: max-content;\n padding: 0.125em 0.25rem;\n\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n @include colour.colour-font(\"font-base\");\n @include typography.detail-font-small;\n line-height: 1;\n}\n\n%chip-plain {\n padding: 0;\n\n background-color: transparent;\n\n border: none;\n}\n\n%chip-accent {\n @include colour.accent;\n\n @include colour.colour-border(\"accent-background\", 0.125rem);\n\n .tna-background-accent & {\n @include colour.contrast;\n\n @include colour.colour-border(\"contrast-background\");\n }\n}\n\n.tna-chip {\n @extend %chip-base;\n\n &--plain {\n @extend %chip-plain;\n }\n\n &:not(#{&}--plain) {\n @extend %chip-accent;\n }\n\n .fa-solid,\n .fa-brand {\n @include colour.colour-font(\"icon-light\");\n\n @include colour.on-high-contrast {\n padding-right: 0.5rem;\n\n color: inherit;\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, right);\n }\n }\n\n @at-root #{selector.unify(\"a\", &)} {\n text-decoration: none;\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n .fa-solid,\n .fa-brand {\n color: inherit;\n }\n }\n}\n\n.tna-chip-list {\n @include spacing.space-above;\n\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem 1.5rem;\n\n list-style: none;\n\n &__item {\n display: flex;\n align-items: center;\n }\n}\n\n%heading {\n @include colour.colour-font(\"font-dark\");\n text-wrap: pretty;\n\n &:not(.tna-heading--no-link-arrow) {\n a {\n display: inline-block;\n\n &::after {\n padding-left: 0.5rem;\n\n display: inline-block;\n\n font-weight: 700;\n\n content: \"\\203A\";\n }\n\n &:hover {\n &::after {\n padding-left: 0.75rem;\n }\n }\n }\n }\n}\n\n%heading-xl {\n @extend %heading;\n\n @include typography.heading-font;\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 }\n\n @include media.on-mobile {\n @include typography.relative-font-size(36);\n }\n}\n\n%heading-l {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.relative-font-size(32);\n line-height: 1.3;\n\n @include media.on-medium {\n @include typography.relative-font-size(30);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n }\n}\n\n%heading-m {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(22);\n line-height: 1.6;\n\n @include media.on-mobile {\n @include typography.relative-font-size(20);\n }\n}\n\n%heading-s {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(18);\n line-height: 1.6;\n}\n\n%headings-and-heading-groups {\n @include spacing.space-above;\n margin-bottom: 0;\n padding: 1rem 0 0;\n\n &:first-child {\n padding-top: 0;\n }\n\n + p {\n margin-top: 1rem;\n }\n}\n\n.tna-heading {\n &-xl {\n @extend %heading-xl;\n @extend %headings-and-heading-groups;\n }\n\n &-l {\n @extend %heading-l;\n @extend %headings-and-heading-groups;\n }\n\n &-m {\n @extend %heading-m;\n @extend %headings-and-heading-groups;\n }\n\n &-s {\n @extend %heading-s;\n @extend %headings-and-heading-groups;\n }\n}\n\n.tna-hgroup {\n &-xl,\n &-l,\n &-m,\n &-s {\n @extend %headings-and-heading-groups;\n }\n\n &__supertitle {\n margin: 0 0 0.25rem;\n\n @extend %chip-base;\n\n &--plain {\n @extend %chip-plain;\n }\n\n &:not(#{&}--plain) {\n @extend %chip-accent;\n }\n }\n\n &__title {\n margin: 0;\n\n display: block;\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-blockquote {\n @include spacing.space-above;\n margin-right: 0;\n margin-bottom: 0;\n margin-left: 0;\n padding: 1rem 1rem 1rem 2rem;\n\n @include colour.colour-border(\"accent-background\", 0.375rem, solid, left);\n\n &__quote {\n font-weight: 700;\n }\n\n &__author {\n @include typography.relative-font-size(16);\n\n .tna-blockquote & {\n margin: 1rem 0 0;\n }\n\n &::before {\n content: \"\\2014\" \" \";\n }\n }\n\n @include media.on-tiny {\n padding: 0.5rem 0.5rem 0.5rem 1rem;\n }\n}\n\n.tna-large-paragraph {\n @include spacing.space-above;\n\n @include typography.relative-font-size(22);\n @include colour.colour-font(\"font-dark\");\n}\n\n.tna-scene-setter {\n @include spacing.space-above;\n\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 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 &--small {\n @include typography.relative-font-size(24);\n }\n}\n","@use \"sass:map\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\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-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: #{brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{brand-colour(\"black\")} !important;\n --accent-link-visited: #{brand-colour(\"black\")} !important;\n --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{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: #{brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{brand-colour(\"white\")} !important;\n --accent-link-visited: #{brand-colour(\"white\")} !important;\n --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n --button-accent-text: #{brand-colour(\"white\")} !important;\n @if $colour == \"pink\" {\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-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-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-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@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, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n outline: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\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\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%light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n%dark {\n @include colour-css-vars-dark;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n}\n\n@mixin dark {\n @extend %dark;\n}\n\n%plain {\n .tna-template--system-theme & {\n @extend %light;\n\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark;\n }\n }\n\n .tna-template--light-theme & {\n @include colour-css-vars;\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme.tna-template--dark-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n\n --background: var(--page-background);\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-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(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-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(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%tint {\n @include colour-background(\"background-tint\");\n @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\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 --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\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 @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\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\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n","@use \"../tools/colour\";\n\n.tna-visually-hidden,\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\n@mixin focus-outline {\n @include colour.colour-outline(\"focus-outline\", 0.3125rem, solid);\n outline-offset: 0.125rem;\n}\n\n*:focus {\n z-index: 9;\n\n @include focus-outline;\n}\n\n.tna-\\!--no-focus-style {\n &:focus {\n outline: none;\n }\n}\n","@use \"../tools/colour\";\n\n// :root {\n// @include colour.colour-css-vars;\n// }\n\n.tna-template {\n @include colour.colour-background(\"page-background\");\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 &--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-background {\n &-tint {\n @include colour.tint;\n }\n\n &-contrast {\n @include colour.contrast;\n }\n\n &-accent {\n @include colour.accent;\n }\n\n &-accent-light {\n @include colour.accent-light;\n }\n}\n\n.tna-border {\n &-keyline {\n @include colour.colour-border(\"keyline\", 1px);\n }\n\n &-keyline-dark {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n}\n","@use \"../tools/media\";\n@use \"../variables/grid\";\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-tiny {\n column-gap: grid.$gutter-width-tiny;\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","$largest-container-width: 75.25rem !default;\n\n$gutter-width: 2rem !default;\n$gutter-width-tiny: 1rem !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\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\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"sass:map\";\n@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n%space-above {\n margin-top: 2rem;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above {\n @extend %space-above;\n}\n\n@function space($size) {\n @return map.get(spacing.$spacing, $size);\n}\n\n@function space-mobile($size) {\n @return map.get(spacing.$spacing-mobile, $size);\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{$amount} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{$amount} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n font-size: #{math.div($fontSizePx, typography.$relative-1rem-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.$main-font-weight;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font {\n font-family: typography.$main-font-family;\n @include main-font-weight;\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font-weight {\n font-weight: typography.$detail-font-weight;\n}\n\n@mixin detail-font-weight-bold {\n font-weight: typography.$detail-font-weight-bold;\n}\n\n@mixin detail-font {\n font-family: typography.$detail-font-family;\n @include detail-font-weight;\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.$relative-1rem-px, 14)};\n}\n","@use \"sass:math\";\n\n$use-local-fonts: false !default;\n\n$relative-1rem-px: 16; // 16px is always 1rem\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font: \"Open Sans\" !default;\n$main-font-family: $main-font, sans-serif !default;\n$main-font-weight: 400 !default;\n$main-font-weight-bold: 700 !default;\n\n$heading-font-family: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$heading-font-weight: 500 !default;\n\n$detail-font-family: \"Roboto Mono\", monospace !default;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n","@use \"../utilities/typography\" as typographyUtilities;\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n\n.tna-form {\n &__group {\n @include spacing.space-above;\n\n &--error {\n padding-left: 1rem;\n\n @include colour.colour-border(\"form-error\", 0.25rem, solid, left);\n }\n }\n\n &__fieldset {\n flex: 1;\n\n border: none;\n }\n\n &__group,\n &__fieldset {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 0.5rem;\n }\n\n &__group--inline,\n &__group--inline &__fieldset {\n flex-direction: row;\n align-items: flex-start;\n\n @include media.on-mobile {\n flex-direction: column;\n }\n }\n\n &__group-contents {\n flex: 0 0 39%;\n }\n\n &__legend {\n margin-bottom: 0.5rem;\n }\n\n &__heading {\n margin: 0;\n\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 &--xs {\n font-size: 1em;\n @include typography.main-font;\n }\n }\n\n &__label {\n }\n\n &__hint {\n margin-top: 0;\n\n @include typography.relative-font-size(16);\n @include colour.colour-font(\"font-light\");\n }\n\n &__error-message {\n margin-top: 0;\n\n @include colour.colour-font(\"form-error\");\n @include typography.main-font-weight-bold;\n }\n}\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../variables/typography\";\n\n.tna-template {\n min-width: 320px;\n width: 100%;\n height: 100%;\n\n /*\n * ------------------------------------------\n * Support ended with iOS 13 released on 19th\n * September 2019. Deprecate in the future if\n * iOS <13 share drops low enough.\n * https://caniuse.com/mdn-css_properties_-webkit-overflow-scrolling\n * ------------------------------------------\n */\n -webkit-overflow-scrolling: touch;\n\n font-size: #{typography.$relative-1rem-px}px;\n}\n\n.tna-template__body {\n min-height: 100%;\n margin: 0;\n padding: 0;\n\n &:has(.tna-header):has(#main-content[role=\"main\"]):has(.tna-footer) {\n display: flex;\n flex-direction: column;\n\n #main-content {\n flex: 1;\n }\n }\n}\n\nimg,\nsvg,\npicture,\nvideo,\ncanvas {\n max-width: 100%;\n height: auto;\n\n display: block;\n}\n\nvideo,\ncanvas {\n width: 100%;\n}\n\n[hidden] {\n display: none;\n}\n\nhr {\n margin: 0;\n\n border-width: 1px 0 0;\n @include colour.colour-border(\"keyline\");\n border-style: solid;\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-above;\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 &--tight {\n padding: 1rem;\n }\n}\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n\n.tna-ul,\n.tna-ol {\n margin: 1rem 0 0;\n padding: 0 0 0 2rem;\n\n &:first-child {\n margin-top: 0;\n }\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 .tna-ul,\n .tna-ol {\n margin-top: 0;\n }\n}\n\n@mixin stacked-dl {\n dt,\n dd {\n width: 100%;\n margin-left: 0;\n }\n\n dd {\n padding-left: 1rem;\n }\n\n &.tna-dl--plain {\n dt {\n padding-top: 0;\n padding-bottom: 0;\n\n .fa-solid {\n margin-top: 0;\n }\n }\n\n dd {\n margin-left: 0;\n padding-top: 0;\n }\n }\n\n &:not(.tna-dl--plain) {\n dt {\n @include colour.colour-background(\"background-tint\");\n }\n\n dd {\n background: transparent !important;\n\n margin-left: 0;\n }\n }\n}\n\n.tna-dl {\n margin: 1rem 0 0;\n\n display: flex;\n flex-wrap: wrap;\n\n &:first-child {\n margin-top: 0;\n }\n\n dt,\n dd {\n margin: 0;\n padding: 0.5rem 1rem;\n\n position: relative;\n\n box-sizing: border-box;\n\n word-wrap: break-word;\n }\n\n &--plain {\n dt {\n padding-top: 0;\n padding-left: 0;\n }\n\n dd {\n padding-top: 0;\n padding-right: 0;\n }\n }\n\n dt {\n width: 30%;\n\n @include typography.main-font-weight-bold;\n }\n\n dd {\n width: 70%;\n\n + dd {\n margin-left: 30%;\n }\n }\n\n &--icon-padding {\n dt {\n padding-left: 3rem !important;\n\n position: relative;\n\n .fa-solid {\n overflow: visible;\n\n position: absolute;\n top: 50%;\n left: 1rem;\n\n @include colour.colour-font(\"icon-light\");\n text-align: left;\n\n transform: translateY(-50%);\n }\n }\n }\n\n &--icon-padding#{&}--plain {\n dt {\n padding-left: 2rem !important;\n\n .fa-solid {\n margin-top: -0.25rem;\n\n left: 0;\n }\n }\n\n dd {\n padding-left: 2rem;\n }\n }\n\n &:not(&--plain) {\n dt:first-child,\n dd:nth-of-type(2n) + dt,\n dd:nth-of-type(2n + 1) {\n @include colour.colour-background(\"background-tint\");\n }\n }\n\n @include media.on-small {\n dt {\n width: 35%;\n }\n\n dd {\n width: 65%;\n\n + dd {\n margin-left: 35%;\n }\n }\n }\n\n &--stacked {\n @include stacked-dl;\n }\n\n @include media.on-tiny {\n @include stacked-dl;\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline-dark\", 1px, solid, bottom);\n\n dt,\n dd {\n background: transparent !important;\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, top);\n }\n }\n}\n","@use \"sass:map\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n\n@mixin hide-on($suffix) {\n .tna-\\!--hide-on-#{$suffix} {\n display: none !important;\n }\n}\n\n@include spacing.no-spacing-generator;\n@include spacing.spacing-generator;\n\n@include media.on-large {\n @include spacing.no-spacing-generator(\"large\");\n @include hide-on(\"large\");\n}\n\n@include media.on-medium {\n @include spacing.no-spacing-generator(\"medium\");\n @include hide-on(\"medium\");\n}\n\n@include media.on-small {\n @include spacing.no-spacing-generator(\"small\");\n @include hide-on(\"small\");\n}\n\n@include media.on-tiny {\n @include spacing.no-spacing-generator(\"tiny\");\n @include hide-on(\"tiny\");\n}\n","@use \"sass:math\";\n@use \"sass:selector\";\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.tna-table {\n width: 100%;\n @include spacing.space-above;\n\n border-collapse: collapse;\n\n text-align: left;\n\n &:first-child {\n margin-top: 0;\n }\n\n &__caption {\n text-align: left;\n\n @include typography.main-font-weight-bold;\n }\n\n &__head {\n }\n\n &__header {\n }\n\n &__body {\n }\n\n &__row {\n }\n\n &__cell {\n }\n\n &__header,\n &__cell {\n padding: 0.25rem 1rem;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n\n &:first-child {\n padding-left: 0;\n }\n\n &:last-child {\n padding-right: 0;\n }\n }\n\n &__head &__header {\n @include colour.colour-border(\"keyline-dark\", 0.25rem, solid, bottom);\n }\n\n p {\n + p {\n margin-top: 0.25rem;\n }\n }\n}\n\n.tna-table-wrapper {\n width: 100%;\n @include spacing.space-above;\n padding-left: grid.$gutter-width;\n padding-right: grid.$gutter-width;\n\n position: relative;\n left: -#{grid.$gutter-width};\n\n overflow: auto;\n\n @include media.on-tiny {\n padding-left: grid.$gutter-width-tiny;\n padding-right: grid.$gutter-width-tiny;\n\n left: -#{grid.$gutter-width-tiny};\n }\n}\n","@use \"sass:math\";\n@use \"../../variables/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/grid\" as gridTools;\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: flex-start;\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 &--centred {\n justify-content: center;\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 &--align-top {\n align-self: flex-start;\n }\n\n &--align-centre {\n align-self: center;\n }\n\n &--align-bottom {\n align-self: flex-end;\n }\n}\n\n@include gridTools.columns-generator(grid.$column-count);\n\n@include media.on-medium {\n @include gridTools.columns-generator(grid.$column-count-medium, \"medium\");\n}\n\n@include media.on-tiny {\n .tna-container {\n padding-right: math.div(grid.$gutter-width-tiny, 2);\n padding-left: math.div(grid.$gutter-width-tiny, 2);\n }\n\n .tna-column {\n padding-right: math.div(grid.$gutter-width-tiny, 2);\n padding-left: math.div(grid.$gutter-width-tiny, 2);\n }\n}\n\n@include media.on-small {\n @include gridTools.columns-generator(grid.$column-count-small, \"small\");\n}\n\n@include media.on-tiny {\n @include gridTools.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 &--margin-right-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n margin-right: math.div(100%, $count) * $i;\n }\n\n &--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 &--margin-right-#{$i}-#{$count}#{$suffix} {\n margin-right: math.div(100%, $count) * $i;\n }\n\n &--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","@use \"sass:math\";\n@use \"../../variables/grid\" as gridVars;\n@use \"../../tools/colour\";\n@use \"../../tools/typography\";\n@use \"../../tools/media\";\n@use \"../../utilities\";\n@use \"../grid\";\n\n.tna-global-header {\n padding-top: 1rem;\n\n @include colour.contrast;\n\n .tna-template--light-theme & {\n background: linear-gradient(\n 0deg,\n rgb(34 34 34 / 100%) 0%,\n rgb(0 0 0 / 100%) 100%\n );\n }\n\n .tna-template--system-theme {\n @media (prefers-color-scheme: light) {\n background: linear-gradient(\n 0deg,\n rgb(34 34 34 / 100%) 0%,\n rgb(0 0 0 / 100%) 100%\n );\n }\n }\n\n &__main {\n padding-bottom: 1.5rem;\n }\n\n &__logo-wrapper {\n margin-top: 0.5rem;\n\n display: flex;\n }\n\n &__logo {\n display: flex;\n gap: 1rem;\n align-items: flex-end;\n\n text-decoration: none;\n\n &:hover {\n text-decoration: none;\n\n @include colour.colour-outline(\"font-dark\", 0.3125rem, solid);\n outline-offset: 1px;\n }\n }\n\n .tna-logo {\n width: 6.75rem;\n height: 6.75rem;\n }\n\n &__logo-strapline {\n padding-right: 0.625rem;\n\n @include typography.heading-font;\n @include typography.relative-font-size(20);\n text-transform: uppercase;\n line-height: math.div(6.75rem, 3);\n }\n\n &__navigation-button-wrapper {\n display: none;\n }\n\n &__hamburger {\n width: 2rem;\n height: 0.25rem;\n\n display: block;\n\n @include colour.colour-background(\"font-dark\");\n\n &::before,\n &::after {\n height: 0.25rem;\n\n display: block;\n\n position: absolute;\n right: 0;\n left: 0;\n\n background-color: inherit;\n\n content: \"\";\n }\n\n &::before {\n top: 0;\n }\n\n &::after {\n bottom: 0;\n }\n }\n\n &__navigation-button {\n height: 2rem;\n padding: 0;\n\n display: block;\n\n position: relative;\n\n appearance: none;\n\n font-size: 0;\n\n background: none;\n\n border: 0 transparent solid;\n border-width: 0.25rem 0;\n\n cursor: pointer;\n\n &--opened {\n .tna-global-header__hamburger {\n height: 0;\n\n &::before {\n top: 0.625rem;\n\n transform: rotate(-135deg);\n }\n\n &::after {\n bottom: 0.625rem;\n\n transform: rotate(135deg);\n }\n }\n }\n }\n\n &__navigation {\n margin: 0.5rem 0 0;\n height: 100%;\n\n position: relative;\n\n columns: 2;\n column-gap: 2rem;\n list-style: none;\n }\n\n &__navigation-item {\n break-inside: avoid;\n }\n\n &__navigation-item-link {\n min-width: 15rem;\n height: math.div(6.75rem, 3);\n\n display: block;\n box-sizing: border-box;\n\n @include typography.relative-font-size(17);\n text-decoration: none;\n line-height: math.div(6.75rem, 3);\n\n @include colour.colour-border(\"keyline\", 0.5px, solid, bottom);\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n\n &__top-navigation {\n padding: 0 0 0.5rem;\n\n display: flex;\n justify-content: flex-end;\n gap: 1.5rem;\n\n @include typography.relative-font-size(15);\n list-style: none;\n }\n\n &__top-navigation-item {\n }\n\n &__top-navigation-link {\n display: flex;\n gap: 0.5rem;\n align-items: center;\n\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-light\");\n }\n\n &:hover {\n @include colour.colour-font(\"font-base\");\n @include typography.interacted-text-decoration;\n }\n }\n\n @include media.on-medium {\n &__navigation-item-link {\n @include typography.relative-font-size(16);\n }\n\n &--collapse-on-medium &__navigation-wrapper {\n width: 100%;\n }\n\n &--collapse-on-medium &__top-navigation-wrapper {\n flex: 1;\n order: 2;\n }\n\n &--collapse-on-medium &__main {\n padding-bottom: 1rem;\n }\n\n &--collapse-on-medium &__logo {\n gap: 0.75rem;\n }\n\n &--collapse-on-medium &__logo-wrapper {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n }\n\n &--collapse-on-medium .tna-logo {\n width: 5rem;\n height: 5rem;\n }\n\n &--collapse-on-medium &__logo-strapline {\n line-height: math.div(5rem, 3);\n }\n\n &--collapse-on-medium &__navigation {\n margin-bottom: 0.5rem;\n }\n\n &--collapse-on-medium &__navigation,\n &--collapse-on-medium &__navigation-item,\n &--collapse-on-medium &__navigation-item-link {\n height: auto;\n }\n }\n\n @include media.on-mobile {\n &__main {\n padding-bottom: 0;\n }\n\n &__logo-wrapper,\n &__navigation-button-wrapper {\n margin-top: 0;\n margin-bottom: 1rem;\n }\n\n &__logo {\n gap: 0.75rem;\n }\n\n &__navigation-button-wrapper {\n display: flex;\n align-items: center;\n }\n\n &__navigation,\n &__navigation-item,\n &__navigation-item-link {\n height: auto;\n }\n\n &__navigation {\n margin-top: 0;\n\n columns: 1;\n\n background-color: rgb(255 255 255 / 10%);\n\n @include colour.colour-border(\"keyline-dark\", 3px, solid, top);\n @include colour.colour-border(\"keyline-dark\", 3px, solid, bottom);\n }\n\n &__navigation-item {\n flex-direction: column;\n align-items: flex-start;\n }\n\n &__navigation-item-link {\n line-height: 1.75rem;\n }\n\n &__navigation-item:last-child &__navigation-item-link {\n border-bottom: none;\n }\n\n &__navigation-item-contents {\n display: block;\n }\n\n &__navigation-item-children {\n margin-bottom: 1rem;\n margin-left: 1.5rem;\n }\n\n &__top-navigation {\n padding-top: 1rem;\n padding-bottom: 1rem;\n\n justify-content: flex-start;\n }\n }\n\n @include media.on-small {\n .tna-logo {\n width: 4rem;\n height: 4rem;\n }\n\n &__logo-strapline {\n line-height: 1.25rem;\n }\n\n &__navigation {\n width: calc(100% + #{gridVars.$gutter-width * 2});\n\n left: -#{gridVars.$gutter-width};\n }\n\n &__navigation-item-link {\n padding: 0.5rem gridVars.$gutter-width;\n }\n }\n\n @include media.on-tiny {\n .tna-logo {\n width: 3.5rem;\n height: 3.5rem;\n }\n\n &__logo-strapline {\n line-height: 1;\n }\n\n &__navigation {\n width: calc(100% + #{gridVars.$gutter-width-tiny * 2});\n\n left: -#{gridVars.$gutter-width-tiny};\n }\n\n &__navigation-item-link {\n padding: 0.5rem gridVars.$gutter-width-tiny;\n }\n }\n}\n"]}

package/nationalarchives/components/global-header/global-header.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,(()=>(()=>{"use strict";var t={64:(t,e,i)=>{i.d(e,{c:()=>n});const n=function(){return([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,(function(t){return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)}))}}},e={};function i(n){var a=e[n];if(void 0!==a)return a.exports;var o=e[n]={exports:{}};return t[n](o,o.exports,i),o.exports}i.d=(t,e)=>{for(var n in e)i.o(e,n)&&!i.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),i.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};return(()=>{i.r(n),i.d(n,{GlobalHeader:()=>r});var t=i(64);function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},e(t)}function a(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable\|\|!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,o(n.key),n)}}function o(t){var i=function(t,i){if("object"!=e(t)\|\|!t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var a=n.call(t,"string");if("object"!=e(a))return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==e(i)?i:String(i)}var r=function(){function e(t){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),this.$module=t,this.$toggleButtonWrapper=t&&t.querySelector(".tna-global-header__navigation-button-wrapper"),this.$navigation=t&&t.querySelector(".tna-global-header__navigation-wrapper"),this.$topNavigation=t&&t.querySelector(".tna-global-header__top-navigation-wrapper"),this.$links=t&&(this.$navigation&&this.$navigation.querySelectorAll("[tabindex='0']")\|\|this.$topNavigation&&this.$topNavigation.querySelectorAll("[tabindex='0']")),this.menuOpened=!1,this.mql=window.matchMedia("(max-width: 768px)")}var i,n;return i=e,(n=[{key:"init",value:function(){var e=this;if(this.$module&&this.$toggleButtonWrapper&&(this.$navigation\|\|this.$topNavigation)){var i="tna-menu-content-".concat((0,t.c)()),n="".concat(i,"-top");this.$navigation&&this.$navigation.setAttribute("id",i),this.$topNavigation&&this.$topNavigation.setAttribute("id",n),this.$toggleButton=document.createElement("button"),this.$toggleButton.innerText="Menu",this.$toggleButton.setAttribute("aria-controls",[i,n].join(" ")),this.$toggleButton.setAttribute("aria-haspopup","true"),this.$toggleButton.classList.add("tna-global-header__navigation-button"),this.$hamburger=document.createElement("div"),this.$hamburger.classList.add("tna-global-header__hamburger"),this.$toggleButton.appendChild(this.$hamburger),this.$toggleButtonWrapper.appendChild(this.$toggleButton),this.syncState(),this.$toggleButton.addEventListener("click",(function(){return e.handleToggleNavigation()})),"addEventListener"in this.mql?this.mql.addEventListener("change",(function(){return e.syncState()})):this.mql.addListener((function(){return e.syncState()}))}}},{key:"handleToggleNavigation",value:function(){this.menuOpened=!this.menuOpened,this.syncState()}},{key:"syncState",value:function(){if(this.mql.matches)if(this.menuOpened){this.$navigation&&(this.$navigation.classList.add("tna-global-header__navigation--open"),this.$navigation.hidden=!1,this.$navigation.setAttribute("aria-hidden","false")),this.$topNavigation&&(this.$topNavigation.classList.add("tna-global-header__top-navigation--open"),this.$topNavigation.hidden=!1,this.$topNavigation.setAttribute("aria-hidden","false")),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu"),this.$toggleButton.classList.add("tna-global-header__navigation-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","0")}else{this.$navigation&&(this.$navigation.classList.remove("tna-global-header__navigation--open"),this.$navigation.hidden=!0,this.$navigation.setAttribute("aria-hidden","true")),this.$topNavigation&&(this.$topNavigation.classList.remove("tna-global-header__top-navigation--open"),this.$topNavigation.hidden=!0,this.$topNavigation.setAttribute("aria-hidden","true")),this.$toggleButton.setAttribute("aria-expanded","false"),this.$toggleButton.setAttribute("title","Open menu"),this.$toggleButton.classList.remove("tna-global-header__navigation-button--opened");for(var e=0;e<this.$links.length;e++)this.$links[e].setAttribute("tabindex","-1")}else{this.$navigation&&(this.$navigation.classList.add("tna-global-header__navigation--open"),this.$navigation.hidden=!1,this.$navigation.setAttribute("aria-hidden","false")),this.$topNavigation&&(this.$topNavigation.classList.add("tna-global-header__top-navigation--open"),this.$topNavigation.hidden=!1,this.$topNavigation.setAttribute("aria-hidden","false")),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu");for(var i=0;i<this.$links.length;i++)this.$links[i].setAttribute("tabindex","0")}}}])&&a(i.prototype,n),Object.defineProperty(i,"prototype",{writable:!1}),e}()})(),n})()));
2	+ //# sourceMappingURL=global-header.js.map

package/nationalarchives/components/global-header/global-header.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"components/global-header/global-header.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/uuid.mjs","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/global-header/global-header.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","const uuidv4 = () =>\n ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>\n (\n c ^\n (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))\n ).toString(16),\n );\n\nexport default uuidv4;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import uuidv4 from \"../../lib/uuid.mjs\";\n\nexport class GlobalHeader {\n constructor($module) {\n this.$module = $module;\n this.$toggleButtonWrapper =\n $module &&\n $module.querySelector(\".tna-global-header__navigation-button-wrapper\");\n this.$navigation =\n $module &&\n $module.querySelector(\".tna-global-header__navigation-wrapper\");\n this.$topNavigation =\n $module &&\n $module.querySelector(\".tna-global-header__top-navigation-wrapper\");\n this.$links =\n $module &&\n ((this.$navigation &&\n this.$navigation.querySelectorAll(\"[tabindex='0']\")) ||\n (this.$topNavigation &&\n this.$topNavigation.querySelectorAll(\"[tabindex='0']\")));\n this.menuOpened = false;\n this.mql = window.matchMedia(\"(max-width: 768px)\");\n }\n\n init() {\n if (\n !this.$module ||\n !this.$toggleButtonWrapper ||\n (!this.$navigation && !this.$topNavigation)\n ) {\n return;\n }\n\n const uniqueId = `tna-menu-content-${uuidv4()}`;\n const uniqueIdTop = `${uniqueId}-top`;\n if (this.$navigation) {\n this.$navigation.setAttribute(\"id\", uniqueId);\n }\n if (this.$topNavigation) {\n this.$topNavigation.setAttribute(\"id\", uniqueIdTop);\n }\n\n this.$toggleButton = document.createElement(\"button\");\n this.$toggleButton.innerText = \"Menu\";\n this.$toggleButton.setAttribute(\n \"aria-controls\",\n [uniqueId, uniqueIdTop].join(\" \"),\n );\n this.$toggleButton.setAttribute(\"aria-haspopup\", \"true\");\n this.$toggleButton.classList.add(\"tna-global-header__navigation-button\");\n\n this.$hamburger = document.createElement(\"div\");\n this.$hamburger.classList.add(\"tna-global-header__hamburger\");\n\n this.$toggleButton.appendChild(this.$hamburger);\n this.$toggleButtonWrapper.appendChild(this.$toggleButton);\n\n this.syncState();\n\n this.$toggleButton.addEventListener(\"click\", () =>\n this.handleToggleNavigation(),\n );\n\n if (\"addEventListener\" in this.mql) {\n this.mql.addEventListener(\"change\", () => this.syncState());\n } else {\n this.mql.addListener(() => this.syncState());\n }\n }\n\n handleToggleNavigation() {\n this.menuOpened = !this.menuOpened;\n this.syncState();\n }\n\n syncState() {\n if (this.mql.matches) {\n if (this.menuOpened) {\n if (this.$navigation) {\n this.$navigation.classList.add(\"tna-global-header__navigation--open\");\n this.$navigation.hidden = false;\n this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n }\n if (this.$topNavigation) {\n this.$topNavigation.classList.add(\n \"tna-global-header__top-navigation--open\",\n );\n this.$topNavigation.hidden = false;\n this.$topNavigation.setAttribute(\"aria-hidden\", \"false\");\n }\n this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n this.$toggleButton.classList.add(\n \"tna-global-header__navigation-button--opened\",\n );\n\n for (let i = 0; i < this.$links.length; i++) {\n this.$links[i].setAttribute(\"tabindex\", \"0\");\n }\n } else {\n if (this.$navigation) {\n this.$navigation.classList.remove(\n \"tna-global-header__navigation--open\",\n );\n this.$navigation.hidden = true;\n this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n }\n if (this.$topNavigation) {\n this.$topNavigation.classList.remove(\n \"tna-global-header__top-navigation--open\",\n );\n this.$topNavigation.hidden = true;\n this.$topNavigation.setAttribute(\"aria-hidden\", \"true\");\n }\n this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n this.$toggleButton.classList.remove(\n \"tna-global-header__navigation-button--opened\",\n );\n\n for (let i = 0; i < this.$links.length; i++) {\n this.$links[i].setAttribute(\"tabindex\", \"-1\");\n }\n }\n } else {\n if (this.$navigation) {\n this.$navigation.classList.add(\"tna-global-header__navigation--open\");\n this.$navigation.hidden = false;\n this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n }\n if (this.$topNavigation) {\n this.$topNavigation.classList.add(\n \"tna-global-header__top-navigation--open\",\n );\n this.$topNavigation.hidden = false;\n this.$topNavigation.setAttribute(\"aria-hidden\", \"false\");\n }\n this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n\n for (let i = 0; i < this.$links.length; i++) {\n this.$links[i].setAttribute(\"tabindex\", \"0\");\n }\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","replace","c","crypto","getRandomValues","Uint8Array","toString","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","GlobalHeader","$module","_classCallCheck","this","$toggleButtonWrapper","querySelector","$navigation","$topNavigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","_this","uniqueId","concat","uuidv4","uniqueIdTop","setAttribute","$toggleButton","document","createElement","innerText","join","classList","add","$hamburger","appendChild","syncState","addEventListener","handleToggleNavigation","addListener","matches","hidden","i","length","remove"],"sourceRoot":""}

package/nationalarchives/components/global-header/global-header.mjs ADDED Viewed

@@ -0,0 +1,146 @@
+import uuidv4 from "../../lib/uuid.mjs";
+export class GlobalHeader {
+  constructor($module) {
+    this.$module = $module;
+    this.$toggleButtonWrapper =
+      $module &&
+      $module.querySelector(".tna-global-header__navigation-button-wrapper");
+    this.$navigation =
+      $module &&
+      $module.querySelector(".tna-global-header__navigation-wrapper");
+    this.$topNavigation =
+      $module &&
+      $module.querySelector(".tna-global-header__top-navigation-wrapper");
+    this.$links =
+      $module &&
+      ((this.$navigation &&
+        this.$navigation.querySelectorAll("[tabindex='0']")) ||
+        (this.$topNavigation &&
+          this.$topNavigation.querySelectorAll("[tabindex='0']")));
+    this.menuOpened = false;
+    this.mql = window.matchMedia("(max-width: 768px)");
+  }
+  init() {
+    if (
+      !this.$module ||
+      !this.$toggleButtonWrapper ||
+      (!this.$navigation && !this.$topNavigation)
+    ) {
+      return;
+    }
+    const uniqueId = `tna-menu-content-${uuidv4()}`;
+    const uniqueIdTop = `${uniqueId}-top`;
+    if (this.$navigation) {
+      this.$navigation.setAttribute("id", uniqueId);
+    }
+    if (this.$topNavigation) {
+      this.$topNavigation.setAttribute("id", uniqueIdTop);
+    }
+    this.$toggleButton = document.createElement("button");
+    this.$toggleButton.innerText = "Menu";
+    this.$toggleButton.setAttribute(
+      "aria-controls",
+      [uniqueId, uniqueIdTop].join(" "),
+    );
+    this.$toggleButton.setAttribute("aria-haspopup", "true");
+    this.$toggleButton.classList.add("tna-global-header__navigation-button");
+    this.$hamburger = document.createElement("div");
+    this.$hamburger.classList.add("tna-global-header__hamburger");
+    this.$toggleButton.appendChild(this.$hamburger);
+    this.$toggleButtonWrapper.appendChild(this.$toggleButton);
+    this.syncState();
+    this.$toggleButton.addEventListener("click", () =>
+      this.handleToggleNavigation(),
+    );
+    if ("addEventListener" in this.mql) {
+      this.mql.addEventListener("change", () => this.syncState());
+    } else {
+      this.mql.addListener(() => this.syncState());
+    }
+  }
+  handleToggleNavigation() {
+    this.menuOpened = !this.menuOpened;
+    this.syncState();
+  }
+  syncState() {
+    if (this.mql.matches) {
+      if (this.menuOpened) {
+        if (this.$navigation) {
+          this.$navigation.classList.add("tna-global-header__navigation--open");
+          this.$navigation.hidden = false;
+          this.$navigation.setAttribute("aria-hidden", "false");
+        }
+        if (this.$topNavigation) {
+          this.$topNavigation.classList.add(
+            "tna-global-header__top-navigation--open",
+          );
+          this.$topNavigation.hidden = false;
+          this.$topNavigation.setAttribute("aria-hidden", "false");
+        }
+        this.$toggleButton.setAttribute("aria-expanded", "true");
+        this.$toggleButton.setAttribute("title", "Close menu");
+        this.$toggleButton.classList.add(
+          "tna-global-header__navigation-button--opened",
+        );
+        for (let i = 0; i < this.$links.length; i++) {
+          this.$links[i].setAttribute("tabindex", "0");
+        }
+      } else {
+        if (this.$navigation) {
+          this.$navigation.classList.remove(
+            "tna-global-header__navigation--open",
+          );
+          this.$navigation.hidden = true;
+          this.$navigation.setAttribute("aria-hidden", "true");
+        }
+        if (this.$topNavigation) {
+          this.$topNavigation.classList.remove(
+            "tna-global-header__top-navigation--open",
+          );
+          this.$topNavigation.hidden = true;
+          this.$topNavigation.setAttribute("aria-hidden", "true");
+        }
+        this.$toggleButton.setAttribute("aria-expanded", "false");
+        this.$toggleButton.setAttribute("title", "Open menu");
+        this.$toggleButton.classList.remove(
+          "tna-global-header__navigation-button--opened",
+        );
+        for (let i = 0; i < this.$links.length; i++) {
+          this.$links[i].setAttribute("tabindex", "-1");
+        }
+      }
+    } else {
+      if (this.$navigation) {
+        this.$navigation.classList.add("tna-global-header__navigation--open");
+        this.$navigation.hidden = false;
+        this.$navigation.setAttribute("aria-hidden", "false");
+      }
+      if (this.$topNavigation) {
+        this.$topNavigation.classList.add(
+          "tna-global-header__top-navigation--open",
+        );
+        this.$topNavigation.hidden = false;
+        this.$topNavigation.setAttribute("aria-hidden", "false");
+      }
+      this.$toggleButton.setAttribute("aria-expanded", "true");
+      this.$toggleButton.setAttribute("title", "Close menu");
+      for (let i = 0; i < this.$links.length; i++) {
+        this.$links[i].setAttribute("tabindex", "0");
+      }
+    }
+  }
+}