Removing all layour flots and use flex instead. Remove slicknav.

README.md

@@ -15,7 +15,7 @@ This is a port of that theme for [Hugo :: A fast and modern static website engin
 * Gulp.js
 * Minify css
 * jQuery 2
-* Slicknav mobile menu
+* A mobile menu
 * Search with DuckDuckGo
 * Analytics with Piwik
 
@@ -68,7 +68,6 @@ params:
   search: true          # Site search with DuckDuckGo.
   searchSize: 20        # Search field size, default 20.
   sidebar: true         # Show a sidebar to the right
-  slicknav: true        # Activates SlickNav, a nice mobile menu.
   submitted: true       # Show author and date information for a post.
 ```
 

layouts/_default/baseof.html

@@ -10,17 +10,21 @@
 </head>
 
 <body>
-<div class="page layout__wrapper{{ if $.Param "sidebar" | default true }} layout__sidebar layout__sidebar-second{{ end }}">
+<div class="page layout__page{{ if $.Param "sidebar" | default true }} layout__sidebar layout__sidebar-second{{ end }}">
 <header class="header layout__header layout__full" role="banner">
 {{ if $.Param "logo" | default true }}<a href="{{ .Site.BaseURL }}" title="Home" rel="home" class="header__logo"><img src="/images/logo.png" alt="Home" class="header__logo-image" /></a>{{ end -}}
 <h1 class="header__site-name">
 <a href="{{ .Site.BaseURL }}" title="Home" class="header__site-link" rel="home"><span>{{ .Site.Title }}</span></a>
 </h1>
-<div class="header__region region">{{ if $.Param "search" }}{{ partialCached "search.html" . }}{{ end }}</div>
+<div class="region header__region">{{ if $.Param "search" }}{{ partialCached "search.html" . }}{{ end }}</div>
 </header>
 
 {{ block "main" . }}{{ end -}}
 
+{{ partial "menu.html" . -}}
+
+{{ if $.Param "sidebar" | default true }}{{ partial "sidebar.html" . -}}{{ end }}
+
 <footer class="footer layout__footer layout__full" role="contentinfo">
 {{ if $.Param "feedlinks" }}{{ partial "feedlinks.html" . }}{{ end -}}
 <p>{{ with $.Param "copyright" }}{{ . | markdownify }}{{ else }}<span>© {{ .Site.Title }}</span>{{ end }}</p>

layouts/_default/list.html

@@ -12,7 +12,4 @@
 
 {{ partial "pagination.html" . }}
 </main>
-
-{{ partial "menu.html" . -}}
-{{ if $.Param "sidebar" | default true }}{{ partial "sidebar.html" . -}}{{ end }}
 {{ end }}

layouts/_default/single.html

@@ -15,7 +15,4 @@
 </div>
 </article>
 </main>
-
-{{ partial "menu.html" . -}}
-{{ if $.Param "sidebar" | default true }}{{ partial "sidebar.html" . -}}{{ end }}
 {{ end }}

layouts/index.html

@@ -13,6 +13,4 @@
 </div>
 </article>
 </main>
-{{ partial "menu.html" . -}}
-{{ if $.Param "sidebar" | default true }}{{ partial "sidebar.html" . -}}{{ end }}
 {{ end }}

layouts/partials/scripts.html

@@ -1,2 +1 @@
 {{ if $.Param "jquery" }}<script src="/js/jquery.min.js"></script>{{ end }}
-{{ if and ($.Param "jquery") ($.Param "slicknav") }}<script src="/js/jquery.slicknav.min.js"></script>{{ end }}

sass/_slicknav.scss

@@ -1,145 +0,0 @@
-// sass-lint:disable all
-
-.slicknav_btn {
-  position: relative;
-  display: block;
-  vertical-align: middle;
-  float: right;
-  padding: .438em .625em;
-  line-height: 1.125em;
-  cursor: pointer;
-  margin: 5px;
-  text-decoration: none;
-  text-shadow: 0 1px 1px rgba(255, 255, 255, .75);
-  border-radius: 4px;
-  background-color: color(nearblack);
-}
-
-.slicknav_menu {
-  box-sizing: border-box;
-  background-color: color(header-bg);
-  padding: 2px;
-
-  &::before,
-  &::after {
-    content: ' ';
-    display: table;
-  }
-
-  &::after {
-    clear: both;
-  }
-}
-
-.slicknav_menutxt {
-  display: block;
-  line-height: 1.188em;
-  float: left;
-  color: color(text-bg);
-  font-weight: bold;
-  text-shadow: 0 1px 3px color(text);
-}
-
-.slicknav_icon {
-  float: left;
-  width: 1.125em;
-  height: .875em;
-  margin: .188em 0 0 .438em;
-}
-
-.slicknav_no-text {
-  margin: 0;
-}
-
-.slicknav_icon-bar {
-  display: block;
-  width: 1.125em;
-  height: 3px;
-  border-radius: 1px;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
-  background-color: color(text-bg);
-
-  & + .slicknav_icon-bar {
-    margin-top: .188em;
-  }
-}
-
-.slicknav_nav {
-  background-color: color(body-bg);
-  color: color(link);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  overflow: hidden;
-  clear: both;
-
-  ul {
-    display: block;
-    list-style: none;
-    overflow: hidden;
-    padding: 0;
-    margin: 0 0 0 20px;
-  }
-
-  li {
-    display: block;
-  }
-
-  a {
-    display: block;
-    padding: 5px 10px;
-    margin: 2px 5px;
-    text-decoration: none;
-    color: color(link);
-
-    &:hover {
-      border-radius: 6px;
-      background-color: color(nearblack);
-      color: color(text-bg);
-    }
-  }
-}
-
-.slicknav_row {
-  display: block;
-  padding: 5px 10px;
-  margin: 2px 5px;
-
-  &:hover {
-    border-radius: 6px;
-    background-color: color(nearblack);
-    color: color(text-bg);
-  }
-}
-
-.slicknav_arrow {
-  margin: 0 0 0 .4em;
-}
-
-.slicknav_txtnode {
-  margin-left: 15px;
-}
-
-.slicknav_item {
-  cursor: pointer;
-
-  a {
-    display: inline;
-    padding: 0;
-    margin: 0;
-  }
-}
-
-.slicknav_parent-link a {
-  display: inline;
-  padding: 0;
-  margin: 0;
-}
-
-.slicknav_brand {
-  float: left;
-  color: color(text-bg);
-  line-height: 30px;
-  padding: 7px 12px;
-  height: 44px;
-}

sass/components/header/_header.scss

@@ -1,26 +1,20 @@
 // Dependencies.
 @import 'base/headings/headings';
-@import 'components/clearfix/clearfix';
 
 // Branding header
-//
-// Markup: header.twig
-//
-// Style guide: components.header
 
 .header,
 %header {
-  @extend %clearfix;
+  @include respond-to(s) {
+    display: flex;
+  }
 
   // Wrapping link for logo.
   &__logo {
-    float: left;
-    margin: 0 10px 0 0;
-    padding: 0;
+    margin: 0 $zen-gutters 0 0;
 
     @include rtl() {
-      float: right;
-      margin: 0 0 0 10px;
+      margin: 0 0 0 $zen-gutters;
     }
   }
 
@@ -29,15 +23,11 @@
     vertical-align: bottom;
   }
 
-  // Wrapper for website name and slogan.
-  &__name-and-slogan {
-    float: left;
-  }
-
   // The name of the website.
   &__site-name {
     @extend %h1;
     margin: 0;
+    display: inline-block;
   }
 
   // The link around the name of the website.
@@ -54,23 +44,14 @@
     }
   }
 
-  // The slogan (or tagline) of a website.
-  &__site-slogan {
-    margin: 0;
-  }
-
-  // The secondary menu (login, etc.)
-  &__secondary-menu {
-    float: right;
-
-    @include rtl() {
-      float: left;
-    }
-  }
-
   // Wrapper for any blocks placed in the header region.
   &__region {
-    // Clear the logo.
-    clear: both;
+    @include respond-to(s) {
+      margin-left: auto;
+
+      @include rtl() {
+        margin-right: auto;
+      }
+    }
   }
 }

sass/init/_variables.scss

@@ -134,8 +134,8 @@ $rem-fallback:      false;
 
 // Layout
 
-// The max content width (the main content area).
-$max-content-width: 740px;
+// The max content width.
+$max-content-width: 960px;
 
 // The default left/right gutter/padding.
 $zen-gutters: 20px;

sass/layouts/_layouts.scss

@@ -1,5 +1,5 @@
 .layout {
-    &__content {
+    &__page {
       max-width: $max-content-width;
     }
 
@@ -22,20 +22,19 @@
 @supports (display: grid) {
 
   .layout {
-    &__wrapper {
+    &__page {
       display: grid;
       grid-template-columns: [first-start] 1fr [last-end];
     }
 
     @include respond-to(s) {
-      &__wrapper {
+      &__page {
         grid-template-rows: [head-start] auto
                             [nav-start] auto
                             [page-top-start] auto
                             [main-start] 1fr
                             [page-bottom-start] auto
                             [footer-start] auto;
-        max-width: 960px;
         min-height: 100vh;
         margin: 0 auto;
       }

sass/navigation/navbar/_navbar.scss

@@ -11,23 +11,23 @@
 
 .navbar,
 %navbar {
+  display: flex;
   margin: 0;
   padding: 0;
   text-align: left;
 
   @include rtl() {
+    flex-direction: row-reverse;
     text-align: right;
   }
 
   &__item,
   li {
-    float: left;
     padding: 0 10px 0 0;
     list-style-type: none;
     list-style-image: none;
 
     @include rtl() {
-      float: right;
       padding: 0 0 0 10px;
     }
   }

sass/styles.scss

@@ -70,9 +70,6 @@
 // Custom
 @import 'custom/list-straight-left/list-straight-left';
 
-// Slicknav
-@import 'slicknav';
-
 // zen
 @import 'zen';