1
0
Fork 0

wipe CSS to focus on a release grid

This commit is contained in:
dece 2023-09-14 00:19:12 +02:00
parent c23ff4211a
commit 9078e64901
3 changed files with 161 additions and 162 deletions

View file

@ -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 { 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: 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-align: center;
text-shadow: 0px 0px 4px #000000;
} }
nav .link { .release-infos .title {
padding: 0.3em 1em; margin: 0;
margin: 0 0.3em; font-size: 1.5em;
color: inherit;
text-decoration: none;
text-transform: uppercase;
transition: 0.3s;
} }
nav .link:nth-child(1):hover { background-color: #ff6188; } .release-infos .contributors,
nav .link:nth-child(2):hover { background-color: #a9dc76; } .release-infos .extras {
nav .link:nth-child(3):hover { background-color: #fc9867; } margin: 0;
nav .link:nth-child(4):hover { background-color: #ab9df2; } font-size: 1.2em;
nav .link:nth-child(5):hover { background-color: #78dce8; }
/* Content */
#content {
margin: 10px;
} }
#content a, @media screen and (min-width: 992px) {
#content a:visited, .release-infos-slab {
#content a:active { top: 0;
color: #929292; margin: 10%;
text-decoration: none; width: 80%;
transition: .5s; height: 80%;
border-radius: 1em;
opacity: 0;
transition: opacity 0.1s linear;
background: rgba(0, 0, 0, 0.8);
} }
#content a:hover { .release-infos-slab:hover {
color: #c9c9c9; opacity: 1;
} }
#content h1, .release-infos {
#content h2, padding: 2em;
#content h3, height: 80%;
#content h4 {
font-weight: bold;
} }
#content img { .release-infos .title {
max-width: 800px; font-size: 2em;
margin: auto;
} }
.release-infos .contributors,
/* Extras */ .release-infos .extras {
font-size: 1.4em;
.grayscale { }
/* Firefox 10+ (& Android) */
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
/* IE 6-9 */
filter: gray;
/* Chrome 19+, Safari 6+ (& iOS), Opera 15+ */
-webkit-filter: grayscale(100%);
} }
.grey-line { @keyframes fadeColor {
border-color: #929292 -moz-use-text-color -moz-use-text-color; 0% { color: var(--idre-white); }
border-right: 0px none; 16% { color: var(--idre-salmon); }
border-style: solid none none; 32% { color: var(--idre-green); }
border-width: 1px 0px 0px; 48% { color: var(--idre-orange); }
margin-bottom: 20px; 64% { color: var(--idre-purple); }
margin-top: 20px; 80% { color: var(--idre-cyan); }
100% { color: var(--idre-white); }
}
.release-infos .contributors {
animation: fadeColor 10s infinite;
} }

View file

@ -1,38 +1,35 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load static %} {% load static %}
{% block stylesheets %}
<link rel="stylesheet" href="{% static 'label/css/releases.css' %}" />
{% endblock %}
{% block content %} {% block content %}
<div class="release-list">
{% for release in releases %} {% for release in releases %}
<div class="release"> <div class="release">
<div <img
class="cover" src="{{ MEDIA_URL }}{{ release.cover }}"
style="background-image: url('{{ MEDIA_URL }}{{ release.cover }}')" alt="release cover for {{ release.title }}"
onclick='window.location="{% url 'release' release.tag|lower %}"'> class="release-cover">
</div>
<div class="infos"> <div class="release-infos-slab">
<p class="title"> <div class="release-infos">
<a href="{% url 'release' release.tag|lower %}">{{ release.title }}</a> <h1 class="title">
{% if release.release_type == 1 %}(EP){% endif %} {{ release.title }}
{% if release.release_type == 2 %}(Split){% endif %} {% if release.release_type == 1 %}EP{% endif %}
{% if release.release_type == 3 %}(Demo){% endif %} {% if release.release_type == 2 %}Split{% endif %}
</p> {% if release.release_type == 3 %}Demo{% endif %}
</h1>
<p class="contributors"> <p class="contributors">
{% for contrib in release.contribs %} {% for contrib in release.contribs %}
<a href="{% url 'artist' contrib.slug %}">{{ contrib.name }}</a>{% if not forloop.last %},{% endif %} {{ contrib.name }}{% if not forloop.last %},{% endif %}
{% endfor %} {% endfor %}
</p> </p>
<p class="extras"> <p class="extras">
{{ release.tag }} - {{ release.year }} {{ release.tag }} — {{ release.year }}
</p> </p>
</div> </div>
</div>
</div> </div>
{% endfor %} {% endfor %}
</div>
{% endblock %} {% endblock %}

View file

@ -4,50 +4,25 @@
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}Idiocrates Records{% endblock %}</title> <title>{% block title %}Idiocrates Records{% endblock %}</title>
<link <link rel="icon" href="{% static 'img/favicon.ico' %}" sizes="any" />
rel="icon" <link rel="stylesheet" href="{% static 'css/base.css' %}" />
href="{% static 'img/favicon.ico' %}" <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato" />
sizes="any"
/>
<link
rel="stylesheet"
href="{% static 'css/base.css' %}"
/>
<link
rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Lato"
/>
{% block stylesheets %}{% endblock %} {% block stylesheets %}{% endblock %}
{% block scripts %}{% endblock %} {% block scripts %}{% endblock %}
</head> </head>
<body> <body>
<div id="global"> <main>
<header>
<a href="/"><img src="{% static 'img/header.jpg' %}" alt="khe" /></a>
</header>
<nav>
<a class="link" href="/news/">news</a>
<a class="link" href="/artists/">artists</a>
<a class="link" href="/releases/">releases</a>
<a class="link" href="/videos/">videos</a>
<a class="link" href="/about/">about</a>
</nav>
<section id="content">
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</section> </main>
</div>
</body> </body>
</html> </html>