README-center-align-jupyter-book.md

Updates files to center-align jupyter book content.

Relevant files are,

• _sass/components/_components.book__layout.scss
• _layouts/default.html

Simple way to make the modification is append following lines to Makefile:

center-align:
        wget https://gist.githubusercontent.com/syoh/ac8bd521e13fed2eda003b588a50771c/raw/fede1b15f46d812d860ca2db16c4d04528fe6cad/default.html -O _layouts/default.html
        wget https://gist.githubusercontent.com/syoh/ac8bd521e13fed2eda003b588a50771c/raw/fede1b15f46d812d860ca2db16c4d04528fe6cad/_components.book__layout.scss -O _sass/components/_components.book__layout.scss

Then, execute make center-align to modify the jupyter book.

_components.book__layout.scss

/**
 * The website contains two main components: the sidebar and the textbook page.
 * This file specifies the layout and includes classes to show/hide the sidebar
 * on small screens.
 *
 * The actual styling for the sidebar and page are located in their respective
 * 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 (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.
 */

$left-sidebar-width: 300px;
$page-max-width: 880px;
$right-sidebar-width: 220px;
$topbar-height: 60px;

.c-textbook {
  /* [1] */
  position: relative;
  height: 100vh;
  margin: 0 auto;
  max-width:1600px;
}

.c-topbar {
  background-color: $book-background-color;
  position: absolute;
  top: 0;
  height: $topbar-height;
  width: 100%;
  left: 0;
  padding: $spacing-unit-small $spacing-unit-small 0 $spacing-unit-med * 2;
  z-index: 1;
  transition: top 250ms, transform 250ms ease; // For animations
}

@include mq($until: tablet) {
  .c-topbar.hidetop {
    // At desktop, we stop hiding the navbar
    top: -250px;
  }
}

.c-textbook__sidebar,
.c-textbook__page {
  /* [2] */
  height: 100vh;
  overflow: auto;
  position: absolute;
  background-color: $book-background-color; /* [3] */
}

.c-textbook__sidebar {
  width: $left-sidebar-width;
  top: 0;
  left: 0;
}

.c-textbook__page {

  width: $textbook-page-width;
  transition: transform 250ms ease;
  left: 0;
  padding: 0 $spacing-unit $spacing-unit-small $spacing-unit-small * 3;
  overflow-x: visible;

  &:focus {
    /* [2] */
    outline: none;
  }
}

.sidebar__right {
  // By default we hide the sidebar
  display: none;

  // Spacing for the sidebar
  width: $right-sidebar-width - $spacing-unit-small; // To account for the small margin on the right
  position: relative;
  float: right;
  z-index: 1; // Keep sidebar under page content

  @include mq($from: tablet) {
    // Show right TOC at laptop size
    display: block;
  }
}

.js-show-sidebar {
  .c-textbook__page {
    /* [4] */
    transform: translate($left-sidebar-width, 0);

    @include mq($from: tablet) {
      /* [5] */
      width: calc(100% - #{$left-sidebar-width});
    }
  }
}

.c-textbook__content {
  clear: both;
  padding-top: $topbar-height * 1.5;
  width: 95%;
}

.c-textbook__content, .c-textbook__footer {
  max-width: $page-max-width;
}

.c-page__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
}

// Make sure that the bottom content has the same width as non-sidebar content
.footer, .c-page__nav {
  @include mq($from: laptop) {
    width: $textbook-page-with-sidebar-width;
  }
}

// Scrollbar width
::-webkit-scrollbar {
  width: 5px;
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
}

main, nav {
  scrollbar-width: thin;
}

default.html

<!DOCTYPE html>
<html lang="en">
  {% include head.html %}
  <body>
    <!-- .js-show-sidebar shows sidebar by default -->
    <div id="js-textbook" class="c-textbook {% if site.show_sidebar %}js-show-sidebar{% endif %}">
      {% include sidebar.html %}
      <main class="c-textbook__page" tabindex="-1">
            {% include topbar.html %}
            <div class="c-textbook__content" id="textbook_content">
              {{ content }}
            </div>
            <div class="c-textbook__footer" id="textbook_footer">
              {% include page-nav.html %}
              {% include footer.html %}
            </div>

        </div>
      </main>
    </div>
  </body>
</html>