_layout.scss in jekyll-theme-hydeout-3.2.0

- old
+ new

@@ -35,24 +35,19 @@
   min-height: 100vh;
 }
 
 #sidebar {
   flex: 0 0 auto;
+  padding: $section-spacing;
 
-  // Use header + last-child to control vertical spacing so we can make
-  // certain elements appear to be part of sidebar
-  padding: 0 $section-spacing;
-  header { margin-top: $section-spacing; }
-  header ~ *:last-child { margin-bottom: $section-spacing; }
-
   .site-title {
     font-family: "Abril Fatface", serif;
     font-weight: normal;
     font-size: $large-font-size;
     color: rgba(255,255,255,.75);
     margin-top: 0;
-    margin-bottom: 0;
+    margin-bottom: $heading-spacing;
 
     a {
       color: inherit;
       &:hover { color: white; }
     }
@@ -84,36 +79,31 @@
 ----------------------------------------------------------- */
 
 // Hide secondary nav content in sidebar
 // Hide lead paragraph in sidebar
 #sidebar {
-  header ~ *, p.lead {
+  header ~ *, header ~ nav, p.lead {
     display: none;
   }
 }
 
 // Make header elements blend into sidebar / background
 .container > header {
   background: transparent;
   color: white;
-  margin: 0 $section-spacing $section-spacing;
+  margin: -$section-spacing $section-spacing $section-spacing;
 
   h1, h2 {
     color: white;
 
     &:last-child {
       margin-bottom: 0;
     }
   }
 }
 
-// Index pages need more padding on bottom
-.index #sidebar {
-  margin-bottom: $section-spacing;
-}
 
-
 /* -----------------------------------------------------------
   Mobile view for home page)
 ----------------------------------------------------------- */
 
 .home #sidebar {
@@ -130,10 +120,20 @@
 
   // Show secondary nav content + lead
   header ~ *, p.lead {
     display: block;
   }
+
+  header ~ nav {
+    display: flex;
+  }
+
+  // Slightly more bottom padding to compensate for heading not match 100% of
+  // line-height on top
+  > *:last-child {
+    margin-bottom: 0.5rem;
+  }
 }
 
 
 /* -----------------------------------------------------------
   Tablet / Desktop view
@@ -145,16 +145,21 @@
     height: 100vh;
     overflow: auto;
     > * { max-height: 100vh; overflow: auto; }
   }
 
+  /* Undo mobile CSS */
+
   #sidebar, .home #sidebar {
     width: $sidebar-width;
     text-align: left;
+
+    > *:last-child {
+      margin-bottom: 0;
+    }
   }
 
-  // Undo mobile CSS
   #sidebar {
     .site-title {
       font-size: 3.25rem;
       margin-bottom: $heading-spacing;
 
@@ -163,10 +168,16 @@
     }
 
     p.lead, header ~ * {
       display: block;
     }
+
+    header ~ nav {
+      display: flex;
+    }
+
+
   }
 
   .index #sidebar { margin-bottom: 0; }
 
   // Make entire container background white to contrast against sidebar
@@ -221,22 +232,38 @@
   &.active {
     font-weight: bold;
   }
 }
 
-#sidebar-nav {
-  margin-bottom: 1rem;
+#sidebar nav {
+  display: flex;
 }
 
+#sidebar-nav-links {
+  flex-flow: column nowrap;
+}
+
+#sidebar-icon-links {
+  max-width: 100%;
+  flex-flow: row wrap;
+  justify-content: center;
+  margin-top: 1rem;
+
+  @media (min-width: $large-breakpoint) {
+    margin-left: -0.25em;
+    justify-content: flex-start;
+  }
+}
+
 #sidebar nav > * {
   display: block;
   line-height: 1.75;
 }
 
 #sidebar nav > .icon {
   font-size: 1.5rem;
   display: inline-block;
-  + a { margin-left: 0.5em; }
+  margin: 0 0.25em;
 }
 
 
 /* -----------------------------------------------------------
   Sticky sidebar
\ No newline at end of file