Skip to content

Commit

Permalink
Merge pull request #733 from CityOfBoston/DIG-1718
Browse files Browse the repository at this point in the history 
DIG-1718 Add official .gov banner to top of Boston.gov
  • Loading branch information
@subaha-cob
subaha-cob authored Mar 15, 2023
2 parents 23782e0 + 0de97cd commit 446c915
Show file tree
Hide file tree
Showing 4 changed files with 220 additions and 0 deletions.
21 changes: 21 additions & 0 deletions components/base/site-banner/site-banner.config.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
title: Site Banner
handle: site-banner
status: ready
variants:
- name: grey
context:
theme: g
- name: white
context:
theme: w
- name: charles blue
context:
theme: b
theme_dark: true
- name: optimistic blue
context:
theme: ob
theme_dark: true
context:
header:
title: City of Boston Site Banner
85 changes: 85 additions & 0 deletions components/base/site-banner/site-banner.hbs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<div class="site-banner dr">
<input type="checkbox" id="dr-banner" class="dr-tr a11y--h">
<label for="dr-banner" class="dr-h">
<div class="b b--{{ theme }} b--fw">
<div class="b-c p-v200">
<img class="site-banner-logo" src="/images/public/logo-white_red.png" alt="Boston.gov">
<span class="site-banner-text">
An official website of the City of Boston.

<span class="site-banner-button">
<span>Here's how you know</span>
<div class="dr-ic">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 8.5 18 25">
<path class="dr-i" d="M16 21L.5 33.2c-.6.5-1.5.4-2.2-.2-.5-.6-.4-1.6.2-2l12.6-10-12.6-10c-.6-.5-.7-1.5-.2-2s1.5-.7 2.2-.2L16 21z"/>
</svg>
</div>
</span>
</span>
</div>
</div>
</label>
<div class="b b--g b--fw dr-c">
<div class="b-c p-a300">
<div class="site-banner-expansion g" id="site-banner-content">
<div class="site-banner-expansion-item city-hall g--6">
<svg id="city-hall" data-name="city-hall" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144">
<title>city_hall</title>
<rect x="51.96" y="83.7" width="22.67" height="36.4" fill="#fff" stroke="#0f1f2d" stroke-miterlimit="10" stroke-width="3"/><rect x="39.27" y="65.48" width="65.4" height="20.82" fill="#fff" stroke="#0f1f2d" stroke-miterlimit="10" stroke-width="3"/>
<rect x="27.76" y="64.11" width="13.76" height="56.01" fill="#fff" stroke="#0f1f2d" stroke-miterlimit="10" stroke-width="3"/><rect x="102.77" y="64.09" width="13.76" height="56.01" fill="#fff" stroke="#0f1f2d" stroke-miterlimit="10" stroke-width="3"/>
<rect x="13.06" y="23.87" width="117.87" height="20.82" fill="#fff" stroke="#0f1f2d" stroke-miterlimit="10" stroke-width="3"/><rect x="27.98" y="44.69" width="87.99" height="20.82" fill="#fff" stroke="#0f1f2d" stroke-miterlimit="10" stroke-width="3"/>
<rect x="21.11" y="30.23" width="8.1" height="8.1" fill="#0f1f2d"/>
<rect x="34.5" y="30.23" width="8.1" height="8.1" fill="#0f1f2d"/>
<rect x="47.86" y="30.23" width="8.1" height="8.1" fill="#0f1f2d"/>
<rect x="61.24" y="30.23" width="8.1" height="8.1" fill="#0f1f2d"/>
<rect x="74.63" y="30.23" width="8.1" height="8.1" fill="#0f1f2d"/>
<rect x="101.37" y="30.23" width="8.1" height="8.1" fill="#0f1f2d"/>
<rect x="88.02" y="30.23" width="8.1" height="8.1" fill="#0f1f2d"/>
<rect x="114.76" y="30.23" width="8.1" height="8.1" fill="#0f1f2d"/>
<rect x="34.5" y="50.35" width="8.1" height="8.1" fill="#0f1f2d"/>
<rect x="47.86" y="50.35" width="8.1" height="8.1" fill="#0f1f2d"/>
<rect x="61.24" y="50.35" width="8.1" height="8.1" fill="#0f1f2d"/>
<rect x="74.63" y="50.35" width="8.1" height="8.1" fill="#0f1f2d"/>
<rect x="88.02" y="50.35" width="8.1" height="8.1" fill="#0f1f2d"/>
<rect x="101.37" y="50.35" width="8.1" height="8.1" fill="#0f1f2d"/>
<rect x="61.24" y="71.84" width="8.1" height="8.1" fill="#0f1f2d"/>
<rect x="74.63" y="71.84" width="8.1" height="8.1" fill="#0f1f2d"/>
<rect x="74.58" y="71.84" width="8.1" height="8.1" fill="#0f1f2d"/>
<rect x="87.96" y="71.84" width="8.1" height="8.1" fill="#0f1f2d"/>
<rect x="47.91" y="71.84" width="8.1" height="8.1" fill="#0f1f2d"/>
<rect x="41.53" y="106.58" width="46.46" height="13.52" fill="#fff" stroke="#0f1f2d" stroke-miterlimit="10" stroke-width="3"/>
</svg>
<div class="site-banner-expansion-item-content">
<p>Official websites use .boston.gov</p>
<p>A .boston.gov website belongs to an official government organization in the City of Boston.</p>
</div>
</div>
<div class="site-banner-expansion-item lock g--6">
<svg id="lock" data-name="lock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144">
<defs>
<style>.cls-1{fill:#fff;stroke:#0f1f2d;stroke-linecap:round;stroke-miterlimit:10;stroke-width:3px;}</style>
</defs>
<title>lock</title>
<polygon class="cls-1" points="81.85 35.33 62.15 35.33 48.21 49.26 48.21 76.97 55.21 76.97 55.21 53.73 66.53 42.41 77.47 42.41 88.79 53.73 88.79 76.97 95.79 76.97 95.79 49.26 81.85 35.33"/>
<rect class="cls-1" x="44.15" y="62.97" width="55.71" height="45.71"/>
<path class="cls-1" d="M78,79.78a6,6,0,1,0-8.79,5.37V97.73h5.5V85.15A6,6,0,0,0,78,79.78Z"/>
</svg>
<div class="site-banner-expansion-item-content">
<p>Secure .gov websites use HTTPS</p>
<p>A lock <span aria-hidden="true">
(<svg aria-hidden="true" width="15" height="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144">
<defs>
<style>.cls-1{fill:#fff;stroke:#0f1f2d;stroke-linecap:round;stroke-miterlimit:10;stroke-width:3px;}</style>
</defs>
<title>lock</title>
<polygon class="cls-1" points="81.85 35.33 62.15 35.33 48.21 49.26 48.21 76.97 55.21 76.97 55.21 53.73 66.53 42.41 77.47 42.41 88.79 53.73 88.79 76.97 95.79 76.97 95.79 49.26 81.85 35.33"/>
<rect class="cls-1" x="44.15" y="62.97" width="55.71" height="45.71"/>
<path class="cls-1" d="M78,79.78a6,6,0,1,0-8.79,5.37V97.73h5.5V85.15A6,6,0,0,0,78,79.78Z"/>
</svg>)
</span> or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.</p>
</div>
</div>
</div>
</div>
</div>
</div>
107 changes: 107 additions & 0 deletions stylesheets/components/site-banner/_site-banner.styl
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
/*
SITE BANNER SUBMENU
Base:
site-banner
*/

.site-banner
width: 100%;
font-size: 13.33px
font-size: .83rem
text-align: center
font-family: $serif
margin-top: 0

.b-c.p-v200
padding-top: 10px
padding-bottom:10px
text-align: center

.b-c.p-a300
padding-top: 16px
padding-bottom:16px

.dr-h
padding: 0

.site-banner-button
text-decoration: underline

.dr-ic
position: relative
display: inline-block
right: 0

svg
width: 12px
transform: rotate(90deg)
transition: transform 250ms
margin-left: 10px
vertical-align: middle

.dr-i
fill: #fff

.dr-c
padding: 0

.site-banner-logo
max-width: 150px
margin-right: 5px
vertical-align: middle

.site-banner-expansion
@media $media-xlarge
-webkit-box-orient: horizontal
-webkit-box-direction: normal
-ms-flex-direction: row
flex-direction: row

.site-banner-expansion-item
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
max-width: 500px
text-align: left

.site-banner-expansion-item-content
padding: 20px 0
line-height: 1rem

p
margin-top: 0

&:first-child
color: $optimistic-blue-light
font-weight: bold
text-transform: uppercase
font-family: $sans
margin-bottom: 0

svg
vertical-align: middle

.site-banner.dr
margin-top: 0

.site-banner-expansion-item.city-hall svg
width: 130px
min-width: 20px
max-height: 100px
padding-right: 16px

.site-banner-expansion-item.lock svg#lock
max-width: 150px
min-width: 20px
max-height: 150px
width: 200px
7 changes: 7 additions & 0 deletions stylesheets/components/site-banner/base.styl
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/*
SECTION HEADER
*/

@require('*.styl')

0 comments on commit 446c915

Please sign in to comment.