refactor layout

3 files changed, 189 insertions, 156 deletions

diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
index ed5d4a5..016a32c 100644
--- a/assets/sass/layout.scss
+++ b/assets/sass/layout.scss
@@ -1,71 +1,107 @@
-body {

-	header {

+* {

+    box-sizing: border-box;

+}

+a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {

+    border: 0;

+    vertical-align: baseline;

+}

 

+body {

+	margin: 0px 0px ;

+    display: -webkit-box;

+    display: flex;

+    -webkit-box-orient: vertical;

+    -webkit-box-direction: normal;

+    flex-direction: column;

 

-	}

+    min-height: 100vh;

+    text-rendering: optimizeLegibility;

 

-	article aside {

-		transition: max-height .2s ease-out;

+	header {

+		flex-shrink: 0;

+	    min-height: 45px;

+	    max-height: 45px;

+	    padding: 8px 0;

+	    position: fixed;

+	    width: 100%;

+	    z-index: 9999;

+	    -webkit-transform: translateZ(0);

+	    transform: translateZ(0);

+    	

+	    > * {

+	    	max-width: 1400px;

+	    	width: 100%;

+	    	padding: 0 20px;

+	    	margin: 0 auto;

+	    }

 

-		&.responsive{

-		    display: block;

-		    width: 100%;

-		    max-width: 20em;

-		    z-index: 100;

-		}

+	    div.burger {

+	    	display: none;

+	    }

 	}

+	

+	article {

 

-}

+	    -webkit-box-flex: 1;

+	    flex-grow: 1;

+	    display: -webkit-box;

+	    display: flex;

+	    -webkit-box-orient: vertical;

+	    -webkit-box-direction: normal;

+	    flex-direction: column;

+	    min-height: calc(100vh - 45px);

+	    

+	    left: 0;

+	    min-height: 100%;

+	    padding-top: 100px;

+	    position: relative;

+	    z-index: 99;

 

 

 

-body {

-	margin:0px;

 

-	header {

+

+	    -webkit-box-flex: 1;

+	    flex-grow: 1;

 	    display: -webkit-box;

-	    display: -ms-flexbox;

 	    display: flex;

-	    height: 3.5rem;

-	    line-height: 3.5rem;

-	    margin-bottom: .35rem;

-	    padding: 0 2rem;

-	    position: fixed;

-	    left: 0;	    right: 0;	    top: 0;

-	    z-index: 10;

-	    div.burger {

-	    	display: none;

+	    -webkit-box-orient: horizontal;

+	    -webkit-box-direction: normal;

+	    flex-flow: row nowrap;

+	    

+	    padding: 0 20px;

+	    padding-top: 45px;

+		margin: 0 auto;

+	    width: 100%;

+	    max-width: 1400px;

+	    

+	    > * {

+	    	margin: 0 24px;

 	    }

-	}

-	article {

-		padding-top: 3.5rem;

-	  	display: flex;

-	  	flex-direction: row;

-	  	flex-wrap: wrap;

-	  	width: 100%;

-	  	align-items: flex-start;

-	  	min-height: calc(100vh - 3.5rem);

-

 

 	  aside {

-	  	  margin-top: 3.5rem;

-		  position: fixed;

-		  top: 0; left: 0; right: 0; bottom: 0;

-		  width: 20em;

-	      overflow-y: auto; overflow-x: hidden;

-

-	      /*transition: transform .5s ease-out;*/

-	    &.full{

-	    	display: none;

-	    } 

-

+	  	transition: max-height .2s ease-out;

+

+	  	-webkit-box-flex: 0;

+    	flex: 0 0 20em;

+        margin-left: 0;

+

+        -webkit-box-flex: 0;

+	    flex: 0 0 20em;

+	    height: calc(100vh - 45px);

+	    position: -webkit-sticky;

+	    position: sticky;

+	    overflow-y: auto;

+	    top: 45px;

 	  }

 	

 	  section.page{

-	  	padding-left: 1.5rem!important;

-	  	padding-right: 1.5rem!important;

-	 	margin-left: 20em;

-	 	width:calc(100% - 20em - 15em - 1.1em);

+

+	    -webkit-box-flex: 1;

+	    flex: 1 auto;

+	    max-width: 100%;

+	    min-width: 0;

+	

 

 	 	.jump-to-section{

 	 		display:none;

@@ -87,120 +123,126 @@ body {
 	            box-shadow: 0 5px 8px rgba(0,0,0,.25);  

 	        }

 	 	}

-

-	 	&.simple{

-		 	width:calc(100% - 20em  - 1.1em);

-		}

-		&.full{

-			width: 100%;

-			margin-left: 0em;

-		}

-

 	  }

 

 	  section.right-menu{

-	  	 position: fixed;

-	  	 width: 15em;

-	     top: 3.5rem;

-	     right: 0px;	

-	     bottom: 0px;

-		 overflow-y: auto;

-	     overflow-x: hidden;  

-

-		 transition: transform .5s ease-in-out;

-		 &.simple,&.full,{

-		 	display: none;

-		 }

+	  	    margin-right: 0;

+	  	        align-self: flex-start;

+    display: block;

+    -webkit-box-flex: 0;

+    flex: 0 0 240px;

+    max-height: calc(100vh - 45px);

+    overflow-y: auto;

+    position: -webkit-sticky;

+    position: sticky;

+    	top: 45px;

+        margin-bottom: 40px;

 	  }

 	}

 	footer {

-		display: table-row;

-        position: relative;

-        overflow: auto;

-        display: block;

-        z-index: 100;

+		> * {

+	    	max-width: 1400px;

+	    	width: 100%;

+	    	padding: 0 20px;

+	    	margin: 0 auto;

+	    }

     }

 }

 

-@media(max-width:1200px) {

-	body{

+/* hideheader hidenav hidebreadcrumb hidetoc hidefooter */

+body {

+	&.hidenav{

+		article{

+			aside{

+				display:none!important;

+			}

+		}

+	}

+	&.hidebreadcrumb{

+		article section.page nav#breadcrumb{

+			display: none!important;

+		}

+	}

+	&.hidetoc{

+		article section.right-menu {

+			display: none!important;

+		}

+	}

+	&.hidefooter{

+		footer{

+			display: none!important;

+		}

+	}

+	&.hideheader{

 		header {

-			div.burger {

-	    		/*display: inline;*/

-	    		&.full{

-			 	display: none ;

-				}

-	    	}

+			display:none!important;

 		}

-		article {

-		  aside {

-		  	/*transform: translate(100vw,0);*/

-		  	/*display: none;*/

-		  }

-		

-		  section.page{

-		  	/*margin-left: 0px;	*/

-		  	width:calc(100%  - 1.1em);

-		  	&.simple{

-			 	width:100%;

+		article{

+			padding-top: 0px ;

+			aside{

+				top:0px;

+				height: calc(100vh);

+			}

+			section.right-menu{

+				top:0px;

+				max-height: calc(100vh);

 			}

-			.jump-to-section{display: block;}	 	

-		  }

-

-		  section.right-menu{

-		  	display: none;

-		  }

 		}

 	}

 }

 

-@media(max-width:930px) {

+@media(max-width:1160px) {

 	body{

-		header {

-			div.burger {

-	    		display: inline;

-	    		&.full{

-			 	display: none ;

-				}

-	    	}

-			nav.shortcuts li{

-

+		header{

+			div.burger{

 				display: none;

 			}

 		}

-

 		article {

-		  aside {

-			/*transform: translate(-100vw,0);*/

-			display: none;

-		  }

-		

-		  section.page{

-			width: 100%;

-			margin-left: 0px;

-

-		  }

-

-		  section.right-menu{

-		  	/*transform: translate(100vw,0);*/

-		  	display: none;

-		  }

-		}

+			padding-left: 0px ;

+			aside{

+				margin-right: 0px;

+			}

+			aside.responsive{

+				display: block;

+			}

+			section.page{

+				.jump-to-section{display: block;}	 		

+			}

+			section.right-menu{

+				display: none;	

+			}

+

+		}	

 	}

 }

 

 @media(max-width:600px) {

 	body{

+		header{

+			div.burger{

+				display: block;

+			}

+		}

 		article {

-			  section.page{

-				width: 100%;

-				margin-left: 0px;	 	

-			  }

+			padding: 0px 0px;

+			aside{

+				display: none;

+				flex: 0 0 100%;

+			}

 			aside.responsive{

-				width: 100%;

-				max-width: 100%;

-

+				display: block;

+			}

+			section.page{

+				.jump-to-section{display: block;}	 		

 			}

+			section.right-menu{

+				display: none;	

+			}

+

 		}	

 	}

-}
\ No newline at end of file
+}

+

+

+

diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 55812a5..e3f20a7 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -51,9 +51,6 @@ body{
         border-bottom: 2px solid gray ;

         box-shadow: 0 0 0.2rem rgba(0,0,0,.1), 0 0.2rem 0.4rem rgba(0,0,0,.2);

         

-        display: flex; 

-        flex-direction: row;

-        flex-wrap: nowrap;

         justify-content: space-between;

         align-items: stretch ;

 

@@ -61,21 +58,15 @@ body{
         a {

             color:invert($c_dark2);

         }

-        .logo {

+        > div {

             display: flex; 

             flex-direction: row;

             flex-wrap: nowrap;

             justify-content: space-between;

             align-items: stretch ;

-            font-size: 100%;

 

             white-space: nowrap;

-            overflow: hidden;

-            text-overflow: ellipsis;

-

-            *{

-                vertical-align: middle;

-            }

+            

 

             img {

                 height: 32px;

@@ -91,12 +82,15 @@ body{
 

 

         nav.shortcuts {

-            margin-left: 24px;

+            margin-left: auto;

+            position: relative;

+

             display: flex;

             justify-content: flex-start;

             list-style-type: none;

             flex-direction: row;

             flex-wrap: nowrap;

+

             li {

 

                 margin: 0px;

@@ -292,9 +286,6 @@ article section.page {
 

 

     div.chevrons {

-        &.simple, &.full{

-            display: none ;

-        }

         margin-top: 3rem;

         border-top: 1px solid $c_light2;

         border-bottom: 1px solid $c_light2;

@@ -302,15 +293,15 @@ article section.page {
         display: flex;

         flex-direction: row;

         align-items: stretch;

-            -webkit-box-pack: end!important;

-            justify-content: flex-end!important;

+        -webkit-box-pack: end!important;

+        justify-content: flex-end!important;

 

         a{

             display: flex;

             align-items: center!important;

             -webkit-box-align: center!important;

             justify-content: flex-end!important;

-            width: 50%;

+            

             max-width: 22.5rem;

             

             padding: 24px;

@@ -346,7 +337,7 @@ article section.page {
 

      h1:first-of-type {

         font-size: 2.6rem;

-        margin-top: 3rem!important;

+        margin-top: 1.5rem!important;

         color:$c_dark2;

         margin-bottom: 0px;

         line-height: 1.05;

diff --git a/assets/sass/menu.scss b/assets/sass/menu.scss
index 0ea7189..c1c03e2 100644
--- a/assets/sass/menu.scss
+++ b/assets/sass/menu.scss
@@ -24,7 +24,7 @@ article>aside {
         position: absolute;

         left: 0px;

         top: 0px;

-        width: calc(100% - 25px - 25px );

+        width: calc(100%);

         input {

             padding: 3px 25px;

             width: 100%;