diff --git a/idre/static/css/base.css b/idre/static/css/base.css index f713ff0..7e4ce31 100644 --- a/idre/static/css/base.css +++ b/idre/static/css/base.css @@ -1,105 +1,132 @@ -/* General */ +:root { + --idre-white: #f4f4f4; + --idre-salmon: #ff6188; + --idre-green: #a9dc76; + --idre-orange: #fc9867; + --idre-purple: #ab9df2; + --idre-cyan: #78dce8; +} + +@font-face { + font-family: 'Neuton'; + src: url('/static/label/Neuton-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} body { - background-color: white; - color: #393939; - font-family: "Lato", sans-serif; -} - -#global { - max-width: 1000px; - margin: auto; - margin-top: 20px; - margin-bottom: 20px; - padding: 10px 10px 10px 10px; -} - - -/* Header */ - -header { - margin: 0px; - margin-bottom: 6px; - -} - -header img { - max-width: 100%; - border-radius: 5px; -} - - -/* Nav bar */ - -nav { margin: 0; - margin-bottom: 2em; + width: 100%; + background-color: black; + color: var(--idre-white); + font-family: "Lato", "Open Sans", "Arial", sans-serif; + font-size: 16px; +} + +.release-list { + display: flex; + flex-flow: row wrap; + width: 100%; +} + +.release { + position: relative; + margin: 0; + width: 100%; + height: auto; +} + +.release img { + margin: 0; + width: 100%; + height: 100%; + object-fit: cover; +} + +@media screen and (min-width: 576px) { + .release { + width: 50%; + } +} + +@media screen and (min-width: 992px) { + .release { + width: 25%; + } +} + +.release-infos-slab { + position: absolute; + bottom: 0; + right: 0; + width: 100%; + background: rgba(0, 0, 0, 0.4); +} + +.release-infos { + position: relative; + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + padding: 1em; + font-family: "Neuton", serif; text-align: center; + text-shadow: 0px 0px 4px #000000; } -nav .link { - padding: 0.3em 1em; - margin: 0 0.3em; - color: inherit; - text-decoration: none; - text-transform: uppercase; - transition: 0.3s; +.release-infos .title { + margin: 0; + font-size: 1.5em; } -nav .link:nth-child(1):hover { background-color: #ff6188; } -nav .link:nth-child(2):hover { background-color: #a9dc76; } -nav .link:nth-child(3):hover { background-color: #fc9867; } -nav .link:nth-child(4):hover { background-color: #ab9df2; } -nav .link:nth-child(5):hover { background-color: #78dce8; } - - -/* Content */ - -#content { - margin: 10px; +.release-infos .contributors, +.release-infos .extras { + margin: 0; + font-size: 1.2em; } -#content a, -#content a:visited, -#content a:active { - color: #929292; - text-decoration: none; - transition: .5s; +@media screen and (min-width: 992px) { + .release-infos-slab { + top: 0; + margin: 10%; + width: 80%; + height: 80%; + border-radius: 1em; + opacity: 0; + transition: opacity 0.1s linear; + background: rgba(0, 0, 0, 0.8); + } + + .release-infos-slab:hover { + opacity: 1; + } + + .release-infos { + padding: 2em; + height: 80%; + } + + .release-infos .title { + font-size: 2em; + } + + .release-infos .contributors, + .release-infos .extras { + font-size: 1.4em; + } } -#content a:hover { - color: #c9c9c9; +@keyframes fadeColor { + 0% { color: var(--idre-white); } + 16% { color: var(--idre-salmon); } + 32% { color: var(--idre-green); } + 48% { color: var(--idre-orange); } + 64% { color: var(--idre-purple); } + 80% { color: var(--idre-cyan); } + 100% { color: var(--idre-white); } } -#content h1, -#content h2, -#content h3, -#content h4 { - font-weight: bold; -} - -#content img { - max-width: 800px; - margin: auto; -} - - -/* Extras */ - -.grayscale { - /* Firefox 10+ (& Android) */ - filter: url("data:image/svg+xml;utf8,#grayscale"); - /* IE 6-9 */ - filter: gray; - /* Chrome 19+, Safari 6+ (& iOS), Opera 15+ */ - -webkit-filter: grayscale(100%); -} - -.grey-line { - border-color: #929292 -moz-use-text-color -moz-use-text-color; - border-right: 0px none; - border-style: solid none none; - border-width: 1px 0px 0px; - margin-bottom: 20px; - margin-top: 20px; +.release-infos .contributors { + animation: fadeColor 10s infinite; } diff --git a/label/templates/label/releases.html b/label/templates/label/releases.html index 79c54ed..42a22cc 100644 --- a/label/templates/label/releases.html +++ b/label/templates/label/releases.html @@ -1,38 +1,35 @@ {% extends "base.html" %} {% load static %} - -{% block stylesheets %} - -{% endblock %} - - {% block content %} -{% for release in releases %} -
-
-
+
+ {% for release in releases %} +
+ release cover for {{ release.title }} -
-

- {{ release.title }} - {% if release.release_type == 1 %}(EP){% endif %} - {% if release.release_type == 2 %}(Split){% endif %} - {% if release.release_type == 3 %}(Demo){% endif %} -

-

- {% for contrib in release.contribs %} - {{ contrib.name }}{% if not forloop.last %},{% endif %} - {% endfor %} -

-

- {{ release.tag }} - {{ release.year }} -

-
+
+
+

+ {{ release.title }} + {% if release.release_type == 1 %}EP{% endif %} + {% if release.release_type == 2 %}Split{% endif %} + {% if release.release_type == 3 %}Demo{% endif %} +

+

+ {% for contrib in release.contribs %} + {{ contrib.name }}{% if not forloop.last %},{% endif %} + {% endfor %} +

+

+ {{ release.tag }} — {{ release.year }} +

+
+
-
-{% endfor %} +
+ {% endfor %} +
{% endblock %} diff --git a/templates/base.html b/templates/base.html index f5ae1e7..7b2a5bb 100644 --- a/templates/base.html +++ b/templates/base.html @@ -3,51 +3,26 @@ {% load static %} - - - {% block title %}Idiocrates Records{% endblock %} + + + - - - + {% block title %}Idiocrates Records{% endblock %} - {% block stylesheets %}{% endblock %} - {% block scripts %}{% endblock %} - - + + + -
+ {% block stylesheets %}{% endblock %} + {% block scripts %}{% endblock %} + + -
- khe -
+
+ {% block content %} - + {% endblock %} +
-
- {% block content %} - - {% endblock %} -
- -
- - +