nfsw: Style sorry page.

2 files changed, 44 insertions, 6 deletions

diff --git a/nfsw/static/sorry.css b/nfsw/static/sorry.css
new file mode 100644
index 0000000..2d956d0
--- /dev/null
+++ b/nfsw/static/sorry.css
@@ -0,0 +1,30 @@
+@font-face {
+    font-family: roboto-black;
+    src: url('./fonts/roboto-black.ttf');
+}
+
+@font-face {
+    font-family: roboto-regular;
+    src: url('./fonts/roboto-regular.ttf');
+}
+
+.sorry-grid {
+    display: grid;
+    grid-template-rows: 29vh 160px 29vh;
+    grid-template-columns: auto 300px auto;
+}
+
+.sorry-grid-item {
+    grid-column-start: 2;
+    grid-column-end: 3;
+    grid-row-start: 2;
+    grid-row-end: 3;
+}
+
+header h1 {
+    font-family: roboto-black;
+}
+
+p {
+    font-family: roboto-regular;
+}
diff --git a/nfsw/templates/sorry.html b/nfsw/templates/sorry.html
index d374649..d6bb646 100644
--- a/nfsw/templates/sorry.html
+++ b/nfsw/templates/sorry.html
@@ -3,13 +3,21 @@
 {% block title %}Sorry{% endblock %}
 
 {% block content %}
-<article class="sorry-block">
-    <header>
-        <h1>Sorry</h1>
-    </header>
+<div class="sorry-grid">
+    <div class="sorry-grid-item">
+        <div class="sorry-block">
+            <header>
+                <h1>Sorry</h1>
+            </header>
 
-    <p>Alas! sad that you're unable to play.</p>
+            <p>Alas! sad that you're unable to play.</p>
 
-    <p>XOXO.</p>
+            <p>XOXO.</p>
+        </div>
+    </div>
 </div>
 {% endblock %}
+
+{% block css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='sorry.css') }}">
+{% endblock %}