more css tweaks

code/static/panamaracing.css

@@ -7,254 +7,235 @@
     --ifm-white: #ffffff;
 }
 
+html,
+body {
+    margin: 0;
+    padding: 0;
+    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
+}
 
-.h1
+body {
-{
+    margin-top: 1em;
-    font-family: Helvetica;
+    margin-bottom: 1em;
-    font-size: 16px;
+    background-color: var(--ifm-black);
     color: var(--ifm-white);
-    padding-top: 5px;
+    font-family: Helvetica, Arial, sans-serif;
-    padding-bottom: 5px;
+}
-    margin-bottom: 15px;
+
-    margin-top: 10px;
+.header {
+    display: flex;
+    align-items: center;
+    color: var(--ifm-white);
+}
+
+.container {
+    width: min(80%, 900rem);
+    /* 1600px */
+    margin: 0 auto;
+}
+
+.header-grid {
+    display: grid;
+    width: 100%;
+    grid-template-columns: auto 1fr;
+    gap: 0;
+    align-items: center;
+}
+
+.header-link {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+}
+
+.brand-logos {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.brand-logos img {
+    flex: 0 0 auto;
+    width: auto;
+    height: auto;
+    max-width: none;
+    display: block;
+}
+
+.prc-stripes,
+.header-title {
+    grid-column: 1 / span 2;
+}
+
+
+.prc-stripes {
+    width: 100%;
+    --square: 0.55rem;
+    /* 10px */
+    height: calc(var(--square) * 3);
+    background:
+        conic-gradient(from 90deg at 50% 50%, #000 0 25%, #fff 0 50%, #000 0 75%, #fff 0) 0 0 / calc(var(--square) * 2) calc(var(--square) * 2);
+}
+
+.header-title {
+    margin: 0.625rem 0 0.9375rem;
+    /* 10px 0 15px */
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: clamp(1.2rem, 1.2rem + 0.5vw, 2rem);
+    line-height: 1em;
+    color: inherit;
+    padding-left: 4rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+.h1 {
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: clamp(1.3rem, 1.3rem + 0.5vw, 2rem);
+    color: var(--ifm-white);
+    padding-top: 0.3125rem;
+    /* 5px */
+    padding-bottom: 0.3125rem;
+    /* 5px */
+    margin-bottom: 0.9375rem;
+    /* 15px */
+    margin-top: 0.625rem;
+    /* 10px */
     line-height: 1em;
 }
 
-.p
+.href {
-{
+    font-family: Helvetica, Arial, sans-serif;
-    font-family: Helvetica;
-    font-size: 6px;
-    color: var(--ifm-grey);
-    margin-bottom: 45px;
-}
-
-.href
-{
-    font-family: Helvetica;
     text-decoration: none;
 }
 
-.mixlink
+.mixlink {
-{
+    line-height: 1rem;
-    line-height: 16px;
+    /* 16px */
     font-weight: 600;
-    font-size: 10px;
+    font-size: clamp(0.6rem, 0.6rem + 0.2vw, 1rem);
-    margin-bottom: 0;
+    /* 10px */
-    margin-top: 0;
+    margin: 0;
-    font-family: Helvetica;
+    font-family: Helvetica, Arial, sans-serif;
 }
 
-.amixlink
+.amixlink {
-{
+    font-family: Helvetica, Arial, sans-serif;
-    font-family: Helvetica;
     color: var(--ifm-grey);
     line-height: 1.6em;
     font-weight: 600;
-    font-size: 10px;
     text-decoration: none;
     background: var(--ifm-deep-black);
     display: inline-flex;
-    margin-top: 2px;
+    margin: 0.125rem 0;
-    margin-bottom: 2px;
+    /* 2px 0 */
-    padding: 2px 10px;
+    padding: 0.125rem 0.625rem;
-    border-radius: 20px;
+    /* 2px 10px */
+    border-radius: 1.25rem;
+    /* 20px */
+    font-size: clamp(0.6rem, 0.6rem + 0.2vw, 1rem);
 }
 
-.amixlink:hover
+
-{
+.amixlink:hover {
     color: #000;
     background: var(--ifm-red);
 }
 
-.body
+.mixsections {
-{
+    font-family: Helvetica, Arial, sans-serif;
-    width: 100%;
-    background-color: var(--ifm-black);
-}
-
-.mixsections
-{
-    font-family: Helvetica;
     font-weight: 900;
-    font-size: 12px;
     color: var(--ifm-grey);
-    padding: 5px;
+    padding: 0.3125rem;
+    /* 5px */
     margin-top: 2%;
-    margin-bottom: 5px;
+    margin-bottom: 0.3125rem;
-    margin-right: 15px;
+    /* 5px */
-    border: solid 3px var(--ifm-grey);
+    margin-right: 0.9375rem;
+    /* 15px */
+    border: solid 0.1875rem var(--ifm-grey);
+    /* 3px */
     text-decoration: none;
 }
 
-.prclogo
+.prclogo {
-{
+    height: 7.5rem;
-    height: 120px;
+    /* 120px */
-    padding-bottom: 10px;
+    padding: 0.625rem 0 0.625rem 0.625rem;
-    padding-left: 10px;
+    /* 10px 0 10px 10px */
-    padding-top: 10px;
 }
 
-.divider
+.divider {
-{
+    height: 1.4375rem;
-    height: 23px;
+    /* 23px */
-    padding-bottom: 10px;
+    padding: 0.625rem 0 0.625rem 0.625rem;
-    padding-left: 10px;
+    /* 10px 0 10px 10px */
-    padding-top: 10px;
 }
 
-.h2
+.footer {
-{
-    font-family: Helvetica;
-    font-size: 24px;
-    color: var(--ifm-grey);
-    font-weight: 200;
-    border-bottom: 2px solid var(--ifm-grey);
-    margin-bottom: 0px;
-}
-
-.header
-{
     width: 100%;
-    max-height: 120px;
+    height: 15.625rem;
-}
+    /* 250px */
-
+    border-top: 0.125rem solid var(--ifm-red);
-.footer
+    /* 2px */
-{
-    width: 100%;
-    height: 250px;
-    border-top: 2px solid var(--ifm-red);
     float: left;
     clear: both;
 }
 
-.djsectionmenu
+.djsection {
-{
+    font-family: Helvetica, Arial, sans-serif;
-    font-family: Helvetica;
-    font-size: 18px;
-    color: var(--ifm-red);
-    line-height: 1em;
-    z-index: 100;
-    display: block;
-    width: 10%;
-    height: 130px;
-    float: left;
-    margin-top: 5px;
-    margin-bottom: 5px;
-    min-width: 130px;
-}
-
-.djsectionmenu:hover
-{
-    background-color: #e3301a;
-}
-
-.djsection
-{
-    font-family: Helvetica;
-    font-size: 18px;
     text-decoration: inherit;
     color: var(--ifm-red);
+    font-size: clamp(1.3rem, 1rem + 1.5vw, 2rem);
 }
 
-.djsection:hover
+.djsection:hover {
-{
     background-color: #000;
 }
 
-.h2
+.homeheader {
-{
-    font-family: Helvetica;
-    color: var(--ifm-red);
-    font-size: 16px;
-    padding-top: 5px;
-    border-bottom: 2px solid var(--ifm-red);
-}
-
-.homeheader
-{
     background-image: url('/img/header.png');
     background-repeat: no-repeat;
-    padding-bottom: 20px;
+    padding-bottom: 1.25rem;
+    /* 20px */
 }
 
-.bottomimg
+.bottomimg {}
-{
+
+.imglink {
+    width: 12.5rem;
+    /* 200px */
 }
 
-.imglink
+.column {
-{
-    width: 200px;
-}
-
-.footerlegal
-{
-    right: 0;
-    float: right;
-    margin-top: 80px;
-}
-
-/* Three image containers (use 25% for four, and 50% for two, etc) */
-
-.column
-{
     float: left;
-    margin-left: 0px;
+    margin-left: 0;
     padding-left: 2.5%;
     padding-right: 2.5%;
     width: 15%;
 }
 
-/* Clear floats after image containers */
+.row::after {
-
-.row::after
-{
     content: "";
     clear: both;
     display: table;
 }
 
-@media screen and (max-width: 768px)
+.content {
-{
+    padding-left: 4rem;
-    .column
+    width: min(90%, 100rem);
-    {
-        padding-left: 5%;
-        padding-right: 5%;
-        width: 40%;
-    }
-
-    .footer
-    {
-        margin-top: 15%;
-    }
 }
 
-@media screen and (max-width: 500px)
+.latest {
-{
+    max-width: 90%;
-    .column
+    padding-bottom: 1rem;
-    {
-        padding-left: 0%;
-        padding-right: 5%;
-        width: 45%;
-    }
 }
 
-.profileimg
+.linkimg:hover {
-{
+    filter: invert(70%);
-    overflow: hidden;
-    height: auto;
-    width: 30%;
 }
 
-.profilesection
+.image_collage {
-{
-    width: 100%;
-    overflow: hidden;
-    margin-bottom: 2.5%;
-    background-color: var(--ifm-red);
-}
-
-.image_collage
-{
     line-height: 0;
     -webkit-column-count: 5;
     -webkit-column-gap: 0px;
@@ -264,205 +245,200 @@
     column-gap: 0px;
 }
 
-.image_collage img
+.image_collage img {
-{
     width: 100% !important;
     height: auto !important;
 }
 
-@media (max-width: 1200px)
+img {
-{
+    max-width: 100%;
-    .image_collage
+}
-    {
+
-        -moz-column-count: 4;
+/* RESPONSIVE CSS FOR DIFFERENT DEVICES */
-        -webkit-column-count: 4;
+
-        column-count: 4;
+/* ===========================
+   MOBILE (till 600px)
+   =========================== */
+@media (max-width: 600px) {
+
+    .container {
+        width: 90%;
+        margin: 0 auto;
     }
-}
 
-@media (max-width: 1000px)
+    .header {
-{
+        flex-direction: column;
-    .image_collage
+        align-items: flex-start;
-    {
-        -moz-column-count: 3;
-        -webkit-column-count: 3;
-        column-count: 3;
     }
-}
 
-@media (max-width: 800px)
+    .header-grid {
-{
+        grid-template-columns: 1fr;
-    .image_collage
+        gap: 0.75rem;
-    {
-        -moz-column-count: 2;
-        -webkit-column-count: 2;
-        column-count: 2;
     }
-}
 
-@media (max-width: 400px)
+    .brand-logos {
-{
+        justify-content: flex-start;
-    .image_collage
+        flex-wrap: wrap;
-    {
+        gap: 0.25rem;
-        -moz-column-count: 1;
-        -webkit-column-count: 1;
-        column-count: 1;
     }
-}
 
-.content
+    .brand-logos img {
-{
+        max-width: 40%;
-    width: 80%;
+        height: auto;
-    padding-left: 10%;
+    }
-    padding-right: 10%;
-}
 
-.latest
+    .prc-stripes,
-{
+    .header-title {
-    position: relative;
+        grid-column: 1 / -1;
-    clear: both;
+    }
-}
 
-.latestdiv
+    .header-title {
-{
+        padding: 0.75rem 1rem;
+        margin: 0.5rem 0 0.75rem;
+        text-align: left;
+    }
+
+    .h1 {
+        font-size: clamp(1.4rem, 4vw, 1.8rem);
+        margin-top: 0.25rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .p {
+        font-size: 0.9rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .djsection {
+        display: inline-block;
         width: 100%;
-    position: relative;
+    }
-    clear: both;
+
+    .column {
+        width: 100%;
+        float: none;
+        padding-left: 0;
+        padding-right: 0;
+        margin-bottom: 1rem;
+    }
+
+    .content {
+        padding: 0.75rem 1rem;
+        margin: 0.5rem 0 0.75rem;
+        text-align: left;
+    }
+
+    .footer {
+        height: auto;
+        padding: 1.5rem 0;
+    }
+
+    .imglink {
+        width: 9rem;
+        /* 144px circa */
+    }
+
+    .prclogo {
+        height: 5rem;
+        padding: 0.5rem;
+    }
+
+    .divider {
+        height: 1rem;
+        padding: 0.5rem;
+    }
+
+    .bottomimg img,
+    .linkimg img {
+        max-width: 100%;
+        height: auto;
+    }
+}
+
+/* ===========================
+   TABLET (601px – 900px)
+   =========================== */
+@media (min-width: 601px) and (max-width: 900px) {
+
+    .container {
+        width: 90%;
+    }
+
+    .header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .header-grid {
+        grid-template-columns: auto 1fr;
+        gap: 0.75rem;
+    }
+
+    .header-title {
+        padding-left: 2rem;
+        padding-right: 2rem;
+        padding-top: 0.75rem;
+        padding-bottom: 0.75rem;
+    }
+
+    .h1 {
+        font-size: clamp(1.6rem, 3vw, 2.2rem);
+    }
+
+    .column {
+        width: 45%;
         float: left;
+        padding-left: 2%;
+        padding-right: 2%;
+        margin-bottom: 1.25rem;
+    }
+
+    .content {
+        padding-left: 2rem;
+        padding-right: 2rem;
+        padding-top: 0.75rem;
+        padding-bottom: 0.75rem;
+    }
+
+    .footer {
+        height: auto;
+        padding: 2rem 0;
+    }
+
+    .footerlegal {
+        float: right;
+        margin-top: 2rem;
+    }
+
+    .imglink {
+        width: 11rem;
+        /* 176px circa */
+    }
+
 }
 
-.sponsors
+/* ===========================
-{
+   SMALL DESKTOP (901px – 1200px)
-    margin-top: 20px;
+   =========================== */
-    clear: both;
+@media (min-width: 901px) and (max-width: 1200px) {
-    float: left;
-}
 
-.linkimg:hover
+    .container {
-{
+        width: 85%;
-    filter: invert(70%);
+    }
-}
 
-@media (max-width:499px)
+    .header-title {
-{
+        padding-left: 3rem;
-    .djsectionmenu500
+        padding-right: 5rem;
-    {
+    }
-        height: 70px;
+
-        overflow: hidden;
+    .column {
-        min-width: 60px;
+        width: 22%;
-        width: 50%;
+        padding-left: 1.5%;
-    }
+        padding-right: 1.5%;
-}
+    }
-
+
-@media screen and (min-width: 600px) {
+    .content {
-
+        padding-left: 3rem;
-    .h1{
+        padding-right: 5rem;
-        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;
-    }
-
-    .divider
-    {
-        height: 35px;
-    }
-
-    .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;
-    }
-
-    .divider
-    {
-        height: 43px;
-    }
-
-    .djsectionmenu
-    {
-        font-size: 33px;
-    }
-
-    .djsection
-    {
-        font-size: 33px;
     }
 }

code/views/prc_layout.etlua

@@ -12,20 +12,34 @@
   <link rel="stylesheet" href="/static/<%= titles.css %>">
 </head>
     <body class="body">
+        <div class="container">
         <header class="header">
-      <a href="/"><img src="/static/<%= titles['header'] %>" alt="prc logo" class="prclogo"/></a>
+            <div class="header-grid">
-    </header>
+                <a href="/" class="header-link">
-    <div class="content">
+                    <div class="brand-logos">
-        <h1 class="h1">Tons Of Mix - Downloads & Streams (right click + Save link as... for downloads)<br>
+                        <img src="/static/PRC-Car.png" alt="Panama Racing Club car">
+                        <img src="/static/PRC-Text.png" alt="Panama Racing Club">
+                    </div>
+                </a>
+
+                <div class="prc-stripes" aria-hidden="true"></div>
+
+                <h1 class="header-title">
+                    Tons Of Mix - Downloads & Streams (right click + Save link as... for downloads)<br>
                     <%= titles.name %><br>
                     Sharing <%= total[0] %> files
                 </h1>
+
+                <div class="prc-stripes" aria-hidden="true"></div>
             </div>
-        <img class="divider" src="/static/panamaracing.club_divider.png">
+        </header>
+
+        <br>
         <div class="content">
             <% content_for("inner") %>
         </div>
-        <img class="divider" src="/static/panamaracing.club_divider.png">
+        <br>
+        <div class="prc-stripes" aria-hidden="true"></div>
         <div class="content">
             <section class="latest">
                 <div class="latest_files">
@@ -39,6 +53,8 @@
                 </div>
             </section>
         </div>
-        <img class="divider" src="/static/panamaracing.club_divider.png">
+        <br>
+        <div class="prc-stripes" aria-hidden="true"></div>
+    </div>
     </body>
 </html>