Style improvements

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;

templates/base.html

@@ -32,6 +32,8 @@
                 </span>
             </div>
         </nav>
+        <div class="omnicontainer">
             {% block body %}{% endblock %}
+        </div>
     </body>
 </html>

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>

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 %}

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 %}

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>
 {% endblock %}

templates/game.html

@@ -13,7 +13,6 @@
     <h1>
         Royal Games su {{ game_name }}
     </h1>
-    <div class="omnicontainer">
     <div class="game">
         <div class="game-panels">
             {% for mini in minis %}
@@ -23,5 +22,4 @@
             {% endfor %}
         </div>
     </div>
-    </div>
 {% endblock %}

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">

templates/profile.html

@@ -23,7 +23,6 @@
     <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">
@@ -86,5 +85,4 @@
             {% endif %}
         </div>
     </div>
-    </div>
 {% endblock %}