diff --git a/sass/style.scss b/sass/style.scss index dc43956..6a4ea09 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -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 { diff --git a/templates/index.html b/templates/index.html index 8a68041..8b29fd3 100644 --- a/templates/index.html +++ b/templates/index.html @@ -8,13 +8,33 @@ - {% block content %} - - {% endblock %} - {% block script %}{% endblock %} + + +{% endblock %} +{% block script %}{% endblock %}