Add styling for sidebar

DS-100 · Aug 10, 2018 · fcd37a0 · fcd37a0
1 parent 0f23c7e
commit fcd37a0
Show file tree

Hide file tree

Showing 10 changed files with 144 additions and 37 deletions.
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
@@ -1,12 +1,20 @@
 <nav class="c-textbook__sidebar">
-  <ul>
+  <ul class="c-sidebar__chapters">
     {% for chapter in site.data.toc %}
-      <li>{{ chapter.title }}</li>
+      <li class="c-sidebar__chapter">
+        <a class="c-sidebar__entry" href="{{ chapter.url }}">
+          {{ chapter.title }}
+        </a>
+      </li>
 
       {% if chapter.sections %}
-        <ul>
+        <ul class="c-sidebar__sections">
           {% for section in chapter.sections %}
-            <li>{{ section.title }}</li>
+            <li class="c-sidebar__section">
+              <a class="c-sidebar__entry" href="{{ section.url }}">
+                {{ section.title }}
+              </a>
+            </li>
           {% endfor %}
         </ul>
       {% endif %}

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -2,11 +2,13 @@
 <html lang="en">
   {% include head.html %}
   <body>
-    <div class="c-textbook">
+    <div class="c-textbook js-show-sidebar">
       {% include sidebar.html %}
 
-      <main class="o-wrapper c-textbook__page">
-        {{ content }}
+      <main class="c-textbook__page">
+        <div class="o-wrapper">
+          {{ content }}
+        </div>
       </main>
     </div>
   </body>

diff --git a/_sass/components/_components.interact-button.scss b/_sass/components/_components.interact-button.scss
@@ -21,7 +21,7 @@ $color-interact-button: #477dca !default;
   display: inline-block;
   font-weight: 700;
   /* [2] */
-  padding: $spacing-unit-small $spacing-unit;
+  padding: $spacing-unit-tiny $spacing-unit-med;
   text-decoration: none;
 
   &:hover,

diff --git a/_sass/components/_components.notebook.scss b/_sass/components/_components.notebook.scss
diff --git a/_sass/components/_components.textbook.scss b/_sass/components/_components.textbook.scss
@@ -4,16 +4,27 @@
  * on small screens.
  *
  * The actual styling for the sidebar and page are located in their respective
- * component SCSS files. This file handles layout.
+ * component SCSS files. This file manages the layout and width only.
+ *
+ * By default, the sidebar is not visible.
  *
  * [1]: The entire page is positioned relative so that when the page overflows
  *   (e.g. sidebar open on small screens) the user can't scroll left/right.
  * [2]: The sidebar and the textbook page are positioned absolute so that we
  *   can use translate() on the textbook page to reveal the sidebar.
  * [3]: Setting the background color hides the sidebar when it's behind the
- *   page.
+ *   page (otherwise the page is transparent).
+ *
+ * When the sidebar is visible:
+ *
+ * [4]: Shift the textbook page over to the left. On small screens, the page
+ *   will overflow since the sidebar takes up most of the screen.
+ * [5]: On larger screens, the page and sidebar have enough room to read them
+ *   simultaneously, so make sure that the page doesn't overflow.
  */
 
+$sidebar-width: 260px;
+
 .c-textbook {
   /* [1] */
   position: relative;
@@ -29,14 +40,24 @@
   overflow: scroll;
 
   background-color: white; /* [3] */
+}
 
-  padding: $spacing-unit;
+.c-textbook__sidebar {
+  width: $sidebar-width;
 }
 
 .c-textbook__page {
-  transform: translate(calc(100% - 60px), 0);
+  width: 100%;
+}
+
+.js-show-sidebar {
+  .c-textbook__page {
+    /* [4] */
+    transform: translate($sidebar-width, 0);
 
-  @include mq($from: tablet) {
-    padding: $spacing-unit-large;
+    @include mq($from: tablet) {
+      /* [5] */
+      width: calc(100% - #{$sidebar-width});
+    }
   }
 }
diff --git a/_sass/components/_components.textbook__page.scss b/_sass/components/_components.textbook__page.scss
@@ -0,0 +1,45 @@
+/**
+ * Styling for textbook pages. Jupyter notebooks generate their own HTML markup
+ * which we style under the #ipython-notebook selector.
+ *
+ * Most of the textbook content is styled using this component.
+ *
+ * [1]: Don't add horizontal padding since the content lies within a .o-wrapper
+ *
+ * Notebook styling:
+ *
+ * [2]: Add a border around cell input to distinguish it from the output.
+ */
+
+.c-textbook__page {
+  /* [1] */
+  padding: $spacing-unit-small 0;
+
+  @include mq($from: tablet, $until: desktop) {
+    padding: $spacing-unit;
+  }
+
+  @include mq($from: desktop) {
+    padding: $spacing-unit-large;
+  }
+}
+
+/**
+ * Jupyter notebook styling
+ */
+
+#ipython-notebook {
+  .input_area pre,
+  .output_text pre {
+    background-color: $color-light-gray;
+    font-size: 0.9em;
+    margin-bottom: $spacing-unit-small;
+    padding: $spacing-unit-small;
+    overflow-x: scroll;
+  }
+
+  .input_area pre {
+    /* [2] */
+    border: 1px solid $color-dark-gray;
+  }
+}
diff --git a/_sass/components/_components.textbook__sidebar.scss b/_sass/components/_components.textbook__sidebar.scss
@@ -0,0 +1,47 @@
+/**
+ * Styling for the sidebar.
+ *
+ * [1]: The sidebar is implemented as ul and li elements so we need to remove
+ *   the bullets and margins.
+ * [2]: The entries are <a> tags so we need to remove the default styling.
+ */
+
+$color-sidebar-bg: #fafafa !default;
+$color-sidebar-entry: #364149 !default;
+
+.c-textbook__sidebar {
+  background-color: $color-sidebar-bg;
+  padding: $spacing-unit-small;
+  @include inuit-font-size(14px);
+  border-right: 1px solid rgba(0, 0, 0, 0.07);
+}
+
+/* [1] */
+.c-sidebar__chapters {
+  list-style: none;
+  margin-left: 0;
+  margin-bottom: 0;
+}
+
+/* [1] */
+.c-sidebar__sections {
+  list-style: none;
+  margin-left: $spacing-unit-small;
+  margin-bottom: 0;
+}
+
+.c-sidebar__chapter,
+.c-sidebar__section {
+  padding: $spacing-unit-tiny;
+}
+
+/* [2] */
+.c-sidebar__entry {
+  color: $color-sidebar-entry;
+  text-decoration: none;
+
+  &:hover,
+  &:active {
+    text-decoration: underline;
+  }
+}
diff --git a/_sass/elements/_elements.typography.scss b/_sass/elements/_elements.typography.scss
@@ -7,6 +7,7 @@ html {
   // https://css-tricks.com/snippets/css/system-font-stack/
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
     Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  color: $color-text;
 }
 
 /**

diff --git a/_sass/main.scss b/_sass/main.scss
@@ -85,7 +85,8 @@ $inuit-wrapper-width: 800px;
 
 // COMPONENTS
 @import 'components/components.textbook';
-@import 'components/components.notebook';
+@import 'components/components.textbook__sidebar';
+@import 'components/components.textbook__page';
 @import 'components/components.interact-button';
 
 // UTILITIES

diff --git a/_sass/settings/settings.global.scss b/_sass/settings/settings.global.scss
@@ -5,11 +5,14 @@
 // The global settings file contains any project-wide variables; things that
 // need to be made available to the entire codebase.
 
-$spacing-unit: $inuit-global-spacing-unit;
 $spacing-unit-tiny: $inuit-global-spacing-unit-tiny;
 $spacing-unit-small: $inuit-global-spacing-unit-small;
+$spacing-unit-med: 0.75 * $inuit-global-spacing-unit;
+$spacing-unit: $inuit-global-spacing-unit;
 $spacing-unit-large: $inuit-global-spacing-unit-large;
 $spacing-unit-huge: $inuit-global-spacing-unit-huge;
 
 $color-light-gray: #f7f7f7;
 $color-dark-gray: #ccc;
+
+$color-text: #222;