New getting started guide (#715)

* New getting started guide

* style: small style tweaks

* style: theme updates

* chore: add redirect

* style: theme tweaks

* fix: clamp logo height

* style: fix sidebar width

Co-authored-by: Nate Moore <nate@skypack.dev>

1 files changed, 59 insertions, 116 deletions

diff --git a/docs/public/code.css b/docs/public/code.css
index 76b44bd24..58a631e57 100644
--- a/docs/public/code.css
+++ b/docs/public/code.css
@@ -8,148 +8,91 @@
 	opacity: 0.7;
 }
 
-.token.atrule {
-	color: #c792ea;
+.token.plain-text,
+[class*="language-bash"] span.token,
+[class*="language-shell"] span.token {
+	color: var(--color-gray-200);
 }
 
-.token.attr-name {
-	color: #ffcb6b;
-}
-
-.token.attr-value {
-	color: #a5e844;
-}
-
-.token.attribute {
-	color: #a5e844;
-}
-
-.token.boolean {
-	color: #c792ea;
-}
-
-.token.builtin {
-	color: #ffcb6b;
-}
-
-.token.cdata {
-	color: #80cbc4;
-}
-
-.token.char {
-	color: #80cbc4;
-}
-
-.token.class {
-	color: #ffcb6b;
+[class*="language-bash"] span.token,
+[class*="language-shell"] span.token {
+	font-style: bold;
 }
 
-.token.class-name {
-	color: #f2ff00;
-}
-
-.token.comment {
-	color: #999;
-}
-
-.token.constant {
-	color: #c792ea;
+.token.prolog,
+.token.comment,
+[class*="language-bash"] span.token.comment,
+[class*="language-shell"] span.token.comment {
+  color: var(--color-gray-400);
 }
 
+.token.selector,
+.token.tag,
+.token.unit,
+.token.url,
+.token.variable,
+.token.entity,
 .token.deleted {
-	color: #ff6666;
-}
-
-.token.doctype {
-	color: #999;
-}
-
-.token.entity {
-	color: #ff6666;
+	color: #FA5E5B;
+}
+
+.token.boolean,
+.token.constant,
+.token.doctype,
+.token.number,
+.token.regex,
+.token.builtin,
+.token.class,
+.token.hexcode,
+.token.class-name,
+.token.attr-name {
+	color: var(--color-yellow);
 }
 
-.token.function {
-	color: #c792ea;
+.token.atrule,
+.token.attribute,
+.token.attr-value .token.punctuation,
+.token.attr-value,
+.token.pseudo-class,
+.token.pseudo-element,
+.token.string {
+	color: var(--color-green);
 }
 
-.token.hexcode {
-	color: #f2ff00;
+.token.symbol,
+.token.function,
+.token.id,
+.token.important
+ {
+	color: var(--color-blue);
 }
 
+.token.important,
 .token.id {
-	color: #c792ea;
-	font-weight: bold;
+  font-weight: bold;
 }
 
-.token.important {
-	color: #c792ea;
-	font-weight: bold;
+
+.token.cdata,
+.token.char,
+.token.property {
+	color: #23B1AF;
 }
 
 .token.inserted {
-	color: #80cbc4;
+	color: var(--color-green);
 }
 
 .token.keyword {
-	color: #c792ea;
-}
-
-.token.number {
-	color: #fd9170;
+	color: #FF657C;
+  font-style: italic;
 }
 
 .token.operator {
-	color: #89ddff;
-}
-
-.token.prolog {
-	color: #999;
-}
-
-.token.property {
-	color: #80cbc4;
-}
-
-.token.pseudo-class {
-	color: #a5e844;
-}
-
-.token.pseudo-element {
-	color: #a5e844;
+	color: var(--color-gray-300);
 }
 
+.token.attr-value .token.attr-equals,
 .token.punctuation {
-	color: #89ddff;
-}
-
-.token.regex {
-	color: #f2ff00;
-}
-
-.token.selector {
-	color: #ff6666;
-}
-
-.token.string {
-	color: #a5e844;
-}
-
-.token.symbol {
-	color: #c792ea;
-}
-
-.token.tag {
-	color: #ff6666;
-}
-
-.token.unit {
-	color: #fd9170;
-}
-
-.token.url {
-	color: #ff6666;
-}
-
-.token.variable {
-	color: #ff6666;
+	color: var(--color-gray-200);
 }