refine markup structure and iterate style

This commit is contained in:
Iris Lightshard 2024-10-30 19:58:51 -06:00
parent 24591be57a
commit 2760e9d99a
Signed by: nilix
GPG key ID: 688407174966CAF3
2 changed files with 48 additions and 20 deletions

View file

@ -15,7 +15,7 @@ header {
background-position:center; background-position:center;
background-size:cover; background-size:cover;
width: 100vw; width: 100vw;
padding: 2ch; padding: 4em;
box-sizing: border-box; box-sizing: border-box;
margin: auto; margin: auto;
box-shadow: inset 0 0 0.5em 1em black; box-shadow: inset 0 0 0.5em 1em black;
@ -30,32 +30,60 @@ h1, li a {
h1 { h1 {
color: #fff !important; color: #fff !important;
font-shadow: 0 0 1em black;
} }
ul { list-style: none;padding:0;margin: 0.5em; } ul { list-style: none;padding:0;margin: 0.5em; }
ul li { ul li {
max-width: 300px;
width:90vw;
margin: auto;
margin-bottom: 2em;
}
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-position:center;
background-size:cover; background-size:cover;
box-shadow: inset 0 0 0.5em 1em black; box-shadow: inset 0 0 0.5em 1em black;
max-width: fit-content;
margin: auto;
} }
ul li.online { ul li .stationurl {
background-image:url('/static/online.gif'); 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 { ul li.offline a {
color: grey; color: grey;
} }
ul li.offline a::after {
content: " (offline)"
}
ul li a {
display:inline-block;
padding: 2em;
}

View file

@ -17,10 +17,10 @@
<main> <main>
<ul> <ul>
{{range $name, $stationUrl := $stations}} {{range $name, $stationUrl := $stations}}
{{ if gt (($sentry).GetStatus $stationUrl) 400 }} {{ if gt (($sentry).GetStatus $stationUrl) 399 }}
<li class="offline"><a href="#">{{$name}}</a></li> <li class="offline"><span class="station">{{$name}} (offline)</span><a class="stationurl" href="{{$stationUrl}}">{{$stationUrl}}</a></li>
{{else}} {{else}}
<li class="online"><a href="{{$stationUrl}}" target="_blank">{{$name}}</a></li> <li class="online"><a class="station" href="{{$stationUrl}}" target="_blank">{{$name}}</a><a class="stationurl" href="{{$stationUrl}}" target="_blank">{{$stationUrl}}</a></li>
{{end}} {{end}}
{{end}} {{end}}
</ul> </ul>