[PATCH olang] docs: layout: change website look and feel

[Carlos Maniero <carlos@maniero.me>]

This changes is based considering the follow:

- olang is a simple language so must be its website
  - changes:
    - All colors used are basic colors [1]
    - All measure units are ch(ars)
      - We were already mostly using this but there was some default
        browser behavior that was using px, the browser's defaults was
        reset.
- info html navbar bring a lot of distraction.
  - most of the info pages we have the navbar occupies two lines.
    - the "[Contents]" used to be alone in the second line (orphan)
      making the website to look awful.
  - changes:
    - website is no longer centralized
      - the content is still limited in 80ch but the navbar is free to
        grow.
      - this make the info pages to look a lot more like an info page
        and the navigation is way more understandable.

[1]: https://www.w3.org/wiki/CSS/Properties/color/keywords

Signed-off-by: Carlos Maniero <carlos@maniero.me>
---
 docs/style.css | 102 +++++++++++++++++++++++++++++++++----------------
 1 file changed, 70 insertions(+), 32 deletions(-)

diff --git a/docs/style.css b/docs/style.css
index d6cf74a..9ee71e3 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -1,19 +1,57 @@
 :root {
-  --background-color: #f4f4f4;
+  --background-color: white;
   --text-color: black;
-  --link-color: #4e5289;
-  --text-highlight-color: rgba(1, 1, 1, 0.1);
+  --link-color: teal;
+  --text-highlight-color: silver;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background-color: #26282B;
+    --background-color: black;
     --text-color: white;
-    --link-color: #8c91db;
-    --text-highlight-color: rgba(255, 255, 255, 0.1);
+    --link-color: aqua;
+    --text-highlight-color: grey;
   }
 }
 
+* {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: var(--link-color);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-size: 1rem;
+  margin: 0;
+  margin-bottom: 1ch;
+}
+
+ul {
+  margin: 0 4ch 2ch;
+}
+
+ul ul {
+  margin-bottom: 0;
+}
+
+dt {
+  margin-bottom: 1ch;
+}
+dd {
+  margin-left: 4ch;
+}
+
+pre {
+  margin-bottom: 1rem;
+}
+
+p {
+  padding-bottom: 1ch;
+}
+
 div.example {
   margin: 0;
 }
@@ -22,7 +60,7 @@ body {
   background: var(--background-color);
   color: var(--text-color);
   margin: 0;
-  padding: 0 40px;
+  padding: 0 2ch 2ch;
   font-size: 1rem;
   font-family: monospace;
 }
@@ -40,28 +78,24 @@ body {
   text-align: left !important;
 }
 
-a {
-  color: var(--link-color);
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-size: 1em;
-  margin: 0;
-  margin-bottom: 1ch;
+header {
+  margin: 2ch auto;
+  border-bottom: 1ch solid var(--text-color);
+  padding-bottom: 2ch;
 }
 
-body > * {
-  max-width: 80ch;
-  margin: 0 auto;
+header > h1 {
+  font-weight: normal;
+  margin-bottom: 2ch;
 }
 
-header {
-  margin: 6ch auto;
+.nav-panel * {
+  margin: 0;
+  padding: 0;
 }
 
-header > h1 {
-  font-weight: normal;
-  font-size: 1em;
+article, body > div:not(.nav-panel) > *:not(.nav-panel):not(hr) {
+  max-width: 80ch;
 }
 
 header > nav > span {
@@ -69,30 +103,34 @@ header > nav > span {
 }
 
 footer {
-  margin: 4ch auto;
+  margin: 2ch auto;
+  padding-top: 2ch;
+  border-top: 1ch solid var(--text-color);
 }
 
 pre {
-  background: rgba(0,0,0, 0.75);
-  color: white;
-  padding: 1.5em;
+  background: gray;
+  color: black;
+  padding: 2ch;
+  font-weight: bold;
   max-width: 100%;
   overflow: auto;
-  font-size: large;
-  line-height: 1;
 }
 
 .logo-name {
   font-weight: bold;
+  background: var(--link-color);
+  padding: 0 1ch;
+  color: var(--background-color);
 }
 
 hr {
   border: none;
-  height: 1px;
-  opacity: 0.5;
+  height: 1ch;
   background-color: var(--text-color);
+  margin: 2ch 0;
 }
 
 ol {
-  margin-left: 1.5em;
+  margin-left: 2ch;
 }

base-commit: 9800d80ac1451e48d946d1d6bc94ff33536b0bdf
-- 
2.46.1