wiki.mbirth.de/css/layout-bright.sass

---
---
$font: "Fira Code", Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace
$maincolor: #678b22

@font-face
    font-family: "Fira Code"
    src: url(../fonts/FiraCode-Regular.otf)
    src: url(../fonts/FiraCode-Regular.eot) format(embedded-opentype), url(../fonts/FiraCode-Regular.woff2) format(woff2), url(../fonts/FiraCode-Regular.woff) format(woff), url(../fonts/FiraCode-Regular.ttf) format(truetype), url(../fonts/FiraCode-Regular.otf) format(opentype)
    font-weight: normal
    font-style: normal

@font-face
    font-family: "Fira Code"
    src: url(../fonts/FiraCode-Bold.otf)
    src: url(../fonts/FiraCode-Bold.eot) format(embedded-opentype), url(../fonts/FiraCode-Bold.woff2) format(woff2), url(../fonts/FiraCode-Bold.woff) format(woff), url(../fonts/FiraCode-Bold.ttf) format(truetype), url(../fonts/FiraCode-Bold.otf) format(opentype)
    font-weight: bold
    font-style: normal

=text-shadow
    text-shadow: 0 1px 1px rgba(black, 0.1), 0 0 5px rgba(lighten($maincolor, 33%), 0.1), 0 0 10px rgba(lighten($maincolor, 33%), 0.1)

body
    font-feature-settings: "calt" 1  // Enable ligatures for IE 10+, Edge
    text-rendering: optimizeLegibility  // Force ligatures for Webkit, Blink, Gecko
    margin: 0
    padding: 0
    background: #eaeaea url("../images/bkg-white.png") 0 0
    color: #151515
    font:
        size: 16px
        family: $font
    line-height: 1.5


// General & 'Reset' Stuff

.container
    width: 90%
    max-width: 900px
    margin: 0 auto

section
    display: block
    margin: 0 0 20px 0

h1, h2, h3, h4, h5, h6
    margin: 0 0 20px

li
    line-height: 1.4


// Header, <header>
   header   - container
   h1       - project name
   h2       - project description

#pagetitle
    +text-shadow
    font:
        size: 30px
        weight: bold
        family: $font
    line-height: 1.5
    color: $maincolor
    -webkit-font-smoothing: antialiased

    a
        text-decoration: none

        &:visited
            color: inherit

header
    background: rgba(black, 0.1)
    width: 100%
    border-bottom: 1px dashed $maincolor
    padding: 20px 0
    margin: 0 0 40px 0

    // Site name
    h1
        @extend #pagetitle
        letter-spacing: -1px
        margin: 0 0 0 -40px

        &:before
            content: "./ "
            font-size: 24px

    // Site description
    h2
        font:
            size: 18px
            weight: 300
        color: #666

#downloads .btn
    display: inline-block
    text-align: center
    margin: 0


// Main Content

#main_content
    width: 100%
    -webkit-font-smoothing: antialiased

    h1
        font-size: 28px
        border:
            bottom:
                width: 4px
                style: dotted

    h2
        font-size: 24px

    h3
        font-size: 18px

    h4
        font-size: 14px

    h5
        font-size: 12px
        text-transform: uppercase
        margin: 0 0 5px 0

    h6
        font-size: 12px
        text-transform: uppercase
        color: #999
        margin: 0 0 5px 0

    table
        margin: 0 0 20px 0
        //width: 100%;

    th
        text-align: left
        border-bottom: 1px dashed $maincolor
        padding: 5px 10px

    td + td, th + th
        border-left: 1px dashed $maincolor

    td
        padding: 5px 10px
        vertical-align: top
 

section img
    max-width: 100%

h1, h2, h3, h4, h5, h6
    +text-shadow
    font:
        weight: normal
        family: $font
    color: $maincolor
    letter-spacing: -0.03em

dt
    font:
        style: italic
        weight: bold

ul li
    list-style: none

    &:before
        content: ">>"
        font:
            family: $font
            size: 13px
        color: $maincolor
        margin:
            left: -37px
            right: 21px
            top:    3px
        line-height: 16px
        position: absolute

blockquote
    color: #444
    padding-left: 10px
    border-left: 1px solid #00a

code
    padding: 3px
    white-space: nowrap

pre
    padding: 10px

pre, code
    background: rgba(black, 0.1)
    border: 1px solid rgba(white, 0.85)
    font:
        family: $font
        size: 0.9em
    color: $maincolor
    border-radius: 2px
    -moz-border-radius: 2px
    -webkit-border-radius: 2px
    text-wrap: normal
    overflow: auto
    overflow-y: hidden


// Reset styles if code is inside pre
   (This is what you get from re-using CSS!)

pre > code
    background: none
    border: 0 none
    white-space: pre
    padding: 0

hr
    height: 0
    border: 0
    border-bottom: 1px dashed $maincolor
    color: $maincolor


// Buttons

.btn
    display: inline-block
    background: -webkit-linear-gradient(top, rgba(215, 215, 215, 0.3), rgba(220, 220, 220, 0.3) 50%, rgba(245, 245, 245, 0.3) 50%, rgba(255, 255, 255, 0.3))
    padding: 8px 18px
    border-radius: 50px
    border: 2px solid rgba(white, 0.7)
    border-bottom: 2px solid rgba(white, 0.7)
    border-top: 2px solid rgba(white, 1)
    color: rgba(40, 40, 40, 0.8)
    font:
        family: Helvetica, Arial, sans-serif
        weight: bold
        size: 13px
    text-decoration: none
    text-shadow: 0 -1px 0 rgba(black, 0.75)
    box-shadow: inset 0 1px 0 rgba(black, 0.05)

    &:hover
        background: -webkit-linear-gradient(top, rgba(215, 215, 215, 0.6), rgba(220, 220, 220, 0.6) 50%, rgba(245, 245, 245, 0.8) 50%, rgba(255, 255, 255, 0.8))

    .icon
        display: inline-block
        width: 16px
        height: 16px
        margin: 1px 8px 0 0
        float: left

.btn-github .icon
    opacity: 0.6
    background: url("../images/whitetocat.png") 0 0 no-repeat

// Links
   a, a:hover, a:visited

#main_content a
    color: #41a0d3
    text-shadow: 0 0 5px rgba(104, 182, 255, 0.5)

    &:visited
        color: #949

// Clearfix

.cf:before, .cf:after
    content: ""
    display: table

.cf:after
    clear: both

.cf
    zoom: 1

// vim: set ts=4:sw=4:expandtab