diff options
author | southerntofu <southerntofu@squat.net> | 2019-02-15 11:35:56 +0000 |
---|---|---|
committer | southerntofu <southerntofu@squat.net> | 2019-02-15 11:35:56 +0000 |
commit | dc41cdf016c4c2022e74e4bdd103094cdefcc513 (patch) | |
tree | b130048a95018ae32fb42b855f41cbc5203cf035 | |
parent | 374b125cac18198250fdec4e40e8f570e5c1c95f (diff) |
Make header responsive (fix #11)
-rw-r--r-- | amber/layouts/_masthead.html.haml | 25 | ||||
-rw-r--r-- | amber/layouts/default.html.haml | 41 | ||||
-rw-r--r-- | pages/assets/_new.scss | 62 | ||||
-rw-r--r-- | pages/assets/style.scss | 6 |
4 files changed, 94 insertions, 40 deletions
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"; |