smaller header for mobile view

bboc · Feb 22, 2022 · 2622a01 · 2622a01
1 parent 36ba501
commit 2622a01
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 16 deletions.
diff --git a/docs-src/content/website/_includes/header.html b/docs-src/content/website/_includes/header.html
@@ -1,8 +1,8 @@
 <div class="row">
-  <div class="header-title col-sm-8">
+  <div class="header-title col-10">
     <a class="site-title" href="\{\{ site.baseurl \}\}/">\{\{ site.title \}\}</a>
   </div>
-  <div class="header-icons col-sm-4">
+  <div class="header-icons col-2">
     <a href="site-index.html" ><img src="icons/list-ul.svg" class="icon" title="An alphabetical index of all pages." /></a>
     <a href="map.html" ><img src="icons/map.svg" class="icon" title="Use the map to jump to another page." /></a>
     <span id="annotate-span"><a href="" id="annotate-link"><img src="icons/comments-alt.svg" class="icon" title="Annotate this page with hypothes.is. Click here, wait for the page to reload, then you can highlight text and add public comments. You will need to set up a free account at hypothes.is." alt="annotate page"/></a></span>

diff --git a/docs/_includes/header.html b/docs/_includes/header.html
@@ -1,8 +1,8 @@
 <div class="row">
-  <div class="header-title col-sm-8">
+  <div class="header-title col-10">
     <a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
   </div>
-  <div class="header-icons col-sm-4">
+  <div class="header-icons col-2">
     <a href="site-index.html" ><img src="icons/list-ul.svg" class="icon" title="An alphabetical index of all pages." /></a>
     <a href="map.html" ><img src="icons/map.svg" class="icon" title="Use the map to jump to another page." /></a>
     <span id="annotate-span"><a href="" id="annotate-link"><img src="icons/comments-alt.svg" class="icon" title="Annotate this page with hypothes.is. Click here, wait for the page to reload, then you can highlight text and add public comments. You will need to set up a free account at hypothes.is." alt="annotate page"/></a></span>

diff --git a/docs/_sass/_design.scss b/docs/_sass/_design.scss
@@ -17,6 +17,10 @@
         font-weight: 300;
         letter-spacing: -1px;
 
+        @include media-breakpoint-down(sm) {
+            font-size: 20px;
+        }
+
         &,
         &:visited {
             color: $headline-color;

diff --git a/docs/_sass/_layout.scss b/docs/_sass/_layout.scss
@@ -5,10 +5,6 @@
 //
 // Site header
 // --------------------------------------------------------------------------/**
-.icon {
-
-}
-
 .site-header {
     border-top: 5px solid $grey-color-dark;
     border-bottom: 2px solid $grey-color-light;
@@ -24,6 +20,11 @@
     .header-title, .header-icons {
         margin-bottom: $spacing-unit / 2;
         padding-top: $spacing-unit / 2;
+        @include media-breakpoint-down(sm) {
+            margin-bottom: $spacing-unit / 4;
+            padding-top: 0px;
+
+        }
     }
 
     .header-title {
@@ -36,11 +37,12 @@
         float: right;
         text-align: right;
         @include media-breakpoint-down(sm) {
-            text-align: left;
-            min-width: 300px;
-        }   
-        a img { 
-            height: 25px;}     
+            //text-align: left;
+            //min-width: 300px;
+        }
+        a img.icon { 
+            height: 25px;
+        }     
     }
 }
 .main-nav {
@@ -50,10 +52,9 @@
     flex: 0 0 $main-nav-width;
 
     min-width: 300px;
-    @include media-breakpoint-down(sm) {
-    }
+    // icons in the submenu:
     a img { 
-        height: 25px;
+        height: 22px;
     }  
 }