Skip to content

Commit 0bc2e11

Browse files
hautenhauten
authored
Merge pull request #715 from LLNL/gov-banner
Implement expand/collapse banner per federal govt web requirements
2 parents adf5e57 + 9b3a34d commit 0bc2e11

10 files changed

Lines changed: 290 additions & 0 deletions

File tree

‎_includes/gov-banner.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<section class="usa-banner" aria-label="Official website of the United States government">
2+
<div class="usa-accordion container">
3+
<div class="usa-banner__inner">
4+
<img aria-hidden="true" class="usa-banner__header-flag" src="/assets/images/flag.png" alt="" />
5+
<p class="usa-banner__header-text">An official website of the United States government</p>
6+
<p class="usa-banner__header-action" aria-hidden="true">Here's how you know</p>
7+
<button type="button" class="usa-accordion__button usa-banner__button" data-bs-toggle="collapse" data-bs-target="#gov-banner" aria-expanded="false" aria-controls="gov-banner">
8+
<span class="usa-banner__button-text">Here’s how you know</span>
9+
</button>
10+
</div>
11+
<div id="gov-banner" class="usa-banner__content usa-accordion__content row collapse" id="gov-banner">
12+
<div class="usa-media-block__body col-12 col-md-6 col-lg-5">
13+
<img class="usa-banner__icon usa-media-block__img" src="/assets/images/icon-dot-gov.svg" role="img" alt="" aria-hidden="true"/>
14+
<p><strong>Official websites use .gov</strong><br />A <strong>.gov</strong> website belongs to an official government organization in the United States.</p>
15+
</div>
16+
<div class="usa-media-block__body col-12 col-md-6 col-lg-5">
17+
<img class="usa-banner__icon usa-media-block__img" src="/assets/images/icon-https.svg" role="img" alt="" aria-hidden="true" />
18+
<p><strong>Secure .gov websites use HTTPS</strong><br />A <strong>lock</strong> (<span class="icon-lock">
19+
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-description-default" focusable="false">
20+
<title id="banner-lock-title-default">Lock</title>
21+
<desc id="banner-lock-description-default">Locked padlock icon</desc>
22+
<path fill="#000000" fill-rule="evenodd" d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z" />
23+
</svg>
24+
</span>) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.</p>
25+
</div>
26+
</div>
27+
</div>
28+
</section>

‎_includes/head.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
<link rel="shortcut icon" href="/assets/images/OS-icon-color.png">
1616
<link rel="icon" href="/assets/images/logomark-software.svg" />
1717
<link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
18+
<link rel="stylesheet" href="/assets/css/gov-banner.css" />
1819
<link rel="stylesheet" href="/assets/css/llnl-header.css" />
1920
<link rel="stylesheet" href="/assets/css/utility.css" />
2021
<link rel="stylesheet" href="/assets/css/components.css" />

‎_layouts/container-default.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
{% include head.html %}
44
<body class="static-text">
5+
{% include gov-banner.html %}
56
{% include header.html %}
67
{% include layout/hero.html title=page.title tag='h1' %}
78
<main class="container">

‎_layouts/default.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
{% include head.html %}
44
<body class="static-text">
5+
{% include gov-banner.html %}
56
{% include header.html %}
67
{% include layout/hero.html title=page.title tag='h1' %}
78
<div class="container">

‎_layouts/project-index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
{% include head.html %}
44
<body class="static-text">
5+
{% include gov-banner.html %}
56
{% include header.html %}
67
<main>
78
{{ content }}

‎_layouts/redirect.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta http-equiv="refresh" content="1;url={{ page.redirect }}"/>
55
<link rel="canonical" href="{{ page.redirect }}"/>
66
<body class="static-text">
7+
{% include gov-banner.html %}
78
{% include header.html %}
89
{% include layout/hero.html title=page.title tag='h1' %}
910
<main class="container">

‎assets/css/gov-banner.css‎

Lines changed: 255 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,255 @@
1+
/* gov banner */
2+
.usa-banner {
3+
background-color: #d9dfea;
4+
width: 100%;
5+
}
6+
7+
.usa-banner__content,
8+
.usa-banner__header {
9+
color: #52565c;
10+
}
11+
12+
.usa-accordion {
13+
padding-bottom: .25rem;
14+
padding-top: .25rem;
15+
}
16+
17+
.usa-accordion__content {
18+
padding-bottom: 1.5rem;
19+
padding-top: 1.5rem;
20+
display: inline-flex;
21+
}
22+
23+
.usa-media-block__body {
24+
display: flex;
25+
align-items: start;
26+
}
27+
28+
.usa-banner__header-flag {
29+
float: left;
30+
width: 1rem;
31+
margin-right: .5rem;
32+
}
33+
34+
.usa-banner__header-text {
35+
margin-bottom: 0;
36+
margin-top: 0;
37+
font-size: .75rem;
38+
line-height: 1.2;
39+
}
40+
41+
.usa-accordion__button.usa-banner__button {
42+
border-style: none;
43+
color: #21409a;
44+
display: inline;
45+
margin-left: .5rem;
46+
}
47+
48+
.usa-banner__button {
49+
border-style: none;
50+
color: #21409a;
51+
display: inline;
52+
margin-left: .5rem;
53+
background-color: transparent;
54+
font-size: .75rem;
55+
height: auto;
56+
line-height: 1.2;
57+
padding: 0;
58+
text-decoration: none;
59+
width: auto;
60+
}
61+
62+
.usa-banner__button-text {
63+
text-decoration: underline;
64+
}
65+
66+
.usa-banner__icon {
67+
width: 2.5rem;
68+
margin-right: .5rem;
69+
}
70+
71+
.usa-banner__lock-image {
72+
height: 1.5ex;
73+
width: 1.21875ex;
74+
}
75+
76+
.site-banner .usa-banner__button::after, .site-banner .usa-banner__button:hover::after {
77+
background-color: #2491ff;
78+
}
79+
80+
@media (min-width: 40em) {
81+
.usa-banner__button::after,
82+
.usa-banner__button:hover::after,
83+
.usa-banner__button[aria-expanded="true"]::after {
84+
position: absolute;
85+
}
86+
87+
.usa-banner__inner {
88+
display: flex
89+
}
90+
}
91+
92+
@supports ((-webkit-mask:url()) or (mask:url())) {
93+
.usa-banner__button::after,
94+
.usa-banner__header-action::after {
95+
background: 0 0;
96+
background-color: rgba(0, 0, 0, 0);
97+
-webkit-mask-image: url('data:image/svg+xml,<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>'),linear-gradient(transparent,transparent);
98+
mask-image: url('data:image/svg+xml,<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>'),linear-gradient(transparent,transparent);
99+
-webkit-mask-position: center center;
100+
mask-position: center center;
101+
-webkit-mask-repeat: no-repeat;
102+
mask-repeat: no-repeat;
103+
-webkit-mask-size: 1rem 1rem;
104+
mask-size: 1rem 1rem;
105+
}
106+
}
107+
108+
.usa-banner__button::after,
109+
.usa-banner__header-action::after {
110+
background-image: url('data:image/svg+xml,<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>');
111+
background-repeat: no-repeat;
112+
background-position: center center;
113+
background-size: 1rem 1rem;
114+
display: inline-block;
115+
height: 1rem;
116+
width: 1rem;
117+
content: "";
118+
vertical-align: middle;
119+
margin-left: 2px;
120+
}
121+
122+
@media (min-width: 40em) {
123+
@supports ((-webkit-mask:url()) or (mask:url())) {
124+
.usa-banner__button[aria-expanded="true"]::after {
125+
background: 0 0;
126+
background-color: rgba(0, 0, 0, 0);
127+
-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></svg>'),linear-gradient(transparent,transparent);
128+
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></svg>'),linear-gradient(transparent,transparent);
129+
-webkit-mask-position: center center;
130+
mask-position: center center;
131+
-webkit-mask-repeat: no-repeat;
132+
mask-repeat: no-repeat;
133+
-webkit-mask-size: 1rem 1rem;
134+
mask-size: 1rem 1rem;
135+
}
136+
}
137+
}
138+
139+
@media (min-width: 40em) {
140+
.usa-banner__button[aria-expanded="true"]::after {
141+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></svg>');
142+
background-repeat: no-repeat;
143+
background-position: center center;
144+
background-size: 1rem 1rem;
145+
display: inline-block;
146+
height: 1rem;
147+
width: 1rem;
148+
content: "";
149+
vertical-align: middle;
150+
margin-left: 2px;
151+
}
152+
}
153+
154+
@media (max-width: 39.99em) {
155+
.usa-banner__button[aria-expanded="true"]::before {
156+
bottom: 0;
157+
top: 0;
158+
position: absolute;
159+
right: 0;
160+
background-color: #e6e6e6;
161+
content: "";
162+
display: block;
163+
height: 3rem;
164+
width: 3rem;
165+
}
166+
167+
.usa-banner__button::after {
168+
display: none;
169+
}
170+
}
171+
172+
@media (max-width: 39.99em) {
173+
@supports ((-webkit-mask:url()) or (mask:url())) {
174+
.usa-banner__button[aria-expanded="true"]::after {
175+
background: 0 0;
176+
background-color: rgba(0, 0, 0, 0);
177+
background-color: #005ea2;
178+
-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>'),linear-gradient(transparent,transparent);
179+
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>'),linear-gradient(transparent,transparent);
180+
-webkit-mask-position: center center;
181+
mask-position: center center;
182+
-webkit-mask-repeat: no-repeat;
183+
mask-repeat: no-repeat;
184+
-webkit-mask-size: 1.5rem 1.5rem;
185+
mask-size: 1.5rem 1.5rem;
186+
}
187+
}
188+
}
189+
190+
@media (max-width: 39.99em) {
191+
.usa-banner__button[aria-expanded="true"]::after {
192+
bottom: 0;
193+
top: 0;
194+
position: absolute;
195+
right: 0;
196+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
197+
background-repeat: no-repeat;
198+
background-position: center center;
199+
background-size: 1.5rem 1.5rem;
200+
display: inline-block;
201+
height: 3rem;
202+
width: 3rem;
203+
content: "";
204+
vertical-align: middle;
205+
margin-left: 0;
206+
}
207+
}
208+
209+
.usa-banner {
210+
position: relative;
211+
min-height: 3rem;
212+
}
213+
214+
.usa-accordion__button {
215+
position: absolute;
216+
top: 0;
217+
bottom: 0;
218+
left: 0;
219+
right: 0;
220+
}
221+
222+
.usa-banner__button-text {
223+
position: absolute;
224+
left: -999em;
225+
right: auto;
226+
}
227+
228+
.usa-banner__header-action {
229+
color: #21409a;
230+
font-size: .75rem;
231+
line-height: 1.2;
232+
margin-bottom: 0;
233+
margin-top: 2px;
234+
text-decoration: underline;
235+
}
236+
237+
@media (min-width: 40em) {
238+
.usa-banner {
239+
min-height: 0;
240+
}
241+
242+
.usa-banner__button {
243+
position: relative;
244+
}
245+
246+
.usa-banner__button-text {
247+
position: static;
248+
display: inline;
249+
}
250+
251+
.usa-banner__header-action {
252+
display: none;
253+
}
254+
}
255+
/* end gov banner */

‎assets/images/flag.png‎

526 Bytes
Loading

‎assets/images/icon-dot-gov.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/images/icon-https.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)