First bit of styling

douglascook · Jun 9, 2018 · ca3a7ef · ca3a7ef
1 parent ec40590
commit ca3a7ef
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 21 deletions.
diff --git a/static/styles.css b/static/styles.css
@@ -0,0 +1,18 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: crimson;
+}
+
+.controls {
+  margin: 40px;
+}
+
+/* TODO work out why children aren't handled properly by flexbox stuff */
+.form-row {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: stretch;
+}
diff --git a/templates/page.html b/templates/page.html
@@ -1,32 +1,40 @@
 <html>
-  <div>
-    <p> Hello skankers and wankers </p>
+  <head>
+    <title> Skanking or wanking? </title>
+    <link rel="stylesheet"
+          type="text/css"
+          href="{{ url_for('static', filename='styles.css')}}">
+  </head>
 
-    <div>
-      <img src="{{ image_path }}"/>
-    </div>
+  <body>
+    <div class="container">
+      <h1> Skanking or wanking? </h1>
 
-    <div>
-      {% if result %}
+      <img class="image" src="{{ image_path }}" />
 
-        <span> {{ result }} </span>
+      <div class="controls">
+        {% if result %}
 
-        <input type="submit" value="NEXT" onclick="window.location='/';" />
+        <div class="form-row">
+          <span> {{ result }} </span>
+          <input type="submit" value="NEXT" onclick="window.location='/';" />
+        </div>
 
-      {% else %}
+        {% else %}
 
-        <form action="/guess" method="post">
-          <button type="submit" name="guess" value="skanking">
-            Skanker
-          </button>
+          <form class="form-row" action="/guess" method="post">
+            <button type="submit" name="guess" value="skanking">
+              <span> SKANKER </span>
+            </button>
 
-          <button type="submit" name="guess" value="wanking">
-            Wanker
-          </button>
-        </form>
+            <button type="submit" name="guess" value="wanking">
+              <span> WANKER </span>
+            </button>
+          </form>
 
-      {% endif %}
-    </div>
+        {% endif %}
+      </div>
 
-  </div>
+    </div>
+  </body>
 </html>