data8/_sass/components/_components.textbook__page.scss

/**
 * 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]: Within-textbook__page layout
 * [2]: Since we use JS to focus the page on load, hide the outline to avoid
 *   visual cruft.
 *
 * Notebook styling:
 *
 * [4]: Some tables are too wide for the page on smaller screens so we let the
 *   user scroll horizontally.
 * [5]: Inline code snippets (usually variable names) should have a gray bg.
 */

/**
 * [1] Within-textbook__page layout
*/

div.jb_cell {
  width: 100%;
  position: relative;

  @include mq($from: laptop) {
    width: $textbook-page-with-sidebar-width;
  }
}

// Right margin
div.jb_cell {
  &.tag_popout {
    .cell {
      border-left: 3px solid #c3c3c3;
      padding-left: 5%
    }

    // On laptops, pop out to the right instead of in-line
    @include mq($from: laptop) {
      width: calc(100% - #{$textbook-page-with-sidebar-width});
      font-size: .8em;
      position: relative;
      float: right;
      padding-left: $spacing-unit-large * .8;
      clear: both;

      h1, h2, h3, h4, h5, h6 {
          margin: .5em 0px 0px 0px;
      }

      // This prevents *sequential* popouts from creating a bunch of white-space when stacked
      & + div.tag_popout {
        height: 0px;
      }

      // Remove the border when we pop-out to the right
      .cell {
        border-left: none;
        padding-left: 0;
      }
    }
  }

  &.tag_full_width {
    width: 100%;

    img {
      max-width: 100%;
    }
  }
}



/**
 * Jupyter notebook styling
 */

div.highlighter-rouge {
  // Ensures that items within this div can be positioned absolutely
  position: relative;
}

div.inner_cell div.highlight > pre,
div.highlighter-rouge > div.highlight > pre,
div.output_wrapper pre {
  background-color: $color-light-gray;
  font-size: 0.9em;
  margin-bottom: $spacing-unit-small;
  padding: $spacing-unit-small;
  overflow-x: auto;
  border: 1px solid $color-dark-gray;
}

// If we've got intentionally non-highlighted markup, make sure that the lines wrap
pre code.language-no-highlight {
  white-space: pre-wrap;
}

div.output_wrapper {
  margin-bottom: $spacing-unit-small;
}

div.output_wrapper pre {
  border: 1px solid $color-light-gray !important;
  background-color: #fcfcfc !important;
}

.output_html {
  /* [4] */
  overflow-x: auto;
}

/* [5] */
code {
  padding: 4px;
  overflow-x: auto;
  @include inuit-font-size(14px);
}

pre.highlight code {
  display: block;
}

blockquote {
  margin: $spacing-unit-small;
  padding: $spacing-unit-med;
  border-left: 4px solid $color-dark-gray;

  p:last-child {
    margin-bottom: 0;
  }
}

/* Outputs */
.output_stream,
.output_data_text,
.output_traceback_line {
  margin-left: 2% !important;
  border: none !important;
  border-radius: 4px !important;
  background-color: #fafafa !important;
  box-shadow: none !important;
}

.output_stream:before,
.output_data_text:before,
.output_traceback_line:before {
  content: none !important;
}

.output_text pre {
  background-color: #f8f8fb !important;
}

.output_html,
.output_png::before {
  padding: 1em 1.5em !important;
}

.output_png img,
p img {
  max-width: 500px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.output_png img {
  width: 100% !important;
}

.hl-ipython3 pre::before,
.output_subarea pre::before,
.output_html::before,
.output_png::before {
  color: #ccc !important;
  float: left !important;
  margin-bottom: 0.25em !important;
  width: 100% !important;
}

/**
  * nbinteract styling
  */
.cell.nbinteract-left {
  width: 50%;
  float: left;
}

.cell.nbinteract-right {
  width: 50%;
  float: right;
}

.cell.nbinteract-hide_in > .input {
  display: none;
}

.cell.nbinteract-hide_out > .output_wrapper {
  display: none;
}

.cell:after {
  content: '';
  display: table;
  clear: both;
}

div.output_subarea {
  max-width: initial;
}

.jp-OutputPrompt {
  display: none;
}