radio

commit 3693694781dddc2648002c9f1fded0f5e477b0de
parent 31e13818a27bc2c2eefc15379033414b8bee433d
Author: libredev <libredev@ircforever.org>
Date:   Tue,  3 Jan 2023 22:18:19 +0530

fix html and css

Diffstat:
M
main.c
 | 
16
+++++++++-------
M
style.css
 | 
40
+++++++++++++++++++---------------------

2 files changed, 28 insertions(+), 28 deletions(-)
diff --git a/main.c b/main.c
@@ -126,6 +126,7 @@ icestats_print(struct icestats *s)
 	printf("<tr><td> Server Start		</td><td> %s </td></tr>\n", s->server_start);
 	/* printf("<tr><td> server_start_iso8601	</td><td> %s </td></tr>\n", s->server_start_iso8601); */
 	puts("</table>");
+	puts("<hr>");
 }
 
 void
@@ -179,15 +180,14 @@ void
 source_print(struct source *s)
 {
 
-	puts("<div class=\"stream\">");
+	puts("<div class='stream'>");
 
 	/* thumbnail and player */
-	puts("<div>");
-	puts("<img src=\"music.svg\" alt=\"music logo\" width=\"256\" height=\"256\"></a>");
-	puts("<audio controls>");
-	puts("<source src=\"https://theinterlude.live/autodj\" type=\"application/ogg\">");
-	puts("Your browser does not support the audio element.");
-	puts("</audio>");
+	puts("<div class='player'>");
+	puts("<video controls poster='music.svg'>");
+	puts("<source src='https://theinterlude.live/autodj' type='application/ogg'>");
+	puts("Your browser does not support the video tag.");
+	puts("</video>");
 	puts("</div>");
 
 	/* info */
@@ -217,6 +217,8 @@ source_print(struct source *s)
 	puts("</table>");
 
 	puts("</div>");
+
+	puts("<hr>");
 }
 
 void
diff --git a/style.css b/style.css
@@ -40,6 +40,10 @@ li a.active {
 	background-color: dodgerblue;
 }
 
+table {
+	margin: 10px;
+}
+
 table.about {
 	margin-left: auto;
 	margin-right: auto;
@@ -54,44 +58,38 @@ tr:nth-child(odd) {
 	background-color: gainsboro;
 }
 
-
-.stream {
-	display: table;
-	margin-right: auto;
-	margin-left: auto;
-}
-
-.stream div {
+.stream .player {
+	position: relative;
+	margin-left: calc(45% - 256px);
+	margin-right: 1%;
+	width: 256px;
+	height: 256px;
 	float: left;
 	border: 1px solid darkgrey;
 }
 
-.stream div img {
-	margin-left: auto;
-	margin-right: auto;
-	display: block;
+.stream .player video {
+	width: 256px;
+	height: 256px;
 }
 
-.stream div audio {
-	margin-left: auto;
-	margin-right: auto;
-	display: block;
+hr {
+	margin: 20px 0px;
 }
 
-@media screen and (max-width: 500px) {
+@media screen and (max-width: 600px) {
 	li, li:last-child {
 		float: none;
 	}
 
-	.stream div {
+	.stream .player, .stream table {
+		margin-left: auto;
+		margin-right: auto;
 		float: none;
 	}
 }
 
-
 p.footer {
-	border: 1px solid darkgrey;
-	padding: 10px;
 	text-align: center;
 	color: dimgrey;
 }