italicize the older release names too

[nano-editor.git] / style.css

diff --git a/style.css b/style.css
index a77bb79105c1fd8f4901528958de58b38362145e..cd59d15db87eb6642abdff02a224cb3e47862a86 100644 (file)
--- 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;
+}
 }