jdb/code-katas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Started on a GUI redesign of Snake.

Browse Source
This commit is contained in:
Joanthan Bernard
2014-12-11 22:52:55 -06:00
parent 207edcd6c1
commit 68b7bf8da8
5 changed files with 350 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
snake/snake.html
View File

@ -4,64 +4,8 @@
<meta name=charset value=utf-8>
<title>Snake</title>
<link href='http://fonts.googleapis.com/css?family=Exo+2:400,900' rel='stylesheet' type='text/css'>
<link href="snake.css" type="text/css" rel="stylesheet">
<script src="snake.js" type="application/javascript"></script>
<style type="text/css">
/* Pallete: http://www.colourlovers.com/palette/1832769/100_Following_Me
* A70407 - Red
* F4A612 - Orange
* FFFB51 - Soft Yellow
* 1E4119 - Green
* 0B0C38 - Blue */
* { margin: 0;
padding: 0; }
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; } }
</style>
</head>
<body>
<header><h1>Snake</h1></header>