custom style

code/app.lua

@@ -14,17 +14,20 @@ local page_titles = {}
 if string.find(ngx.var.host, "panamaracing.club") then
     page_titles = {
         name = "Panama Racing Club Archive",
-        url = "panamaracing.club"
+        url = "panamaracing.club",
+        style = "panamastyle.css"
     }
 elseif string.find(ngx.var.host, "videohotmix.net") then
     page_titles = {
         name = "Hotmix Video Archive",
-        url = "videohotmix.net"
+        url = "videohotmix.net",
+        style = "hotmixstyle.css"
     }
 else
     page_titles = {
         name = "Local Test Archive",
-        url = "localhost"
+        url = "localhost",
+        style = "style.css"
     }
 end
 

code/static/hotmixstyle.css

@@ -0,0 +1,414 @@
+:root {
+    --main-color: #e2001a;
+}
+
+.h1
+{
+    font-family: Staatliches;
+    color: var(--main-color);
+    border-top: 3px solid var(--main-color);
+    border-bottom: 3px solidvar(--main-color);
+    padding-top: 5px;
+    padding-bottom: 5px;
+    margin-bottom: 15px;
+    margin-top: 0px;
+    line-height: 1em;
+}
+
+.p
+{
+    font-family: Helvetica;
+    color: #7e7e7e;
+    margin-bottom: 45px;
+    font-size: 10px;
+}
+
+.href
+{
+    font-family: Helvetica;
+    text-decoration: none;
+}
+
+.mixlink
+{
+    line-height: 16px;
+    font-weight: 600;
+    font-size: 14px;
+    margin-bottom: 0;
+    margin-top: 0;
+    font-family: Helvetica, Arial, sans-serif;
+}
+
+.amixlink
+{
+    font-family: Helvetica;
+    color: #9d9d9d;
+    line-height: 1.6em;
+    font-weight: 600;
+    font-size: 14px;
+    text-decoration: none;
+    background: #111111;
+    display: inline-flex;
+    margin-top: 2px;
+    margin-bottom: 2px;
+    padding: 2px 10px;
+    border-radius: 20px;
+}
+
+.amixlink:hover
+{
+    font-family: Helvetica;
+    color: #000;
+    line-height: 1.6em;
+    font-weight: 600;
+    font-size: 14px;
+    background: var(--main-color);
+}
+
+.body
+{
+    width: 80%;
+    padding-left: 10%;
+    padding-right: 10%;
+    background-color: #222222;
+}
+
+.mixsections
+{
+    font-family: Staatliches;
+    font-weight: 900;
+    font-size: 16px;
+    color: #787878;
+    padding: 5px;
+    margin-top: 2%;
+    margin-bottom: 5px;
+    margin-right: 15px;
+    border: solid 3px #787878;
+    text-decoration: none;
+}
+
+.hotmixlogo
+{
+    width: 150px;
+    padding-bottom: 0px;
+    padding-left: 10px;
+    padding-top: 10px;
+}
+
+.h2
+{
+    font-family: Staatliches;
+    font-size: 24px;
+    color: #4c4c4c;
+    font-weight: 200;
+    border-bottom: 2px solid #4c4c4c;
+    margin-bottom: 0px;
+}
+
+.header
+{
+    width: 100%;
+    background-image: url('/img/header.png');
+    max-height: 185px;
+}
+
+.footer
+{
+    width: 100%;
+    height: 250px;
+    border-top: 2px solid var(--main-color);
+    float: left;
+    clear: both;
+}
+
+.djsection
+{
+    font-family: Staatliches;
+    font-size: 18px;
+    text-decoration: inherit;
+    color: var(--main-color);
+}
+
+.djsectionmenu
+{
+    font-family: Staatliches;
+    font-size: 33px;
+    color: var(--main-color);
+    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: Staatliches;
+    font-size: 33px;
+    color: var(--main-color);
+    line-height: 1em;
+    margin-bottom: 0px;
+    margin-top: 0px;
+    padding-top: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-bottom: 5px;
+}
+
+.djsection:hover
+{
+    background-color: #000;
+}
+
+.h2
+{
+    font-family: Staatliches;
+    color: var(--main-color);
+    font-size: 24px;
+    padding-top: 5px;
+    border-bottom: 2px solid var(--main-color);
+}
+
+.homeheader
+{
+    background-image: url('/img/header.png');
+    background-repeat: no-repeat;
+    padding-bottom: 20px;
+}
+
+.bottomimg
+{
+}
+
+.imglink
+{
+    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;
+    padding-left: 2.5%;
+    padding-right: 2.5%;
+    width: 15%;
+}
+
+/* Clear floats after image containers */
+
+.row::after
+{
+    content: "";
+    clear: both;
+    display: table;
+}
+
+@media screen and (max-width: 768px)
+{
+    .column
+    {
+        padding-left: 5%;
+        padding-right: 5%;
+        width: 40%;
+    }
+    .h2
+    {
+        font-size: 14px;
+    }
+    .footer
+    {
+        margin-top: 15%;
+    }
+}
+
+@media screen and (max-width: 500px)
+{
+    .column
+    {
+        padding-left: 0%;
+        padding-right: 5%;
+        width: 45%;
+    }
+}
+
+.profileimg
+{
+    overflow: hidden;
+    height: auto;
+    width: 30%;
+}
+
+.profilesection
+{
+    width: 100%;
+    overflow: hidden;
+    margin-bottom: 2.5%;
+    background-color: var(--main-color);
+}
+
+.image_collage
+{
+    line-height: 0;
+    -webkit-column-count: 5;
+    -webkit-column-gap: 0px;
+    -moz-column-count: 5;
+    -moz-column-gap: 0px;
+    column-count: 5;
+    column-gap: 0px;
+}
+
+.image_collage img
+{
+    width: 100% !important;
+    height: auto !important;
+}
+
+@media (max-width: 1200px)
+{
+    .image_collage
+    {
+        -moz-column-count: 4;
+        -webkit-column-count: 4;
+        column-count: 4;
+    }
+}
+
+@media (max-width: 1000px)
+{
+    .image_collage
+    {
+        -moz-column-count: 3;
+        -webkit-column-count: 3;
+        column-count: 3;
+    }
+}
+
+@media (max-width: 800px)
+{
+    .image_collage
+    {
+        -moz-column-count: 2;
+        -webkit-column-count: 2;
+        column-count: 2;
+    }
+}
+
+@media (max-width: 400px)
+{
+    .image_collage
+    {
+        -moz-column-count: 1;
+        -webkit-column-count: 1;
+        column-count: 1;
+    }
+}
+
+.alphabetpanel
+{
+    width: 100%;
+    float: left;
+    border-top: 1px dotted;
+    background-repeat: repeat;
+    overflow: hidden;
+    height: 100%;
+}
+
+@media (min-width:500px)
+{
+    .alphabetimg
+    {
+        position: relative;
+        float: none;
+        top: 5px;
+        left: 5px;
+        height: 100px;
+    }
+}
+
+.alphabetgrid
+{
+    width: 100%;
+    margin-top: 40px;
+}
+
+.latest
+{
+    position: relative;
+    clear: both;
+}
+
+.latestdiv
+{
+    width: 100%;
+    position: relative;
+    clear: both;
+    float: left;
+}
+
+.alphabet
+{
+    width: 100%;
+    margin-bottom: 40px;
+    float: left;
+    clear: both;
+    margin-top: 20px;
+}
+
+.sponsors
+{
+    margin-top: 20px;
+    clear: both;
+    float: left;
+}
+
+.linkimg:hover
+{
+    filter: invert(70%);
+}
+
+@media (max-width:499px)
+{
+    .djsectionmenu500
+    {
+        height: 70px;
+        overflow: hidden;
+        min-width: 60px;
+        width: 50%;
+    }
+    .alphabetimg500
+    {
+        height: 100px;
+    }
+    .alphabetpanel480down
+    {
+        height: 70px;
+        overflow: hidden;
+        width: 100px;
+    }
+}
+
+@media (max-width:767px)
+{
+    .h1mobile
+    {
+        font-size: 18px;
+    }
+}

code/static/panamastyle.css

@@ -0,0 +1,415 @@
+
+:root {
+    --main-color: #00980a;
+}
+
+.h1
+{
+    font-family: Staatliches;
+    color: var(--main-color);
+    border-top: 3px solid var(--main-color);
+    border-bottom: 3px solidvar(--main-color);
+    padding-top: 5px;
+    padding-bottom: 5px;
+    margin-bottom: 15px;
+    margin-top: 0px;
+    line-height: 1em;
+}
+
+.p
+{
+    font-family: Helvetica;
+    color: #7e7e7e;
+    margin-bottom: 45px;
+    font-size: 10px;
+}
+
+.href
+{
+    font-family: Helvetica;
+    text-decoration: none;
+}
+
+.mixlink
+{
+    line-height: 16px;
+    font-weight: 600;
+    font-size: 14px;
+    margin-bottom: 0;
+    margin-top: 0;
+    font-family: Helvetica, Arial, sans-serif;
+}
+
+.amixlink
+{
+    font-family: Helvetica;
+    color: #9d9d9d;
+    line-height: 1.6em;
+    font-weight: 600;
+    font-size: 14px;
+    text-decoration: none;
+    background: #111111;
+    display: inline-flex;
+    margin-top: 2px;
+    margin-bottom: 2px;
+    padding: 2px 10px;
+    border-radius: 20px;
+}
+
+.amixlink:hover
+{
+    font-family: Helvetica;
+    color: #000;
+    line-height: 1.6em;
+    font-weight: 600;
+    font-size: 14px;
+    background: var(--main-color);
+}
+
+.body
+{
+    width: 80%;
+    padding-left: 10%;
+    padding-right: 10%;
+    background-color: #222222;
+}
+
+.mixsections
+{
+    font-family: Staatliches;
+    font-weight: 900;
+    font-size: 16px;
+    color: #787878;
+    padding: 5px;
+    margin-top: 2%;
+    margin-bottom: 5px;
+    margin-right: 15px;
+    border: solid 3px #787878;
+    text-decoration: none;
+}
+
+.hotmixlogo
+{
+    width: 150px;
+    padding-bottom: 0px;
+    padding-left: 10px;
+    padding-top: 10px;
+}
+
+.h2
+{
+    font-family: Staatliches;
+    font-size: 24px;
+    color: #4c4c4c;
+    font-weight: 200;
+    border-bottom: 2px solid #4c4c4c;
+    margin-bottom: 0px;
+}
+
+.header
+{
+    width: 100%;
+    background-image: url('/img/header.png');
+    max-height: 185px;
+}
+
+.footer
+{
+    width: 100%;
+    height: 250px;
+    border-top: 2px solid var(--main-color);
+    float: left;
+    clear: both;
+}
+
+.djsection
+{
+    font-family: Staatliches;
+    font-size: 18px;
+    text-decoration: inherit;
+    color: var(--main-color);
+}
+
+.djsectionmenu
+{
+    font-family: Staatliches;
+    font-size: 33px;
+    color: var(--main-color);
+    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: Staatliches;
+    font-size: 33px;
+    color: var(--main-color);
+    line-height: 1em;
+    margin-bottom: 0px;
+    margin-top: 0px;
+    padding-top: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-bottom: 5px;
+}
+
+.djsection:hover
+{
+    background-color: #000;
+}
+
+.h2
+{
+    font-family: Staatliches;
+    color: var(--main-color);
+    font-size: 24px;
+    padding-top: 5px;
+    border-bottom: 2px solid var(--main-color);
+}
+
+.homeheader
+{
+    background-image: url('/img/header.png');
+    background-repeat: no-repeat;
+    padding-bottom: 20px;
+}
+
+.bottomimg
+{
+}
+
+.imglink
+{
+    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;
+    padding-left: 2.5%;
+    padding-right: 2.5%;
+    width: 15%;
+}
+
+/* Clear floats after image containers */
+
+.row::after
+{
+    content: "";
+    clear: both;
+    display: table;
+}
+
+@media screen and (max-width: 768px)
+{
+    .column
+    {
+        padding-left: 5%;
+        padding-right: 5%;
+        width: 40%;
+    }
+    .h2
+    {
+        font-size: 14px;
+    }
+    .footer
+    {
+        margin-top: 15%;
+    }
+}
+
+@media screen and (max-width: 500px)
+{
+    .column
+    {
+        padding-left: 0%;
+        padding-right: 5%;
+        width: 45%;
+    }
+}
+
+.profileimg
+{
+    overflow: hidden;
+    height: auto;
+    width: 30%;
+}
+
+.profilesection
+{
+    width: 100%;
+    overflow: hidden;
+    margin-bottom: 2.5%;
+    background-color: var(--main-color);
+}
+
+.image_collage
+{
+    line-height: 0;
+    -webkit-column-count: 5;
+    -webkit-column-gap: 0px;
+    -moz-column-count: 5;
+    -moz-column-gap: 0px;
+    column-count: 5;
+    column-gap: 0px;
+}
+
+.image_collage img
+{
+    width: 100% !important;
+    height: auto !important;
+}
+
+@media (max-width: 1200px)
+{
+    .image_collage
+    {
+        -moz-column-count: 4;
+        -webkit-column-count: 4;
+        column-count: 4;
+    }
+}
+
+@media (max-width: 1000px)
+{
+    .image_collage
+    {
+        -moz-column-count: 3;
+        -webkit-column-count: 3;
+        column-count: 3;
+    }
+}
+
+@media (max-width: 800px)
+{
+    .image_collage
+    {
+        -moz-column-count: 2;
+        -webkit-column-count: 2;
+        column-count: 2;
+    }
+}
+
+@media (max-width: 400px)
+{
+    .image_collage
+    {
+        -moz-column-count: 1;
+        -webkit-column-count: 1;
+        column-count: 1;
+    }
+}
+
+.alphabetpanel
+{
+    width: 100%;
+    float: left;
+    border-top: 1px dotted;
+    background-repeat: repeat;
+    overflow: hidden;
+    height: 100%;
+}
+
+@media (min-width:500px)
+{
+    .alphabetimg
+    {
+        position: relative;
+        float: none;
+        top: 5px;
+        left: 5px;
+        height: 100px;
+    }
+}
+
+.alphabetgrid
+{
+    width: 100%;
+    margin-top: 40px;
+}
+
+.latest
+{
+    position: relative;
+    clear: both;
+}
+
+.latestdiv
+{
+    width: 100%;
+    position: relative;
+    clear: both;
+    float: left;
+}
+
+.alphabet
+{
+    width: 100%;
+    margin-bottom: 40px;
+    float: left;
+    clear: both;
+    margin-top: 20px;
+}
+
+.sponsors
+{
+    margin-top: 20px;
+    clear: both;
+    float: left;
+}
+
+.linkimg:hover
+{
+    filter: invert(70%);
+}
+
+@media (max-width:499px)
+{
+    .djsectionmenu500
+    {
+        height: 70px;
+        overflow: hidden;
+        min-width: 60px;
+        width: 50%;
+    }
+    .alphabetimg500
+    {
+        height: 100px;
+    }
+    .alphabetpanel480down
+    {
+        height: 70px;
+        overflow: hidden;
+        width: 100px;
+    }
+}
+
+@media (max-width:767px)
+{
+    .h1mobile
+    {
+        font-size: 18px;
+    }
+}

code/views/layout.etlua

@@ -8,7 +8,7 @@
   </title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="/static/style.css">
+  <link rel="stylesheet" href="/static/<%= titles.style %>">
 </head>
     <body class="body">
         <h1 class="h1 h1mobile">Tons Of Mix - Downloads & Streams (right click + Save link as... for downloads)<br>