sol2/sass/_theme_rst.sass

// -------------------------------------------------------------------------------------------------------------------
// CONTRIBUTORS, PLEASE READ THIS!
// -------------------------------------------------------------------------------------------------------------------
// Couple things...
//    1. Lots of this @extends from wyrm_core/_type.sass (http://www.github.com/snide/wyrm/.
//        * Try not to replace any @extends code. It's pretty generic stuff meant to work together.
//        * That said, know that I'm very unlikely to accept PRs from wyrm just to change style here.
//    2. I plan to remove the !importants in here. Part of it is due to lazyness, part to sphinx's fondness for nesting.
//    3. Try to use variables from wyrm_core/wy_variables.sass. Notable are...
//        * $base-line-height // All margins, padding and line-height should use this in .25 increments.
//        * $text-color, $text-light, $text-dark...etc
//        * $base-font-family, $custom-font-family, $code-font-family
//    4. If you have changes for mobile/tablet, put them at the bottom of the sass file.
// --------------------------------------------------------------------------------------------------------------------

.rst-content
  // Sphinx by default applies HxW style attributes to images. This fixes that oversite.
  img
    max-width: 100%
    height: auto !important

  div.figure
    margin-bottom: $base-line-height
    p.caption
      font-style: italic

  div.figure.align-center
    text-align: center

  // Usually it's a good idea to give images some space.
  .section > img,   .section > a > img
    margin-bottom: $base-line-height
  // Questionable whether this is nice or not. It styles eternal links, but comes with some baggage.
  // a.reference.external:after
  //   font-family: FontAwesome
  //   content: " \f08e "
  //   color: $text-light
  //   vertical-align: super
  //   font-size: 60%

  // For the most part, its safe to assume that sphinx wants you to use a blockquote as an indent. It gets
  // used in many different ways, so don't assume you can apply some fancy style, just leave it be.
  blockquote
    margin-left: $base-line-height
    line-height: $base-line-height
    margin-bottom: $base-line-height
  .literal-block, pre.literal-block
    @extend .codeblock
  // These are the various note pullouts that sphinx applies
  .note, .attention, .caution, .danger, .error, .hint, .important, .tip, .warning, .seealso, .admonition-todo
    @extend .wy-alert
    .last
      margin-bottom: 0
  .admonition-title
    @extend .wy-alert-title
    @extend .fa
    @extend .fa-exclamation-circle
    &:before
      margin-right: 4px
  .note, .seealso
    @extend .wy-alert.wy-alert-info
  .hint, .tip, .important
    @extend .wy-alert.wy-alert-success
  .error, .danger
    @extend .wy-alert.wy-alert-danger
  .warning, .caution, .attention, .admonition-todo
    @extend .wy-alert.wy-alert-warning
  // Some people put tables in notes. Let's give them very basic support.
  .admonition table
    border-color: rgba(0,0,0,.1)
    td, th
      background: transparent !important
      border-color: rgba(0,0,0,.1) !important
  .section ul, .toctree-wrapper ul
    @extend .wy-plain-list-disc
  .section ol.loweralpha, .section ol.loweralpha li
    list-style: lower-alpha
  .section ol.upperalpha, .section ol.upperalpha li
    list-style: upper-alpha
  .section ol, ol.arabic
    @extend .wy-plain-list-decimal
  .section ol p, .section ul p
    margin-bottom: $base-line-height / 2
  .line-block
    margin-left: $base-line-height

  // Generics handling of headings and toc stuff.
  .topic-title
    font-weight: bold
    margin-bottom: $base-line-height / 2
  .toc-backref
    color: $text-color
  .align-right
    float: right
    margin: 0px 0px $base-line-height $base-line-height
  .align-left
    float: left
    margin: 0px $base-line-height $base-line-height 0px
  .align-center
    margin: auto
    display: block
  .toctree-wrapper p.caption
    @extend h2

  // This is the #href that shows up on hover. Sphinx's is terrible so I hack it away.
  h1, h2, h3, h4, h5, h6, dl dt, p.caption
    .headerlink
      display: none
      visibility: hidden
      font-size: 14px
      @extend .fa
      &:after
        visibility: visible
        content: "\f0c1"
        font-family: FontAwesome
        display: inline-block
    &:hover .headerlink
      display: inline-block

  // Sidebar content. You'll see at the bottom of this file I change it in mobile.
  .sidebar
    float: right
    width: 40%
    display: block
    margin: 0 0 $base-line-height $base-line-height
    padding: $base-line-height
    background: $sidebar-background-color
    border: solid 1px $sidebar-border-color
    // Sidebar content is usually less relevant, so adjust the margins and sizes.
    p, ul, dl
      font-size: 90%
    .last
      margin-bottom: 0
    .sidebar-title
      display: block
      font-family: $custom-font-family
      font-weight: bold
      background: $table-border-color
      padding: $base-line-height / 4 $base-line-height / 2
      margin: -$base-line-height
      margin-bottom: $base-line-height
      font-size: 100%
  // Sphinx can highlight searched text with ?highlighted=searchterm
  .highlighted
    background: $highlight-color
    display: inline-block
    font-weight: bold
    padding: 0 $base-line-height / 4

  // These are the little citation links [1] that show up within paragraphs.
  .footnote-reference, .citation-reference
    vertical-align: super
    font-size: 90%

  // Tables! Sphinx LOVES TABLES. Most of wyrm assumes you're only going to use a table as a table
  // so I have to write a bunch of unique stuff for Sphinx to style them up differently like it's 2003.
  table.docutils.citation, table.docutils.footnote
    background: none
    border: none
    color: $gray-light
    td, tr
      border: none
      background-color: transparent !important
      white-space: normal
    td.label
      padding-left: 0
      padding-right: 0
      vertical-align: top
    code
      color: $gray
  table.docutils
    @extend .wy-table
    @extend .wy-table-bordered-all
    &:not(.field-list)
      @extend .wy-table-striped
  // This table is what gets spit out for auto-generated API stuff. I style it smaller bits of padding.
  table.field-list
    @extend .wy-table
    border: none
    td
      border: none
      padding-top: 5px
    td > strong
      display: inline-block
      margin-top: 3px
    .field-name
      padding-right: 10px
      text-align: left
      white-space: nowrap
    .field-body
      text-align: left
      padding-left: 0

  // These are the "literals" that get spit out when you mark stuff as ``code`` as your write.
  tt, code
    @extend code
    color: $black
    big, em
      font-size: 100% !important
      line-height: normal

    &.literal
      color: $text-code-color
    &.xref, a &
      font-weight: bold
      color: $text-codexref-color
  // If the literal is inside an a tag, let's color it like a link
  a tt, a code
    color: $link-color
  dl
    margin-bottom: $base-line-height
    dt
      font-weight: bold
    // Most of the content within these dls are one liners, so I halve the normal margins.
    p, table, ul, ol
      margin-bottom: $base-line-height / 2 !important
    // rST seems to want dds to be treated as the browser would, indented.
    dd
      margin: 0  0 $base-line-height / 2 $base-line-height
  // This is what Sphinx spits out for it's autodocs. Depending upon what language the person is referencing
  // these things usually have a class of "method" or "class" or something similar, but really who knows.
  // Sphinx doesn't give me a generic class on these, so unfortunately I have to apply it to the root dl.
  // This makes me terribly unhappy and makes this code very nesty. Unfortunately I've seen hand-written docs
  // that output similar, but not quite the same nesting so this is really the best we can do.
  dl:not(.docutils)
    margin-bottom: $base-line-height
    // This would be the equivilant of a .. class::
    dt
      display: inline-block
      margin: $base-line-height / 4 0
      font-size: 90%
      line-height: normal
      background: lighten($class-color, 50%)
      color: $class-color
      border-top: solid 3px lighten($class-color, 20%)
      padding: $base-line-height / 4
      position: relative
      &:before
        color: lighten($class-color, 20%)
      .headerlink
        color: $text-color
        font-size: 100% !important
    // And this would be the .. method::
    dl dt
      margin-bottom: $base-line-height / 4
      border: none
      border-left: solid 3px hsl(0,0%,80%)
      background: hsl(0,0%,94%)
      color: $method-color
      .headerlink
        color: $headerlink-color
        font-size: 100% !important
    dt:first-child
      margin-top: 0
    // Since dts get the callout style, we treat this less as callouts.
    tt, code
      font-weight: bold
      &.descname, &.descclassname
        background-color: transparent
        border: none
        padding: 0
        font-size: 100% !important
      &.descname
        font-weight: bold
    // This is for more advanced parameter control
    .optional
      display: inline-block
      padding: 0 4px
      color: $black
      font-weight: bold
    .property
      display: inline-block
      padding-right: 8px
  // Doc links to sourcecode
  .viewcode-link, .viewcode-back
    display: inline-block
    color: $text-viewcode-color
    font-size: 80%
    padding-left: $base-line-height
  .viewcode-back
    display: block
    float: right
  p.rubric
    margin-bottom: 12px
    font-weight: bold
  //Download link
  code.download
    background: inherit
    padding: inherit
    font-family: inherit
    font-size: inherit
    color: inherit
    border: inherit
    white-space: inherit
    span:first-child
      @extend .fa
      @extend .fa-download
      &:before
        margin-right: 4px

// Mobile specific
+media($mobile)
  .rst-content
    .sidebar
      width: 100%