Started on a GUI redesign of Snake.
This commit is contained in:
Joanthan Bernard
228
snake/snake.scss
Normal file
228
snake/snake.scss
Normal file
@@ -0,0 +1,228 @@
|
||||
/* 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; } }
|
||||
*/
|
||||
Reference in New Issue
Block a user