From 7e6eceee078c1c24b6482c446c0bf82a705e1d50 Mon Sep 17 00:00:00 2001 From: Holly Auten Date: Wed, 30 Jul 2025 16:52:54 -0500 Subject: [PATCH 1/5] add html for banner --- _includes/gov-banner.html | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 _includes/gov-banner.html 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 From 20923dc98bc8acb79b7f0e056dc90b062070e140 Mon Sep 17 00:00:00 2001 From: Holly Auten Date: Wed, 30 Jul 2025 16:53:01 -0500 Subject: [PATCH 2/5] add css for banner --- assets/css/gov-banner.css | 255 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 255 insertions(+) create mode 100644 assets/css/gov-banner.css 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 From cbe4c2dbed6cd3fb50b99c3169716da2abd57b24 Mon Sep 17 00:00:00 2001 From: Holly Auten Date: Wed, 30 Jul 2025 16:53:09 -0500 Subject: [PATCH 3/5] add banner images --- assets/images/flag.png | Bin 0 -> 526 bytes assets/images/icon-dot-gov.svg | 1 + assets/images/icon-https.svg | 1 + 3 files changed, 2 insertions(+) create mode 100644 assets/images/flag.png create mode 100644 assets/images/icon-dot-gov.svg create mode 100644 assets/images/icon-https.svg diff --git a/assets/images/flag.png b/assets/images/flag.png new file mode 100644 index 0000000000000000000000000000000000000000..ad5eceed386c1e78136808b0e8829da203ecee1b GIT binary patch literal 526 zcmV+p0`dKcP)RX!^y=yfCXr!ZijRMzvkbMcbnok*3Y#p4wlg44qdY0H9tJac` zL59R;k;RpJ(j2V+^APr2e_kBa5*pG0(`@P7#)?1(4S{$Z%n%AEq=fu?)G~;Df9o6G zBJ@ z1`q#y>Lu;K3Miz6WFG4l%6P0}0@wOXR`CIy30Y%>5>i4sK7S-A)#Lt_86b>TGU0@j zkh$3_4HzVEk#oR%2w&%8IbTyEV~jRoE1ZxL5)P(L|A|3S${!H?pdo(Ab;1cLAz{R7 zz@(?}N4{B*>DpA1kZHq)$ literal 0 HcmV?d00001 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 From 74056c99312899c90e355be76b879f84e808aab1 Mon Sep 17 00:00:00 2001 From: Holly Auten Date: Wed, 30 Jul 2025 16:53:16 -0500 Subject: [PATCH 4/5] call new css --- _includes/head.html | 1 + 1 file changed, 1 insertion(+) 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 @@ + From 9b3a34d4be57357415240b53db2c7acf1ea96d6e Mon Sep 17 00:00:00 2001 From: Holly Auten Date: Wed, 30 Jul 2025 16:53:24 -0500 Subject: [PATCH 5/5] call new html --- _layouts/container-default.html | 1 + _layouts/default.html | 1 + _layouts/project-index.html | 1 + _layouts/redirect.html | 1 + 4 files changed, 4 insertions(+) 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' %}