From 0806dd3cef34615caa431583f4ef1c7d05e2a659 Mon Sep 17 00:00:00 2001 From: Derek Ekins Date: Fri, 15 Jan 2021 12:21:52 +0000 Subject: [PATCH] implement new design for the header --- .envrc | 1 + app/views/home/index.html.erb | 11 +++++-- app/views/layouts/application.html.erb | 34 +++++++++++++------- config/environments/development.rb | 1 + frontend/styles/base/variables.css | 2 +- frontend/styles/components/explore.css | 23 +++++++++++++- frontend/styles/components/header.css | 10 ++---- frontend/styles/components/nav.css | 44 ++++++++++++++++++++++---- 8 files changed, 95 insertions(+), 31 deletions(-) create mode 100644 .envrc diff --git a/.envrc b/.envrc new file mode 100644 index 0000000..bce2257 --- /dev/null +++ b/.envrc @@ -0,0 +1 @@ +export CARBON_MAP_APP_NAME=carbon-map diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb index 5ac4e64..24d513b 100644 --- a/app/views/home/index.html.erb +++ b/app/views/home/index.html.erb @@ -1,3 +1,8 @@ +
+

We share community-based projects that work towards a Carbon Neutral Stroud District by 2030 and connect groups organising them.

+

Share knowledge. Enable Change

+
+ <%= render 'partials/map', map_data: @map_data, sectors: @sectors, tabs: [ { id: 'district', @@ -5,13 +10,13 @@ icon: 'map-marker', } ] do %> - <% end %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 72ca572..aecd77e 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -31,9 +31,15 @@ set_meta_tags og: { <%=link_to image_tag(asset_pack_path("media/images/logo.svg")), root_path, class: 'Header-logo' %>
-
-

Connecting low carbon initiatives across Stroud District

diff --git a/config/environments/development.rb b/config/environments/development.rb index 1a1901e..a26765b 100644 --- a/config/environments/development.rb +++ b/config/environments/development.rb @@ -6,6 +6,7 @@ # In the development environment your application's code is reloaded on # every request. This slows down response time but is perfect for development # since you don't have to restart the web server when you make code changes. + config.hosts << 'grace' config.cache_classes = false # Do not eager load code on boot. diff --git a/frontend/styles/base/variables.css b/frontend/styles/base/variables.css index b1e378b..bb605dd 100644 --- a/frontend/styles/base/variables.css +++ b/frontend/styles/base/variables.css @@ -9,7 +9,7 @@ $bp-tablet-width: 500px; $bp-tablet-landscape-width: 700px; $bp-desktop-width: 1260px; -$color-text: #4c4c4c; +$color-text: #000; $color-orange: #ff9700; $space-base: 15px; diff --git a/frontend/styles/components/explore.css b/frontend/styles/components/explore.css index 025c50f..f3229e8 100644 --- a/frontend/styles/components/explore.css +++ b/frontend/styles/components/explore.css @@ -57,13 +57,34 @@ flex: 1; } +.Explore-strapline { + font-size: 18px; + margin: 0 20px; + padding-bottom: 10px; + text-align: center; +} + .Explore-panel { display: flex; - height: 100%; + height: 100vh; overflow: hidden; + position: relative; z-index: 1; } +@media (--bp-mobile) { + + .Explore-panel { + height: 100%; + } + + .Explore-strapline { + font-size: 24px; + margin: 20px auto; + max-width: 770px; + } +} + .Explore-initiative { display: none; flex: 1; diff --git a/frontend/styles/components/header.css b/frontend/styles/components/header.css index d9b6cb2..8dbb443 100644 --- a/frontend/styles/components/header.css +++ b/frontend/styles/components/header.css @@ -1,5 +1,4 @@ .Header { - border-bottom: 1px solid lightgray; flex: none; padding: 0; } @@ -11,8 +10,8 @@ } .Header-logo img { - height: 100px; - width: 100px; + height: 75px; + width: 75px; } .Header-main { @@ -24,8 +23,3 @@ flex-grow: 1; margin-left: 15px; } - -.Header-strapline { - margin: 0 5px; - padding-bottom: 10px; -} diff --git a/frontend/styles/components/nav.css b/frontend/styles/components/nav.css index 732658f..9459c72 100644 --- a/frontend/styles/components/nav.css +++ b/frontend/styles/components/nav.css @@ -1,14 +1,13 @@ .Nav { - background-color: $color-orange; - color: #fff; display: flex; - flex-direction: column; + flex-direction: row; + justify-content: right; + margin-right: 20px; padding: 7px; width: 100%; } .Nav a { - color: #fff; font-size: 1.1em; font-weight: 600; line-height: 1.8em; @@ -18,6 +17,13 @@ text-decoration: none; } +@media (--bp-mobile) { + + .Nav a { + margin-right: 33px; + } +} + .Nav a::before { font-size: 3em; font-weight: 900; @@ -30,8 +36,14 @@ color: $color-orange; } +.Nav-secondary { + display: flex; + flex-grow: 1; + justify-content: right; + margin-top: -12px; +} + .Header-contentMobile { - background-color: $color-orange; display: flex; flex: 1; position: relative; @@ -81,7 +93,7 @@ } .Nav.Nav-open .Nav-flyover { - background-color: $color-orange; + background-color: #fff; display: block; padding: 10px; position: absolute; @@ -119,3 +131,23 @@ display: block; } } + +.Nav .SignIn-link { + margin-right: 15px; +} + +@media (--bp-tablet-landscape) { + + .Nav .SignIn-link { + border: solid 1px #999; + border-radius: 3px; + padding: 10px; + position: absolute; + } +} + +.SignIn-icon { + height: 30px; + vertical-align: middle; + width: 30px; +}