Mailspring/_sass/_docs.scss

.container-docs {
  color: #545454;
  font-size:1em;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote {
      margin: 0;
      padding: 0;
  }
  strong {
    color: #404040;
  }
  p {
      margin-bottom: 12px;
      font-size:1em;
      font-weight: 300;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      color: #404040;
      line-height: 36px;
      font-weight: 500;
      opacity: 1;
      margin-bottom:15px;
  }
  h1 {
      font-size: 40px;
      margin-top:30px;
  }
  h2 {
      font-size: 30px;
      margin-top:30px;
  }
  h3 {
      font-size: 24px;
      margin-top:30px;
  }
  h4 {
      font-size: 18px;
      margin-top:20px;
  }
  h5 {
      font-size: 16px;
  }
  h6 {
      font-size: 14px;
  }
  hr {
      margin: 0 0 19px;
      border: 0;
      border-bottom: 1px solid #ccc;
  }
  h1:first-child,
  h2:first-child,
  h3:first-child,
  h4:first-child,
  h5:first-child,
  h6:first-child {
      margin-top:0;
  }

  .markdown-from-sourecode {
    h4, h3, h2, h1 {
      font-size: 18px;
      margin-top:20px;
      margin-bottom:5px;
    }
  }
  blockquote {
    padding: 13px 13px 21px 15px;
    margin-bottom: 18px;
    font-family:georgia,serif;
    font-style: italic;
    border-left: 5px solid #C7DDDB;
    background-color: #EAF7F6;
  }
  blockquote p {
    font-size: 15px;
    font-weight: normal;
    margin-bottom: 0;
    font-style: italic;
  }
  blockquote code {
    background-color:#f2f2f2;
  }
  img {
    max-width:100%;
  }
  code, pre {
    font-family: Monaco, Andale Mono, Courier New, monospace;
  }

  // inline code (`ClassName`)
  code {
    color: #2F3942;
    background-color: #eee;
    padding: 1px 3px;
    font-size: 14px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }
  pre {
    margin: 0 0 18px;
    line-height: 18px;
    font-size: 14px;
    border: 1px solid #d9d9d9;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  // code blocks (```)
  pre code {
    color: #eee;
    font-size: 13px;
    background-color: #2F3942;
    padding: 0;
    display: block;
    padding: 14px;
  }
  sup {
    font-size: 0.83em;
    vertical-align: super;
    line-height: 0;
  }
  * {
    -webkit-print-color-adjust: exact;
  }
  a {
    font-weight: 400;
  }

  #sidebar {
    float:left;
    position:static;
    width:250px;

    .section {
      padding-bottom:15px;

      &.collapsed {
        ul {
          height: 0;
          overflow: hidden;
          opacity: 0;
        }
      }

      a.heading {
        color:#404040;
        line-height:28px;
        font-size:16px;
        font-weight:bold;
      }

      ul {
        margin:0;
        padding-left:15px;
        height: 100%;
        transition: all 200ms ease-out;

        li {
          list-style-type:none;
          a {
            color:#404040;
            font-size:14px;
            line-height:1.8em;
          }
        }
        li.active{
          background: #EEE;
          padding-left: 30px;
          margin-left: -30px;
        }
        li.active a {
          color:black;
          font-size:14px;
          font-weight: bold;
          line-height:1.8em;
        }
        .heading {
          line-height:22px;
          font-size:14px;
          padding-top:6px;
        }
      }
    }
  }

  #doc-title {
    margin-top:30px;
    margin-bottom:30px;
  }

  .link {
    width:18px;
    height:18px;
    display:inline-block;
    vertical-align:sub;
    opacity:0.4;
    background:url(../docs/images/link.png) top left;
    background-size:cover;
  }

  @media screen and (min-width: 1020px) {
      .container {
          width: 960px;
          margin:auto;
      }
  }
  @media print {
      body,code,pre code,h1,h2,h3,h4,h5,h6 {
          color: black;
      }
      table, pre {
          page-break-inside: avoid;
      }
  }
}