From afdbe6ba0e28fdb972cf41ea39369b9449796d23 Mon Sep 17 00:00:00 2001 From: dreamer Date: Fri, 7 Nov 2025 12:00:01 +0100 Subject: [PATCH] custom style --- code/app.lua | 9 +- code/static/hotmixstyle.css | 414 +++++++++++++++++++++++++++++++++++ code/static/panamastyle.css | 415 ++++++++++++++++++++++++++++++++++++ code/views/layout.etlua | 2 +- 4 files changed, 836 insertions(+), 4 deletions(-) create mode 100644 code/static/hotmixstyle.css create mode 100644 code/static/panamastyle.css diff --git a/code/app.lua b/code/app.lua index 5d61139..e2a2e27 100644 --- a/code/app.lua +++ b/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 diff --git a/code/static/hotmixstyle.css b/code/static/hotmixstyle.css new file mode 100644 index 0000000..8ee0f65 --- /dev/null +++ b/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; + } +} diff --git a/code/static/panamastyle.css b/code/static/panamastyle.css new file mode 100644 index 0000000..9e69809 --- /dev/null +++ b/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; + } +} diff --git a/code/views/layout.etlua b/code/views/layout.etlua index acf0598..b253b90 100644 --- a/code/views/layout.etlua +++ b/code/views/layout.etlua @@ -8,7 +8,7 @@ - +

Tons Of Mix - Downloads & Streams (right click + Save link as... for downloads)