css: merge light & dark into one file

[nano-editor.git] / style.css

diff --git a/style.css b/style.css
new file mode 100644 (file)
index 0000000..e9dcf1f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,60 @@
+@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: var(--nano-content-fg-color);
+       background-color: var(--nano-content-bg-color);
+}
+.inverted {
+       color: var(--nano-inverted-fg-color);
+       background-color: var(--nano-inverted-bg-color);
+}
+
+a {
+       color: var(--nano-a-color);
+}
+a:visited {
+       color: var(--nano-a-visited-color);
+}
+a:active {
+       color: var(--nano-a-active-color);
+}
+
+.inverted a {
+       color: var(--nano-a-inverted-color);
+}
+
+* {
+       box-sizing: border-box;
+}
+
+.onecolumn {
+       float: left;
+       width: 45%;
+       padding: 5%;
+}