Merge pull request #17 from 2martens/style-fixes

Fixes menu visibility and footer size

_assets/css/main.css.scss

@@ -22,7 +22,7 @@ $navbarHeight: 58px;
 
 #main {
   margin-top: $navbarHeight + 15px;
-  margin-bottom: 295px;
+  margin-bottom: $navbarHeight + 15px;
 }
 
 #main.submenu {
@@ -56,4 +56,16 @@ $navbarHeight: 58px;
 
 .card.sidebar {
     width: 20rem;
+}
+
+@include media-breakpoint-up(md) {
+  #main {
+    margin-bottom: 295px;
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .md-up {
+    display: none;
+  }
 }

_assets/js/main.js

@@ -1,3 +1,14 @@
 //= require popper
 //= require bootstrap/util
 //= require bootstrap/collapse
+
+"use strict";
+$(function() {
+    let mainMenu = $('#mainmenuNavbar');
+    mainMenu.on('show.bs.collapse', function (e) {
+        $('#submenuNavbar').addClass('invisible');
+    });
+    mainMenu.on('hidden.bs.collapse', function (e) {
+        $('#submenuNavbar').removeClass('invisible');
+    });
+});

_includes/footer.html

@@ -1,7 +1,7 @@
 <footer class="site-footer small text-muted py-3 fixed-bottom">
     <div class="container">
         <div class="row">
-            <div class="col-sm-4">
+            <div class="col-md-4">
                 <nav>
                     <ul class="nav">
                         {% for item in site.data.footer-menu.items %}
@@ -12,12 +12,14 @@
                     </ul>
                 </nav>
                 {% if site.data.promotion.show %}
-                <a href="{{ site.data.promotion.link }}">
-                    <img src="{{ site.data.promotion.image }}" alt="{{ site.data.promotion.title }} promotional image" />
-                </a>
+                <div class="md-up">
+                    <a href="{{ site.data.promotion.link }}">
+                        <img src="{{ site.data.promotion.image }}" alt="{{ site.data.promotion.title }} promotional image" />
+                    </a>
+                </div>
                 {% endif %}
             </div>
-            <div class="col-sm-8">
+            <div class="col-md-8 md-up">
                 <ul class="list-unstyled">
                     {% if site.data.author.github_username %}
                     <li>

_includes/header.html

@@ -1,5 +1,5 @@
 <header class="site-header">
-    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
+    <nav id="mainmenuNavbar" class="navbar navbar-expand-lg navbar-light fixed-top">
         <div class="container">
             <a class="navbar-brand" href="{{ site.baseurl }}/">
                 <img src="{{ site.data.author.brand_logo }}" width="30" height="30" class="d-inline-block align-top"

_layouts/default.html

@@ -25,10 +25,10 @@
     {% endif %}
     <div class="container">
         <div class="row">
-            <main class="col-sm-9">
+            <main class="col-md-9">
                 {{ content }}
             </main>
-            <div class="col-sm-3">
+            <div class="col-md-3">
                 {% include sidebar.html %}
             </div>
         </div>