diff --git a/static/style.css b/static/style.css index 73068a1..92633fe 100644 --- a/static/style.css +++ b/static/style.css @@ -12,10 +12,10 @@ body { header { background:url('/static/banner.gif'); - background-position:center; + background-position:center; background-size:cover; width: 100vw; - padding: 2ch; + padding: 4em; box-sizing: border-box; margin: auto; box-shadow: inset 0 0 0.5em 1em black; @@ -30,32 +30,60 @@ h1, li a { h1 { color: #fff !important; + font-shadow: 0 0 1em black; } ul { list-style: none;padding:0;margin: 0.5em; } ul li { - background-position:center; - background-size:cover; - box-shadow: inset 0 0 0.5em 1em black; - max-width: fit-content; + + max-width: 300px; + width:90vw; margin: auto; + margin-bottom: 2em; } -ul li.online { - background-image:url('/static/online.gif'); - +ul li a, ul li span { + display:block; } +ul li .station { + padding: 4em; +} + +ul li.online .station { + background-image:url('/static/online.gif'); + background-position:center; + background-size:cover; + box-shadow: inset 0 0 0.5em 1em black; + +} + +ul li .stationurl { + border: solid 1px grey; + padding: 1ch; + text-align: left; + font-weight: normal; + font-size: 85%; +} + +ul li .stationurl::before { + content: "» "; +} + +ul li.offline .stationurl::before { + content: "× "; +} + +ul li.offline .stationurl { + color: grey50; +} + +ul li.online .stationurl { + color: #1f9b92; +} + ul li.offline a { color: grey; } -ul li.offline a::after { - content: " (offline)" -} - -ul li a { - display:inline-block; - padding: 2em; -} \ No newline at end of file diff --git a/templates/radio.html b/templates/radio.html index 0f271b7..ea41e4c 100644 --- a/templates/radio.html +++ b/templates/radio.html @@ -17,10 +17,10 @@