/terms: Prettify.

3 files changed, 147 insertions, 67 deletions

diff --git a/nfsw/auth.py b/nfsw/auth.py
index ca31750..f8fe2ad 100644
--- a/nfsw/auth.py
+++ b/nfsw/auth.py
@@ -191,6 +191,6 @@ def load_logged_in_user():
             'SELECT * FROM user WHERE id=?', (user_id,)
         ).fetchone()
 
-        if (request.endpoint not in ['auth.terms', 'auth.sorry']
+        if (request.endpoint not in ['auth.terms', 'auth.sorry', 'static']
             and g.user['terms_agreed'] != 1):
             return redirect(url_for('auth.terms'))
diff --git a/nfsw/static/terms.css b/nfsw/static/terms.css
new file mode 100644
index 0000000..4565432
--- /dev/null
+++ b/nfsw/static/terms.css
@@ -0,0 +1,70 @@
+@font-face {
+    font-family: roboto-black;
+    src: url('./fonts/roboto-black.ttf');
+}
+
+@font-face {
+    font-family: roboto-medium;
+    src: url('./fonts/roboto-medium.ttf');
+}
+
+@font-face {
+    font-family: roboto-regular;
+    src: url('./fonts/roboto-regular.ttf');
+}
+
+.terms-grid {
+    display: grid;
+    grid-template-rows: auto 100vh auto;
+    grid-template-columns: auto 500px auto;
+}
+
+.terms-grid-item {
+    grid-column-start: 2;
+    grid-column-end: 3;
+    grid-row-start: 2;
+    grid-row-end: 3;
+}
+
+header h1, header h2 {
+    font-family: roboto-black;
+}
+
+p, .agree {
+    font-family: roboto-regular;
+}
+
+
+.button-group {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+input[type="submit"] {
+    font-family: roboto-medium;
+    font-size: 16px;
+    border: 1px solid rgb(10, 10,10);
+    background-color: rgb(10,10,10);
+    color: rgb(240,240,240);
+    border-radius: 5px;
+    padding: 8px 10px 8px 10px;
+    cursor: pointer;
+
+}
+
+@media (min-width: 100px) and (max-width: 650px) {
+    .terms-grid {
+        grid-template-columns: auto 85vw auto;
+    }
+
+    .button-group {
+        flex-direction: column;
+    }
+
+    .button {
+        width: 75vw;
+    }
+}
diff --git a/nfsw/templates/terms.html b/nfsw/templates/terms.html
index 134057d..d24c481 100644
--- a/nfsw/templates/terms.html
+++ b/nfsw/templates/terms.html
@@ -4,71 +4,81 @@
 
 {% block content %}
 
-<article class="terms-block">
-    <header>
-        <h1>NFSW</h1>
-    </header>
-
-    <section class="terms">
-        <header>
-            <h1>Terms &amp; Conditions</h1>
-        </header>
-
-        <p>NFSW will expose you to content that may be considered
-            unpalatable, offensive, rude, or crass.</p>
-
-        <p>In no event unless required by applicable law will the
-            copyright holder be liable to you for damages, including
-            any general, special, psychological, incidental or
-            consequential damages arising out of playing NFSW,
-            even if the holder has been advised or is aware of the
-            possibility of such damages.</p>
-
-        <div class="lastupdated">
-            <p>Last Updated on the 21st October 2019</p>
-        </div>
-    </section>
-
-    <section class="privacy">
-        <header>
-            <h1>Privacy Policy</h1>
-        </header>
-
-        <p>All your interactions with NFSW game or your "game state"
-            will be stashed in a temporary cache.</p>
-
-        <p>Data in the temporary cache attributable to you may be
-           removed when the game is reset or when game's janitor
-           decides to clean it up or when the server gets obliterated
-           on the January 2<sup>nd</sup> 2020.</p>
-
-        <p>The game server might also log your IP address
-            automatically each time you communicate with it. Access
-            logs will be purged on the same day the server gets
-            obliterated.</p>
-
-        <p>Lastly, remember that you're on the Internet where Privacy
-           is not a first class citizen. Tread with caution.</p>
-
-        <div class="lastupdated">
-            <p>Last Updated on the 21st October 2019</p>
-        </div>
-    </section>
-
-    <form class="agree" method="post">
-        <div class="form-group agree">
-            <label for="agree">
-                <input type="checkbox" name="agree"
-                       class="agree" value="1">
-                I agree to the Terms &amp; Conditions and the Privacy
-                Policy.
-            </label>
-        </div>
-
-        <div class="button-group">
-            <input type="submit" value="Submit">
-        </div>
-    </form>
-</article>
+<div class="terms-grid">
+    <div class="terms-grid-item">
+        <article class="terms-block">
+            <header>
+                <h1>NFSW</h1>
+            </header>
+
+            <section class="terms">
+                <header>
+                    <h1>Terms &amp; Conditions</h1>
+                </header>
+
+                <p>NFSW will expose you to content that may be considered
+                    unpalatable, offensive, rude, or crass.</p>
+
+                <p>In no event unless required by applicable law will the
+                    copyright holder be liable to you for damages, including
+                    any general, special, psychological, incidental or
+                    consequential damages arising out of playing NFSW,
+                    even if the holder has been advised or is aware of the
+                    possibility of such damages.</p>
+
+                <div class="lastupdated">
+                    <p>Last Updated on the 21st October 2019</p>
+                </div>
+            </section>
+
+            <section class="privacy">
+                <header>
+                    <h1>Privacy Policy</h1>
+                </header>
+
+                <p>All your interactions with NFSW game or your "game state"
+                    will be stashed in a temporary cache.</p>
+
+                <p>Data in the temporary cache attributable to you may be
+                    removed when the game is reset or when game's janitor
+                    decides to clean it up or when the server gets obliterated
+                    on the January 2<sup>nd</sup> 2020.</p>
+
+                <p>The game server might also log your IP address
+                    automatically each time you communicate with it. Access
+                    logs will be purged on the same day the server gets
+                    obliterated.</p>
+
+                <p>Lastly, remember that you're on the Internet where Privacy
+                    is not a first class citizen. Tread with caution.</p>
+
+                <div class="lastupdated">
+                    <p>Last Updated on the 21st October 2019</p>
+                </div>
+            </section>
+
+            <form class="agree" method="post">
+                <div class="form-group agree">
+                    <label for="agree">
+                        <input type="checkbox" id="agree"
+                               name="agree"
+                               class="agree" value="1">
+                        I agree to the Terms &amp; Conditions and the Privacy
+                        Policy.
+                    </label>
+                </div>
+
+                <div class="button-group">
+                    <input type="submit" value="Submit">
+                </div>
+            </form>
+        </article>
+    </div>
+</div>
 
+
+{% endblock %}
+
+{% block css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='terms.css') }}">
 {% endblock %}