code-katas/snake/snake.scss

/* Pallete: http://www.colourlovers.com/palette/1832769/100_Following_Me
 * A70407 - Red
 * F4A612 - Orange
 * FFFB51 - Soft Yellow
 * 1E4119 - Green
 * 0B0C38 - Blue */

//$fg: #333;
$fg: #FFF;
$out: #A70407;
$in: #0B0C38;
$accent1: #F4A612;
$accent2: #FFFB51;
$accent3: #1E4119;

@import "../resources/css/forSize.mixin.scss";

* { margin: 0;
    padding: 0;
    box-sizing: border-box; }

html {
    background-color: $out;
    font-family: "Press Start 2P";
}

ol > li { margin-left: 4em; }
#levelSelect > h5 { margin-left: 0.5rem; }
ul { list-style: none; }

.corner {
    border-style: solid;
    position: absolute;

    height: 1rem;
    width: 1rem;

    &:nth-child(1) {
        top: -0.5rem; left: -0.5rem;
        border-width: 0.5rem 0 0 0.5rem; }

    &:nth-child(2) {
        top: -0.5rem; right: -0.5rem;
        border-width: 0.5rem 0.5rem 0 0; }

    &:nth-child(3) {
        bottom: -0.5rem; right: -0.5rem;
        border-width: 0 0.5rem 0.5rem 0; }

    &:nth-child(4) {
        bottom: -0.5rem; left: -0.5rem;
        border-width: 0 0 0.5rem 0.5rem; } }

body {
    border: solid 0.5rem $accent1;
    background-color: $accent2;
    padding: 0.5rem;
    position: relative;

    & > .corner {
        width: 1.5rem;
        height: 1.5rem;
        background-color: $accent1;
        border-color: $out; }

    #container {
        border: solid 0.5rem $accent3;
        background-color: $in;
        color: $fg;

        position: relative;

        & > .corner {
            background-color: $accent3;
            border-color: $accent2; }

        header {
            text-align: center;
            & > h1 { padding-top: 0.5rem; } }

        section { transition: 1s; }
        section p, section ol, section ul { margin-left: 0.5rem; }
        section#editorControls { display: none; } }

        section#levelSelect {
            overflow: auto;

            ol {
                font-size: 80%;

                li {
                    cursor: pointer;
                    &.selected { color: $accent2; } } } }

        section#controls {
            li { margin-top: 0.5rem; }

            .arrow {
                width: 1rem; height: 1rem;

                &.right { transform: rotate(90deg); }
                &.down { transform: rotate(180deg); }
                &.left { transform: rotate(270deg); } } } }

h2, h3, h4 {
    color: $accent1;
    text-decoration: underline; }

h5 { color: $accent1; }

button {
    background-color: $out;
    border-color: $accent2 $accent1 $accent1 $accent2;
    border-style: solid;
    border-width: 0.25rem;
    color: $fg;
    display: block;
    font-family: inherit;
    padding: 0.1rem;
    position: relative;

    .corner {
        border: none;
        background-color: $in;

        height: 0.25rem;
        width: 0.25rem;

        &:nth-child(1) {
            top: -0.25rem; left: -0.25rem;
            border-width: 0.25rem 0 0 0.25rem; }

        &:nth-child(2) {
            top: -0.25rem; right: -0.25rem;
            border-width: 0.25rem 0.25rem 0 0; }

        &:nth-child(3) {
            bottom: -0.25rem; right: -0.25rem;
            border-width: 0 0.25rem 0.25rem 0; }

        &:nth-child(4) {
            bottom: -0.25rem; left: -0.25rem;
            border-width: 0 0 0.25rem 0.25rem; } } }

#score .value { margin-left: 1rem; }

@include forAspect(wide) {
    body {
        margin-top: 2rem;

        height: 37rem;
        width: 73rem;

        #container {
            height: 35rem;
            width: 71rem;

            section {
                display: inline-block;
                vertical-align: top; }

            section#gameContainer {
                width: 30rem;
                margin-left: 20rem;
                margin-right: 20rem; }

            #snakeCanvas {
                width: 30rem;
                height: 30rem; }

            section#description, section#levelSelect, section#controls,
            section#options, section#score {
                position: absolute;
                width: 19rem; }

            section#description { left: 0.5rem; }
            section#controls { left: 0.5rem; top: 13.5rem; }
            section#options { left: 0.5rem; top: 20rem; }

            section#score { right: 0.5rem; top: 3rem; }
            section#levelSelect { right: 0.5rem; top: 8rem; }

            section#levelSelect { height: 25rem; }
            section#levelSelect h5 { margin-top: 1rem; } } }


}

@include forAspect(landscape) {
    body {
        width: 73rem;
        height: 37rem;
        margin-top: 2rem;

        #container {
            height: 35rem;
            width: 71rem; } }
}

@include forSize(ultraLarge) {
    html { font-size: 125%; } }

@include forSize(medium) {
    html { font-size: 55%; } }

@include forSize(notSmall) {
    body {
        margin-left: auto;
        margin-right: auto; }
}


.debug-size, .debug-aspect {
    font-family: "PT Mono" !important;
    position: fixed;
    background: black;
    color: white; }

.debug-aspect {
    left: 0;
    bottom: 0; }

.debug-size {
    right: 0;
    bottom: 0; }

.small-only, .medium-only, .large-only, .ultralarge-only, .wide-only,
.landscape-only, .even-only, .portrait-only, .tall-only {
    display: none; }

@include forSize(small) { .small-only { display: inline; } }
@include forSize(medium) { .medium-only { display: inline; } }
@include forSize(large) { .large-only { display: inline; } }
@include forAspect(ultraLarge) { .ultralarge-only { display: inline; } }
@include forAspect(wide) { .wide-only { display: inline; } }
@include forAspect(landscape) { .landscape-only { display: inline; } }
@include forAspect(even) { .even-only { display: inline; } }
@include forAspect(portrait) { .portrait-only { display: inline; } }
@include forAspect(tall) { .tall-only { display: inline; } }