wipe CSS to focus on a release grid
This commit is contained in:
parent
c23ff4211a
commit
9078e64901
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 %}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue