Official banner

_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/

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

theme/assets/img/expand_more.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>

theme/assets/stylesheets/uswds.css

@@ -0,0 +1,530 @@
+.usa-banner{
+  font-family:Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
+  font-size:1.06rem;
+  line-height:1.5;
+  background-color:#f0f0f0;
+}
+@media all and (min-width: 40em){
+  .usa-banner{
+    font-size:0.87rem;
+    padding-bottom:0;
+  }
+}
+.usa-banner .usa-accordion{
+  font-family:Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
+  font-size:1.06rem;
+  line-height:1.5;
+}
+.usa-banner .grid-row{
+  display:flex;
+  flex-wrap:wrap;
+}
+.usa-banner .grid-row.grid-gap-lg{
+  margin-left:-0.75rem;
+  margin-right:-0.75rem;
+}
+.usa-banner .grid-row.grid-gap-lg > *{
+  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;
+}

theme/partials/header.html

@@ -26,6 +26,40 @@
 {% elif "navigation.tabs" not in features %}
   {% set class = class ~ " md-header--shadow" %}
 {% endif %}
+<section
+  class="usa-banner"
+  aria-label="Official website of the United States government"
+>
+  <div class="usa-accordion">
+    <header class="usa-banner__header">
+      <div class="usa-banner__inner">
+        <div class="grid-col-auto">
+          <img
+            aria-hidden="true"
+            class="usa-banner__header-flag"
+            src="/en/assets/img/us_flag_small.png"
+            alt=""
+          />
+        </div>
+        <div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
+          <p class="usa-banner__header-text">
+            An official website of the United States government
+          </p>
+          <p class="usa-banner__header-action">Here’s how you know</p>
+        </div>
+        <a
+          type="button"
+          class="usa-accordion__button usa-banner__button"
+          aria-expanded="false"
+          aria-controls="gov-banner-default-default"
+          href="/usa"
+        >
+          <span class="usa-banner__button-text">Here’s how you know</span>
+        </a>
+      </div>
+    </header>
+  </div>
+</section>
 <header class="{{ class }}" data-md-component="header">
     <nav class="md-header__inner md-grid" aria-label="{{ lang.t('header') }}">
         <a href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}" title="{{ config.site_name | e }}" class="md-header__button md-logo" aria-label="{{ config.site_name }}" data-md-component="logo">