use css-grid

themes/first/layouts/_default/single.html

@@ -1,6 +1,10 @@
 {{ define "main" }}
+
   {{ .TableOfContents }}
+
   <div class="content">
+
     {{ .Content }}
+
   </div>
 {{ end }}

themes/first/src/css/color.less

@@ -1,7 +1,7 @@
 
 @color-code-background: rgb(244, 247, 105);
 @color-code-border: rgb(90, 92, 0);
-@color-code-inline: rgb(35, 77, 133);
+@color-code-inline: rgb(22, 34, 0);
 
 @color-note-background: rgb(101, 224, 77);
 @color-note-border: rgb(56, 116, 0);

themes/first/src/css/main.less

@@ -7,38 +7,31 @@
 body {
   margin: 0px;
 
+  display: grid;
+  grid-template-columns:  1fr 50em 1fr;
+  grid-template-areas: 
+    ". header ."
+    ". content sidebar";
 }
 
 body .content {
-  width: 100%;
-  margin: 0px;
-
   font-family: @font-normal;
+  line-height: @font-height;
 
-  line-height: 1.7em;
+  grid-area: content;
-}
-
-@media @desktop {
-  body {
-    .content {
-      max-width: 50em;
-      margin: auto;
-    }
-    nav#main ul {
-      max-width: 50em;
-      margin: auto;
-    }
-  }
 }
 
 body nav#main {
-  margin: 0px;
   width: 100%;
+
+  grid-area: header;
   background-color: @color-nav-background;
 
   ul {
+    
+    margin-top: 0px;
+    margin-bottom: 0px;
 
-    width: 100%;
     list-style-type: none;
     padding: 0;
     overflow: hidden;
@@ -64,18 +57,27 @@ body nav#main {
 }
 
 body nav#TableOfContents {
-  display: none;
+  grid-area: sidebar;
+}
+
+.block-grid(){
+}
+
+.block-margin {
+  margin-top: .65em;
+  margin-bottom: .65em;
 }
 
 h1,h2,h3,h4 {
   font-family: @font-header;
+  .block-grid();
 };
 
 pre {
   background: @color-code-background;
 
-  margin-top: .3em;
+  .block-grid();
-  margin-bottom: .3em;
+  .block-margin();
   margin-left: 0em;
   margin-right: 0em;
 
@@ -108,13 +110,9 @@ li > code {
   .inline-code();
 }
 
-.block-margin {
-  margin-top: .65em;
-  margin-bottom: .65em;
-}
-
 p {
   .block-margin();
+  .block-grid();
 }
 
 .note {
@@ -124,6 +122,7 @@ p {
   padding-top: .4em;
   padding-bottom: .4em;
 
+  .block-grid();
   .block-margin();
 
   p {
@@ -153,7 +152,8 @@ p {
 }
 
 table.comparison {
-  width: 100%;
+
+  .block-grid();
 
   .block-margin();