diff options
| -rw-r--r-- | www/index.css | 63 | ||||
| -rw-r--r-- | www/index.html | 54 |
2 files changed, 69 insertions, 48 deletions
diff --git a/www/index.css b/www/index.css new file mode 100644 index 0000000..6dfb166 --- /dev/null +++ b/www/index.css @@ -0,0 +1,63 @@ +body { + margin: 0; + padding: 0; + overflow: hidden; + background: gray; +} +@font-face { + font-family: "Playtime"; + /* src: url("playtime.ttf"); */ + src: url("playtime-webfont.ttf"); + src: url("playtime-webfont.woff"); +} +#container { + width: 800px; + height: 600px; + position: absolute; + top: 50%; + margin-top: -300px; + left: 50%; + margin-left: -400px; + overflow: hidden; + cursor: url("dump/ui/mousecursor.png"), default; +} +@keyframes toright { + from { + left: -100px; + } + to { + left: -190px; + } +} +#bg,#video,#solid { + position: absolute; + width: 800px; + height: 600px; +} +#say { + font: 22px/27px Playtime; color: white; width: 750px; height: 90px; position: absolute; top: 493px; left: 28px; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} +#window { + position: absolute; + top: 440px; + left: 0; +} +#noscript { + width: 100%; + height: 100%; + background-color: gray; + opacity: 0.5; +} +noscript { + display: block; + margin: auto; + width: auto; +} +#notwork { + font-size: 200%; + font-weight: bold; +} diff --git a/www/index.html b/www/index.html index 91d6de4..1f982fc 100644 --- a/www/index.html +++ b/www/index.html @@ -1,54 +1,11 @@ <!DOCTYPE html> <html> <head> + <meta charset="utf-8"> <title>Katawa Shoujo</title> <link rel="shortcut icon" type="image/png" href="/dump/ui/icon.png"> <link rel="apple-touch-icon" href="/dump/ui/icon.png"> - <style> - body { - margin: 0; - padding: 0; - overflow: hidden; - background: gray; - } - @font-face { - font-family: "Playtime"; - /* src: url("playtime.ttf"); */ - src: url("playtime-webfont.ttf"); - src: url("playtime-webfont.woff"); - } - #container { - width: 800px; - height: 600px; - position: absolute; - top: 50%; - margin-top: -300px; - left: 50%; - margin-left: -400px; - overflow: hidden; - cursor: url("dump/ui/mousecursor.png"), default; - } - @keyframes toright { - from { - left: -100px; - } - to { - left: -190px; - } - } - #bg,#video,#solid { - position: absolute; - width: 800px; - height: 600px; - } - #say { - font: 22px/27px Playtime; color: white; width: 750px; height: 90px; position: absolute; top: 493px; left: 28px; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - } - </style> + <link rel="stylesheet" type="text/css" href="index.css"> <script> window.define = function(factory) { try{ delete window.define; } catch(e){ window.define = void 0; } // IE @@ -58,16 +15,17 @@ </script> </head> <body> + <div id="noscript"><noscript><div id="notwork">This Site Totally Doesn't Work Without JavaScript.</div>Like, at all. Sorry. If you enable it and reload this page you'll be good to go. <a href="http://enable-javascript.com/">Need to know how?</a></noscript></div> <audio id="music" loop></audio> <audio id="sound"></audio> <audio id="ambient" loop></audio> <div id="container"> <div id="img"> - <img id="bg" src="/dump/bgs/school_girlsdormhall.jpg"> + <img id="bg" src="/dump/bgs/school_girlsdormhall.jpg" alt=""> <div id="solid"></div> </div> - <img src="/dump/ui/bg-say.png" style="position: absolute; top: 440px; left: 0;"> - <div id="say">It doesn't take long to identify the source as Lilly's room, though the deep timbre of the female voice unmistakably belongs not to her, but to her sister.</div> + <img id="window" src="/dump/ui/bg-say.png" alt=""> + <div id="say"></div> <video id="video"></video> </div> <script src="/when/when.js"></script> |