static/css/style.scss

@charset "UTF-8";

$black: #000000;
$white: #ffffff;
$light-grey: #eeeeee;
$med-grey: #5f5f5f;
$dark-grey: #202020;
$bg-grey: #FAFAFA;

$code-border: #c7c7c7;
$code-background: #f6f6f6;
$code-linebg: #dddddd;

$accent: #0e94ec;
$danger: red;

@import url(https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono);
$sans: 'Roboto', sans-serif;
$mono: 'Roboto Mono';

$border_color: #c2c2c2;
$pag_label_size: 60px;
$logo_size: 150px;

$content_size: 640px;
$horiz_pad: 40px;

$main_font_size: 1rem;
$nav_font_size: 1rem;
$subtitle_font_size: 0.9rem;
$code_font_size: 1rem;
$article_meta_font_size: 0.8rem;
$pagination_font_size: 0.9rem;
$footer_font_size: 0.7rem;

//The minimum size the screen can be without scaling the main content
$min_screen: floor((($content_size + $horiz_pad * 2) * 1.33));

body {
  margin: 0;
  padding: 0;
  background-color: $bg-grey;
  color: $dark-grey;
  font-family: $sans;
  font-size: $main_font_size;
  min-width: 300px;
}

a {
  color: $black;
  text-decoration: none;
}

a[href]:not(.nohover) {
  &:hover{
    color: $accent;
  }
}

hr {
  background-color: $border_color;
  height: 1px;
  border: none;
}

img {
  max-width: 100%;
}

aside {
  div#user_meta {
    padding: $horiz_pad 20px $horiz_pad 20px;
    text-align: center;

    img#logo {
        width: $logo_size;
        height: $logo_size;
        border-radius: 50%;
        border: 5px solid $black;
        background-color: $black;
        box-shadow: 0px 0px 1px $black;
    }

    h2 {
      margin: 15px 0 5px 0;
    }

    p {
      margin: 0px;
      font-size: $subtitle_font_size;
    }

    i {
      width: 30px;
      text-align: center;
      vertical-align: middle;
    }

    div.social {
      margin-top:15px;

      a {
        display: inline-block;
        height: 30px;
      }
    }

    ul {
      margin: 0px;
      padding-left: 0px;
      list-style-type: none;

      li {
        line-height: 2em;

        a {
          i {
              padding-left: 5px;
          }
        }
      }
    }
  }
}

main {
  position: relative;
  width: 100%;
  margin: auto;

  header {
    padding: 0px $horiz_pad 0px $horiz_pad;
    border-top: $border_color 1px solid;
    border-bottom: $border_color 1px solid;
    text-align: center;
    color: $med-grey;

    p {
      font-weight: bold;
      font-size: $nav_font_size;
      text-transform: uppercase;
    }

    p#header {
      color: $black;
    }

    p:not(#header){
      a {
        color: $med-grey;
        &:hover{
          color: $accent;
        }
      }
    }
  }

  article {
    padding: 10px $horiz_pad 10px $horiz_pad;
    max-width: $content_size;
    margin: auto;

    div.article_title {
    }

    div.article_text {
      line-height: 1.375em;
      a {
        text-decoration: underline;
      }

      @mixin codeformat {
        color: black;
        font-size: $code_font_size;
        font-family: $mono;
      }

      code {
        @include codeformat;
        padding: 1px 3px;
        background: $light-grey;
      }

      pre {
        @include codeformat;
        line-height: 1.25;
        margin-bottom: 0px;
        margin-top: 0px;
        padding-top: 5px;
        padding-bottom: 10px;
      }

      div.highlight {
        overflow: auto;
      }

      div.highlight pre {
        display: inline-block;
        padding-left: 10px;
        overflow-x: auto;
        border: 1px solid $code-border;
        border-left: 3px solid $accent;
        background: $code-background;
      }

      /* Line numbers are enabled */
      table.highlighttable {
        table-layout: fixed;
        width: 100%;
        border: 1px solid $code-border;
        border-collapse: collapse;

        pre {
          border: none;
        }

        td {
          padding: 0px;
        }

        td.linenos {
          width: 30px;
          overflow: hidden;
          text-align: right;
          border-left: 3px solid $accent;
          border-right: 1px solid $code-border;
          background: $code-linebg;
          vertical-align:top;

          div.linenodiv pre {
            padding-right: 4px;
            float: right;
          }
        }
      }

      div.admonition {

        border-width: 1px 1px 1px 7px;
        border-radius: 10px;
        border-style: solid;
        border-color: $code-border;
        border-left-color: $dark-grey;
        background-color: $code-background;

        &.update, &.hint, &.important, &.note, &.tip {
          border-left-color: $accent;
        }

        &.warning, &.attention, &.caution, &.danger {
          border-left-color: $danger;
        }

        p {
          margin: 0px;
          padding: 10px 15px;
        }

        p.admonition-title{
          text-transform: uppercase;
          font-weight: bold;
          padding: 5px 15px;
          border-bottom: 1px solid $code-border;
        }
      }

      blockquote {
        margin: 22px 2px 22px 2px;
        padding-left: $horiz_pad;
        color: $med-grey;
        font-style: italic;
      }
    }

    div.article_meta {
      font-size: $article_meta_font_size;
      color: $med-grey;
    }

    div#article_comments{
      padding-top: 10px;
      padding-bottom: 10px;

      i {
        padding-right: 10px;
      }
    }
  }

  footer {
    border-top: $border_color 1px solid;
    padding: 30px $horiz_pad 30px $horiz_pad;

    div#paginator {
      font-weight: bold;
      font-size: $pagination_font_size;
      text-transform: uppercase;
      overflow: auto;
      text-align: center;

      div{
        display: inline-block;
      }

      span {
        width: $pag_label_size;
      }

      span#left {
        float: left;
        text-align: left;
      }

      span#right {
        float: right;
        text-align: right;
      }
    }
  }

  div#ending_message {
    border-top: $border_color 1px solid;
    padding: 0 $horiz_pad 0 $horiz_pad;
    color: $med-grey;
    font-size: $footer_font_size;
  }
}

@media screen and (min-width: $min_screen) {
  aside {
    width: 25%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    h2 {
      margin: 10px 0 0 0;
    }

    div#user_meta {
      max-width: 192px;
      text-align: right;
      margin: 0 20px 0 auto;
    }
  }

  main {
    position: absolute;
    top: 0;
    left: 25%;
    width: 75%;
    margin-left: -1px;
    border-left: $border_color 1px solid;
    overflow-x: hidden;
    overflow-y: hidden;

    header {
      padding: 10px $horiz_pad 10px $horiz_pad;
      border-top: 0;
      text-align: left;
    }

    article {
      width: $content_size;
      margin: 0;
    }

    footer{
      div#paginator {
        width: $content_size;
      }
    }
  }
}