fix(docs): rehaul styling (#893)

* fix: adapt styling to marketing, console

* side icon margin

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>
 

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

site/src/components/Section.svelte

@@ -6,7 +6,7 @@
 		max-width: 120rem;
 	}
 	section :global(h3) {
-		color: var(--text);
+		color: var(--heading);
 	}
 </style>
 

site/src/routes/index.svelte

@@ -18,6 +18,7 @@
         position: absolute;
         top: 80px;
         height: 60vh;
+        max-height: 500px;
         right: 0;
     }
     .section {