User CSS for angular.io

angular-io.user.css

/* ==UserStyle==
@name           angular.io
@description    Sort out the horrible styling
@author         James Skinner <spiralx@gmail.com> (https://github.com/spiralx)
@namespace      http://spiralx.org/
@version        1.0.0
@preprocessor   stylus

@var          text     text-size              "Text size"               13pt
@var          text     line-height            "Line height"             1.5em

@var          color    text-colour            "Text colour"             black

@var          color    inline-code-colour     "Inline code colour"      #222426
@var          color    inline-code-bg-colour  "Inline code BG colour"   rgba(0, 0, 0, 0.03)
@var          color    link-colour            "Link colour"             #1976d2
@var          color    visited-link-colour    "Visited link colour"     #b48
==/UserStyle== */

@-moz-document domain("angular.io")
  body
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale
    text-rendering: optimizeLegibility

    letter-spacing: normal
    word-spacing: normal

    font-size: text-size
    line-height: line-height
  
  
  body
  code-example:not(.no-box)
  code-tabs mat-tab-body:not(.no-box)
    color: text-colour
    
  input, li, ol, p, ul
    font-size: text-size
    line-height: line-height
  
  code, pre
    font-family: Consolas, Monaco, 'Courier New', monospace
    
  li > code
  p > code
  table code
    font-family: Consolas, Monaco, 'Courier New', monospace
    padding: 0.1em 0.4em
    background-color: hsl(0, 0%, 85%)
    
  h2
    font-size 1.5rem
    margin: 2em 0 1em
  h3
    font-size 1.33rem
    margin: 1.75em 0 0
  
  a
  .sidenav-content a
    color: link-colour
    text-decoration: none
    
    font-size: inherit
    line-height: inherit
  
    &:visited
      &
      &:hover
        color: visited-link-colour
  
    &:hover
      color: link-colour
      text-decoration: underline
  
  li
    margin: 0.25em 0
    
  ol.linenums li
    font-family: Consolas, Monaco, 'Courier New', monospace
    font-size: 0.8em
    line-height: line-height
      
  .sidenav-content
    padding: 80px 0 4rem
    max-width: calc(100% - 8rem)
    width: 1280px
    margin-left: auto
    margin-right: auto
    
  .docs-markdown-code
    color: inline-code-colour
    background: inline-code-bg-colour
    border: 0.5px solid @background
    border-radius: 5px
  
  code-example
    font-family: Consolas, Monaco, 'Courier New', monospace
    font-size: 0.8em
    
    &:not(.no-box)
      margin: 1.5em 6em
      padding: 0 0.8em
      
      border-color: hsl(0, 0%, 75%)
      background-color: hsla(0, 0%, 95%, 1)
      
      white-space: pre-wrap
    
    header
      font-size: 1.1em
      padding: 0.5em 1em
      margin: 0 -0.8em

  code-tabs
    display: grid
    grid-auto-columns: 1fr
    grid-column-gap: 1em
    
    &:not(.no-box)
      margin: 1.5em 6em
      border-color: hsl(0, 0%, 75%)

      code-pane
        grid-row: 1
        padding: 0 0.8em
        border: solid 0.5px hsl(0, 0%, 75%)
        background-color: hsla(0, 0%, 95%, 1)
        
        font-family: Consolas, Monaco, 'Courier New', monospace
        font-size: 0.8em

        white-space: pre-wrap
        
  .alert-is-helpful
    background-color: hsl(48, 50%, 95%)
    border: solid 1px hsla(48, 50%, 50%, 0.5)
    margin: 2em
    padding: 0.4em 1em
    
    header
      // font-weight: 600
      font-size: 1.1em