static/css/style.less

@charset "UTF-8";

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

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

@blue: #0e94ec;
@accent: @blue;

@import (css) "//fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono";
@sans: 'Ubuntu', sans-serif;
@mono: 'Ubuntu Mono', monospace;

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

@content_size: 640px;
@horiz_pad: 40px;

//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: @white;
  color: @dark-grey;
  font-family: @sans;
  font-size: 16px;
  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;
}

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%;
    }

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

    p {
      margin: 0px;
      font-size: 14px;
    }

    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;
      font-size: 16px;
      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: 16px;
      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;
      }

      @codeformat: {
        color: black;
        font-size: 14px;
        font-family: @mono;
      };

      code {
        @codeformat();
        padding: 2px 3px;
        background: @light-grey;
      }

      pre {
        @codeformat();
        line-height: 1.125em;
        margin-bottom: 0px;
        margin-top: 0px;
        padding-top: 5px;
        padding-bottom: 10px;
      }

      div.highlight pre {
        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: red;
        }

        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;
      }

      .footnote-reference {
        vertical-align: super;
        font-size: 12px;
        text-decoration: none;
        line-height: 1;
      }

      .footnote {
        font-size: smaller;
        .fn-backref{
          margin-right: 5px;
          text-decoration: none;
        }
      }
    }

    div.gist {
      line-height: .875em;
    }

    div.article_meta {
      font-size: 12px;
      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: 15px;
      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: 10px;
  }
}

@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;
      }
    }
  }
}