From a35d6922655abfa75379cbbcf564f3a8084844d9 Mon Sep 17 00:00:00 2001 From: jrbarnes9 Date: Fri, 10 Jul 2020 16:50:23 +0100 Subject: [PATCH] added website nav and updated logo --- _includes/header-census.html | 94 ++++++++++++++----- _layouts/eq-default-extras.html | 4 + _prototypes/end-to-end/census-home-style.css | 8 +- _prototypes/end-to-end/home.html | 16 ++-- _prototypes/end-to-end/style.css | 95 ++++++++++++++++++++ img/census-logo.svg | 2 +- img/icons/census-logo-en.svg | 2 +- 7 files changed, 185 insertions(+), 36 deletions(-) diff --git a/_includes/header-census.html b/_includes/header-census.html index fb3bdcfca8..493c70b94a 100644 --- a/_includes/header-census.html +++ b/_includes/header-census.html @@ -1,23 +1,71 @@ -
-
-
-
Help and support –
- -
-
-
- - -
-
\ No newline at end of file +
+ +
+
+
+
+ {% if page.logoUrl %}{% endif %} +

+ + {% if page.title %} + {{ page.title }} + {% else %} + {{ site.title }} + {% endif %} + + {% unless page.hideSaveLater %} + {% if page.exit %} + + {% else %} + + {% endif %} + + {% endunless %} +

+ {% if page.logoUrl %}{% endif %} +
+
+
+
+
+
+ +
+
+
diff --git a/_layouts/eq-default-extras.html b/_layouts/eq-default-extras.html index 72609dec0a..8c71420833 100644 --- a/_layouts/eq-default-extras.html +++ b/_layouts/eq-default-extras.html @@ -16,7 +16,11 @@ Skip to content
+ {% if page.header == "census-website" %} + {% include header-census.html %} + {% else %} {% include header-eq-default.html %} + {% endif %}
{{ content }} diff --git a/_prototypes/end-to-end/census-home-style.css b/_prototypes/end-to-end/census-home-style.css index 798ce4cde9..645801b4c1 100644 --- a/_prototypes/end-to-end/census-home-style.css +++ b/_prototypes/end-to-end/census-home-style.css @@ -1,4 +1,5 @@ .hero { + margin-top: 2px; padding: 2rem 0; background: #fff; } @@ -7,11 +8,6 @@ height: 100%; } -.hero__title { - font-size: 2.3rem; - line-height: 1.2; -} - .hero--dark-theme > * { color: #fff; } @@ -60,7 +56,7 @@ .warning { background: #3C388E; - padding: .55rem 0; + padding: 1rem 0; } .warning .panel--warning .panel__text { diff --git a/_prototypes/end-to-end/home.html b/_prototypes/end-to-end/home.html index 23c3c38d4b..3f58b27176 100644 --- a/_prototypes/end-to-end/home.html +++ b/_prototypes/end-to-end/home.html @@ -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 @@ -22,11 +22,11 @@
-
+
-

Census 2021 is happening now

+

Census 2021 is happening now

Ready to start your census online?

-

You will need your 16

+

You will need your 16

Start census @@ -130,5 +130,11 @@

If you want to fill out a paper census

$('.hero--with-image').toggleClass('expanded'); }); - + + function activeNavItem() { + $('.header-nav__item:first-of-type').addClass('header-nav__item--active'); + } + + $(activeNavItem); + \ No newline at end of file diff --git a/_prototypes/end-to-end/style.css b/_prototypes/end-to-end/style.css index cb91271145..76d9a857ec 100644 --- a/_prototypes/end-to-end/style.css +++ b/_prototypes/end-to-end/style.css @@ -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; @@ -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; @@ -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); diff --git a/img/census-logo.svg b/img/census-logo.svg index 7f1df71b9f..aed89ff083 100644 --- a/img/census-logo.svg +++ b/img/census-logo.svg @@ -1 +1 @@ -logo-englishCreated with Sketch. +census-logo-cy diff --git a/img/icons/census-logo-en.svg b/img/icons/census-logo-en.svg index eb725ec773..3df2a74e9b 100644 --- a/img/icons/census-logo-en.svg +++ b/img/icons/census-logo-en.svg @@ -1 +1 @@ - \ No newline at end of file +census-logo-en \ No newline at end of file