work on layout and write basic nginx pageHEADmaster

1 files changed, 39 insertions, 16 deletions

diff --git a/themes/orca/assets/style.css b/themes/orca/assets/style.css
index 49c53ad..a4dcc49 100644
--- a/themes/orca/assets/style.css
+++ b/themes/orca/assets/style.css
@@ -1,45 +1,52 @@
+:root {
+  --header-color: purple;
+  --highlight-color: violet;
+  --background-color: #090909;
+  --foreground-color: white;
+  --ruler-color: lightgray;
+  --item-color: #191919;
+}
+
 body {
   margin: 0;
-  background-color: #090909;
-  color: white;
+  background-color: var(--background-color);
+  color: var(--foreground-color);
 }
 
 a {
-  color: violet;
+  color: var(--highlight-color);
 }
 
 header nav {
-  background: purple;
+  background: var(--header-color);
   padding: 4px;
-  color: violet;
+  color: var(--highlight-color);
 }
 
 header nav a {
   text-decoration: none;
-  color: white;
+  color: var(--foreground-color);
 }
 
 header nav a:hover {
   text-decoration: underline;
 }
 
-header nav *.right {
-  float: right;
-}
-
+header .title,
+header nav div,
 main {
-  margin: 0 0.8em;
-  max-width: 50em;
+  margin: auto;
+  max-width: 70em;
 }
 
 main h1,
 main h2,
 main h3 {
-  border-bottom: 1px lightgray dotted;
+  border-bottom: 1px var(--ruler-color) dotted;
 }
 
 .post {
-  background: #191919;
+  background: var(--item-color);
   padding: 0.5em;
 }
 
@@ -49,11 +56,11 @@ main h3 {
 
 hr {
   border: none;
-  border-bottom: 1px lightgray dotted;
+  border-bottom: 1px var(--ruler-color) dotted;
 }
 
 header .title {
-  margin: 0.5em;
+  margin: 0.5em auto;
 }
 
 header .title img {
@@ -76,3 +83,19 @@ header .title h2 a {
 header .title h2 a:hover {
   text-decoration: underline;
 }
+
+pre {
+  padding: 4px;
+}
+
+.res {
+  background-color: var(--item-color);
+  min-width: 200px;
+  float: right;
+}
+
+.res div {
+  text-align: center;
+  background-color: var(--header-color);
+  padding: 4px;
+}