Official banner

This commit is contained in:
Jonah Aragon 2023-03-31 20:17:25 -05:00
parent d1c4abcd4f
commit 09b4799dbf
No known key found for this signature in database
6 changed files with 568 additions and 0 deletions

View File

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

View File

@ -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

View File

@ -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>

After

Width:  |  Height:  |  Size: 145 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 545 B

View File

@ -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;
}

View File

@ -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">Heres 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">Heres 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">