css fix added <p> in the li in music.html made li and ul work on flexbox idea: replace ul with a div and place the elements in a grid layout
Julian julian.sz.orlowski@gmail.com
Sat, 13 Sep 2025 13:58:53 +0200
2 files changed,
29 insertions(+),
24 deletions(-)
M
static/music.css
→
static/music.css
@@ -1,28 +1,33 @@
body { - background-color: #1e2021; - font-family: Arial, sans-serif; - color: #c8c3bc; - line-height: 1.6; - justify-content: center; - align-items: flex-start; - min-height: 100vh; - padding: 15em; - padding-top: 2em; - padding-bottom: 2em; - font-size: 1em; + font-family: Arial, sans-serif; + color: #c8c3bc; + line-height: 1.6; + + background-color: #1e2021; + + justify-content: center; + align-items: flex-start; + + min-height: 100vh; + padding: 2em; +} + +ul { + display: flex; + flex-direction: column; + gap: 20px; + + list-style-type: none; + padding: 0; } - ul { - list-style-type: none; - padding: 0; - } +li { + display: flex; + align-items: center; - li { - display: flex; - align-items: center; - margin-bottom: 10px; - } + gap: 20px; +} - li img { - margin-right: 10px; - } +li p { + margin: 0; +}
M
templates/music.html
→
templates/music.html
@@ -18,7 +18,7 @@ <ul>
{{range .Releases}} <li> <img src="{{.Note}}" alt="Album Cover" width="50" /> - {{.Name}} - {{.Artist}} + <p>{{.Name}} - {{.Artist}}</p> </li> {{end}} </ul>