alecharp.scss

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

$codeSize: 14px;
$itemSize: 15px;
$textSize: 17px;
$menuSize: 20px;

$smallSize: 738px;

$primary-light: #4E9DC8;
$primary-lighter: #79B9DB;
$primary: #2E87B8;
$primary-dark: #0C74AC;
$primary-darker: #065681;

$secondary-lighter: #FFDE87;
$secondary-light: #FFD25B;
$secondary: #FFC835;
$secondary-dark: #FFBB04;
$secondary-darker: #CB9400;

$third-lighter: #FFA287;
$third-light: #FF805B;
$third: #FF6235;
$third-dark: #FF3C04;
$third-darker: #CB2E00;

@import url(http://fonts.googleapis.com/css?family=Roboto:300,700);
@import url(http://fonts.googleapis.com/css?family=Oswald:300,700);
@import url(http://fonts.googleapis.com/css?family=Inconsolata);

body { 
    padding:0;
    margin:0; 
    font-size: $textSize;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 300;
    strong { font-weight: 700; }

    a {
        color: $primary-light;
        text-decoration: none;
        &:hover {color: $secondary-darker;}
    }

    @for $i from 1 through 4 {
        h#{$i} {
            font-family: 'Oswald', Arial, sans-serif;
            font-weight: 300;
            @if $i > 1 { margin-top: 12px * (5 - $i); }
            font-size: 34px - (($i - 1) * 5px);
            margin-bottom: 12pt;
        }
    }
}

.sidebar {
    min-height: 100%;
    background: $primary-darker;
    color: #fff;
    header {
        text-align: center;
        font-size: 1.8em; 
        line-height: 1.8em;
        font-weight: bold;
    }

    nav {
        padding: 0;
        list-style: none;
        li {
            display: block;
            *display: block;
            a {
                background: transparent;
                color: $secondary;
                letter-spacing: 0.05em;
                text-transform: uppercase;
                font-size: 85%;
                &:hover, &:focus {
                    color: $secondary-darker;
                    text-decoration: none;
                }
            }
        }
    }
    footer {
        text-align:center;
        span.social {
            display: inline-block;
            &:not(:first-child):before {
                content : " • ";
                color: $primary-lighter;
            }
        }
    }
}

.posts {
    .post-title { text-transform: uppercase; font-weight: 700; }
    article:not(:first-child) {
        padding-top: 1em;
        border-top: 1px dotted $third-darker;
    }
}
article {
    margin-bottom: 20px;
    .post-title { color: $primary-darker; }
    .post-date {
        font-size: 0.8em;
        color: $third-darker;
        margin-bottom: 1em;
    }
    .separator {
        height: 1px;
        background-color: $third-darker;
        margin: 1em 0;
    }
    .tag-list {
        .tag {
            display:inline-block;
            background-color: $primary-light;
            padding: .2em .6em .3em;
            border-radius: .25em;
            color: #fff;
            font-size: 0.7em;
            a, a:hover { color: inherit }
        }
    }
    p { text-align: justify; }
    .highlight {
        margin: 1em -2em;
        color: #000;
        background-color: #f0f0f0;
        padding: 1em 2em;
    }
    pre, code {
        font-family: 'Inconsolata';
        font-size: $codeSize;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    hr {
        height: 1px;
        background-color: $third-darker;
        border:none;
    }
    blockquote {
        p { text-align: left; }
        font-style: italic;
        background-color: #f0f0f0;
        padding: 5px 10px;
        border-left: 5px solid darken(#f0f0f0, 40%);
    }
    img { width: 100%; }
    table {
        width: 100%;
        border-spacing: 0;
        border-collapse: collapse;
        th { text-align: left; }
        &>thead>tr>th, &>tbody>tr>td { padding: 8px; }
        &>tbody>tr>td { border-top: 1px solid #ddd; }
        &>thead>tr>th { border-bottom: 2px solid #ddd; }
    }
}

section#content { 
    margin-bottom: 2em; 
    &>img { width: 100%; }
}

#blog-archives {
    line-height: 1em;
    h1, h2 {
        font-size: 1em;
        font-family: 'Roboto', Arial, sans-serif;
        font-weight: 300;
        margin-bottom: 0;
    }
    h2 {
        margin: 0;
        font-size: 1.5em;
        color: $secondary-darker;
    }
    article {
        padding: 0;
        padding-bottom: 0em;
        position: relative;
        time {
            span:not(:first-child) {
                &:before { content: '/' }
            }
        }
    }
}

#about {
    p { text-align: justify; }
    img {
        @include border-radius(50%); 
        vertical-align: middle; 
        padding: 0.2em; 
        border: 1px solid $primary-darker;
        text-align: center;
        display: block;
        margin: 2em auto;
    }
    ul {
        list-style: none;
        padding: 0;
        text-align: center;
        li {
            display: inline-block;
            &:not(:first-child):before {
                content: " • ";
                top: -10px;
                position: relative;
                color: $primary-light;
            }
        }
    }
}

//small screens
@media (max-width: $smallSize) {
    #menuButton { margin: 0.6em 1em; float: left;}
    .sidebar nav, .sidebar footer, .sidebar header img { display: none; }
    .sidebar nav {
        text-align: center;
        ul { padding: 0; padding-bottom: 10px; }
        li { 
            display: inline-block; 
            &:not(:first-child):before {
                content: " • ";
                color: $primary-lighter;
            }
        }
    }
    h1 { margin: 0; }
    #content { 
        margin: 1em 2em;
    }
}

@media (max-width: 550px) {
    #content {
        .post-extract { display:none; }
    }
    #blog-archives {
        article { padding-top: 0em; }
        time { top: $textSize; }
        h2 { display: none; }
    }
}

$largeScreenSidebarWidth: 18em;
//large screens
@media (min-width: $smallSize+1) {
    #menuButton { display: none; }
    .sidebar {
        width: $largeScreenSidebarWidth;
        position: fixed;
        top:0; bottom: 0;
        nav {
            position: absolute;
            bottom: 0;
            right: 0;
            width: $largeScreenSidebarWidth;
            padding: 1em 0;
            ul { margin-right: 2em; }
            text-align: right;
            display: block !important;
            background-color: rgba(25, 25, 25, 0.65);
        }
        header {
            h1 { display: none; }
            img {
                margin: 1em auto;
                width: 150px;
                @include border-radius(50%); 
            }
        }
        &:before {
            content: "";
            position: fixed;
            left:0; up:0;
            width: inherit; height:100%;
            display: block;
            z-index:-1;
            background: url('/images/sidebar-wallpaper.JPG') repeat scroll center center / cover transparent;
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            filter: grayscale(100%);
        }
    }
    #content {
        margin: 2em 2em 0 $largeScreenSidebarWidth+2; 
        section {margin-bottom: 2em; }
    }
}

@media (min-width: 551px) {
    #blog-archives {
        h1 { margin: 0; }
        h2 {
            padding-top: 5px;
            margin-bottom: .3em;
            font-weight: normal;
            display: inline-block;
            position: relative;
            top: -1px;
            float: left;
        }
        time {
            top: 0;
            position: absolute;
            text-align: right;
            left: 0em;
        }
        article {
            margin-left: 4em;
            padding-left: 3.5em;
        }
        .year { display: none; }
    }
}