fix positioning of content

bboc · Feb 22, 2022 · 36ba501 · 36ba501
1 parent 032423b
commit 36ba501
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 14 deletions.
diff --git a/TODO.taskpaper b/TODO.taskpaper
@@ -41,7 +41,7 @@ mdtools 2.x:
 				index.html stays as it is
 			- decide about information to keep in footer, where would that go? @done
 			- fix icons in menu.html (and add  class="icon") @done
-			New Two Column Layout:
+			New Two Column Layout: @done
 				- content is centered, but with maximum size (see https://www.geeksforgeeks.org/bootstrap-4-holy-grail-layout/?ref=lbp) @done
 				- Header: convert to grid @done
 				Footer: @done
@@ -62,10 +62,10 @@ mdtools 2.x:
 				- Set base font size @done
 				- use .small for footer etc @done
 				- remove all superfluous styles @done
-			Illustrations:
-				- Step 1: make  them responsive (simple)
+			Illustrations: @done
+				- Step 1: make  them responsive (simple) @done
 					https://www.geeksforgeeks.org/bootstrap-4-images/?ref=lbp
-				- Step 2: make them nice (takes a bit more effort) 
+				- Step 2: make them nice (takes a bit more effort) @done
 					add lightboxes make sure illustrations don't look like shit because long things are stretched ultrawide
 				e.g. https://mdbootstrap.com/docs/b4/jquery/javascript/lightbox/ deactivates on mobile automatically, that's nice
 			Cleaner navigation: @done
@@ -78,13 +78,15 @@ mdtools 2.x:
 				- add to bottom of page so that it looks nice enough @done
 				- map left and right arrow keys to browse quickly through the pages @done
 				- add <link rel="prev"|"next">? to html header? @done
+		- bug: the content area is moved to the left slightly @done
+		- bug: menu button snaps sooner than menu space
 
 		Cooler website (maybe later):
 			- move menu icon to the right of next to site icons for moother mobile navigation @later
 			- smaller headline and less spacing in header for better mobile view @later 
 			- search for patterns
 			- theme picker (text size, white, sepia, dark theme) via session storage: https://javascript.info/localstorage
-			- responsible map overlay... 
+			- responsible map overlay.
 			- keep menu open
 			- look at https://javascript.info/websocket: has nice info boxes and a great searchable tutorial map 
 		Links:

diff --git a/docs-src/templates/website/_layouts/default.html b/docs-src/templates/website/_layouts/default.html
@@ -9,10 +9,10 @@
     </header>
     <div class="site-body container-fluid">
       <div class="row">
-        <nav class="main-nav col-sm-3 col-12">
+        <nav class="main-nav col">
           {% include menu.html %}
         </nav>
-        <div class="content-container col-sm-9 col-12">
+        <div class="content-container col">
           {{ content }}
         </div>
       </div>

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -9,10 +9,10 @@
     </header>
     <div class="site-body container-fluid">
       <div class="row">
-        <nav class="main-nav col-sm-3 col-12">
+        <nav class="main-nav col">
           {% include menu.html %}
         </nav>
-        <div class="content-container col-sm-9 col-12">
+        <div class="content-container col">
           {{ content }}
         </div>
       </div>

diff --git a/docs/_sass/_layout.scss b/docs/_sass/_layout.scss
@@ -7,8 +7,6 @@
 // --------------------------------------------------------------------------/**
 .icon {
 
-
-
 }
 
 .site-header {
@@ -45,14 +43,18 @@
             height: 25px;}     
     }
 }
-
 .main-nav {
+    $main-nav-width: 230px;
     float: left;
+    -ms-flex: 0 0 $main-nav-width;
+    flex: 0 0 $main-nav-width;
+
+    min-width: 300px;
     @include media-breakpoint-down(sm) {
-        min-width: 300px;
     }
     a img { 
-        height: 25px;}  
+        height: 25px;
+    }  
 }
 
 //