Monochrome terminal chrome (#117)

Author: benmccann

packages/site-kit/src/lib/components/Blurb.svelte

@@ -50,7 +50,7 @@
 
 	@media (min-width: 900px) {
 		.grid :global(h2) {
-			font-size: var(--sk-text-xxl);
+			font-size: var(--sk-text-xl);
 		}
 
 		.grid {

packages/site-kit/src/lib/components/TryTerminal.svelte

@@ -1,8 +1,8 @@
 <div class="terminal">
 	<div class="chrome">
-		<span class="red dot" />
-		<span class="yellow dot" />
-		<span class="green dot" />
+		<span class="dot" />
+		<span class="dot" />
+		<span class="dot" />
 		<span class="title">terminal</span>
 	</div>
 	<pre><code
@@ -17,39 +17,29 @@
 
 <style>
 	.terminal {
-		background: rgba(0, 0, 0, 0.7);
+		background: #212121;
 		margin: 0;
 		border-radius: var(--sk-border-radius);
 		overflow: hidden;
 	}
 
 	.terminal .chrome {
 		position: relative;
-		background: var(--sk-back-3);
-		color: var(--sk-text-3);
+		background: #666;
+		color: #999;
 		display: flex;
 		align-items: center;
-		font-size: var(--sk-text-s);
+		font-size: 1.8rem;
 		padding: 1rem;
 		gap: 1rem;
+		border-bottom: 1px #29252a solid;
 	}
 
 	.terminal .dot {
 		width: 1rem;
 		height: 1rem;
 		border-radius: 50%;
-	}
-
-	.red {
-		background-color: hsl(15, 100%, 65%);
-	}
-
-	.yellow {
-		background-color: hsl(48, 100%, 67%);
-	}
-
-	.green {
-		background-color: hsl(141, 53%, 53%);
+		background-color: #999;
 	}
 
 	.title {
@@ -59,6 +49,7 @@
 		top: 0;
 		width: 100%;
 		height: 100%;
+		padding-top: 0.4rem;
 		align-items: center;
 		justify-content: center;
 	}