navbar-toggler design

pages/_includes/layout/layouts-list.html

@@ -1,6 +1,6 @@
-<div class="row row-md mb-n{% if include.wide %}5{% else %}6{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+<div class="row row-md {% if include.wide %}mb-n5{% else %}mb-n3 mb-md-n5{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
 	{% for layout in site.data.layouts %}
-	<div class="col-{% if include.wide %}12{% else %}6{% endif %} mb-{% if include.wide %}5{% else %}6{% endif %}{% if layout.soon %} opacity-25{% endif %}">
+	<div class="{% if include.wide %}col-12{% else %}col-lg-6{% endif %} {% if include.wide %}mb-5{% else %}mb-3 mb-md-5{% endif %}{% if layout.soon %} opacity-25{% endif %}">
 		<div class="row">
 			<div class="col-auto">
 				<a href="{{ site.base }}/{{ layout.page }}" class="position-relative">

pages/_includes/layout/topmenu.html

@@ -1,7 +1,7 @@
 {% assign fixed = page.topnav-fixed %}
 {% assign fixed = true %}
 
-<nav class="navbar navbar-border fixed-top navbar-expand-lg {% if page.topmenu-dark %}navbar-dark bg-dark text-white{% else %}navbar-light bg-white{% endif %}{% if fixed %} fixed-top{% endif %}">
+<nav id="nav-main-menu" class="navbar navbar-border fixed-top navbar-expand-lg {% if page.topmenu-dark %}navbar-dark bg-dark text-white{% else %}navbar-light bg-white{% endif %}{% if fixed %} fixed-top{% endif %}">
 	<div class="container{% if include.fluid %}-fluid{% endif %}">
 		<div class="collapse navbar-collapse">
 			{% include layout/menu.html top=true %}

pages/_includes/layout/topnav.html

@@ -1,4 +1,3 @@
-{% assign expand = 'lg' %}
 {% assign person-id = include.person-id | default: 12 | minus: 1 %}
 {% assign person = site.data.people[person-id] %}
 
@@ -6,10 +5,10 @@
 {% assign fixed = page.topnav-fixed %}
 {% assign fixed = true %}
 
-<header class="navbar navbar-border navbar-expand-{{ expand }} {% if dark %}navbar-dark bg-dark text-white{% else %}navbar-light bg-white{% endif %}{% if fixed %} fixed-top{% endif %}">
+<header class="navbar navbar-border {% if dark %}navbar-dark bg-dark text-white{% else %}navbar-light bg-white{% endif %}{% if fixed %} fixed-top{% endif %}">
 	<div class="container{% if include.topnav-fluid %}-fluid{% endif %}">
 
-		<button class="navbar-toggler mr-auto hide-sidebar-visible" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false">
+		<button class="navbar-toggler mr-auto hide-sidebar-visible" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false">
 			<span class="navbar-toggler-icon"></span>
 		</button>
 
@@ -61,8 +60,6 @@
 				</div>
 			</li>
 		</ul>
-
-
 	</div>
 </header>
 

scss/_variables.scss

@@ -307,6 +307,8 @@ $navbar-toggler-padding-x: .75rem !default;
 $navbar-toggler-margin: -.75rem !default;
 $navbar-toggler-font-size: 1rem !default;
 $navbar-toggler-size: 1.5rem !default;
+$navbar-toggler-item-height: 2px !default;
+$navbar-toggler-transform-time: .3s !default;
 
 //popover
 $popover-border-color: $border-color !default;

scss/layout/_navbar.scss

@@ -1,3 +1,6 @@
+/*
+Navbar
+ */
 .navbar {
   min-height: $navbar-height;
 
@@ -36,18 +39,24 @@ navbar toggler
   position: relative;
 }
 
+
 .navbar-toggler-icon {
+  $time: $navbar-toggler-transform-time / 2;
+
   background-image: none !important;
   position: absolute;
-  width: 1.5rem;
+  width: $navbar-toggler-size;
-  height: 2px;
+  height: $navbar-toggler-item-height;
   border-radius: 3px;
 
   left: 50%;
   top: 50%;
+  margin-left: -($navbar-toggler-size / 2);
+  margin-top: -($navbar-toggler-item-height / 2);
 
   background: currentColor;
-  transform: translateX(-50%);
+  transform-origin: center;
+  transition: transform $time, top $time $time, bottom $time $time;
 
   &:before,
   &:after {
@@ -58,6 +67,7 @@ navbar toggler
     width: inherit;
     left: 0;
     border-radius: inherit;
+    transition: inherit;
   }
 
   &:before {
@@ -67,6 +77,21 @@ navbar toggler
   &:after {
     bottom: .5rem;
   }
+
+  .navbar-toggler.collapsed & {
+    transform: rotate(45deg);
+    transition: top $time, bottom $time, transform $time $time, opacity $time;
+
+    &:before {
+      top: 0;
+      transform: rotate(-90deg);
+    }
+
+    &:after {
+      bottom: 0;
+      opacity: 0;
+    }
+  }
 }
 
 /**

scss/ui/_cards.scss

@@ -30,7 +30,9 @@
 
 .card-md {
   .card-body {
-    padding: map-get($spacers, 6);
+    @include media-breakpoint-up(md) {
+      padding: map-get($spacers, 6);
+    }
   }
 }