X-Git-Url: https://git.wh0rd.org/?a=blobdiff_plain;f=style.css;h=cd59d15db87eb6642abdff02a224cb3e47862a86;hb=HEAD;hp=a77bb79105c1fd8f4901528958de58b38362145e;hpb=af998961c137d61009a39493c10bdd5c269f4aa9;p=nano-editor.git

diff --git a/style.css b/style.css
index a77bb79..cd59d15 100644
--- a/style.css
+++ b/style.css
@@ -1,22 +1,135 @@
+@charset "utf-8";
+
+/* Variables for light & dark modes. */
+
+:root {
+	--nano-content-bg-color: #fff;
+	--nano-content-fg-color: #440077;
+	--nano-inverted-bg-color: #407;
+	--nano-inverted-fg-color: #fff;
+	--nano-a-color: #407;
+	--nano-a-visited-color: #51188E;
+	--nano-a-active-color: #F00;
+	--nano-a-inverted-color: #fff;
+}
+
+@media (prefers-color-scheme: dark) {
+:root {
+	--nano-content-bg-color: #111;
+	--nano-content-fg-color: #cc88ff;
+	--nano-inverted-bg-color: #9200ff;
+	--nano-inverted-fg-color: #fff;
+	--nano-a-color: #c8f;
+	--nano-a-visited-color: #b7f;
+	--nano-a-active-color: #F00;
+	--nano-a-inverted-color: #fff;
+}
+}
+
 body {
-	color: #440077;
-	background-color: white;
+	color: var(--nano-content-fg-color);
+	background-color: var(--nano-content-bg-color);
 }
 .inverted {
-	color: white;
-	background-color: #440077;
+	color: var(--nano-inverted-fg-color);
+	background-color: var(--nano-inverted-bg-color);
 }
 
 a {
-	color: #440077;
+	color: var(--nano-a-color);
 }
 a:visited {
-	color: #51188E;
+	color: var(--nano-a-visited-color);
 }
 a:active {
-	color: #FF0000;
+	color: var(--nano-a-active-color);
 }
 
 .inverted a {
-	color: white;
+	color: var(--nano-a-inverted-color);
+}
+
+* {
+	box-sizing: border-box;
+}
+
+.onecolumn {
+	float: left;
+	width: 45%;
+	padding: 5%;
+}
+
+table {
+	border-spacing: 0px;
+	border-collapse: separate;
+}
+
+table#homepage {
+	padding-top: 3em;
+	padding-bottom: 3em;
+}
+
+table#top td,
+div#bottom .indented {
+	padding-left: 1ch;
+	padding-right: 1ch;
+}
+
+table#docs,
+table#download {
+	width: 80%;
+}
+
+div#bottom {
+	display: flex;
+	flex-wrap: wrap;
+}
+div#bottom span.menuitem {
+	flex-basis: 25%;
+	flex-grow: 1;
+	flex-shrink: 0;
+	line-height: 1em;
+	white-space: nowrap;
+}
+
+/* Mobile (i.e. phones) */
+@media only screen and (max-width: 768px) {
+body {
+	margin: 0px;
+}
+
+blockquote {
+	margin: 1em 0 1em 0;
+}
+
+table#homepage {
+	font-size: x-small;
+}
+
+table#top td,
+div#bottom .indented {
+	padding-left: 0.5ch;
+	padding-right: 0.5ch;
+}
+
+div#bottom span.menuitem {
+	font-size: large;
+	line-height: inherit;
+}
+
+table#docs,
+table#download {
+	width: 100%;
+}
+
+#screenshots ul {
+	padding-left: 0;
+}
+}
+
+@media only screen and (max-width: 600px) {
+div#bottom span.menuitem {
+	flex-basis: 50%;
+	line-height: 1.5em;
+}
 }