adamrenklint/asimovjs.org

// FONTS

@import url("http://fonts.googleapis.com/css?family=Signika:300,400,600,700")
@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700")
@import url("http://fonts.googleapis.com/css?family=Source+Code+Pro");

// COLOURS

$lighter = #fcfcfc
$dark = #7e7e7e
$darker = #595959
$accent = #da6c76

// RESETS

*
  margin: 0
  padding: 0

ul
  list-style: none

// GLOBAL

::selection
  background: $accent
  color: white

body
  background-color: $lighter
  font-family: 'Open Sans', sans-serif
  color: $dark
  font-size: 16px
  line-height: @font-size + 120%
  margin: 0 auto

h1
  font-family: "Signika", "Helvetica Neue", "Helvetica", "Arial", sans-serif
  font-weight 300

a
  color: $dark
  text-decoration: none
  font-weight: 600

  &:hover
    color: $darker

// FUNCTIONAL

.hidden
  display: none !important

.center
  text-align: center

.clearfix:after
  content: "."
  display: block
  clear: both
  visibility: hidden
  line-height: 0
  height: 0

.clearfix
  display: inline-block

html[xmlns] .clearfix
  display: block

* html .clearfix
  height: 1%;

// TYPOGRAPHY

p
  margin-bottom: 15px
  font-weight: 300

// CODE

pre
  padding: 6px 16px
  background: rgba($accent,0.05)
  font-family: 'Source Code Pro'
  font-size: 1em
  margin: 10px 0 30px
  border-radius: 4px
  color: $accent
  border: 1px solid $accent
  opacity: 0.8

  &:hover
    opacity: 1

// BUTTONS

.button
  border-radius: 100px
  background-color: $accent
  display: inline-block
  font-size: 1.3em
  font-weight: 700
  color: white
  padding: 10px 25px
  cursor: pointer

  &:hover
    color: white
    background-color: lighten($accent,20%)

  &.outline
    background-color: transparent
    box-shadow: inset 0 0 0 2px $accent
    color: $accent

    &:hover
      color: white
      background-color: $accent