From d71eb25dbce1e851cdf512a74ef31c1c50869956 Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Thu, 22 Oct 2020 17:09:08 +0200
Subject: [PATCH] fix(docs): rehaul styling (#893)

* fix: adapt styling to marketing, console

* side icon margin
---
 site/src/components/Docs.svelte          | 17 ++++++-----
 site/src/components/GuideContents.svelte | 38 ++++++++++++++++--------
 site/src/components/Section.svelte       |  2 +-
 site/src/routes/index.svelte             |  1 +
 site/static/base.css                     | 29 +++++++++---------
 5 files changed, 52 insertions(+), 35 deletions(-)

diff --git a/site/src/components/Docs.svelte b/site/src/components/Docs.svelte
index 445b13eb56..5f4cbc7d37 100644
--- a/site/src/components/Docs.svelte
+++ b/site/src/components/Docs.svelte
@@ -177,7 +177,7 @@
     }
 
     .sidebar {
-      padding: var(--top-offset) 0 6.4rem 3.2rem;
+      padding: var(--top-offset) 0 6.4rem 0;
       font-family: var(--font);
       overflow-y: auto;
       height: 100%;
@@ -204,7 +204,7 @@
     margin-top: 4rem;
     padding: 2rem 1.6rem 4rem 0.2rem;
     border-top: var(--border-w) solid #6767785b; /* based on --second */
-    color: var(--text);
+    color: var(--heading);
     line-height: 1;
     font-size: var(--h3);
     letter-spacing: 0.05em;
@@ -267,7 +267,7 @@
   .content :global(h3 > code) {
     margin: 2.0rem 0 0 0;
     padding: 2rem 1.6rem 2.0rem 0.2rem;
-    color: var(--text);
+    color: var(--heading);
     border-top: var(--border-w) solid #6767781f; /* based on --second */
     background: transparent;
     line-height: 1;
@@ -291,7 +291,7 @@
     font-family: inherit;
     font-weight: 500;
     font-size: 2.4rem;
-    color: var(--text);
+    color: var(--heading);
     margin: 2.0rem 0 1.6rem 0;
     padding-left: 0;
     background: transparent;
@@ -383,13 +383,14 @@
   }
 
   section :global(blockquote) {
-    color: #e91e63;
-    border: 2px solid var(--flash);
+    color: #85d996;
+    border: 2px solid var(--grey-text);
+    background: #2a2f45;
   }
 
   section :global(blockquote) :global(code) {
-    background: hsl(204, 100%, 95%) !important;
-    color: #e91e63;
+    /* background: hsl(204, 100%, 95%) !important; */
+    color: var(--prime);
   }
 </style>
 
diff --git a/site/src/components/GuideContents.svelte b/site/src/components/GuideContents.svelte
index ad1aba0242..2b486249c2 100644
--- a/site/src/components/GuideContents.svelte
+++ b/site/src/components/GuideContents.svelte
@@ -57,7 +57,7 @@
 
 	.section {
 		display: block;
-		padding: 0 0 .8rem 0;
+		padding: .8rem 0 .8rem 0;
 		font-size: var(--h6);
 		text-transform: uppercase;
 		letter-spacing: 0.1em;
@@ -65,28 +65,42 @@
 	}
 
 	.subsection {
-		display: block;
-		font-size: 1.6rem;
-		font-family: var(--font);
-		padding: 0 0 0.6em 0;
-	}
+        display: block;
+        font-family: var(--font);
+		font-size: 14px;
+        padding: 0.4em 0 0.4em 0;
+        color: #a3acb9;
+    }
+    
+    .section,
+    .subsection {
+        border-top-right-radius: 50vw;
+        border-bottom-right-radius: 50vw;
+        padding-left: 2rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
 
 	.section:hover,
 	.subsection:hover,
 	.active {
         color: var(--flash);
         font-weight: 500;
+        color: #6c8eef;
+        background-color: rgba(82,130,193,.1);
+        padding-right: 1rem;
 	}
 
 	.subsection[data-level="4"] {
-		padding-left: 1.2rem;
+		padding-left: 3.2rem;
 	}
 
 	.icon-container {
-		position: absolute;
-		top: -.2rem;
-		right: 2.4rem;
-	}
+        margin-right: 1rem;
+        margin-left: .5rem;
+        color: white;
+    }
 
 	@media (min-width: 832px) {
 		a {
@@ -99,7 +113,7 @@
 		.active {
 			color: #5282c1;
 		}
-	}
+    }
 </style>
 
 <ul
diff --git a/site/src/components/Section.svelte b/site/src/components/Section.svelte
index fc7836eb1a..4a243f5519 100644
--- a/site/src/components/Section.svelte
+++ b/site/src/components/Section.svelte
@@ -6,7 +6,7 @@
 		max-width: 120rem;
 	}
 	section :global(h3) {
-		color: var(--text);
+		color: var(--heading);
 	}
 </style>
 
diff --git a/site/src/routes/index.svelte b/site/src/routes/index.svelte
index 72364d30ae..3ef965344e 100644
--- a/site/src/routes/index.svelte
+++ b/site/src/routes/index.svelte
@@ -18,6 +18,7 @@
         position: absolute;
         top: 80px;
         height: 60vh;
+        max-height: 500px;
         right: 0;
     }
     .section {
diff --git a/site/static/base.css b/site/static/base.css
index c2d96e8412..51c30ae61d 100644
--- a/site/static/base.css
+++ b/site/static/base.css
@@ -31,18 +31,19 @@
 
 /*	theme vars */
 .theme-default {
-    --back: #212224;
+    --back: #1a1f36;
 	--back-light: transparent;
-	--back-api: #212224;
+	--back-api: #1a1f36;
 	--prime: #5282c1;
-    --second: #e91e63;
+    --second: #ff2069;
     --flash: #72a2e0;
 
-    --nav-back: #212224;
-    --side-nav-back: #212224;
+    --nav-back: #1a1f36;
+    --side-nav-back: #1a1f36;
 
-	--heading: #e8eaed;
-    --text: #eff8ff;
+	--heading: #f7fafc;
+    --text: #c1c9d2;
+    --grey-text: #a3acb9;
     --dark-text: #8795a1;
 	--sidebar-text: #eff8ff;
 	--border-w: .3rem; /* border-width  */
@@ -52,13 +53,13 @@
 /*	typo vars */
 .typo-default {
 	--code-fs: 1.3rem;
-	--h6: 1.4rem;
+	--h6: 1.3rem;
 	--h5: 1.6rem;
-	--h4: 1.8rem; /* default font-size */
-	--h3: 2.6rem;
+	--h4: 1.6rem; /* default font-size */
+	--h3: 2.5rem;
 	--h2: 3rem;
-	--h1: 3.2rem;
-	--linemax: 42em; /* max line-length */
+	--h1: 3rem;
+	--linemax: 50em; /* max line-length */
 	--lh: 1.5; /* base line-height */
 }
 
@@ -135,7 +136,7 @@ h6,
 blockquote {
 	position: relative;
 	margin: 0;
-	color: var(--heading);
+    color: var(--heading);
 }
 
 /* h1, h2, h3, h4, h5, h6 { font-weight: 600 } */
@@ -354,7 +355,7 @@ a.no-underline {
 .listify ul > li:before {
 	content: '';
 	position: absolute;
-	margin-top: 1.1rem;
+	margin-top: .9rem;
 	margin-left: -1.8rem;
 	background-color: var(--second);
 	width: .6rem;