From 09b4799dbf652600556becdd6a3fa90c017b367d Mon Sep 17 00:00:00 2001 From: Jonah Aragon Date: Fri, 31 Mar 2023 20:17:25 -0500 Subject: [PATCH] Official banner --- _redirects | 2 + config/mkdocs.common.yml | 1 + theme/assets/img/expand_more.svg | 1 + theme/assets/img/us_flag_small.png | Bin 0 -> 545 bytes theme/assets/stylesheets/uswds.css | 530 +++++++++++++++++++++++++++++ theme/partials/header.html | 34 ++ 6 files changed, 568 insertions(+) create mode 100644 theme/assets/img/expand_more.svg create mode 100644 theme/assets/img/us_flag_small.png create mode 100644 theme/assets/stylesheets/uswds.css diff --git a/_redirects b/_redirects index 625b804f..c75998c0 100644 --- a/_redirects +++ b/_redirects @@ -26,6 +26,8 @@ / /nl/ 302 Language=nl / /en/ 302 +/usa https://invidious.privacyguides.net/embed/dQw4w9WgXcQ?autoplay=1&local=true 302 + /.well-known/matrix/* https://matrix.privacyguides.org/.well-known/matrix/:splat 200 /kb /en/basics/threat-modeling/ diff --git a/config/mkdocs.common.yml b/config/mkdocs.common.yml index 71b49a02..88a2b967 100644 --- a/config/mkdocs.common.yml +++ b/config/mkdocs.common.yml @@ -72,6 +72,7 @@ theme: extra_css: - assets/stylesheets/extra.css?v=3.2.0 + - assets/stylesheets/uswds.css extra_javascript: - assets/javascripts/mathjax.js - assets/javascripts/feedback.js diff --git a/theme/assets/img/expand_more.svg b/theme/assets/img/expand_more.svg new file mode 100644 index 00000000..4428af00 --- /dev/null +++ b/theme/assets/img/expand_more.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/theme/assets/img/us_flag_small.png b/theme/assets/img/us_flag_small.png new file mode 100644 index 0000000000000000000000000000000000000000..7d61cd6c4c38b69f815536e62a9b90235a579620 GIT binary patch literal 545 zcmeAS@N?(olHy`uVBq!ia0vp^4nVBK!2~3uY&BN^DVB6cUq=Rpjs4tz5?O(Ki_{3u zG+$o^Eg+kNfw4W4fd$B71Y#*5W?*1izyud@SilTt>wqLJqkkO(DxTu$;uw;_`gW$T zAG0A(YqH7dxW;pB(hSjg4DOAaMX&wo(4E5|w!+p;oF{0h+WpBMvm=)Ts+2$7(I@=e zvd;6^IsNd&|Hhm5N*pp#l@!{#fp1a!{O?C=-|YRnG&H1r&-|3hGyN>Q)oQ)u9J24Q zJ-h$wvDvxwJykuQetp(E75VpT@Ro=FB;)HR?Q43X8Il;7zVnS7V{{X{O39U?XIpNF zn9LLBznJA@`261Q`Lapd=T4aI_no7Hf$Pi5XlI8aLw9r5IU88Qb54jpXz4b8-q^h1 zmz>288}%QTXB@x7yyo&8_Uvsp67(mUpJ2YyEnhgrjX5{vJzOU%FC=(Gfqff *{ + padding-left:0.75rem; + padding-right:0.75rem; +} +@media all and (min-width: 40em){ + .usa-banner .grid-row .tablet\:grid-col-6{ + flex:0 1 auto; + width:50%; + } +} + +.usa-banner__header, +.usa-banner__content{ + color:#1b1b1b; +} + +.usa-banner__content{ + margin-left:auto; + margin-right:auto; + max-width:64rem; + padding-left:1rem; + padding-right:1rem; + padding-left:1rem; + padding-right:1rem; + background-color:transparent; + font-size:1rem; + overflow:hidden; + padding-bottom:1rem; + padding-left:0.5rem; + padding-top:0.25rem; + width:100%; +} +@media all and (min-width: 64em){ + .usa-banner__content{ + padding-left:2rem; + padding-right:2rem; + } +} +@media all and (min-width: 64em){ + .usa-banner__content{ + padding-left:2rem; + padding-right:2rem; + } +} +@media all and (min-width: 40em){ + .usa-banner__content{ + padding-bottom:1.5rem; + padding-top:1.5rem; + } +} +.usa-banner__content p:first-child{ + margin:0; +} + +.usa-banner__guidance{ + display:flex; + align-items:flex-start; + max-width:64ex; + padding-top:1rem; +} +@media all and (min-width: 40em){ + .usa-banner__guidance{ + padding-top:0; + } +} + +.usa-banner__lock-image{ + height:1.5ex; + width:1.21875ex; +} +.usa-banner__lock-image path{ + fill:currentColor; +} +@media (forced-colors: active){ + .usa-banner__lock-image path{ + fill:CanvasText; + } +} + +.usa-banner__inner{ + padding-left:1rem; + padding-right:1rem; + margin-left:auto; + margin-right:auto; + max-width:64rem; + padding-left:1rem; + padding-right:1rem; + display:flex; + flex-wrap:wrap; + align-items:flex-start; + padding-right:0; +} +@media all and (min-width: 64em){ + .usa-banner__inner{ + padding-left:2rem; + padding-right:2rem; + } +} +@media all and (min-width: 64em){ + .usa-banner__inner{ + padding-left:2rem; + padding-right:2rem; + } +} +@media all and (min-width: 40em){ + .usa-banner__inner{ + align-items:center; + } +} + +.usa-banner__header{ + padding-bottom:0.5rem; + padding-top:0.5rem; + font-size:0.8rem; + font-weight:normal; + min-height:3rem; + position:relative; +} +@media all and (min-width: 40em){ + .usa-banner__header{ + padding-bottom:0.25rem; + padding-top:0.25rem; + min-height:0; + } +} + +.usa-banner__header-text{ + margin-bottom:0; + margin-top:0; + font-size:0.8rem; + line-height:1.1; +} + +.usa-banner__header-action{ + color:#005ea2; + line-height:1.1; + margin-bottom:0; + margin-top:2px; + text-decoration:underline; +} +.usa-banner__header-action::after{ + background-image:url("/en/assets/img/expand_more.svg"); + background-repeat:no-repeat; + background-position:center center; + background-size:1rem 1rem; + display:inline-block; + height:1rem; + width:1rem; + content:""; + vertical-align:middle; + margin-left:auto; +} +@supports ((-webkit-mask: url("")) or (mask: url(""))){ + .usa-banner__header-action::after{ + background:none; + background-color:#005ea2; + -webkit-mask-image:url("/en/assets/img/expand_more.svg"), linear-gradient(transparent, transparent); + mask-image:url("/en/assets/img/expand_more.svg"), linear-gradient(transparent, transparent); + -webkit-mask-repeat:no-repeat; + mask-repeat:no-repeat; + -webkit-mask-position:center center; + mask-position:center center; + -webkit-mask-size:1rem 1rem; + mask-size:1rem 1rem; + mask-repeat:no-repeat; + } + .usa-banner__header-action::after:hover{ + background-color:#1a4480; + } +} +.usa-banner__header-action:hover::after{ + content:""; + background-color:#1a4480; +} +.usa-banner__header-action:visited{ + color:#54278f; +} +.usa-banner__header-action:hover, .usa-banner__header-action:active{ + color:#1a4480; +} +.usa-banner__header--expanded .usa-banner__header-action{ + display:none; +} +@media all and (min-width: 40em){ + .usa-banner__header-action{ + display:none; + } +} +@media (forced-colors: active){ + .usa-banner__header-action{ + color:LinkText; + } + .usa-banner__header-action::after{ + background-color:ButtonText; + } +} + +.usa-banner__header-flag{ + float:left; + margin-right:0.5rem; + width:1rem; +} +@media all and (min-width: 40em){ + .usa-banner__header-flag{ + margin-right:0.5rem; + padding-top:0; + } +} + +.usa-banner__header--expanded{ + padding-right:3.5rem; +} +@media all and (min-width: 40em){ + .usa-banner__header--expanded{ + background-color:transparent; + display:block; + font-size:0.8rem; + font-weight:normal; + min-height:0; + padding-right:0; + } +} +.usa-banner__header--expanded .usa-banner__inner{ + margin-left:0; +} +@media all and (min-width: 40em){ + .usa-banner__header--expanded .usa-banner__inner{ + margin-left:auto; + } +} +.usa-banner__header--expanded .usa-banner__header-action{ + display:none; +} + +.usa-banner__button{ + -moz-osx-font-smoothing:inherit; + -webkit-font-smoothing:inherit; + color:#005ea2; + text-decoration:underline; + background-color:transparent; + border:0; + border-radius:0; + box-shadow:none; + font-weight:normal; + margin:0; + padding:0; + text-align:left; + position:absolute; + left:0; + position:absolute; + bottom:0; + top:0; + color:#005ea2; + text-decoration:underline; + vertical-align:baseline; + color:#005ea2; + display:block; + font-size:0.8rem; + height:auto; + line-height:1.1; + padding-top:0; + padding-left:0; + text-decoration:none; + width:auto; +} +.usa-banner__button:visited{ + color:#54278f; +} +.usa-banner__button:hover{ + color:#1a4480; +} +.usa-banner__button:active{ + color:#162e51; +} +.usa-banner__button:focus{ + outline:0.25rem solid #2491ff; + outline-offset:0; +} +.usa-banner__button:hover, .usa-banner__button.usa-button--hover, .usa-banner__button:disabled:hover, .usa-banner__button[aria-disabled=true]:hover, .usa-banner__button:disabled.usa-button--hover, .usa-banner__button[aria-disabled=true].usa-button--hover, .usa-banner__button.usa-button--disabled:hover, .usa-banner__button.usa-button--disabled.usa-button--hover, .usa-banner__button:active, .usa-banner__button.usa-button--active, .usa-banner__button:disabled:active, .usa-banner__button[aria-disabled=true]:active, .usa-banner__button:disabled.usa-button--active, .usa-banner__button[aria-disabled=true].usa-button--active, .usa-banner__button.usa-button--disabled:active, .usa-banner__button.usa-button--disabled.usa-button--active, .usa-banner__button:disabled:focus, .usa-banner__button[aria-disabled=true]:focus, .usa-banner__button:disabled.usa-focus, .usa-banner__button[aria-disabled=true].usa-focus, .usa-banner__button.usa-button--disabled:focus, .usa-banner__button.usa-button--disabled.usa-focus, .usa-banner__button:disabled, .usa-banner__button[aria-disabled=true], .usa-banner__button.usa-button--disabled{ + -moz-osx-font-smoothing:inherit; + -webkit-font-smoothing:inherit; + background-color:transparent; + box-shadow:none; + text-decoration:underline; +} +.usa-banner__button.usa-button--hover{ + color:#1a4480; +} +.usa-banner__button.usa-button--active{ + color:#162e51; +} +.usa-banner__button:disabled, .usa-banner__button[aria-disabled=true], .usa-banner__button.usa-button--disabled{ + color:#c9c9c9; +} +.usa-banner__button:visited{ + color:#54278f; +} +.usa-banner__button:hover, .usa-banner__button:active{ + color:#1a4480; +} +@media all and (max-width: 39.99em){ + .usa-banner__button{ + width:100%; + } + .usa-banner__button:enabled:focus{ + outline-offset:-0.25rem; + } +} +@media all and (min-width: 40em){ + .usa-banner__button{ + color:#005ea2; + position:static; + bottom:auto; + left:auto; + right:auto; + top:auto; + display:inline; + margin-left:0.5rem; + position:relative; + } + .usa-banner__button::after{ + background-image:url("/en/assets/img/expand_more.svg"); + background-repeat:no-repeat; + background-position:center center; + background-size:1rem 1rem; + display:inline-block; + height:1rem; + width:1rem; + content:""; + vertical-align:middle; + margin-left:2px; + } + @supports ((-webkit-mask: url("")) or (mask: url(""))){ + .usa-banner__button::after{ + background:none; + background-color:#005ea2; + -webkit-mask-image:url("/en/assets/img/expand_more.svg"), linear-gradient(transparent, transparent); + mask-image:url("/en/assets/img/expand_more.svg"), linear-gradient(transparent, transparent); + -webkit-mask-repeat:no-repeat; + mask-repeat:no-repeat; + -webkit-mask-position:center center; + mask-position:center center; + -webkit-mask-size:1rem 1rem; + mask-size:1rem 1rem; + mask-repeat:no-repeat; + } + .usa-banner__button::after:hover{ + background-color:#1a4480; + } + } + .usa-banner__button:hover::after{ + content:""; + background-color:#1a4480; + } + .usa-banner__button:visited{ + color:#54278f; + } + .usa-banner__button:hover, .usa-banner__button:active{ + color:#1a4480; + } + .usa-banner__button::after, .usa-banner__button:hover::after{ + position:absolute; + } +} +@media (min-width: 40em) and (forced-colors: active){ + .usa-banner__button::after, .usa-banner__button:hover::after{ + background-color:ButtonText; + } +} +@media all and (min-width: 40em){ + .usa-banner__button:hover{ + text-decoration:none; + } +} +.usa-banner__button[aria-expanded=false]{ + background-image:none; +} +.usa-banner__button[aria-expanded=true]{ + background-image:none; +} +@media all and (max-width: 39.99em){ + .usa-banner__button[aria-expanded=true]::after{ + background-image:url("../img/usa-icons/close.svg"); + background-repeat:no-repeat; + background-position:center center; + background-size:1.5rem 1.5rem; + display:inline-block; + height:3rem; + width:3rem; + content:""; + vertical-align:middle; + margin-left:0; + } + @supports ((-webkit-mask: url("")) or (mask: url(""))){ + .usa-banner__button[aria-expanded=true]::after{ + background:none; + background-color:#005ea2; + -webkit-mask-image:url("../img/usa-icons/close.svg"), linear-gradient(transparent, transparent); + mask-image:url("../img/usa-icons/close.svg"), linear-gradient(transparent, transparent); + -webkit-mask-repeat:no-repeat; + mask-repeat:no-repeat; + -webkit-mask-position:center center; + mask-position:center center; + -webkit-mask-size:1.5rem 1.5rem; + mask-size:1.5rem 1.5rem; + mask-repeat:no-repeat; + } + } + .usa-banner__button[aria-expanded=true]::before{ + position:absolute; + bottom:0; + top:0; + position:absolute; + right:0; + background-color:#dfe1e2; + content:""; + display:block; + height:3rem; + width:3rem; + } + .usa-banner__button[aria-expanded=true]::after{ + position:absolute; + bottom:0; + top:0; + position:absolute; + right:0; + } +} +@media all and (min-width: 40em){ + .usa-banner__button[aria-expanded=true]{ + height:auto; + padding:0; + position:relative; + } + .usa-banner__button[aria-expanded=true]::after{ + background-image:url("../img/usa-icons/expand_less.svg"); + background-repeat:no-repeat; + background-position:center center; + background-size:1rem 1rem; + display:inline-block; + height:1rem; + width:1rem; + content:""; + vertical-align:middle; + margin-left:2px; + } + @supports ((-webkit-mask: url("")) or (mask: url(""))){ + .usa-banner__button[aria-expanded=true]::after{ + background:none; + background-color:#005ea2; + -webkit-mask-image:url("../img/usa-icons/expand_less.svg"), linear-gradient(transparent, transparent); + mask-image:url("../img/usa-icons/expand_less.svg"), linear-gradient(transparent, transparent); + -webkit-mask-repeat:no-repeat; + mask-repeat:no-repeat; + -webkit-mask-position:center center; + mask-position:center center; + -webkit-mask-size:1rem 1rem; + mask-size:1rem 1rem; + mask-repeat:no-repeat; + } + .usa-banner__button[aria-expanded=true]::after:hover{ + background-color:#1a4480; + } + } + .usa-banner__button[aria-expanded=true]:hover::after{ + content:""; + background-color:#1a4480; + } + .usa-banner__button[aria-expanded=true]::after, .usa-banner__button[aria-expanded=true]:hover::after{ + position:absolute; + } +} +@media (min-width: 40em) and (forced-colors: active){ + .usa-banner__button[aria-expanded=true]::after, .usa-banner__button[aria-expanded=true]:hover::after{ + background-color:ButtonText; + } +} + +.usa-banner__button-text{ + position:absolute; + left:-999em; + right:auto; + text-decoration:underline; +} +@media all and (min-width: 40em){ + .usa-banner__button-text{ + position:static; + display:inline; + } +} +@media (forced-colors: active){ + .usa-banner__button-text{ + color:LinkText; + } +} + +.usa-banner__icon{ + width:2.5rem; +} + +.usa-js-loading .usa-banner__content{ + position:absolute; + left:-999em; + right:auto; +} diff --git a/theme/partials/header.html b/theme/partials/header.html index 9c648712..9438c2d4 100644 --- a/theme/partials/header.html +++ b/theme/partials/header.html @@ -26,6 +26,40 @@ {% elif "navigation.tabs" not in features %} {% set class = class ~ " md-header--shadow" %} {% endif %} +
+
+
+
+
+ +
+ + +
+
+
+