Skip to content

Commit

Permalink
added website nav and updated logo
Browse files Browse the repository at this point in the history
  • Loading branch information
@jrbarnes9
jrbarnes9 committed Jul 10, 2020
1 parent 08b3cd4 commit a35d692
Show file tree
Hide file tree
Showing 7 changed files with 185 additions and 36 deletions.
94 changes: 71 additions & 23 deletions _includes/header-census.html
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,71 @@
<header class="header header--census has-js">
<div class="header__help is-closed js-help-body">
<div class="header__container container">
<div class="header__title ">Help and support –</div>
<ul class="header__nav nav nav--horizontal">
<li class="nav__item">
<span class="mars" role="presentation">Call </span> <a class="venus nav__link" href="tel:03000683001"><span class="u-vh">For help call </span>0300 068 3001</a>
</li>
<li class="nav__item">
<a class="venus nav__link external--white" href="http://www.ons.gov.uk/census/help" target="_blank" rel="noopener noreferrer">Online Help</a>
</li>
</ul>
</div>
</div>
<div class="header__container container">
<div class="header__logo">
<img src="{{site.baseurl}}/s/img/census-logo.svg?q=afe0c3fc5f881be5a231a218296436c68cc7fa26" alt="2017 Census"" alt="2017 Census">
</div>
<button class="header__btn btn btn--light btn--border js-help-btn" data-ga-action="Help and support" data-ga="click" data-ga-category="Help">
Help and support
</button>
</div>
</header>
<header class="header">
<div class="header__top" role="banner">
<div class="container">
<div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
<div class="logo">
{% unless page.noONSLogoLink %}<a href="{{ site.baseurl }}/">{% endunless %}
<picture>
<source media="(max-width: 550px)" srcset="/s/img/ons-logo-stacked.svg">
<img class="logo__img header__logo print__hidden" src="https://deploy-preview-129--sdc-global-design-patterns.netlify.com/assets/img/ons-logo-pos.svg" alt="">
</picture>
{% unless page.noONSLogoLink %}</a>{% endunless %}
</div>
<div class="header__links grid__col col-auto">
<div class="grid__col col-auto">
<ul class="language-links">
<li class="language-links__item"><a href="#" lang="cy" data-ga-element="language">Cymraeg</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="header__main ">
<div class="container">
<div class="grid grid--gutterless grid--align-mid u-cf">
<div class="grid__col ">
{% if page.logoUrl %}<a href="{{ page.logoUrl }}">{% endif %}
<h1
class="header__title header__title--nav-adj">
<span class="js-header-title">
{% if page.title %}
{{ page.title }}
{% else %}
{{ site.title }}
{% endif %}
</span>
{% unless page.hideSaveLater %}
{% if page.exit %}
<button class="btn btn--ghost u-fr u-d-no@xs@m exit">Exit</button>
{% else %}
<button class="btn btn--ghost u-fr u-d-no@xs@m complete-later">Save and sign out</button>
{% endif %}
<!--<button class="btn btn&#45;&#45;ghost u-fr">Cadw a chwblhau'n ddiweddarach</button>-->
{% endunless %}
</h1>
{% if page.logoUrl %}</a>{% endif %}
</div>
</div>
</div>
</div>
<div class="header__bottom">
<div class="container container--gutterless@xs@m">
<nav class="header-nav js-header-nav" id="main-nav" aria-label="Main menu" data-analytics="header-navigation">
<ul class="header-nav__list" aria-label="" role="menubar">
<li class="header-nav__item ">
<a href="" class="header-nav__link" role="menuitem">Home</a>
</li>
<li class="header-nav__item ">
<a href="" class="header-nav__link" role="menuitem">About the census</a>
</li>
<li class="header-nav__item ">
<a href="" class="header-nav__link" role="menuitem">Help with your census</a>
</li>
<li class="header-nav__item ">
<a href="" class="header-nav__link" role="menuitem">Contact us</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
4 changes: 4 additions & 0 deletions _layouts/eq-default-extras.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,11 @@
<a class="skip__link" href="#main">Skip to content</a>
</div>
<header class="page__header">
{% if page.header == "census-website" %}
{% include header-census.html %}
{% else %}
{% include header-eq-default.html %}
{% endif %}
</header>
{{ content }}
</div>
Expand Down
8 changes: 2 additions & 6 deletions _prototypes/end-to-end/census-home-style.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.hero {
margin-top: 2px;
padding: 2rem 0;
background: #fff;
}
Expand All @@ -7,11 +8,6 @@
height: 100%;
}

.hero__title {
font-size: 2.3rem;
line-height: 1.2;
}

.hero--dark-theme > * {
color: #fff;
}
Expand Down Expand Up @@ -60,7 +56,7 @@

.warning {
background: #3C388E;
padding: .55rem 0;
padding: 1rem 0;
}

.warning .panel--warning .panel__text {
Expand Down
16 changes: 11 additions & 5 deletions _prototypes/end-to-end/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
project: End to end prototype
globalcss: false
layout: eq-default-extras
footer: census-transactional
footer: census-website
header: census-website
assetPrefixUrl: https://sdc-global-design-patterns.netlify.com
hideSaveLater: true
logoUrl: ../home
Expand All @@ -22,11 +22,11 @@
<div class="hero__container">
<div class="hero__content grid grid--gutterless grid--flex grid--vertical-center">
<div class="container">
<div class="grid__col col-8@m">
<div class="grid__col col-7@m">
<header>
<h1 class="hero__title u-fs-xl">Census 2021 is happening now</h1>
<h1 class="hero__title u-fs-xxxl">Census 2021 is happening now</h1>
<h2 class="hero__subtitle u-fs-m u-mb-xs">Ready to start your census online?</h2>
<p class="u-mb-m">You will need your 16<span aria-hidden="true">-<span>character access code</p>
<p>You will need your 16<span aria-hidden="true">-<span>character access code</p>
</header>
<a href="../uac-entry/" role="button" class="btn btn--link">
<span class="btn__inner icon--chevron-right-white">Start census</span>
Expand Down Expand Up @@ -130,5 +130,11 @@ <h3 class="u-fs-r--b">If you want to fill out a paper census</h3>
$('.hero--with-image').toggleClass('expanded');

});


function activeNavItem() {
$('.header-nav__item:first-of-type').addClass('header-nav__item--active');
}

$(activeNavItem);

</script>
95 changes: 95 additions & 0 deletions _prototypes/end-to-end/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,17 @@ h3,
h4 {
font-weight: 600!important;
}

.u-fs-xxxl {
font-size: 1.77777778rem;
font-weight: 600;
line-height: 1.3;
}

.u-fs-xxl {
font-size: 1.555555555rem;
}

.u-fs-xl,
h1 {
font-size: 1.44444444rem;
Expand Down Expand Up @@ -55,6 +66,14 @@ h4 {

/* over 740px */
@media only screen and (min-width: 740px) {
.u-fs-xxxl {
font-size: 2.66666667rem;
}

.u-fs-xxl {
font-size: 2rem;
}

.u-fs-xl,
h1 {
font-size: 1.66666667rem;
Expand Down Expand Up @@ -132,6 +151,82 @@ h4 {
padding-top: 0;
}

/* Header nav */
.header__bottom {
background: #93328e;
}

.header-nav__list {
margin: 0;
padding: 0;
list-style: none;
}
.header-nav__item {
display: block;
margin: 0;
padding: 0.3rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.header-nav__link {
display: block;
margin: 0 .35rem;
padding: 0 .65rem;
color: #fff;
font-size: .9rem;
text-decoration: none;
}

.header-nav__link:focus, .header-nav__link:hover {
color: #c2ecff;
text-decoration: none;
}

.header-nav__item--active .header-nav__link {
font-weight: bold;
}

@media only screen and (min-width: 740px) {
.header-nav__item {
display: inline-block;
position: relative;
margin: 0 0 0 1rem;
padding: 0 0 .3rem;
border-top: 0;
border-bottom: 4px solid transparent;
text-align: center;
}

.header-nav__item:first-child {
margin-left: 0;
}

.header-nav__item--active, .header-nav__item:hover {
border-color: #fff;
}

.header-nav__link {
display: inline-block;
margin: 0;
padding: 0;
font-size: 1rem;
}

.header-nav__link:focus, .header-nav__link:hover {
color: #fff;
}
}

/*
&__item + &__item--secondary {
margin-top: 0.5rem;
border-top: 2px solid $color-white;
}
&__item--active &__link {
font-weight: bold;
}
} */

.btn:not(.btn--ghost):not(.btn--ghost-blue) {
-webkit-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.8);
Expand Down
Loading

0 comments on commit a35d692

Please sign in to comment.