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 {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue