refactor layout

1 files changed, 178 insertions, 136 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
+}

+

+

+