GopherProxy

	youtube: remove mode parameter, use CSS prefers-color-scheme - frontends - fron…
	Log
	Files
	Refs
	README
	LICENSE
	---
	commit 596b6dd0de7c2971acf63b959441ad53af008d85
	parent acdf648b5e2cbdd1176045ec8e184103bd8f6f1c
	Author: Hiltjo Posthuma <[email protected]>
	Date: Mon, 20 Jul 2020 21:51:00 +0200

	youtube: remove mode parameter, use CSS prefers-color-scheme

	Use system dark/light mode.

	Diffstat:
	M youtube/cgi.c \| 41 ++---------------------------…
	A youtube/css/style.css \| 63 +++++++++++++++++++++++++++++…

	2 files changed, 65 insertions(+), 39 deletions(-)
	---
	diff --git a/youtube/cgi.c b/youtube/cgi.c
	@@ -21,7 +21,7 @@ extern char **environ;
	static int curpage = 1;

	/* CGI parameters */
	-static char rawsearch[4096], search[4096], mode[16], order[16], page[64];
	+static char rawsearch[4096], search[4096], order[16], page[64];
	static char chan[1024], user[1024];

	void
	@@ -76,23 +76,6 @@ parsecgi(void)
	}
	}

	- /* mode */
	- if ((p = getparam(query, "m"))) {
	- if (decodeparam(mode, sizeof(mode), p) != -1) {
	- /* fixup first character (label) for matching */
	- if (mode[0])
	- mode[0] = tolower((unsigned char)mode[0]);
	- /* allowed themes */
	- if (strcmp(mode, "light") &&
	- strcmp(mode, "dark") &&
	- strcmp(mode, "pink") &&
	- strcmp(mode, "templeos"))
	- mode[0] = '\0';
	- }
	- }
	- if (!mode[0])
	- snprintf(mode, sizeof(mode), "light");
	-
	/* search */
	if ((p = getparam(query, "q"))) {
	if ((len = strcspn(p, "&")) && len + 1 < sizeof(rawsearch)) {
	@@ -135,19 +118,13 @@ render(struct search_response *r)
	}
	printf(" sorted by %s</title>\n", order);
	OUT(
	- "<link rel=\"stylesheet\" href=\"css/");
	- xmlencode(mode);
	- OUT(
	- ".css\" type=\"text/css\" media=\"screen\" />\n"
	+ "<link rel=\"stylesheet\" href=\"css/style.css\" type=\"text/c…
	"<link rel=\"icon\" type=\"image/png\" href=\"/favicon.png\" /…
	"<meta content=\"width=device-width\" name=\"viewport\" />\n"
	"</head>\n"
	"<body class=\"search\">\n"
	"<form method=\"get\" action=\"\">\n");

	- OUT("<input type=\"hidden\" name=\"m\" value=\"");
	- xmlencode(mode);
	- OUT("\" />\n");
	if (chan[0]) {
	OUT("<input type=\"hidden\" name=\"chan\" value=\"");
	xmlencode(chan);
	@@ -183,14 +160,6 @@ render(struct search_response *r)
	printf(" <option value=\"views\"%s>Views</optio…
	OUT(
	" </select>\n"
	- " <label for=\"m\">Style: </label>\n");
	-
	- if (!strcmp(mode, "light"))
	- OUT("\t\t<input type=\"submit\" name=\"m\" value=\"Dark\" titl…
	- else
	- OUT("\t\t<input type=\"submit\" name=\"m\" value=\"Light\" tit…
	-
	- OUT(
	" </td>\n"
	"</tr>\n"
	"</table>\n"
	@@ -261,8 +230,6 @@ render(struct search_response *r)
	OUT("user=");
	xmlencode(videos[i].userid);
	}
	- OUT("&m=");
	- xmlencode(mode);
	OUT("\">");
	xmlencode(videos[i].channeltitle);
	OUT("</a>");
	@@ -315,8 +282,6 @@ render(struct search_response *r)
	OUT("&page=");
	snprintf(tmp, sizeof(tmp), "%d", curpage - 1);
	xmlencode(tmp);
	- OUT("&m=");
	- xmlencode(mode);
	OUT("&o=");
	xmlencode(order);
	OUT("\" rel=\"prev\" accesskey=\"p\">← pr…
	@@ -330,8 +295,6 @@ render(struct search_response *r)
	OUT("&page=");
	snprintf(tmp, sizeof(tmp), "%d", curpage + 1);
	xmlencode(tmp);
	- OUT("&m=");
	- xmlencode(mode);
	OUT("&o=");
	xmlencode(order);
	OUT("\" rel=\"next\" accesskey=\"n\">next →</a>\n…
	diff --git a/youtube/css/style.css b/youtube/css/style.css
	@@ -0,0 +1,63 @@
	+body {
	+ background-color: #fff;
	+ color: #000;
	+ max-width: 80ex;
	+ margin: 0 auto;
	+ padding: 3px;
	+}
	+form {
	+ margin: 0;
	+}
	+.nowrap {
	+ whitespace: no-wrap;
	+}
	+.a-r {
	+ text-align: right;
	+}
	+table.videos,
	+table.search,
	+table.search .input,
	+input.search {
	+ width: 100%;
	+}
	+table.videos {
	+ border-collapse: collapse;
	+}
	+table.videos tr td {
	+ vertical-align: top;
	+ padding: 0 3px;
	+}
	+table.videos tr.v:hover td {
	+ background-color: #eee;
	+}
	+td.thumb {
	+ width: 120px;
	+ text-align: center;
	+}
	+td.thumb img {
	+ height: 90px;
	+}
	+a {
	+ color: #000;
	+}
	+hr {
	+ height: 1px;
	+ border: 0;
	+ border-bottom: 1px solid #777;
	+}
	+/* dark mode */
	+@media (prefers-color-scheme: dark) {
	+ body {
	+ background-color: #000;
	+ color: #ccc;
	+ }
	+ table.videos tr.v:hover td {
	+ background-color: #111;
	+ }
	+ a {
	+ color: #fff;
	+ }
	+ hr {
	+ border-color: 1px solid #222;
	+ }
	+}