From cc62a545710a03a9c8ffdb1898f4c2c7db8b8eaa Mon Sep 17 00:00:00 2001
From: dreamer <dreamer@puikheid.nl>
Date: Thu, 26 Mar 2026 16:15:24 +0100
Subject: [PATCH] style tweaks

---
 code/static/panamaracing.css | 153 ++++++++++++++++++++++++++---------
 code/static/videohotmix.css  | 123 ++++++++++++++++++++--------
 code/views/layout.etlua      |   2 +-
 code/views/prc_layout.etlua  |  17 ++--
 4 files changed, 216 insertions(+), 79 deletions(-)

diff --git a/code/static/panamaracing.css b/code/static/panamaracing.css
index f0ddc04..a0c093c 100644
--- a/code/static/panamaracing.css
+++ b/code/static/panamaracing.css
@@ -11,6 +11,7 @@
 .h1
 {
     font-family: Helvetica;
+    font-size: 16px;
     color: var(--ifm-white);
     padding-top: 5px;
     padding-bottom: 5px;
@@ -22,9 +23,9 @@
 .p
 {
     font-family: Helvetica;
+    font-size: 6px;
     color: var(--ifm-grey);
     margin-bottom: 45px;
-    font-size: 10px;
 }
 
 .href
@@ -37,7 +38,7 @@
 {
     line-height: 16px;
     font-weight: 600;
-    font-size: 14px;
+    font-size: 10px;
     margin-bottom: 0;
     margin-top: 0;
     font-family: Helvetica;
@@ -49,7 +50,7 @@
     color: var(--ifm-grey);
     line-height: 1.6em;
     font-weight: 600;
-    font-size: 14px;
+    font-size: 10px;
     text-decoration: none;
     background: var(--ifm-deep-black);
     display: inline-flex;
@@ -61,19 +62,13 @@
 
 .amixlink:hover
 {
-    font-family: Helvetica;
     color: #000;
-    line-height: 1.6em;
-    font-weight: 600;
-    font-size: 14px;
     background: var(--ifm-red);
 }
 
 .body
 {
-    width: 80%;
-    padding-left: 10%;
-    padding-right: 10%;
+    width: 100%;
     background-color: var(--ifm-black);
 }
 
@@ -81,7 +76,7 @@
 {
     font-family: Helvetica;
     font-weight: 900;
-    font-size: 16px;
+    font-size: 12px;
     color: var(--ifm-grey);
     padding: 5px;
     margin-top: 2%;
@@ -93,7 +88,7 @@
 
 .prclogo
 {
-    width: 1440px;
+    height: 120px;
     padding-bottom: 10px;
     padding-left: 10px;
     padding-top: 10px;
@@ -112,7 +107,7 @@
 .header
 {
     width: 100%;
-    max-height: 220px;
+    max-height: 120px;
 }
 
 .footer
@@ -124,14 +119,6 @@
     clear: both;
 }
 
-.djsection
-{
-    font-family: Helvetica;
-    font-size: 18px;
-    text-decoration: inherit;
-    color: var(--ifm-red);
-}
-
 .djsectionmenu
 {
     font-family: Helvetica;
@@ -156,15 +143,9 @@
 .djsection
 {
     font-family: Helvetica;
-    font-size: 33px;
+    font-size: 18px;
+    text-decoration: inherit;
     color: var(--ifm-red);
-    line-height: 1em;
-    margin-bottom: 0px;
-    margin-top: 0px;
-    padding-top: 5px;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-bottom: 5px;
 }
 
 .djsection:hover
@@ -176,7 +157,7 @@
 {
     font-family: Helvetica;
     color: var(--ifm-red);
-    font-size: 24px;
+    font-size: 16px;
     padding-top: 5px;
     border-bottom: 2px solid var(--ifm-red);
 }
@@ -232,10 +213,7 @@
         padding-right: 5%;
         width: 40%;
     }
-    .h2
-    {
-        font-size: 14px;
-    }
+
     .footer
     {
         margin-top: 15%;
@@ -323,6 +301,12 @@
         column-count: 1;
     }
 }
+.content
+{
+    width: 80%;
+    padding-left: 10%;
+    padding-right: 10%;
+}
 
 .latest
 {
@@ -361,10 +345,105 @@
     }
 }
 
-@media (max-width:767px)
-{
-    .h1mobile
+@media screen and (min-width: 600px) {
+
+    .h1{
+        font-size: 18px;
+    }
+
+    .p
+    {
+        font-size: 8px;
+    }
+
+    .mixlink
+    {
+        font-size: 12px;
+    }
+
+    .amixlink
+    {
+        font-size: 12px;
+    }
+
+    .mixsections
+    {
+        font-size: 14px;
+    }
+
+    .h2
     {
         font-size: 18px;
     }
+
+    .header
+    {
+        max-height: 180px;
+    }
+
+    .prclogo
+    {
+        height: 180px;
+    }
+
+    .djsectionmenu
+    {
+        font-size: 25px;
+    }
+
+    .djsection
+    {
+        font-size: 28px;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .h1{
+        font-size: 26px;
+    }
+
+    .p
+    {
+        font-size: 10px;
+    }
+
+    .mixlink
+    {
+        font-size: 14px;
+    }
+
+    .amixlink
+    {
+        font-size: 14px;
+    }
+
+    .mixsections
+    {
+        font-size: 16px;
+    }
+
+    .h2
+    {
+        font-size: 24px;
+    }
+
+    .header
+    {
+        max-height: 220px;
+    }
+
+    .prclogo
+    {
+        height: 220px;
+    }
+
+    .djsectionmenu
+    {
+        font-size: 33px;
+    }
+
+    .djsection
+    {
+        font-size: 33px;
+    }
 }
diff --git a/code/static/videohotmix.css b/code/static/videohotmix.css
index c25d4ca..5ac8211 100644
--- a/code/static/videohotmix.css
+++ b/code/static/videohotmix.css
@@ -16,6 +16,7 @@
 .h1
 {
     font-family: ArcadeFont;
+    font-size: 16px;
     color: var(--ifm-red);
     border-top: 3px solid var(--ifm-red);
     border-bottom: 3px solid var(--ifm-red);
@@ -29,9 +30,9 @@
 .p
 {
     font-family: ArcadeFont;
+    font-size: 6px;
     color: var(--ifm-grey);
     margin-bottom: 45px;
-    font-size: 10px;
 }
 
 .href
@@ -44,7 +45,7 @@
 {
     line-height: 16px;
     font-weight: 600;
-    font-size: 14px;
+    font-size: 10px;
     margin-bottom: 0;
     margin-top: 0;
     font-family: ArcadeFont;
@@ -56,7 +57,7 @@
     color: var(--ifm-grey);
     line-height: 1.6em;
     font-weight: 600;
-    font-size: 14px;
+    font-size: 10px;
     text-decoration: none;
     background: var(--ifm-deep-black);
     display: inline-flex;
@@ -68,11 +69,7 @@
 
 .amixlink:hover
 {
-    font-family: ArcadeFont;
     color: #000;
-    line-height: 1.6em;
-    font-weight: 600;
-    font-size: 14px;
     background: var(--ifm-red);
 }
 
@@ -88,7 +85,7 @@
 {
     font-family: ArcadeFont;
     font-weight: 900;
-    font-size: 16px;
+    font-size: 12px;
     color: var(--ifm-grey);
     padding: 5px;
     margin-top: 2%;
@@ -109,7 +106,7 @@
 .h2
 {
     font-family: ArcadeFont;
-    font-size: 24px;
+    font-size: 16px;
     color: var(--ifm-grey);
     font-weight: 200;
     border-bottom: 2px solid var(--ifm-grey);
@@ -132,18 +129,10 @@
     clear: both;
 }
 
-.djsection
-{
-    font-family: ArcadeFont;
-    font-size: 18px;
-    text-decoration: inherit;
-    color: var(--ifm-red);
-}
-
 .djsectionmenu
 {
     font-family: ArcadeFont;
-    font-size: 33px;
+    font-size: 18px;
     color: var(--ifm-red);
     line-height: 1em;
     z-index: 100;
@@ -164,15 +153,9 @@
 .djsection
 {
     font-family: ArcadeFont;
-    font-size: 33px;
+    font-size: 18px;
+    text-decoration: inherit;
     color: var(--ifm-red);
-    line-height: 1em;
-    margin-bottom: 0px;
-    margin-top: 0px;
-    padding-top: 5px;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-bottom: 5px;
 }
 
 .djsection:hover
@@ -184,7 +167,7 @@
 {
     font-family: ArcadeFont;
     color: var(--ifm-red);
-    font-size: 24px;
+    font-size: 16px;
     padding-top: 5px;
     border-bottom: 2px solid var(--ifm-red);
 }
@@ -240,10 +223,7 @@
         padding-right: 5%;
         width: 40%;
     }
-    .h2
-    {
-        font-size: 14px;
-    }
+
     .footer
     {
         margin-top: 15%;
@@ -369,10 +349,85 @@
     }
 }
 
-@media (max-width:767px)
-{
-    .h1mobile
+@media screen and (min-width: 600px) {
+
+    .h1{
+        font-size: 18px;
+    }
+
+    .p
+    {
+        font-size: 8px;
+    }
+
+    .mixlink
+    {
+        font-size: 12px;
+    }
+
+    .amixlink
+    {
+        font-size: 12px;
+    }
+
+    .mixsections
+    {
+        font-size: 14px;
+    }
+
+    .h2
     {
         font-size: 18px;
     }
+
+    .djsectionmenu
+    {
+        font-size: 25px;
+    }
+
+    .djsection
+    {
+        font-size: 28px;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .h1{
+        font-size: 26px;
+    }
+
+    .p
+    {
+        font-size: 10px;
+    }
+
+    .mixlink
+    {
+        font-size: 14px;
+    }
+
+    .amixlink
+    {
+        font-size: 14px;
+    }
+
+    .mixsections
+    {
+        font-size: 16px;
+    }
+
+    .h2
+    {
+        font-size: 24px;
+    }
+
+    .djsectionmenu
+    {
+        font-size: 33px;
+    }
+
+    .djsection
+    {
+        font-size: 33px;
+    }
 }
diff --git a/code/views/layout.etlua b/code/views/layout.etlua
index e419a41..6006044 100644
--- a/code/views/layout.etlua
+++ b/code/views/layout.etlua
@@ -19,7 +19,7 @@
     <header class="header">
       <a href="/"><img src="/static/<%= titles['header'] %>" alt="videohotmix logo" class="hotmixlogo"/></a>
     </header>
-        <h1 class="h1 h1mobile">Tons Of Mix - Downloads & Streams (right click + Save link as... for downloads)<br>
+        <h1 class="h1">Tons Of Mix - Downloads & Streams (right click + Save link as... for downloads)<br>
             <%= titles.name %><br>
             Sharing <%= total[0] %> files</h1>
 
diff --git a/code/views/prc_layout.etlua b/code/views/prc_layout.etlua
index e0239bd..6b5087b 100644
--- a/code/views/prc_layout.etlua
+++ b/code/views/prc_layout.etlua
@@ -15,18 +15,20 @@
     <header class="header">
       <a href="/"><img src="/static/<%= titles['header'] %>" alt="prc logo" class="prclogo"/></a>
     </header>
-        <h1 class="h1 h1mobile">Tons Of Mix - Downloads & Streams (right click + Save link as... for downloads)<br>
+    <div class="content">
+        <h1 class="h1">Tons Of Mix - Downloads & Streams (right click + Save link as... for downloads)<br>
             <%= titles.name %><br>
             Sharing <%= total[0] %> files
         </h1>
-        <img src="/static/panamaracing.club_divider.png">
-
+    </div>
+        <img style="padding-bottom: 10px; padding-left: 10px; padding-top: 10px;" src="/static/panamaracing.club_divider.png">
+    <div class="content">
         <% content_for("inner") %>
-
+    </div>
+        <img style="padding-bottom: 10px; padding-left: 10px; padding-top: 10px;" src="/static/panamaracing.club_divider.png">
+    <div class="content">
         <section class="latest">
             <div class="latest_files">
-                <br>
-                <br>
                 <h1 class="h1">Latest uploads:</h1>
             <% for i, file in ipairs(latestpath) do %>
                 <a class="amixlink" href="<%= '/data/' .. titles.url .. '/' .. file:gsub("#", "%%23") %>">
@@ -36,6 +38,7 @@
             <% end %>
             </div>
         </section>
-
+    </div>
+        <img style="padding-bottom: 10px; padding-left: 10px; padding-top: 10px;" src="/static/panamaracing.club_divider.png">
     </body>
 </html>