nfsw: Prettify homepage.

4 files changed, 79 insertions, 8 deletions

diff --git a/nfsw/static/fonts/roboto-black.ttf b/nfsw/static/fonts/roboto-black.ttf
new file mode 100644
index 0000000..2d45238
--- /dev/null
+++ b/nfsw/static/fonts/roboto-black.ttf
diff --git a/nfsw/static/fonts/roboto-medium.ttf b/nfsw/static/fonts/roboto-medium.ttf
new file mode 100644
index 0000000..f714a51
--- /dev/null
+++ b/nfsw/static/fonts/roboto-medium.ttf
diff --git a/nfsw/static/root.css b/nfsw/static/root.css
new file mode 100644
index 0000000..cdeb388
--- /dev/null
+++ b/nfsw/static/root.css
@@ -0,0 +1,65 @@
+@font-face {
+    font-family: roboto-black;
+    src: url('./fonts/roboto-black.ttf');
+}
+
+@font-face {
+    font-family: roboto-medium;
+    src: url('./fonts/roboto-medium.ttf');
+}
+
+header h1 {
+    font-family: roboto-black;
+    text-align: center;
+    font-size: 50px;
+}
+
+.nfsw-grid {
+    display: grid;
+    grid-template-rows: 29vh 225px 29vh;
+    grid-template-columns: auto 640px auto;
+}
+
+.nfsw-grid-item {
+    grid-column-start: 2;
+    grid-column-end: 3;
+    grid-row-start: 2;
+    grid-row-end: 3;
+}
+
+.buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-content: center;
+    align-items: center;
+}
+
+.button {
+    font-family: roboto-medium;
+    font-size: 25px;
+    flex-basis: auto;
+    border: 1px solid rgb(10, 10,10);
+    background-color: rgb(10,10,10);
+    color: rgb(240,240,240);
+    text-align: center;
+    border-radius: 5px;
+    text-decoration: none;
+    padding: 20px;
+    width: 120px;
+}
+
+@media (min-width: 100px) and (max-width: 420px) {
+    header h1 {
+        font-size: 45px;
+    }
+
+    .buttons {
+        flex-direction: column;
+        height: 170px;
+    }
+
+    .button {
+        width: 85%;
+    }
+}
diff --git a/nfsw/templates/nfsw.html b/nfsw/templates/nfsw.html
index 9e873bf..afe07c3 100644
--- a/nfsw/templates/nfsw.html
+++ b/nfsw/templates/nfsw.html
@@ -3,14 +3,20 @@
 {% block title %}/{% endblock %}
 
 {% block content %}
-<div class="nfsw-block">
-    <header>
-        <h1>NFSW is Full of Slimy Warts!</h1>
-    </header>
+<div class="nfsw-grid">
+    <div class="nfsw-grid-item">
+        <header>
+            <h1>NFSW is Full of Slimy Warts!</h1>
+        </header>
 
-    <div class="buttons">
-        <a class="button" href="/register">Register</a>
-        <a class="button" href="/login">Login</a>
-    </div>
+        <div class="buttons">
+            <a class="button" href="/register">Register</a>
+            <a class="button" href="/login">Login</a>
+        </div>
+    </divd>
 </div>
 {% endblock %}
+
+{% block css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='root.css') }}">
+{% endblock %}