From 2359c1cd4bc3c91061b7ef6b7d7022c85b7ac970 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <ste.pigozzi@gmail.com>
Date: Tue, 8 Jan 2019 19:43:26 +0100
Subject: [PATCH] Style improvements

---
 static/nryg.less                       |  79 +++++++----------
 templates/base.html                    |   4 +-
 templates/components/gamestatsbox.html |   2 +-
 templates/components/memberbox.html    |   2 +-
 templates/components/wikibox.html      |   2 +-
 templates/diario.html                  |  10 +--
 templates/game.html                    |  16 ++--
 templates/main.html                    |   2 +-
 templates/profile.html                 | 118 ++++++++++++-------------
 9 files changed, 110 insertions(+), 125 deletions(-)

diff --git a/static/nryg.less b/static/nryg.less
index abd0d14f..cbb3ce59 100644
--- a/static/nryg.less
+++ b/static/nryg.less
@@ -18,10 +18,6 @@ h1, h2, h3, h4, h5, h6 {
     color: @accent-color;
 }
 
-h1 .whatsthis {
-    font-size: large;
-}
-
 a {
     color: @link-color;
     text-decoration: none;
@@ -216,6 +212,11 @@ table {
 ul {
     list-style: none;
 
+    .multicolumn {
+        column-width: 192px;
+        word-wrap: break-word;
+    }
+
     li {
         &::before {
             content: "•";
@@ -232,21 +233,23 @@ ul {
     }
 }
 
+img {
+    max-width: 100%;
+
+    @media (max-width:792px) {
+        max-width: initial;
+    }
+}
+
+.whatsthis {
+    font-size: large;
+}
+
 .omnicontainer {
-    width: 380px;
+    width: 100%;
     margin-left: auto;
     margin-right: auto;
 
-    @media (min-width: 792px)
-    {
-        width: 776px;
-    }
-
-    @media (min-width: 1180px)
-    {
-        width: 1164px;
-    }
-
     @media (min-width: 1568px) {
         width: 1552px;
     }
@@ -273,11 +276,6 @@ ul {
         border-radius: 0 0 4px 4px;
         padding: 8px;
     }
-
-    ul {
-        column-width: 200px;
-        word-wrap: break-word;
-    }
 }
 
 .input-grid {
@@ -294,28 +292,6 @@ ul {
     }
 }
 
-.super-title {
-    font-size: 64px;
-    text-align: center;
-
-    img {
-        height: 128px;
-        vertical-align: middle;
-    }
-}
-
-@media (min-width:601px) {
-    .mobile-only {
-        display: none;
-    }
-}
-
-@media (max-width:600px) {
-    .desktop-only {
-        display: none;
-    }
-}
-
 .game-panel {
     display: inline-block;
     margin: 4px;
@@ -934,7 +910,7 @@ ul {
 .two-columns {
     display: grid;
 
-    @media (min-width:601px) {
+    @media (min-width:791px) {
         //Desktop
 
         grid-template-columns: 50% 50%;
@@ -948,7 +924,7 @@ ul {
         }
     }
 
-    @media (max-width:600px) {
+    @media (max-width:792px) {
         //Mobile
 
         grid-template-columns: 100%;
@@ -1009,7 +985,6 @@ ul {
     }
 }
 
-
 .quest {
     padding: 8px;
     color: @accent-color;
@@ -1055,6 +1030,20 @@ ul {
     }
 }
 
+#royal-games {
+    font-size: 64px;
+    text-align: center;
+
+    @media (max-width:792px) {
+        font-size: 32px;
+    }
+
+    img {
+        height: 128px;
+        vertical-align: middle;
+    }
+}
+
 #debug-mode {
     color: red;
     font-weight: bold;
diff --git a/templates/base.html b/templates/base.html
index cfa63c9f..87c90a3c 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -32,6 +32,8 @@
                 </span>
             </div>
         </nav>
-        {% block body %}{% endblock %}
+        <div class="omnicontainer">
+            {% block body %}{% endblock %}
+        </div>
     </body>
 </html>
\ No newline at end of file
diff --git a/templates/components/gamestatsbox.html b/templates/components/gamestatsbox.html
index cd7677f0..596150b9 100644
--- a/templates/components/gamestatsbox.html
+++ b/templates/components/gamestatsbox.html
@@ -3,7 +3,7 @@
         Noi in vari giochi
     </div>
     <div class="lower-box">
-        <ul>
+        <ul class="multicolumn">
             <li><a href="{{ url_for("page_game", name="ryg") }}">Royal Games</a></li>
             <li><a href="{{ url_for("page_game", name="halloween2018") }}">Halloween 2018</a></li>
             <li><a href="{{ url_for("page_game", name="tg") }}">Telegram</a></li>
diff --git a/templates/components/memberbox.html b/templates/components/memberbox.html
index 26f047a8..84a1ada3 100644
--- a/templates/components/memberbox.html
+++ b/templates/components/memberbox.html
@@ -3,7 +3,7 @@
         Membri
     </div>
     <div class="lower-box">
-        <ul>
+        <ul class="multicolumn">
             {% for royal in royals %}
                 <li class="{% if royal.role == "Admin" %}admin{% endif %}"><a href="/profile/{{ royal.username }}">{{ royal.username }}</a></li>
             {% endfor %}
diff --git a/templates/components/wikibox.html b/templates/components/wikibox.html
index 13fe7360..e7876108 100644
--- a/templates/components/wikibox.html
+++ b/templates/components/wikibox.html
@@ -9,7 +9,7 @@
         Pagine Wiki
     </div>
     <div class="lower-box">
-        <ul>
+        <ul class="multicolumn">
             {% for page in wiki_pages %}
                 <li><a href="/wiki/{{ page.key }}">{{ page.key }}</a></li>
             {% endfor %}
diff --git a/templates/diario.html b/templates/diario.html
index 1881632d..469c1e9b 100644
--- a/templates/diario.html
+++ b/templates/diario.html
@@ -12,11 +12,9 @@
     <h1>
         Diario <a href="{{ url_for("page_wiki", key="Diario") }}" class="whatsthis">Cos'è?</a>
     </h1>
-    <div class="omnicontainer">
-        <div class="diario">
-            {% for entry in entries %}
-                {% include "components/diarioentry.html" %}
-            {% endfor %}
-        </div>
+    <div class="diario">
+        {% for entry in entries %}
+            {% include "components/diarioentry.html" %}
+        {% endfor %}
     </div>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/game.html b/templates/game.html
index d39acbd0..c53f67aa 100644
--- a/templates/game.html
+++ b/templates/game.html
@@ -13,15 +13,13 @@
     <h1>
         Royal Games su {{ game_name }}
     </h1>
-    <div class="omnicontainer">
-        <div class="game">
-            <div class="game-panels">
-                {% for mini in minis %}
-                    {% with record = mini %}
-                        {% include "minis/" + game_short_name + ".html" %}
-                    {% endwith %}
-                {% endfor %}
-            </div>
+    <div class="game">
+        <div class="game-panels">
+            {% for mini in minis %}
+                {% with record = mini %}
+                    {% include "minis/" + game_short_name + ".html" %}
+                {% endwith %}
+            {% endfor %}
         </div>
     </div>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/main.html b/templates/main.html
index a867931b..ab7e54ff 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -9,7 +9,7 @@
 {% endblock %}
 
 {% block body %}
-    <h1 class="super-title">
+    <h1 id="royal-games">
         <img src="{{ url_for('static', filename='FixMeRYGLogo.jpg') }}" alt=""> Royal Games
     </h1>
     <div class="two-columns">
diff --git a/templates/profile.html b/templates/profile.html
index e2b1aa31..a6a33ebc 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -23,68 +23,66 @@
     <h1>
         Profilo di {{ ryg.username }} {% if session.get('user_id', '') == ryg.id %}<a href="{{ url_for('page_editprofile') }}" id="edit-css">Modifica</a>{% endif %}
     </h1>
-    <div class="omnicontainer">
-        <div class="profile">
-            {% if css.bio %}
-                <div class="box bio">
-                    <div class="upper-box">
-                        Bio
-                    </div>
-                    <div class="lower-box">
-                        {{ bio }}
-                    </div>
+    <div class="profile">
+        {% if css.bio %}
+            <div class="box bio">
+                <div class="upper-box">
+                    Bio
+                </div>
+                <div class="lower-box">
+                    {{ bio }}
                 </div>
-            {% endif %}
-            <div class="game-panels">
-                {% with record = ryg %}
-                    {% include "minis/ryg.html" %}
-                {% endwith %}
-                {% if halloween %}
-                    {% with record = halloween %}
-                        {% include "minis/halloween2018.html" %}
-                    {% endwith %}
-                {% endif %}
-                {% if tg %}
-                    {% with record = tg %}
-                        {% include "minis/tg.html" %}
-                    {% endwith %}
-                {% endif %}
-                {% if discord %}
-                    {% with record = discord %}
-                        {% include "minis/discord.html" %}
-                    {% endwith %}
-                {% endif %}
-                {% if steam %}
-                    {% with record = steam %}
-                        {% include "minis/steam.html" %}
-                    {% endwith %}
-                {% endif %}
-                {% if dota %}
-                    {% with record = dota %}
-                        {% include "minis/dota.html" %}
-                    {% endwith %}
-                {% endif %}
-                {% if osu %}
-                    {% with record = osu %}
-                        {% include "minis/osu.html" %}
-                    {% endwith %}
-                {% endif %}
-                {% if lol %}
-                    {% with record = lol %}
-                        {% include "minis/lol.html" %}
-                    {% endwith %}
-                {% endif %}
-                {% if ow %}
-                    {% with record = ow %}
-                        {% include "minis/ow.html" %}
-                    {% endwith %}
-                {% endif %}
-                {% if terraria13 %}
-                    {% with record = terraria13 %}
-                        {% include "minis/terraria13.html" %}
-                    {% endwith %}
-                {% endif %}
             </div>
+        {% endif %}
+        <div class="game-panels">
+            {% with record = ryg %}
+                {% include "minis/ryg.html" %}
+            {% endwith %}
+            {% if halloween %}
+                {% with record = halloween %}
+                    {% include "minis/halloween2018.html" %}
+                {% endwith %}
+            {% endif %}
+            {% if tg %}
+                {% with record = tg %}
+                    {% include "minis/tg.html" %}
+                {% endwith %}
+            {% endif %}
+            {% if discord %}
+                {% with record = discord %}
+                    {% include "minis/discord.html" %}
+                {% endwith %}
+            {% endif %}
+            {% if steam %}
+                {% with record = steam %}
+                    {% include "minis/steam.html" %}
+                {% endwith %}
+            {% endif %}
+            {% if dota %}
+                {% with record = dota %}
+                    {% include "minis/dota.html" %}
+                {% endwith %}
+            {% endif %}
+            {% if osu %}
+                {% with record = osu %}
+                    {% include "minis/osu.html" %}
+                {% endwith %}
+            {% endif %}
+            {% if lol %}
+                {% with record = lol %}
+                    {% include "minis/lol.html" %}
+                {% endwith %}
+            {% endif %}
+            {% if ow %}
+                {% with record = ow %}
+                    {% include "minis/ow.html" %}
+                {% endwith %}
+            {% endif %}
+            {% if terraria13 %}
+                {% with record = terraria13 %}
+                    {% include "minis/terraria13.html" %}
+                {% endwith %}
+            {% endif %}
         </div>
     </div>
 {% endblock %}
\ No newline at end of file