From 9523d039a77d5d8f51a3925a81cb598dc765c32c Mon Sep 17 00:00:00 2001
From: sceox <sceox@blackmail.sh>
Date: Tue, 4 Jan 2022 10:02:17 -0800
Subject: [PATCH] style.css: reformat; use color vars; style the nav

---
 src/style.css | 220 ++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 158 insertions(+), 62 deletions(-)

diff --git a/src/style.css b/src/style.css
index 9977a31..fd85560 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,27 +1,80 @@
+/* Global style */
+
+:root {
+  --main-bg-color: #05050e;
+  --secondary-bg-color: #19192f;
+  --fg-color: #c9c9c9;
+  --accent-color: #a989b9;
+  --secondary-color: #63508f;
+  --dark-color: #0c0032;
+}
+html {
+  margin: 0;
+  font-size: 62.5%;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  background-color: var(--main-bg-color);
+}
+body {
+  margin: 0;
+}
+
+/* Nav */
+
+nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--secondary-bg-color);
+  padding: 13px;
+}
+nav h2,ul {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+nav ul {
+  list-style-type: none;
+}
+nav li {
+  display: inline;
+  padding: 0px 15px;
+}
+nav a {
+  font-size: 18px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  text-transform: lowercase;
+}
+nav a::before {
+  content: "★";
+  padding: 6px;
+  text-transform: uppercase;
+  color: var(--secondary-color);
+}
 
 /* Body */
-html {
-  font-size: 62.5%;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
 
-body {
+main {
   font-size: 1.8rem;
   line-height: 1.618;
   max-width: 38em;
+  color: var(--fg-color);
   margin: auto;
-  color: #c9c9c9;
-  background-color: #222222;
-  padding: 13px; }
+  padding: 13px;
+}
 
 @media (max-width: 684px) {
   body {
-    font-size: 1.53rem; } }
+    font-size: 1.53rem;
+  }
+}
 
 @media (max-width: 382px) {
   body {
-    font-size: 1.35rem; } }
+    font-size: 1.35rem;
+  }
+}
 
 h1, h2, h3, h4, h5, h6 {
+  color: #bbb;
   line-height: 1.1;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
   font-weight: 700;
@@ -34,50 +87,77 @@ h1, h2, h3, h4, h5, h6 {
   -ms-hyphens: auto;
   -moz-hyphens: auto;
   -webkit-hyphens: auto;
-  hyphens: auto; }
+  hyphens: auto;
+}
 
 h1 {
-  font-size: 2.35em; }
+  color: var(--accent-color);
+  font-size: 2.00em;
+  font-weight: 999;
+  margin-top: 4.5rem;
+  margin-bottom: 3rem;
+  position: relative;
+  left: -71px;
+}
+h1::before {
+  content: "★";
+  font-size: 1.5em;
+  color: var(--secondary-color);
+  padding-right: 20px;
+}
 
 h2 {
-  font-size: 2.00em; }
+  font-size: 1.75em;
+}
 
 h3 {
-  font-size: 1.75em; }
+  font-size: 1.5em;
+}
 
 h4 {
-  font-size: 1.5em; }
+  font-size: 1.25em;
+}
 
 h5 {
-  font-size: 1.25em; }
+  font-size: 1.15em;
+}
 
 h6 {
-  font-size: 1em; }
+  font-size: 1em;
+}
 
 p {
   margin-top: 0px;
-  margin-bottom: 2.5rem; }
+  margin-bottom: 2.5rem;
+}
 
 small, sub, sup {
-  font-size: 75%; }
+  font-size: 75%;
+}
 
 hr {
-  border-color: #ffffff; }
+  border-color: var(--accent-color);
+}
 
 a {
   text-decoration: none;
-  color: #ffffff; }
-  a:hover {
-    color: #c9c9c9;
-    border-bottom: 2px solid #c9c9c9; }
+  color: var(--accent-color);
+  font-weight: 700;
+}
+a:hover {
+  color: var(--secondary-color);
+  border-bottom: 2px solid var(--secondary-color);
+}
 
-ul {
+main ul {
   padding-left: 1.4em;
   margin-top: 0px;
-  margin-bottom: 2.5rem; }
+  margin-bottom: 2.5rem;
+}
 
-li {
-  margin-bottom: 0.4em; }
+main li {
+  margin-bottom: 0.4em;
+}
 
 blockquote {
   margin-left: 0px;
@@ -86,57 +166,66 @@ blockquote {
   padding-top: 0.8em;
   padding-bottom: 0.8em;
   padding-right: 0.8em;
-  border-left: 5px solid #ffffff;
+  border-left: 5px solid var(--dark-color);
   margin-bottom: 2.5rem;
-  background-color: #4a4a4a; }
-
-blockquote p {
-  margin-bottom: 0; }
+  background-color: var(--secondary-bg-color);
+  border-radius: 0.5rem;
+}
 
 img {
   height: auto;
   max-width: 100%;
   margin-top: 0px;
-  margin-bottom: 2.5rem; }
+  margin-bottom: 2.5rem;
+}
 
 /* Pre and Code */
+
 pre {
   background-color: #4a4a4a;
   display: block;
   padding: 1em;
   overflow-x: auto;
   margin-top: 0px;
-  margin-bottom: 2.5rem; }
+  margin-bottom: 2.5rem;
+}
 
 code {
   font-size: 0.9em;
   padding: 0 0.5em;
   background-color: #4a4a4a;
-  white-space: pre-wrap; }
+  white-space: pre-wrap;
+}
 
 pre > code {
   padding: 0;
   background-color: transparent;
-  white-space: pre; }
+  white-space: pre;
+}
 
 /* Tables */
+
 table {
   text-align: justify;
   width: 100%;
-  border-collapse: collapse; }
-
+  border-collapse: collapse;
+}
 td, th {
   padding: 0.5em;
-  border-bottom: 1px solid #4a4a4a; }
+  border-bottom: 1px solid #4a4a4a;
+}
 
 /* Buttons, forms and input */
-input, textarea {
-  border: 1px solid #c9c9c9; }
-  input:focus, textarea:focus {
-    border: 1px solid #ffffff; }
 
+input, textarea {
+  border: 1px solid #240090;
+}
+input:focus, textarea:focus {
+  border: 1px solid var(--accent-color);
+}
 textarea {
-  width: 100%; }
+  width: 100%;
+}
 
 .button, button, input[type="submit"], input[type="reset"], input[type="button"] {
   display: inline-block;
@@ -144,23 +233,26 @@ textarea {
   text-align: center;
   text-decoration: none;
   white-space: nowrap;
-  background-color: #ffffff;
+  background-color: var(--accent-color);
   color: #222222;
   border-radius: 1px;
-  border: 1px solid #ffffff;
+  border: 1px solid var(--accent-color);
   cursor: pointer;
-  box-sizing: border-box; }
-  .button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] {
-    cursor: default;
-    opacity: .5; }
-  .button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type="submit"]:focus:enabled, input[type="submit"]:hover:enabled, input[type="reset"]:focus:enabled, input[type="reset"]:hover:enabled, input[type="button"]:focus:enabled, input[type="button"]:hover:enabled {
-    background-color: #c9c9c9;
-    border-color: #c9c9c9;
-    color: #222222;
-    outline: 0; }
+  box-sizing: border-box;
+}
+.button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] {
+  cursor: default;
+  opacity: .5;
+}
+.button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type="submit"]:focus:enabled, input[type="submit"]:hover:enabled, input[type="reset"]:focus:enabled, input[type="reset"]:hover:enabled, input[type="button"]:focus:enabled, input[type="button"]:hover:enabled {
+  background-color: #c9c9c9;
+  border-color: #c9c9c9;
+  color: #222222;
+  outline: 0;
+}
 
 textarea, select, input[type] {
-  color: #c9c9c9;
+  color: var(--fg-color);
   padding: 6px 10px;
   /* The 6px vertically centers text on FF, ignored by Webkit */
   margin-bottom: 10px;
@@ -168,15 +260,19 @@ textarea, select, input[type] {
   border: 1px solid #4a4a4a;
   border-radius: 4px;
   box-shadow: none;
-  box-sizing: border-box; }
-  textarea:focus, select:focus, input[type]:focus {
-    border: 1px solid #ffffff;
-    outline: 0; }
+  box-sizing: border-box;
+}
+textarea:focus, select:focus, input[type]:focus {
+  border: 1px solid var(--accent-color);
+  outline: 0;
+}
 
 input[type="checkbox"]:focus {
-  outline: 1px dotted #ffffff; }
+  outline: 1px dotted #3500d3;
+}
 
 label, legend, fieldset {
   display: block;
   margin-bottom: .5rem;
-  font-weight: 600; }
+  font-weight: 600;
+}