flynx/Course-JavaScript
1
0
Fork 0
mirror of https://github.com/flynx/Course-JavaScript.git synced 2025-10-29 19:10:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

split out css...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2017-04-13 14:57:31 +03:00
parent e7216b8493
commit 740132ec16
3 changed files with 70 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
simplesnake/simplesnake.appcache
View File

@ -2,5 +2,6 @@ CACHE MANIFEST
# Last Modified: 2017 Apr 13
CACHE:
simplesnake.html
simplesnake.css
simplesnake.js
simplesnake.html

67
simplesnake/simplesnake.css Executable file
View File

@ -0,0 +1,67 @@
body.hints:before,
body.hints:after {
display: block;
position: absolute;
left: 0;
top: 12.5%;
bottom: 12.5%;
z-index: 100;
}
body.hints:before {
content: "";
width: 100%;
border-top: dashed 0.5vmin red;
border-bottom: dashed 0.5vmin red;
}
body.hints:after {
content: "↺↻";
width: 37vmin;
right: 50%;
left: auto;
overflow: visible;
border-right: dashed 0.5vmin red;
color: rgba(255, 0, 0, 0.5);
font-size: 15vmin;
line-height: 70vmin;
white-space: pre;
letter-spacing: 50vmin;
}
.hints .simplesnake {
opacity: 0.3;
}
.hints .simplesnake:before,
.hints .simplesnake:after {
position: absolute;
display: block;
text-align: center;
width: 100vw;
color: red;
font-size: 5vh;
line-height: 10vh;
z-index: 100;
}
.hints .simplesnake:before {
content: "new level";
}
.hints .simplesnake:after {
bottom: 0;
content: "pause";
}
body {
font-family: sans-serif;
overflow: hidden;
}
.simplesnake .field {
position: relative;
left: 50%;
margin-left: -45vmin;
width: 90vmin;
height: 90vmin;
border: solid 1px silver;
}

70
simplesnake/simplesnake.html
View File

@ -3,75 +3,7 @@
<head>
<title>Simple Snake</title>
<style>
body.hints:before,
body.hints:after {
display: block;
position: absolute;
left: 0;
top: 12.5%;
bottom: 12.5%;
z-index: 100;
}
body.hints:before {
content: "";
width: 100%;
border-top: dashed 0.5vmin red;
border-bottom: dashed 0.5vmin red;
}
body.hints:after {
content: "↺↻";
width: 37vmin;
right: 50%;
left: auto;
overflow: visible;
border-right: dashed 0.5vmin red;
color: rgba(255, 0, 0, 0.5);
font-size: 15vmin;
line-height: 70vmin;
white-space: pre;
letter-spacing: 50vmin;
}
.hints .simplesnake {
opacity: 0.3;
}
.hints .simplesnake:before,
.hints .simplesnake:after {
position: absolute;
display: block;
text-align: center;
width: 100vw;
color: red;
font-size: 5vh;
line-height: 10vh;
z-index: 100;
}
.hints .simplesnake:before {
content: "new level";
}
.hints .simplesnake:after {
bottom: 0;
content: "pause";
}
body {
font-family: sans-serif;
overflow: hidden;
}
.simplesnake .field {
position: relative;
left: 50%;
margin-left: -45vmin;
width: 90vmin;
height: 90vmin;
border: solid 1px silver;
}
</style>
<link rel="stylesheet" href="simplesnake.css">
<script src="simplesnake.js"></script>