all repos — grimoire @ 2760e9d99a9224302707e6e2e38f471649b16885

dead simple icecast frontend 

refine markup structure and iterate style
Iris Lightshard nilix@nilfm.cc
PGP Signature 
-----BEGIN PGP SIGNATURE-----

iHUEABYKAB0WIQT/foVVmI9pK13hPWFohAcXSWbK8wUCZyLkWwAKCRBohAcXSWbK
8yCAAQDoocLaO22U4uTfUUtZ8iueKYZEtIVb/5uFPnoFbTEKhAD7Bm4VyY0pEIXp
Lfh42+qxOqPGyWmTYsTF/9LHnarwCgE=
=09EZ
-----END PGP SIGNATURE-----
commit

2760e9d99a9224302707e6e2e38f471649b16885

parent

24591be57a83750906dd02999cf4c3416ca32fed

2 files changed, 47 insertions(+), 19 deletions(-)

jump to
M static/style.css → static/style.css 
@@ -12,10 +12,10 @@ }
 
 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 {
   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 {
+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.offline a {
-  color: grey;
+ul li .stationurl {
+  border: solid 1px grey;
+  padding: 1ch;
+  text-align: left;
+  font-weight: normal;
+  font-size: 85%;
 }
 
-ul li.offline a::after {
-  content: " (offline)"
+ul li .stationurl::before {
+  content: "» ";
 }
 
-ul li a {
-  display:inline-block;
-  padding: 2em;
-}+ul li.offline .stationurl::before {
+  content: "× ";
+}
+
+ul li.offline .stationurl {
+  color: grey50;
+}
+
+ul li.online .stationurl {
+  color: #1f9b92;
+} 
+
+ul li.offline a {
+  color: grey;
+}
+
M templates/radio.html → templates/radio.html 
@@ -17,10 +17,10 @@ <header><h1>{{$title}}</h1></header>
   <main>
     <ul>
     {{range $name, $stationUrl := $stations}}
-    {{ if gt (($sentry).GetStatus $stationUrl) 400 }}
-    <li class="offline"><a href="#">{{$name}}</a></li>
+    {{ if gt (($sentry).GetStatus $stationUrl) 399 }}
+    <li class="offline"><span class="station">{{$name}} (offline)</span><a class="stationurl" href="{{$stationUrl}}">{{$stationUrl}}</a></li>
     {{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}}
     </ul>