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 {
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,<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 {
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;
}

View file

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

View file

@ -3,51 +3,26 @@
{% load static %}
<html>
<head>
<meta charset="utf-8" />
<title>{% block title %}Idiocrates Records{% endblock %}</title>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
rel="icon"
href="{% static 'img/favicon.ico' %}"
sizes="any"
/>
<link
rel="stylesheet"
href="{% static 'css/base.css' %}"
/>
<link
rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Lato"
/>
<title>{% block title %}Idiocrates Records{% endblock %}</title>
{% block stylesheets %}{% endblock %}
{% block scripts %}{% endblock %}
</head>
<body>
<link rel="icon" href="{% static 'img/favicon.ico' %}" sizes="any" />
<link rel="stylesheet" href="{% static 'css/base.css' %}" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato" />
<div id="global">
{% block stylesheets %}{% endblock %}
{% block scripts %}{% endblock %}
</head>
<body>
<header>
<a href="/"><img src="{% static 'img/header.jpg' %}" alt="khe" /></a>
</header>
<main>
{% block content %}
<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>
{% endblock %}
</main>
<section id="content">
{% block content %}
{% endblock %}
</section>
</div>
</body>
</body>
</html>