From db83ada9645c4863e8e692ed49af3b3928fe5583 Mon Sep 17 00:00:00 2001 From: Jay X Anaya Date: Wed, 23 Oct 2024 14:56:00 -0400 Subject: [PATCH] Gov notice and Challenge header with Logged In and Logged out states - on eval branch. --- assets/css/shared/_uswds-overrides.scss | 144 +++++++++++++++ .../images/challenge-logo-white-orange.svg | 67 +++++++ assets/static/images/close.svg | 1 + assets/static/images/icon-dot-gov.svg | 1 + assets/static/images/icon-https.svg | 1 + assets/static/images/search.svg | 1 + assets/static/images/us_flag_small.png | Bin 0 -> 176 bytes lib/web/templates/layout/_govheader.html.eex | 167 ++++++++++++++++++ lib/web/templates/layout/_header.html.eex | 16 +- lib/web/templates/layout/app.html.eex | 24 +-- lib/web/templates/layout/root.html.eex | 2 + 11 files changed, 389 insertions(+), 35 deletions(-) create mode 100644 assets/static/images/challenge-logo-white-orange.svg create mode 100644 assets/static/images/close.svg create mode 100644 assets/static/images/icon-dot-gov.svg create mode 100644 assets/static/images/icon-https.svg create mode 100644 assets/static/images/search.svg create mode 100644 assets/static/images/us_flag_small.png create mode 100644 lib/web/templates/layout/_govheader.html.eex diff --git a/assets/css/shared/_uswds-overrides.scss b/assets/css/shared/_uswds-overrides.scss index cdd6c2a01..1c6063887 100644 --- a/assets/css/shared/_uswds-overrides.scss +++ b/assets/css/shared/_uswds-overrides.scss @@ -43,3 +43,147 @@ } } } + + +@media (forced-colors:active) { + .usa-combo-box--pristine .usa-combo-box__clear-input { + background: url(/images/uswds/img/usa-icons/close.svg) no-repeat 50%/contain; + display: inline-block; + height: 1rem; + height: 1.5rem; + top: .5rem; + width: 1rem; + width: auto + } + + @supports (mask:url("")) { + .usa-combo-box--pristine .usa-combo-box__clear-input { + background: none; + background-color: ButtonText; + mask: url(/images/uswds/img/usa-icons/close.svg) no-repeat center/contain + } + } +} + +.usa-combo-box__clear-input { + background-image: url(/images/uswds/img/usa-icons/close.svg), linear-gradient(transparent, transparent); + background-repeat: no-repeat; + display: none; + right: calc(2.5em + 3px) +} + +@media (max-width:39.99em) { + .usa-banner__button[aria-expanded=true]:after { + background: url(/images/uswds/img/usa-icons/close.svg) no-repeat 50%/contain; + content: ""; + display: inline-block; + height: 3rem; + margin-left: 0; + vertical-align: middle; + width: 3rem + } + + @supports (mask:url("")) { + .usa-banner__button[aria-expanded=true]:after { + background: none; + background-color: #005ea2; + mask: url(/images/uswds/img/usa-icons/close.svg) no-repeat center/contain + } + } +} + + + @media (forced-colors:active) { + .usa-nav__close:before { + background: url(/images/uswds/img/usa-icons/close.svg) no-repeat 50%/contain; + content: ""; + display: inline-block; + height: 1.25rem; + margin-right: auto; + vertical-align: middle; + width: 1.25rem + } + + @supports (mask:url("")) { + .usa-nav__close:before { + background: none; + background-color: ButtonText; + mask: url(/images/uswds/img/usa-icons/close.svg) no-repeat center/contain + } + } + + .usa-nav__close:before { + background-color: buttonText + } + } + + /* +---------------------------------------- +USWDS with settings overrides +---------------------------------------- +Add a list of changed settings in the form $setting: value. +---------------------------------------- +*/ +@use "uswds-core" with ( + $theme-image-path: "images", + $theme-font-path: "fonts", + $flex-direction-settings: ( + responsive: true + ) +); + +@use "uswds" as *; + +.text-left { + text-align: left; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.text-justify { + text-align: justify; +} + +.usa-footer__logo { + display: flex; + align-items: center; +} + +.usa-footer__logo-img { + max-width: 100%; + height: auto; +} + +.footer-white { + color: white; +} + +.usa-footer__social-links .usa-social-link__icon { + /* + * override the default svg stroke color to match USWDS .bg-primary-darker: #162e51 + * source: https://codepen.io/sosuke/pen/Pjoqqp + */ + filter: invert(14%) sepia(17%) saturate(4304%) hue-rotate(190deg) brightness(94%) contrast(92%); +} + +.icon-white { + filter: invert(99%) sepia(2%) saturate(3661%) hue-rotate(191deg) brightness(117%) contrast(80%); +} + +.usa-social-link { + background-color: white; +} + +.usa-footer__secondary-section .usa-social-link:hover .usa-social-link__icon { + background-color: white; +} + + + + diff --git a/assets/static/images/challenge-logo-white-orange.svg b/assets/static/images/challenge-logo-white-orange.svg new file mode 100644 index 000000000..ba9b43c3f --- /dev/null +++ b/assets/static/images/challenge-logo-white-orange.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/static/images/close.svg b/assets/static/images/close.svg new file mode 100644 index 000000000..c3f7c2fd3 --- /dev/null +++ b/assets/static/images/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/static/images/icon-dot-gov.svg b/assets/static/images/icon-dot-gov.svg new file mode 100644 index 000000000..3bf047894 --- /dev/null +++ b/assets/static/images/icon-dot-gov.svg @@ -0,0 +1 @@ +icon-dot-gov \ No newline at end of file diff --git a/assets/static/images/icon-https.svg b/assets/static/images/icon-https.svg new file mode 100644 index 000000000..19ad04fc9 --- /dev/null +++ b/assets/static/images/icon-https.svg @@ -0,0 +1 @@ +icon-https \ No newline at end of file diff --git a/assets/static/images/search.svg b/assets/static/images/search.svg new file mode 100644 index 000000000..8bc614fc7 --- /dev/null +++ b/assets/static/images/search.svg @@ -0,0 +1 @@ +search \ No newline at end of file diff --git a/assets/static/images/us_flag_small.png b/assets/static/images/us_flag_small.png new file mode 100644 index 0000000000000000000000000000000000000000..34b927b42c144bc86c9595a4ad0b1974fc650f5b GIT binary patch literal 176 zcmeAS@N?(olHy`uVBq!ia0vp^0zk~o!3-oFZT@ltDd_;85La2_jdCWNsdZs>Dtz1Xx9)?eB8ySqs+;o{-CNPO__O<#$EE)BU;Sj^ Xf5dDjaSkip to main content +
+
+
+
+
+
+
+ " alt="U.S. flag"> +
+
+

An official website of the United States government

+ +
+ +
+
+
+
+
+ " alt="Dot gov"> +
+

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

+
+
+
+ " alt="Https"> +
+

+ 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. +

+
+
+
+
+
+
+
+
+
+ + +
+
+ +
+ + +
+ +
+
diff --git a/lib/web/templates/layout/_header.html.eex b/lib/web/templates/layout/_header.html.eex index a212a209e..bf9583fd1 100644 --- a/lib/web/templates/layout/_header.html.eex +++ b/lib/web/templates/layout/_header.html.eex @@ -1,20 +1,12 @@ -