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

Compare commits

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

No commits in common. "1ba00b087d39f1824429558d5863cae61bf9f251" and "ed49c101d3c1e9c8e909fb4c5f080139b0bf72eb" have entirely different histories.
1ba00b087d ... ed49c101d3

3 changed files with 22 additions and 93 deletions
Show Stats Expand all files Collapse all files

43
sass/style.scss
View File

@ -1,48 +1,5 @@
$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 {

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

@ -1,15 +1,7 @@
$col-white: #fff;
$col-black: #181818;
body { body {
margin: 0; margin: 0;
background-color: $col-white; background-color: #d8d8d8;
color: $col-black; color: #181818;
}
table {
white-space: nowrap;
} }
.song { .song {
@ -32,16 +24,16 @@ table {
.chorus { .chorus {
position: relative; position: relative;
}
&:before { .chorus: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: $col-black; background-color: #181818;
}
} }
.tab { .tab {
@ -54,21 +46,21 @@ table {
display: inline-block; display: inline-block;
padding: .25em .5em; padding: .25em .5em;
background-color: #bbb; background-color: #bbb;
color: $col-black; color: #181818;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { body {
background-color: $col-black; background-color: #181818;
color: $col-white; color: #d8d8d8;
} }
.chorus:before { .chorus:before {
background-color: $col-white; background-color: #d8d8d8;
} }
.comment { .comment {
background-color: #585858; background-color: #585858;
color: $col-white; color: #d8d8d8;
} }
} }

32
templates/index.html
View File

@ -8,33 +8,13 @@
<link rel="icon" href="favicon.svg"> <link rel="icon" href="favicon.svg">
</head> </head>
<body> <body>
{% block content %} {% block content %}
<main class="songs"> <ul>
<section class="filters">
FILTERS
</section>
<section class="song-list">
{% for song in section.pages %} {% for song in section.pages %}
<div> <li><a href="{{ song.permalink }}">{{ song.title }}</a></li>
<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 %}
</div>
</div>
{% endfor %} {% endfor %}
</section> </ul>
</main> {% endblock %}
{% endblock %} {% block script %}{% endblock %}
{% block script %}{% endblock %}
</body> </body>
</html> </html>