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

Starting to style Snake (WIP).

Browse Source
This commit is contained in:
Joanthan Bernard
2014-12-09 14:59:06 -06:00
parent 379526b65d
commit 54a2ecd453
1 changed files with 43 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
snake/snake.html
View File

@@ -1,8 +1,45 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<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'>
<script src="snake.js" type="application/javascript"></script> <script src="snake.js" type="application/javascript"></script>
<style type="text/css"> <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; } canvas { border: solid thin gray; }
section { section {
@@ -10,6 +47,8 @@
margin: 0.5rem; margin: 0.5rem;
position: relative; } position: relative; }
section:first-of-type { margin-top: 6rem; }
label { label {
display: inline-block; display: inline-block;
width: 12rem; } width: 12rem; }
@@ -19,10 +58,13 @@
right: 0; } right: 0; }
#editorControls { display: none; } #editorControls { display: none; }
@media (max-width: 600px) {
header { text-align: center; } }
</style> </style>
</head> </head>
<body> <body>
<h1>Snake</h1> <header><h1>Snake</h1></header>
<section id=controls> <section id=controls>
<label>Rows</label> <label>Rows</label>
<input id=rows type=text placeholder="Rows" value=20><br> <input id=rows type=text placeholder="Rows" value=20><br>