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

Compare commits

base: em:ed49c101d3c1e9c8e909fb4c5f080139b0bf72eb
Branches Tags
em:master
em:capo
em:search
em:zola
em:actions
...
compare: em:1ba00b087d39f1824429558d5863cae61bf9f251
Branches Tags
em:master
em:capo
em:search
em:zola
em:actions

2 Commits
ed49c101d3 ... 1ba00b087d

Author SHA1 Message Date
Emil Miler
1ba00b087d Basic structure for song-list
All checks were successful
Build / build (push) Successful in 5m30s
Details
2024-02-06 18:08:40 +01:00
Emil Miler
9a64cb55a6 Song styling in SCSS 2024-02-06 18:04:50 +01:00
3 changed files with 93 additions and 22 deletions
Show Stats Expand all files Collapse all files

28
static/chordpro.css → sass/chordpro.scss
View File

@ -1,7 +1,15 @@
$col-white: #fff;
$col-black: #181818;
body { body {
margin: 0; margin: 0;
background-color: #d8d8d8; background-color: $col-white;
color: #181818; color: $col-black;
}
table {
white-space: nowrap;
} }
.song { .song {
@ -24,16 +32,16 @@ body {
.chorus { .chorus {
position: relative; position: relative;
}
.chorus:before { &:before {
content: ""; content: "";
position: absolute; position: absolute;
left: -1em; left: -1em;
display: block; display: block;
height: 100%; height: 100%;
width: 2px; width: 2px;
background-color: #181818; background-color: $col-black;
}
} }
.tab { .tab {
@ -46,21 +54,21 @@ body {
display: inline-block; display: inline-block;
padding: .25em .5em; padding: .25em .5em;
background-color: #bbb; background-color: #bbb;
color: #181818; color: $col-black;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { body {
background-color: #181818; background-color: $col-black;
color: #d8d8d8; color: $col-white;
} }
.chorus:before { .chorus:before {
background-color: #d8d8d8; background-color: $col-white;
} }
.comment { .comment {
background-color: #585858; background-color: #585858;
color: #d8d8d8; color: $col-white;
} }
} }

43
sass/style.scss
View File

@ -1,5 +1,48 @@
$width-mobile: 900px;
* {
box-sizing: border-box;
}
body { body {
margin: 0; 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 { iframe.song {

26
templates/index.html
View File

@ -9,11 +9,31 @@
</head> </head>
<body> <body>
{% block content %} {% block content %}
<ul> <main class="songs">
<section class="filters">
FILTERS
</section>
<section class="song-list">
{% for song in section.pages %} {% 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 %} {% endfor %}
</ul> </div>
</div>
{% endfor %}
</section>
</main>
{% endblock %} {% endblock %}
{% block script %}{% endblock %} {% block script %}{% endblock %}
</body> </body>