commit 250c1f7e6e490d767e7e4602be0ec75bfa3b168b
parent bb9bd15e6ee3eb11f36c89acd2ebec9a95fcf927
Author: aabacchus <ben@bvnf.space>
Date: Fri, 15 Jul 2022 17:56:01 +0100
style.css: make more readable on small screens
Now if the screen width is less than 1000px, #main content appears
full-width below #nav, rather than squished next to it.
Only problem: in directories with many entries (eg. Archive/blog/), all
the entries must be scrolled past to start reading content. Should there
be a :hover rule or button to make a dropdown menu visible? I find such
menus less obvious to use.
Diffstat:
2 files changed, 12 insertions(+), 0 deletions(-)
diff --git a/build-page.c b/build-page.c
@@ -20,6 +20,7 @@ char *html_header =
"<html>\n"
"<head>\n"
"\t<meta charset=\"utf-8\"/>\n"
+ "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/>\n"
"\t<title>KISS Community Wiki</title>\n"
"\t<link rel=\"icon\" href=\"data:image/gif;base64,R0lGODlhEAAQAPEDAAAAAP8AAP///wAAACH5BAX//wMALAAAAAAQABAAAAImnB+ni8kf4mNRzmbvqE5zPQDiqI3kBQhmqZ5TuqKtyMavCZT4UgAAOw==\"/>\n"
"\t<link rel=\"stylesheet\" type=\"text/css\" href=\"/style.css\"/>\n"
diff --git a/wiki/style.css b/wiki/style.css
@@ -96,6 +96,17 @@ h4 {
margin: 0;
padding: 0;
}
+@media (max-width: 999px) {
+ #nav {
+ float: none;
+ margin: 0;
+ width: 100%;
+ border: none;
+ }
+ #main {
+ margin: 0;
+ }
+}
@media (prefers-color-scheme: dark) {
body {
background-color: #000;
