html page + styling

3 years ago · 3e0ff1153f
3 changed files with 90 additions and 27 deletions
--- a/html/fishing-minigame.html
+++ b/html/fishing-minigame.html
@ -1,27 +0,0 @@
-<html lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <title>TITLE</title>
-    <style>
-        canvas {
-            margin: 0px;
-            padding: 0px;
-            width: 720px;
-            height: 425px;
-            overflow: hidden;
-            /* position: absolute; */
-            background: black;
-            z-index: 0;
-        }
-    </style>
-</head>
-
-<body>
-    <canvas id="glcanvas" tabindex='1'></canvas>
-    <!-- self-hosted version of https://github.com/not-fl3/macroquad/blob/master/js/mq_js_bundle.js -->
-    <script src="./mq_js_bundle.js"></script>
-    <script>load("fishing-minigame.wasm");</script> <!-- Your compiled wasm file -->
-</body>
-
-</html>
--- a/html/index.html
+++ b/html/index.html
@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <title>fishing minigame</title>
+  <style>
+    code{white-space: pre-wrap;}
+    span.smallcaps{font-variant: small-caps;}
+    span.underline{text-decoration: underline;}
+    div.column{display: inline-block; vertical-align: top; width: 50%;}
+    div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
+    ul.task-list{list-style: none;}
+  </style>
+  <link rel="stylesheet" href="./styles.css" />
+  <!--[if lt IE 9]>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
+  <![endif]-->
+</head>
+<body>
+<header id="title-block-header">
+<h1 class="title">fishing minigame</h1>
+</header>
+<style>
+canvas {
+    margin: 0px;
+    padding: 0px;
+    width: 720px;
+    height: 425px;
+    overflow: hidden;
+    background: black;
+    z-index: 0;
+}
+</style>
+<canvas id="glcanvas" tabindex="1">
+</canvas>
+<p>welcome! to the fishing minigame zone.</p>
+<p>use the up and down keys to move the hook, space to catch the fish, and escape to end the game.</p>
+<p>written in rustlang. a macroquad port of a terminal game i made for a game engines class. sorry the font is so blurry</p>
+<p>source code can be found on <a href="https://gitlab.com/licynthiax/fishing-minigame">gitlab</a></p>
+<h2 id="works-cited">works cited</h2>
+<ul>
+<li>wikipedia article “List of fish common names”</li>
+<li>various wikipedia articles about fish</li>
+<li>moby dick (melville 1851)</li>
+<li>animal crossing: new horizons</li>
+<li>kate compton's <a href="http://tracery.io">tracery</a></li>
+<li><a href="https://crates.io/crates/macroquad">macroquad</a></li>
+</ul>
+<script src="./mq_js_bundle.js"></script>
+<script>load("./fishing-minigame.wasm");</script>
+</body>
+</html>
--- a/html/styles.css
+++ b/html/styles.css
@ -0,0 +1,36 @@
+html {
+    background: #eee;
+}
+
+h1:before {
+    display: inline;
+    content: '~ ';
+}
+
+h1:after {
+    display: inline;
+    content: ' ~';
+}
+
+body {
+    width: 80%;
+    margin: auto;
+    font-size: 18px;
+}
+
+h1 {
+    font-size: 1.5em;
+}
+
+img.emoji {
+    display: inline;
+    width: 0.8em;
+    height: 0.8em;
+}
+
+footer {
+    margin-top: 3.0em;
+    margin-bottom: 2.0em;
+    text-align: center;
+    font-size: 0.9em;
+}