improve styles a bit

sveltejs · Mar 16, 2021 · 2f03e65 · 2f03e65
1 parent 9252eb0
commit 2f03e65
Show file tree

Hide file tree

Showing 5 changed files with 191 additions and 39 deletions.
diff --git a/packages/site-kit/base.css b/packages/site-kit/base.css
@@ -31,13 +31,13 @@
 
 /*	theme vars */
 .theme-default {
-	--back:       	#ffffff;
-	--back-light: 	#f6fafd;
-	--back-api: 		#eff8ff;
+	--back:         #ffffff;
+	--back-light:   #f6fafd;
+	--back-api:     #e5eef5;
 	--prime:      	#ff3e00;
 	--second:     	#676778;
 	--flash:      	#40b3ff;
-	--heading:	var(--second);
+	--heading:    	#222;
 	--text:      		#444;
 	--sidebar-text: rgba(255, 255, 255, .75);
 	--border-w:  		.3rem; /* border-width  */
@@ -53,12 +53,13 @@
 	--h3:      2.6rem;
 	--h2:        3rem;
 	--h1:      3.2rem;
-	--linemax:   42em; /* max line-length */
+	--linemax:   72rem; /* max line-length */
 	--lh:  		 	  1.5; /* base line-height */
 }
 
 body {
 	--font: 'Overpass', sans-serif;
+	--font-body: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
 	--font-mono: 'Fira Mono', monospace;
 }
 
@@ -126,7 +127,7 @@ a {
 	color: inherit;
 }
 
-a:hover, a:active { color: var(--flash) }
+/* a:hover, a:active { color: var(--flash) } */
 
 /*
 -----------------------------------------------
@@ -136,9 +137,7 @@ a:hover, a:active { color: var(--flash) }
 
 /*	typography ----------------------------- */
 body {
-
-
-	font: 300 var(--h4)/var(--lh) var(--font);
+	font: 300 var(--h4)/var(--lh) var(--font-body);
 	background-color: var(--back);
 	color: var(--text);
 
@@ -160,9 +159,10 @@ h3 { font-size: var(--h3) }
 h2 { font-size: var(--h2) }
 h1 { font-size: var(--h1) }
 
-h1, h2 {
+h1, h2, h3, h4, h5, h6 {
 	font-family: var(--font);
 	line-height: 1.25;
+	color: #222;
 }
 
 h3 { font-weight: 300 }
@@ -211,8 +211,8 @@ blockquote {
 	position: relative;
 	margin: 1.6rem 0 2.4rem;
 	padding: 2rem 2.4rem 1.8rem 2.4rem;
-	border-radius: var(--border-r);
-	font-family: var(--font);
+	/* border-radius: var(--border-r); */
+	/* font-family: var(--font); */
 	max-width: var(--linemax);
 }
 
@@ -298,19 +298,19 @@ button > svg,
 a {
 	position: relative;
 	padding: 0 0 1px 0;
-	border-bottom: 1px solid currentColor;
+	/* border-bottom: 1px solid currentColor; */
 	user-select: none;
 	color: var(--prime);
-	transition: color .2s, border .2s, padding .2s;
+	/* transition: color .2s, border .2s, padding .2s; */
 }
 
-a:hover  {
+/* a:hover  {
 	color: var(--flash);
-}
+} */
 
 a:hover {
 	padding: 0;
-	border-bottom: 2px solid currentColor;
+	/* border-bottom: 2px solid currentColor; */
 }
 
 a.no-underline {
@@ -334,7 +334,7 @@ a.no-underline {
 .listify ul > li {
 	max-width: calc(var(--linemax) - var(--list-padding));
 	line-height: 1.5;
-	margin: 0 0 0.4rem 0;
+	margin: 0 0 0.5em 0;
 }
 
 .listify ul > li:before {

diff --git a/packages/site-kit/components/Docs.svelte b/packages/site-kit/components/Docs.svelte
@@ -196,8 +196,8 @@
 	.content h2 {
 		margin-top: 8rem;
 		padding: 2rem 1.6rem 4rem 0.2rem;
-		border-top: var(--border-w) solid #6767785b; /* based on --second */
-		color: var(--text);
+		border-top: 2px solid #ddd;
+		/* color: var(--text); */
 		line-height: 1;
 		font-size: var(--h3);
 		letter-spacing: .05em;
@@ -255,15 +255,15 @@
 
 	.content :global(h3),
 	.content :global(h3 > code) {
-		margin: 6.4rem 0 0 0;
-		padding: 2rem 1.6rem 5.6rem .2rem;
+		margin: 6.4rem 0 1rem 0;
+		padding: 0 0 1rem 0;
 		color: var(--text);
-		border-top: var(--border-w) solid #6767781f; /* based on --second */
+		border-bottom: 1px solid #ddd;
 		background: transparent;
 		line-height: 1;
 	}
 
-	.content :global(h3):first-of-type {
+	.content :global(h3):first-child {
 		border: none;
 		margin: 0;
 	}
@@ -304,7 +304,7 @@
 	}
 
 	.content :global(code) {
-		padding: .3rem .8rem .3rem;
+		padding: 0.4rem;
 		margin: 0 0.2rem;
 		top: -.1rem;
 		background: var(--back-api);
@@ -315,12 +315,17 @@
 		margin: 0;
 		top: 0;
 		background: transparent;
+		color: white;
 	}
 
 	.content :global(pre) {
-		margin: 0 0 2em 0;
+		margin: 0 0 2rem 0;
 		width: 100%;
-		max-width: 100%;
+		max-width: var(--linemax);
+		padding: 1rem 1rem;
+		background: #333;
+		border-radius: 0.5rem;
+		font-size: 14px;
 	}
 
 	.content :global(.icon) {
@@ -372,13 +377,37 @@
 	small a:before { all: unset }
 
 	section :global(blockquote) {
-		color: hsl(204, 100%, 50%);
-		border: 2px solid var(--flash);
+		/* color: #ff3e00; */
+		color: rgba(0,0,0,0.7);
+		background-color: rgba(255, 62, 0, 0.1);
+		/* background-color: #f6f6f6; */
+		/* border-left: 4px solid var(--flash); */
+		border-left: 4px solid #ff3e00;
+		padding: 1rem;
+	}
+
+	section :global(blockquote) :global(:first-child) {
+		margin-top: 0;
+	}
+
+	section :global(blockquote) :global(:last-child) {
+		margin-bottom: 0;
 	}
 
 	section :global(blockquote) :global(code) {
-		background: hsl(204, 100%, 95%) !important;
-		color: hsl(204, 100%, 50%);
+		/* background: hsl(204, 100%, 95%) !important; */
+		background: #d5e2ea;
+		/* color: hsl(204, 100%, 50%); */
+	}
+
+	section :global(a):hover {
+		text-decoration: underline;
+	}
+
+	section :global(a) :global(code) {
+		color: inherit;
+		/* background: none !important; */
+		background: rgba(255,62,0,0.1) !important;
 	}
 </style>
 

diff --git a/packages/site-kit/components/GuideContents.svelte b/packages/site-kit/components/GuideContents.svelte
@@ -26,14 +26,12 @@
 			if (top > max) {
 				ul.parentNode.scrollBy({
 					top: top - max,
-					left: 0,
-					behavior: 'smooth'
+					left: 0
 				});
 			} else if (bottom < min) {
 				ul.parentNode.scrollBy({
 					top: bottom - min,
-					left: 0,
-					behavior: 'smooth'
+					left: 0
 				});
 			}
 		}

diff --git a/sites/kit.svelte.dev/src/app.html b/sites/kit.svelte.dev/src/app.html
@@ -13,7 +13,7 @@
 
 		%svelte.head%
 
-		<style>
+		<!-- <style>
 			.hljs, .hljs-subst { color: #333; }
 			.hljs-comment { color: #999; }
 			.hljs-tag { color: #170; }
@@ -25,6 +25,131 @@
 			.hljs-literal { color: #170; }
 			.hljs-meta { color: #555; }
 			.hljs-meta-string { color: #555; }
+		</style> -->
+
+		<style>
+			/* .hljs, .hljs-subst { color: white; }
+			.hljs-comment { color: #999; }
+			.hljs-tag { color: rgb(53, 83, 48); }
+			.hljs-keyword { color: rgb(188, 140, 194); }
+			.hljs-attr { color: white; }
+			.hljs-number { color: rgb(132, 172, 156); }
+			.hljs-type, .hljs-string, .hljs-selector-id, .hljs-selector-class, .hljs-quote, .hljs-template-tag, .hljs-deletion { color: rgb(16,94,16); }
+			.hljs-title, .hljs-section { color: rgb(16,94,16); }
+			.hljs-literal { color: rgb(80, 124, 72); }
+			.hljs-meta { color: #555; }
+			.hljs-meta-string { color: rgb(196, 196, 196); } */
+
+			/*!
+ * Agate by Taufik Nurrohman <https://github.com/taufik-nurrohman>
+ * ---------------------------------------------------------------
+ *
+ * #ade5fc
+ * #a2fca2
+ * #c6b4f0
+ * #d36363
+ * #fcc28c
+ * #fc9b9b
+ * #ffa
+ * #fff
+ * #333
+ * #62c8f3
+ * #888
+ *
+ */
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #333;
+  color: white;
+}
+
+.hljs-name,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-code,
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-tag {
+  color: #62c8f3;
+}
+
+.hljs-variable,
+.hljs-template-variable,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #ade5fc;
+}
+
+.hljs-string,
+.hljs-bullet {
+  color: #a2fca2;
+}
+
+.hljs-type,
+.hljs-title,
+.hljs-section,
+.hljs-attribute,
+.hljs-quote,
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #ffa;
+}
+
+.hljs-number,
+.hljs-symbol,
+.hljs-bullet {
+  color: #d36363;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal {
+  color: #fcc28c;
+}
+
+.hljs-comment,
+.hljs-deletion,
+.hljs-code {
+  color: #888;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #c6b4f0;
+}
+
+.hljs-meta {
+  color: #fc9b9b;
+}
+
+.hljs-deletion {
+  /* background-color: #fc9b9b;
+  color: #333; */
+  color: #fc9b9b;
+}
+
+.hljs-addition {
+  /* background-color: #a2fca2;
+  color: #333; */
+  color: #a2fca2;
+}
+
+.hljs a {
+  color: inherit;
+}
+
+.hljs a:focus,
+.hljs a:hover {
+  color: inherit;
+  text-decoration: underline;
+}
 		</style>
 	</head>
 	<body>

diff --git a/sites/kit.svelte.dev/src/routes/$layout.svelte b/sites/kit.svelte.dev/src/routes/$layout.svelte
@@ -8,9 +8,9 @@
 </script>
 
 <style>
-	:global(html) {
-		--prime: rgb(21, 151, 148) !important; /* TODO remove .theme-default from shared, so we don't need !important */
-	}
+	/* :global(html) {
+		--prime: rgb(21, 151, 148) !important;
+	} */
 
 	main {
 		position: relative;