/*
 * SCSS Syntax Highlight Sample File (Standard)
 *
 * This file contains most SCSS syntax, CSS3 properties, advanced code structure.
 * It is NOT a valid SCSS file that can be compiled by SCSS preprocessors.
 *
 * @author  Guo Yunhe guoyunhebrave@gmail.com
 * @date    2016-09-15
 */

/*
 * Block comment
 *
 * Alert keywords:
 * TODO BUG FIXME
 */

@charset "UTF-8";

@import "mixins/button";

// Variable define

$image-path:            "../../static/images";
$default-text-color:    #333 !default; // Default can be overrided
$default-font-size:     16px !default;
$default-font-family:   Roboto, "Droid Sans", sans-serif;
$default-font-weight:   400;
$default-line-height:   $default-font-size * 1.8;
$shadow-transparence:   0.25;
$box-shadow:            0 0 3px rgba(0,0,0,$shadow-transparence);
$page-width:            100rem; // kabab-case
$gapOfArticle:          20px;   // camelCase
$body_background_color: white;  // snake_case

// Mixins

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

.box { @include border-radius(10px); }

// Nesting

#home-page {

    header {
        width: 80%;
        margin: 0 auto;

        .cover {
            @include border-radius(20px);
            max-width: 100%;

            &:hover {
                background: #ffffff;
            }

            .like-button {
                font-size: $default-font-size * 0.8;

                @media (max-width: 300px) and (min-width: 200px) {
                    font-size: $default-font-size * 0.8;

                    .icon {
                        width: 20px;
                        height: 20px;
                    }
                }

                @media print {
                    display: none;
                }
            }
        }
    }
}

// Extend and inheritance

.message {
    border: $border-light;
    background-color: #f0f0f0;
}

.message-danger {
    @extend .message;
}


// Control structures

@mixin does-parent-exist {
    @if & {
        &:hover {
            color: red;
        }
    } @else {
        a {
            color: red;
        }
    }
}


// Operators

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}


// Functions - see http://sass-lang.com/documentation/Sass/Script/Functions.html

$color1: hsl(120deg, 100%, 50%);
$color2: rgb($red, $green, blue($color1));
$color3: mix($color1, $color2, [$weight]);


// Properties

html, body {
    font-family: "Droid Sans", Arial, sans-serif;
    font-size: 11pt;
    line-height: 1.5em;
    max-width: 300px + $page-width - $gap / 2;
    background: $bg_color;
    text-shadow: 0 0 2px rgba(0,0,0, $transparence);
    box-sizing: border-box;
}


// Selectors

blockquote {
    margin: 0;
}

header #logo {
    width: 100px;
}

div#footer .link {
    color: blue;
}

sidebar #subscribe .subscribe_form input[type="text"] {
    font-size: 20px;
}

sidebar #subscribe .subscribe_form:nth-child(2n + 1):hover input[class*="small-"] {
    font-weight: bold;
}


// Media Queries

@media print {
    .container {
        width: 100%;
    }
}

@media screen and (min-width: 768px) {
    .container {
        width: 600px;
    }
}

@media screen and (min-width: 768px) and (max-width: 960px) {
    .container {
        width: 720px;
    }
}


// Fontface

@font-face {
    font-family: MyHelvetica;
    src: local("Helvetica Neue Bold"),
        local("HelveticaNeue-Bold"),
        url(MgOpenModernaBold.ttf);
    font-weight: bold;
}

// Animation (Keyframes)

@keyframes slidein {
    from {
        margin-left: 100%;
        width: 300%;
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}
