From dc41cdf016c4c2022e74e4bdd103094cdefcc513 Mon Sep 17 00:00:00 2001
From: southerntofu <southerntofu@squat.net>
Date: Fri, 15 Feb 2019 11:35:56 +0000
Subject: [PATCH] Make header responsive (fix #11)
---
amber/layouts/_masthead.html.haml | 25 ++++---------
amber/layouts/default.html.haml | 41 ++++++++++----------
pages/assets/_new.scss | 62 +++++++++++++++++++++++++++++++
pages/assets/style.scss | 6 ++-
4 files changed, 94 insertions(+), 40 deletions(-)
create mode 100644 pages/assets/_new.scss
diff --git a/amber/layouts/_masthead.html.haml b/amber/layouts/_masthead.html.haml
index f37d6e9..18f746e 100644
--- a/amber/layouts/_masthead.html.haml
+++ b/amber/layouts/_masthead.html.haml
@@ -1,17 +1,8 @@
-.masthead-inner
- .container
- .row
- -# if has_navigation?
- .col-sm-3.col-md-2
- .col-sm-9.col-md-10
- %h1 LEAP Encryption Access Project
- %ul.list-unstyled#top-menu
- - top_navigation_items(include_home:true) do |item|
- %li{:class => [item[:class], 'tab'].join(' ')}
- %a{:href => item[:href], :class => [item[:class], 'tab'].join(' ')}= item[:label]
- .col-sm-12.logo
- %h1 LEAP Encryption Access Project
- %ul.list-unstyled#top-menu
- - top_navigation_items(include_home:true) do |item|
- %li{:class => [item[:class], 'tab'].join(' ')}
- %a{:href => item[:href], :class => [item[:class], 'tab'].join(' ')}= item[:label]
+%header
+ %picture
+ %source{:media => "(min-width: 35.5em)", :srcset => "/img/leap180.png"}
+ %img{:alt => "LEAP logo", :src => "/img/leap128.png"}
+ %h1 LEAP Encryption Access Project
+ %nav.nav-menu{:role => "navigation"}
+ - top_navigation_items(include_home:true) do |item|
+ %a.nav-item{:href => item[:href]}= item[:label]
diff --git a/amber/layouts/default.html.haml b/amber/layouts/default.html.haml
index d252806..19172be 100644
--- a/amber/layouts/default.html.haml
+++ b/amber/layouts/default.html.haml
@@ -9,30 +9,27 @@
%link(rel="stylesheet" href="/assets/font-awesome/css/font-awesome.min.css")
= html_head_base
%body
- #wrap
- #masthead
- = render 'layouts/masthead'
- #main.container
- .row
- - if has_navigation?
- #sidebar.col-sm-4.col-md-3
- = render 'layouts/sidebar'
- .col-sm-8.col-md-9
+ = render 'layouts/masthead'
+ #main.container
+ .row
+ - if has_navigation?
+ #sidebar.col-sm-4.col-md-3
+ = render 'layouts/sidebar'
+ .col-sm-8.col-md-9
+ .title-box
+ = yield :title
+ = render 'layouts/titlebox'
+ .content-box
+ - if translation_missing?
+ .alert.alert-info= t(:missing_translation)
+ = yield :content
+ - else
+ .col-sm-12
+ - unless @page.props.show_title === false
.title-box
= yield :title
- = render 'layouts/titlebox'
- .content-box
- - if translation_missing?
- .alert.alert-info= t(:missing_translation)
- = yield :content
- - else
- .col-sm-12
- - unless @page.props.show_title === false
- .title-box
- = yield :title
- .content-box
- = yield :content
-
+ .content-box
+ = yield :content
#footer
= render 'layouts/footer'
#background
diff --git a/pages/assets/_new.scss b/pages/assets/_new.scss
new file mode 100644
index 0000000..7add150
--- /dev/null
+++ b/pages/assets/_new.scss
@@ -0,0 +1,62 @@
+// Variables
+
+$main-v-spacing: 1rem;
+
+// Header variables
+
+// Free one line at the top of the page
+$header-padding: $main-v-spacing 0 0 0;
+$header-bg-color: #555;
+$header-color: #fff;
+$header-title-margin: 1rem 0;
+$header-title-size: inherit;
+
+// Navigation menu variables
+
+$nav-color: $header-color;
+$nav-bg-color: $header-bg-color;
+$nav-item-size: 1.5rem;
+$nav-item-padding: 0.6rem 1.2rem;
+// On smaller screen, choose between horizontal (row) and vertical (column) menu
+$nav-small-direction: column;
+
+// Nav menu
+
+header {
+ grid-area: header;
+ padding: $header-padding;
+ background-color: $header-bg-color;
+ text-align: center;
+
+ @include gradient-vertical(lighten($header-bg-color,8%),$header-bg-color);
+ box-shadow: inset 0 0 8px 1px darken($header-bg-color, 8%);
+ box-shadow-top: 0;
+
+ > h1 {
+ color: $header-color;
+ font-weight: bold;
+ margin: $header-title-margin;
+ }
+}
+
+.nav-menu {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ @media (max-width: $small-screen) {
+ flex-direction: $nav-small-direction;
+ }
+}
+
+// If we don't add the "a" here, on hover styles won't be affected
+a.nav-item {
+ font-size: $nav-item-size;
+ padding: $nav-item-padding;
+ color: $nav-color;
+ background-color: $nav-bg-color;
+ font-weight: bold;
+ &:first-child {
+ background-color: $nav-color;
+ color: $nav-bg-color;
+ }
+}
diff --git a/pages/assets/style.scss b/pages/assets/style.scss
index c3cade1..cce3fd9 100644
--- a/pages/assets/style.scss
+++ b/pages/assets/style.scss
@@ -55,4 +55,8 @@ $well-bg-color: #fff;
$well-border-color: #555;
@import "mixins";
-@import "leap";
\ No newline at end of file
+@import "leap";
+
+// Trying not to break stuff, we just add things for now
+// Then we'll merge _new.scss into _leap.scss
+@import "new";
--
GitLab