em/mixtape
1
0
Fork 0
Code Issues Pull Requests Actions Activity

Basic structure for song-list
All checks were successful
Build / build (push) Successful in 5m30s
Details

Browse Source
This commit is contained in:
Emil Miler 2024-02-06 18:08:40 +01:00
parent 9a64cb55a6
commit 1ba00b087d
2 changed files with 69 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
sass/style.scss
View File

@ -1,5 +1,48 @@
$width-mobile: 900px;
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
main.songs {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 1em;
max-width: 50em;
margin: 0 auto;
padding: 1em;
@media only screen and (max-width: $width-mobile) {
grid-template-columns: 1fr;
}
.filters {
// ...
}
.song-list {
display: grid;
gap: 1em;
&>div {
display: flex;
justify-content: space-between;
.meta .title {
font-weight: bold;
}
.links {
display: flex;
gap: .5em;
}
}
}
}
iframe.song {

32
templates/index.html
View File

@ -8,13 +8,33 @@
<link rel="icon" href="favicon.svg">
</head>
<body>
{% block content %}
<ul>
{% block content %}
<main class="songs">
<section class="filters">
FILTERS
</section>
<section class="song-list">
{% for song in section.pages %}
<li><a href="{{ song.permalink }}">{{ song.title }}</a></li>
<div>
<div class="meta">
<div class="title">{{ song.title }}</div>
{% if song.taxonomies["artist"] %}
<div class="artist">{{ song.taxonomies["artist"][0] }}</div>
{% endif %}
</div>
<div class="links">
<a href="{{ song.permalink }}">html</a>
{% for asset in song.assets %}
{% if asset is matching(song.slug~"[.](pdf)$") %}
<a href="{{ asset }}">pdf</a>
{% endif %}
{% endfor %}
</ul>
{% endblock %}
{% block script %}{% endblock %}
</div>
</div>
{% endfor %}
</section>
</main>
{% endblock %}
{% block script %}{% endblock %}
</body>
</html>