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

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

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 {
        width: 73rem;
        height: 37rem;
        margin-top: 4rem; 
        
        #container { 
            height: 35rem;
            width: 71rem;
            
            section { margin: 0.5rem; }
            
            section#description, section#levelSelect, section#controls {
                width: 18rem; } } }
}

@include forAspect(landscape) {
    body {
        width: 73rem;
        height: 37rem;
        margin-top: 4rem; 
        
        #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; }
}

/* @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; } }
*/