refine markup structure and iterate style
This commit is contained in:
parent
24591be57a
commit
2760e9d99a
2 changed files with 48 additions and 20 deletions
|
@ -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;
|
|
||||||
}
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue