static/css/style.less

@red:  #ff0000;
@black:  #000000;
@white:  #ffffff;
@light-grey:  #eeeeee;
@med-grey:  #999999;
@dark-grey:  #4d4d4d;
@blue:  #0e94ec;
@accent:  @blue;

body {
  margin: 0;
  padding: 0;
  background-color: @white;
  color: @dark-grey;
  font-family: 'PT Sans', sans-serif;
  font-size: 1em;
}

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

hr {
  color: @light-grey;
  background-color: @light-grey;
  height: 1px;
  border: none;
}

.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

aside {
  div#user_meta {
    margin: 0;
    padding: 40px;
    font-family: 'PT Serif', serif;
    text-align: center;

    h1 {
      margin-bottom: 10px;
      font-size: 1.75em;
    }
  
    h2 {
      font-size: 0.75em;
      font-weight: normal;
    }
  
    ul {
      margin: 40px 0 40px 0;
      padding-left: 0;
      font-size: 0.875em;
      list-style-type: none;
  
      li {
        padding: 10px 0 10px 0;
        display: inline;

        a {
          color: @med-grey;
          border: 2px solid @light-grey;
          .border-radius(10px);
          padding: 5px 10px 5px 10px;
        }
      }
    }
  } 
}

main {
  header {
    padding: 40px;
    border-top: @light-grey 1px solid;
    border-bottom: @light-grey 1px solid;

    h3 {
      font-size: 0.75em;
      text-transform: uppercase;
    }
  }

  article {
    padding: 40px;
    min-width: 140px;
    max-width: 608px;

    h1 {
      font-size: 1.5em;
    }

    h2 {
      font-size: 1.375em;
    }

    h3 {
      font-size: 1.25em;
    }

    h4 {
      font-size: 1.125em;
    }

    h5 {
      font-size: 1em;
    }

    h6 {
      font-size: 0.75em;
    }

    code {
      padding: 2px;
      color: @black;
      font-size: 0.875em;
      font-family: 'PT Mono', monospace;
      background: @light-grey;
    }

    pre {
      padding-left: 5px;
      color: @black;
      border-left: 5px solid @accent;
      font-size: 0.875em;
      font-family: 'PT Mono', monospace;
      background: @light-grey;
      line-height: 1.25em;
    }

    blockquote {
      padding-left: 15px;
      color: @med-grey;
    }

    div#article_title{
      a {
        font-size: 1.75em;
      }
    }

    div#article_text {
      margin: 0;
      padding: 0;
      line-height: 1.625em;
      a {
        text-decoration: underline;
      }
    }

    div#article_meta {
      margin: 0;
      padding: 0;
      font-size: 0.625em;
      color: @med-grey;
    }
  }

  footer {
    border-top: @light-grey 1px solid;
    padding: 40px;

    a.button_accent {
      padding: 10px;
      border: 2px solid @accent;
      .border-radius(20px);
      text-transform: uppercase;
      color: @accent;
      font-size: 1.25em;
      &:hover {
        color: @white;
        background-color: @accent;
      }
      &:active {
        color: @white;
        background-color: @accent;
      }
    }

    p#paginator {
    }
  }
}

@media screen and (min-width: 1024px) {
  aside {
    width: 25%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    border-right: @light-grey 1px solid;

    div#user_meta {
      min-width: 140px;
      max-width: 192px;
      text-align: left;

      ul {
        li {
          display: block;
        }
      }
    }
  }

  main {
    width: 75%;
    position: absolute;
    top: 0;
    left: 25%;
    overflow-x: hidden;
    overflow-y: hidden;

    header {
      border-top: 0;
    }
  }
}