media functions, navbar utilities

_config.yml

@@ -48,7 +48,6 @@ exclude:
   - dropdowns.html
   - email.html
   - empty.html
-  - favicon.ico
   - flags.html
   - forgot-password.html
   - form-elements.html

pages/_includes/layout/navbar-logo.html

@@ -1,6 +1,6 @@
 {% assign prefix = include.prefix | default: 'navbar' %}
 
-<a href="{{ site.base }}" class="{{ prefix }}-brand{% if include.class %} {{ include.class }}{% endif %}">
+<a href="{{ site.base }}" class="{{ prefix }}-brand {{ prefix }}-brand-autodark{% if include.class %} {{ include.class }}{% endif %}">
-	<img src="{{ site.base }}/static/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-lg">
+	<img src="{{ site.base }}/static/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-large">
-	<img src="{{ site.base }}/static/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-sm">
+	<img src="{{ site.base }}/static/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-small">
 </a>

pages/_includes/layout/navbar-primary.html

@@ -1,10 +1,25 @@
-<nav class="navbar navbar-vertical navbar-expand-md navbar-dark navbar-primary" id="navbar-primary">
+{% assign breakpoint = 'md' %}
+<nav class="navbar navbar-vertical navbar-expand-{{ breakpoint }} navbar-dark navbar-primary" id="navbar-primary">
 	<div class="container">
+		{% include layout/navbar-logo.html class="hide-navbar-horizontal" %}
+
 		<div>
-			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, quae, veniam? Adipisci alias assumenda debitis dolores ex laudantium nam, nesciunt non, pariatur quis repellat suscipit unde vel veniam veritatis voluptatem!
+			Lorem ipsum
 		</div>
 
-		<div style="opacity: .64;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequatur cum delectus dicta dolor doloribus dolorum eum expedita facere in nesciunt, nostrum perferendis porro quas, quibusdam ratione rerum sit voluptatum!</div>
+		<div class="d-none-navbar-vertical text-green">
+			only horizontal
+		</div>
+
+		<div class="d-none-navbar-vertical-narrow text-red">
+			hide narrow
+		</div>
+
+		<div class="d-none-navbar-horizontal text-blue">
+			only sidebar
+		</div>
+
+		<div style="opacity: .64;">Lorem ipsum</div>
 	</div>
 </nav>
 

pages/tmp-layout.html

@@ -1,7 +1,7 @@
 ---
 tmp: true
 page-header: Layout test
-page-header-actions: breadcrumb
+page-header-actions: buttons
 ---
 
 <div class="row row-cards">
@@ -18,23 +18,10 @@ page-header-actions: breadcrumb
 			</div>
 		</div>
 	</div>
-
-	{% for i in (1..6) %}
-	<div class="col-md-6">
-		<div class="card card-body">
-			<div style="height: 10rem;"></div>
-		</div>
-	</div>
-	{% endfor %}
-	{% for i in (1..6) %}
-	<div class="col-md-4">
-		<div class="card card-body">
-			<div style="height: 10rem;"></div>
-		</div>
-	</div>
-	{% endfor %}
 </div>
 
+{% include layout/homepage.html %}
+
 {% capture_global scripts %}
 <script>
 	(function () {

scss/layout/_mainnav.scss

@@ -8,8 +8,9 @@
   min-height: auto;
   align-items: start;
 
-  >.container {
+  > [class*="container"] {
     flex-direction: column;
+    align-items: start;
   }
 
   ~ .navbar,
@@ -17,9 +18,35 @@
     margin-left: $sidenav-width;
   }
 
+  .d-none-navbar-vertical {
+    display: none;
+  }
+
+  .navbar-brand {
+    display: flex;
+    width: 100%;
+    margin: 0;
+    text-align: center;
+    height: $navbar-height;
+    align-items: center;
+    justify-content: center;
+  }
+
   &.navbar-vertical-narrow {
     width: $sidenav-width-narrow;
 
+    .d-none-navbar-vertical-narrow {
+      display: none;
+    }
+
+    .navbar-brand-logo-large {
+      display: none;
+    }
+
+    .navbar-brand-logo-small {
+      display: inline-block;
+    }
+
     ~ .navbar,
     ~ .content {
       margin-left: $sidenav-width-narrow;
@@ -62,8 +89,28 @@
 
 .navbar {
   min-height: $navbar-height;
+  padding-top: 0; //todo: move to varaibles
+  padding-bottom: 0;
 }
 
+/**
+Navbar brand
+ */
+.navbar-brand {
+  padding: 0; //todo: move to varaibles
+}
+
+.navbar-brand-logo {
+  height: 2rem;
+}
+
+.navbar-brand-logo-small {
+  display: none;
+}
+
+/**
+Navbar colors
+ */
 .navbar-light {
   background: $white;
   box-shadow: 0 0 0 1px $border-color;
@@ -72,18 +119,40 @@
 .navbar-dark {
   background: $sidenav-dark-bg;
   color: $sidenav-dark-color;
+
+  .navbar-brand-autodark {
+    filter: brightness(0) invert(1);
+  }
+}
+
+/**
+Navbar vertical
+ */
+.navbar:not(.navbar-vertical) {
+  .d-none-navbar-horizontal {
+    display: none;
+  }
 }
 
 .navbar-vertical {
   @each $breakpoint, $breakpoint-max-width in $grid-breakpoints {
-    @include media-breakpoint-up($breakpoint) {
+    &.navbar-expand-#{$breakpoint} {
-      &.navbar-expand-#{$breakpoint} {
+      @include media-breakpoint-up($breakpoint) {
         @include navbar-vertical;
       }
+
+      @include media-breakpoint-down-than($breakpoint) {
+        .d-none-navbar-horizontal {
+          display: none;
+        }
+      }
     }
   }
 }
 
+/**
+Navbar secondary
+ */
 .navbar-secondary {
   order: -1;
 }

scss/mixins/_functions.scss

@@ -18,3 +18,29 @@
 
   @return $string;
 }
+
+@mixin media-breakpoint-down-than($name, $breakpoints: $grid-breakpoints) {
+  $prev: breakpoint-prev($name);
+
+  @if $prev == null {
+    @content;
+  } @else {
+    $max: breakpoint-max($prev, $breakpoints);
+
+    @if $max {
+      @media (max-width: $max) {
+        @content;
+      }
+    } @else {
+      @content;
+    }
+  }
+}
+
+@function breakpoint-prev($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+  $n: index($breakpoint-names, $name);
+  @if not $n {
+    @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
+  }
+  @return if($n > 1, nth($breakpoint-names, $n - 1), null);
+}