Minor fixes

2018-09-30 01:04:22 +02:00
parent 13150ec9d8
commit 830fa91359
4 changed files with 5 additions and 4 deletions
@@ -0,0 +1,183 @@
+@import 'variables';
+@import 'markdown';
+
+
+html {
+  font-size: $font-size-base;
+}
+
+html, body {
+  min-width: $body-min-width;
+  overflow: hidden auto;
+}
+
+body {
+  color: $body-font-color;
+  background: $body-background;
+  font-family: 'Roboto', sans-serif;
+  font-weight: $body-font-weight;
+
+  box-sizing: border-box;
+  * {
+    box-sizing: inherit;
+  }
+}
+
+h1, h2, h3, h4, h5 {
+  font-weight: 400;
+}
+
+a {
+  text-decoration: none;
+  color: $color-link;
+
+  &:visited {
+    color: $color-visited-link;
+  }
+}
+
+aside {
+  ul {
+    margin: 0;
+    padding-left: $padding-16;
+    list-style: none;
+    line-height: 2em;
+
+    li {
+      a {
+        display: block;
+      }
+
+      a:hover {
+        opacity: .5;
+      }
+  
+      img {
+        height: $padding-16;
+      }
+    }
+  }
+
+  // start padding on second level
+  nav > ul {
+    padding-left: 0;
+  }
+}
+
+aside.fixed nav {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  overflow: hidden auto;
+}
+
+.container {
+  max-width: $content-max-width;
+  margin: 0 auto;
+
+  display: flex;
+  flex-flow: row;
+
+  .menu nav, .page, .markdown {
+    transition: .2s ease-in-out;
+    transition-property: transform, margin-left, opacity;
+    will-change: transform, margin-left;
+  }
+
+  .menu {
+    flex: 0 0 $nav-menu-width;
+
+    nav {
+      width: $nav-menu-width;
+      padding: $padding-16;
+      font-size: $font-size-14;
+    }
+
+    a {
+      color: $nav-link-color;
+    }
+
+    a.active {
+      color: $color-link;
+    }
+
+    .brand {
+      margin-top: 0;
+      margin-bottom: $padding-16;
+    }
+
+    .flat {
+      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;
+  }
+
+  .page {
+    flex: 1 0;
+    width: 0;
+    min-width: $body-min-width;
+    padding: $padding-16;
+  }
+
+  .toc {
+    flex: 0 0 $toc-menu-width;
+
+    nav {
+      width: $toc-menu-width;
+      padding: $padding-16;
+      font-size: $font-size-12;
+
+      ul ul {
+        padding-left: $padding-8;
+      }
+    }
+  }
+}
+
+// Responsive styles
+$menu-hide-point: $nav-menu-width + $body-min-width;
+$toc-hide-point: $menu-hide-point + $nav-menu-width;
+
+@media screen and (max-width: $toc-hide-point) {
+  .toc {
+    display: none;
+  }
+}
+
+@media screen and (max-width: $menu-hide-point) {
+  .menu {
+    margin-left: -$nav-menu-width;
+  }
+
+  .container .header {
+    display: flex;
+  }
+
+  #menu-control:checked + .container {
+    .menu nav, .page {
+      transform: translateX($nav-menu-width);
+    }
+    
+    .header label img {
+      transform: rotate(90deg);
+    }
+
+    .markdown {
+      opacity: .25;
+    }
+  }
+}
+
+.muted {
+  opacity: .75;
+}