diff --git a/_includes/gov-banner.html b/_includes/gov-banner.html new file mode 100644 index 000000000..cfe9e8aac --- /dev/null +++ b/_includes/gov-banner.html @@ -0,0 +1,28 @@ +
+
+
+ +

An official website of the United States government

+ + +
+
+
+ +

Official websites use .gov
A .gov website belongs to an official government organization in the United States.

+
+
+ +

Secure .gov websites use HTTPS
A lock ( + + + + + + ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

+
+
+
+
\ No newline at end of file diff --git a/_includes/head.html b/_includes/head.html index 9aa173e6b..3f628705b 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -15,6 +15,7 @@ + diff --git a/_layouts/container-default.html b/_layouts/container-default.html index 6b7dd00e0..3e687fa21 100644 --- a/_layouts/container-default.html +++ b/_layouts/container-default.html @@ -2,6 +2,7 @@ {% include head.html %} + {% include gov-banner.html %} {% include header.html %} {% include layout/hero.html title=page.title tag='h1' %}
diff --git a/_layouts/default.html b/_layouts/default.html index 0ce4af8f5..f1708fed6 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -2,6 +2,7 @@ {% include head.html %} + {% include gov-banner.html %} {% include header.html %} {% include layout/hero.html title=page.title tag='h1' %}
diff --git a/_layouts/project-index.html b/_layouts/project-index.html index c9fe59734..33114f65f 100644 --- a/_layouts/project-index.html +++ b/_layouts/project-index.html @@ -2,6 +2,7 @@ {% include head.html %} + {% include gov-banner.html %} {% include header.html %}
{{ content }} diff --git a/_layouts/redirect.html b/_layouts/redirect.html index 88683c152..4143a0979 100644 --- a/_layouts/redirect.html +++ b/_layouts/redirect.html @@ -4,6 +4,7 @@ + {% include gov-banner.html %} {% include header.html %} {% include layout/hero.html title=page.title tag='h1' %}
diff --git a/assets/css/gov-banner.css b/assets/css/gov-banner.css new file mode 100644 index 000000000..5eec2ffac --- /dev/null +++ b/assets/css/gov-banner.css @@ -0,0 +1,255 @@ +/* gov banner */ +.usa-banner { + background-color: #d9dfea; + width: 100%; +} + +.usa-banner__content, +.usa-banner__header { + color: #52565c; +} + +.usa-accordion { + padding-bottom: .25rem; + padding-top: .25rem; +} + +.usa-accordion__content { + padding-bottom: 1.5rem; + padding-top: 1.5rem; + display: inline-flex; +} + +.usa-media-block__body { + display: flex; + align-items: start; +} + +.usa-banner__header-flag { + float: left; + width: 1rem; + margin-right: .5rem; +} + +.usa-banner__header-text { + margin-bottom: 0; + margin-top: 0; + font-size: .75rem; + line-height: 1.2; +} + +.usa-accordion__button.usa-banner__button { + border-style: none; + color: #21409a; + display: inline; + margin-left: .5rem; +} + +.usa-banner__button { + border-style: none; + color: #21409a; + display: inline; + margin-left: .5rem; + background-color: transparent; + font-size: .75rem; + height: auto; + line-height: 1.2; + padding: 0; + text-decoration: none; + width: auto; +} + +.usa-banner__button-text { + text-decoration: underline; +} + +.usa-banner__icon { + width: 2.5rem; + margin-right: .5rem; +} + +.usa-banner__lock-image { + height: 1.5ex; + width: 1.21875ex; +} + +.site-banner .usa-banner__button::after, .site-banner .usa-banner__button:hover::after { + background-color: #2491ff; +} + +@media (min-width: 40em) { + .usa-banner__button::after, + .usa-banner__button:hover::after, + .usa-banner__button[aria-expanded="true"]::after { + position: absolute; + } + + .usa-banner__inner { + display: flex + } +} + +@supports ((-webkit-mask:url()) or (mask:url())) { + .usa-banner__button::after, + .usa-banner__header-action::after { + background: 0 0; + background-color: rgba(0, 0, 0, 0); + -webkit-mask-image: url('data:image/svg+xml,'),linear-gradient(transparent,transparent); + mask-image: url('data:image/svg+xml,'),linear-gradient(transparent,transparent); + -webkit-mask-position: center center; + mask-position: center center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 1rem 1rem; + mask-size: 1rem 1rem; + } +} + +.usa-banner__button::after, +.usa-banner__header-action::after { + background-image: url('data:image/svg+xml,'); + 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; +} + +@media (min-width: 40em) { + @supports ((-webkit-mask:url()) or (mask:url())) { + .usa-banner__button[aria-expanded="true"]::after { + background: 0 0; + background-color: rgba(0, 0, 0, 0); + -webkit-mask-image: url('data:image/svg+xml,'),linear-gradient(transparent,transparent); + mask-image: url('data:image/svg+xml,'),linear-gradient(transparent,transparent); + -webkit-mask-position: center center; + mask-position: center center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 1rem 1rem; + mask-size: 1rem 1rem; + } + } +} + +@media (min-width: 40em) { + .usa-banner__button[aria-expanded="true"]::after { + background-image: url('data:image/svg+xml,'); + 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; + } +} + +@media (max-width: 39.99em) { + .usa-banner__button[aria-expanded="true"]::before { + bottom: 0; + top: 0; + position: absolute; + right: 0; + background-color: #e6e6e6; + content: ""; + display: block; + height: 3rem; + width: 3rem; + } + + .usa-banner__button::after { + display: none; + } +} + +@media (max-width: 39.99em) { + @supports ((-webkit-mask:url()) or (mask:url())) { + .usa-banner__button[aria-expanded="true"]::after { + background: 0 0; + background-color: rgba(0, 0, 0, 0); + background-color: #005ea2; + -webkit-mask-image: url('data:image/svg+xml,'),linear-gradient(transparent,transparent); + mask-image: url('data:image/svg+xml,'),linear-gradient(transparent,transparent); + -webkit-mask-position: center center; + mask-position: center center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 1.5rem 1.5rem; + mask-size: 1.5rem 1.5rem; + } + } +} + +@media (max-width: 39.99em) { + .usa-banner__button[aria-expanded="true"]::after { + bottom: 0; + top: 0; + position: absolute; + right: 0; + background-image: url('data:image/svg+xml,'); + 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; + } +} + +.usa-banner { + position: relative; + min-height: 3rem; +} + +.usa-accordion__button { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.usa-banner__button-text { + position: absolute; + left: -999em; + right: auto; +} + +.usa-banner__header-action { + color: #21409a; + font-size: .75rem; + line-height: 1.2; + margin-bottom: 0; + margin-top: 2px; + text-decoration: underline; +} + +@media (min-width: 40em) { + .usa-banner { + min-height: 0; + } + + .usa-banner__button { + position: relative; + } + + .usa-banner__button-text { + position: static; + display: inline; + } + + .usa-banner__header-action { + display: none; + } +} +/* end gov banner */ \ No newline at end of file diff --git a/assets/images/flag.png b/assets/images/flag.png new file mode 100644 index 000000000..ad5eceed3 Binary files /dev/null and b/assets/images/flag.png differ diff --git a/assets/images/icon-dot-gov.svg b/assets/images/icon-dot-gov.svg new file mode 100644 index 000000000..641cbb8e2 --- /dev/null +++ b/assets/images/icon-dot-gov.svg @@ -0,0 +1 @@ +dot gov icon \ No newline at end of file diff --git a/assets/images/icon-https.svg b/assets/images/icon-https.svg new file mode 100644 index 000000000..451632366 --- /dev/null +++ b/assets/images/icon-https.svg @@ -0,0 +1 @@ +https icon \ No newline at end of file