Tiny CSS improvements

royalnet/web/royalprints/home/templates/home.html

@@ -7,11 +7,11 @@
 {% block content %}
     <div class="dbox">
         <div class="dbox-top">
-            <span class="left">Royal Games</span>
+            <span class="left">Benvenuto!</span>
         </div>
         <div class="dbox-bot">
             <p>
-                Benvenuto al sito web della Royal Games!
+                Benvenuto al sito web della <b>Royal Games</b>!
             </p>
             <p>
                 Siamo una piccola community amichevole principalmente dedicata al PC gaming.

royalnet/web/royalprints/profile/templates/profile_index.html

@@ -12,7 +12,7 @@
             </span>
         </div>
         <div class="dbox-bot">
-            <ul>
+            <ul class="multicolumn">
                 {% for royal in royals %}
                     <li><a href="{{ url_for("profile.profile_page", username=royal.username) }}">{{ royal.username }}</a></li>
                 {% endfor %}

royalnet/web/royalprints/wikiview/templates/wikiview_index.html

@@ -17,7 +17,7 @@
             {% else %}
                 <button disabled title="Devi fare il login per creare nuove pagine!">Crea nuova pagina</button>
             {% endif %}
-            <ul>
+            <ul class="multicolumn">
                 {% for page in pages %}
                     <li><a href="{{ url_for("wikiview.wikiview_by_id", page_id=page.page_short_id, title=page.title) }}">{{ page.title }}</a></li>
                 {% endfor %}

royalnet/web/static/ryg.css

@@ -236,6 +236,7 @@ nav {
   justify-content: space-between;
   height: 50px;
   line-height: 50px;
+  min-width: 400px;
 }
 nav .nav-left {
   text-align: left;
@@ -452,9 +453,11 @@ form.full label.label-big * {
   justify-content: center;
   align-content: center;
   flex-direction: row;
+  flex-wrap: wrap;
 }
 .columns-3 .column {
   width: 33.3%;
+  min-width: 400px;
 }
 .fill {
   width: 100%;
@@ -463,11 +466,8 @@ form.full label.label-big * {
 }
 .vertical-main {
   width: 100%;
-}
-@media (min-width: 1200px) {
-  .vertical-main {
-    width: 1200px;
-  }
+  min-width: 400px;
+  max-width: 1200px;
 }
 .box {
   background-color: rgba(160, 204, 255, 0.1);
@@ -747,6 +747,10 @@ form.full label.label-big * {
 .diario.diario-spoiler:hover {
   color: #ff7d7d;
 }
+ul.multicolumn,
+ol.multicolumn {
+  column-width: 300px;
+}
 /*** Page specific classes ***/
 .mcstatus-grid {
   display: grid;

royalnet/web/static/ryg.less

@@ -287,6 +287,7 @@ nav {
     justify-content: space-between;
     height: 50px;
     line-height: 50px;
+    min-width: 400px;
 
     .nav-left {
         text-align: left;
@@ -537,9 +538,11 @@ form.full {
     justify-content: center;
     align-content: center;
     flex-direction: row;
+    flex-wrap: wrap;
     
     .column {
         width: 33.3%;
+        min-width: 400px;
     }
 }
 
@@ -553,11 +556,8 @@ form.full {
 //Vertical main page container
 .vertical-main {
     width: 100%;
-
-    @media (min-width: 1200px)
-    {
-        width: 1200px;
-    }
+    min-width: 400px;
+    max-width: 1200px;
 }
 
 //A simple box
@@ -894,6 +894,10 @@ form.full {
     }
 }
 
+//Multicolumn lists
+ul.multicolumn, ol.multicolumn {
+    column-width: 300px;
+}
 
 
 /*** Page specific classes ***/