Fix menu paddings, add additional space for big screens

2 files changed, 32 insertions, 12 deletions

diff --git a/assets/_markdown.scss b/assets/_markdown.scss
index 78505d2..b0f7116 100644
--- a/assets/_markdown.scss
+++ b/assets/_markdown.scss
@@ -5,8 +5,9 @@ $block-border-radius: 0.15rem;
 .markdown {
   line-height: 1.7;
 
-  :first-child {
+  > :first-child {
     margin-top: 0;
+    line-height: 1em;
   }
 
   h1, h2, h3, h4, h5 {
diff --git a/assets/book.scss b/assets/book.scss
index 948d8f9..583ecc2 100644
--- a/assets/book.scss
+++ b/assets/book.scss
@@ -36,14 +36,20 @@ a {
   }
 }
 
+img {
+  vertical-align: middle;
+}
+
 aside {
   ul {
     margin: 0;
     padding-left: $padding-16;
     list-style: none;
-    line-height: 2em;
+    line-height: 1.5em;
 
     li {
+      margin: .5em 0;
+
       a { display: block; }
       a:hover { opacity: .5; }
   
@@ -66,6 +72,15 @@ aside.fixed nav {
   overflow: hidden auto;
 }
 
+header {
+  display: flex;
+  align-items:center;
+  justify-content: space-between;
+  margin-bottom: $padding-16;
+
+  display: none;
+}
+
 main {
   max-width: $content-max-width;
   margin: 0 auto;
@@ -96,22 +111,13 @@ main {
     a { color: $nav-link-color; }
     a.active { color: $color-link; }
 
-    .flat {
+    .flat-section {
       margin-bottom: $padding-16;
       > a { font-weight: 700; }
       > ul { padding-left: 0; }
     }
   }
 
-  header {
-    display: flex;
-    align-items:center;
-    justify-content: space-between;
-    margin-bottom: $padding-16;
-  
-    display: none;
-  }
-
   .content {
     flex: 1 0;
     width: 0;
@@ -167,3 +173,16 @@ $toc-hide-point: $menu-hide-point + $nav-menu-width;
     }
   }
 }
+
+// Extra space for big screens
+@media screen and (min-width: $toc-hide-point) {
+  main {
+    .content {
+      padding: $padding-16 * 2 $padding-16;
+    }
+
+    .menu nav, .toc nav {
+      padding: $padding-16 * 2;
+    }
+  } 
+}
\ No newline at end of file