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; } } }

@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 {
                position: absolute;
                width: 19rem; }
                
            section#description { left: 0.5rem; }
            section#levelSelect { right: 0.5rem; }
            section#controls { left: 0.5rem; top: 13.5rem; }
            section#options { left: 0.5rem; top: 20rem; }
            
            section#levelSelect { height: 29rem; }
            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 {
    position: fixed;
    background: #333;
    color: #CCC; }

.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; } }

/* @include forSize(medium) {
    html { font-size: 80%; }
    body {
        height: 36rem;
        width: 62rem;
        margin-top: 2rem;

        #container {
            height: 34rem;
            width: 60rem; } } }

@include forSize(large) {
    body {
        height: 36rem;
        width: 62rem;
        margin-top: 2rem;

        #container {
            height: 34rem;
            width: 60rem; } } }

@include forSize(ultraLarge) {
    body {
        height: 42rem;
        width: 72rem;
        margin-top: 4rem;

        #container {
            height: 40rem;
            width: 70rem; } } }

*/
/*
html {
  background-color: white;
  color: #354650;
  
  font-family: sans-serif;
}

body {
  padding: 1em;
}

header {
  background-color: #1E4119;
  color: #FFFB51;
  padding: 0.5rem 1rem;
  font-family: "Exo 2";
  font-weight: 900;

  position: absolute;
  left: 0; right: 0; top: 0;
}

header > h1 { font-size: 300%; }

canvas { border: solid thin gray; }

section {
    display: inline-block;
    margin: 0.5rem;
    position: relative; }

section:first-of-type { margin-top: 6rem; }

label {
    display: inline-block;
    width: 12rem; }

input[type=button] {
    position: absolute;
    right: 0; }

#editorControls { display: none; }

@media (max-width: 600px) {
    header { text-align: center; } }
*/