lbry.com/web/scss/_content.scss

@import "global";
.content
{
  margin-left: auto;
  margin-right: auto;

  &:not(.content-wide)
  {
    max-width: $max-content-width; /*we have more padding than desirable so numbers from ol can exceed container*/
  }
  &.content-stretch
  {
    max-width: none;
  }
  &.content-wide
  {
    max-width: 1400px;
  }
  &.content-tile
  {
    max-width: $max-text-width;
  }
  &.content-readable
  {
    max-width: $max-text-width + 200;
  }

  padding-left: 15px;
  padding-right: 15px;

  h1, h2, h3, h4
  {
    &:not(:first-child)
    {
      margin-top: $spacing-vertical * 1.5;
    }
  }
  .meta
  {
    + h1, + h2, + h3, + h4
    {
      margin-top: $spacing-vertical * 0.5;
    }
  }

  &.content-dark
  {
    color: #e8e8e8;
    h1, h2, h3, h4, h5, h6 { color: #fff; }
    .link-primary { color: $color-light-alt; }
    .meta { color: #dddddd; }
  }

  &:not(.content-dark), &.content-light
  {
    color: #333;
    h1, h2, h3, h4, h5, h6
    {
      color: $color-text-dark;
    }

    .meta
    {
      color: $color-meta-light;
    }

    .link-primary { color: $color-primary; }

    blockquote
    {
      padding-left: 40px;
      border-left: solid 8px #f2f2f2;
    }
  }

  p
  {
      margin-bottom: $spacing-vertical;
      margin-left: auto;
      margin-right: auto;
  }
  p.pflow
  {
    margin-left: 0;
    margin-right: 0;
  }
  footer
  {
    font-size: 0.9em;
    font-style: italic;
    em { font-style: normal; }
  }
  ul, ol
  {
    > li
    {
      max-width: $max-text-width;
      margin-left: auto;
      margin-right: auto;
    }
    &.no-style
    {
      list-style: none;
      > li { list-style: none; }
    }
    ul, ol
    {
      margin-top: $spacing-vertical / 2;
      margin-left: $spacing-vertical;
    }
  }
  ul
  {
    margin-bottom: $spacing-vertical * 1.5;

    &:last-child
    {
      margin-bottom: $spacing-vertical / 2;
    }
    > li + li
    {
      margin-top: $spacing-vertical;
    }
  }
  ol
  {
    margin-bottom: $spacing-vertical * 1.5;
    &:last-child { margin-bottom: $spacing-vertical / 2; }
    padding-left: 2em;
    counter-reset: li-counter;
    > li
    {
      position: relative;
      padding-left: 1em;
      list-style: none;
      min-height: 2em;
      border-left: 1px solid rgba(160,160,160,0.5);
      &:before
      {
        position: absolute;
        top: -0.25em;
        left: -1em;
        width: 0.8em;

        font-size: 2em;
        text-align: right;
        opacity: 0.5;

        content: counter(li-counter);
        counter-increment: li-counter;
      }
      ol
      {
        > li
        {
          border-left-style: dashed;
          font-size: 0.9em;
          min-height: 1em;
          &:before
          {
            content: counter(li-counter, lower-alpha);
            top: -0.15em;
            font-size: 1.4em;
            text-transform: uppercase;
          }
        }
      }
      + li { margin-top: $spacing-vertical; }
    }
  }
  img
  {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  table
  {
    margin-bottom: $spacing-vertical;
    word-wrap: break-word;
    max-width: 100%;

    th, td
    {
      padding: $spacing-vertical/2 8px;
    }
    th
    {
      font-weight: bold;
      font-size: 0.9em;
    }
    td
    {
      vertical-align: top;
    }
    thead th, > tr:first-child th
    {
      vertical-align: bottom;
      font-weight: bold;
      font-size: 0.9em;
      padding: $spacing-vertical/4+1 8px $spacing-vertical/4-2;
      text-align: left;
      border-bottom: 1px solid #e2e2e2;
      img
      {
        vertical-align: text-bottom;
      }
    }
    tr.thead:not(:first-child) th
    {
      border-top: 1px solid #e2e2e2;
    }
    tfoot td
    {
      padding: $spacing-vertical / 2 8px;
      font-size: .85em;
    }
    tbody
    {
      tr
      {
        &:nth-child(even):not(.odd)
        {
          background-color: #f4f4f4;
        }
        &:nth-child(odd):not(.even)
        {
          background-color: white;
        }
        &.thead
        {
          background: none;
        }
        td
        {
          border: 0 none;
        }
      }
    }

    &:last-child
    {
      margin-bottom: 0;
    }
  }
}
.content-inset
{
  margin-left: $spacing-vertical;
  margin-right: $spacing-vertical;
}
main > .content
{
  margin-top: $spacing-vertical;
}

@media(max-width: $max-text-width + 30)
{
  .content ol
  {
    margin-left: 30px; /*on small screens there is no space for numbers to exceed container*/
  }
}