feat: Blurb restyle, TryTerminal component (#81)

* Push * Add changeset
sveltejs · Apr 5, 2023 · 68591be · 68591be
1 parent b4ad667
commit 68591be
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 20 deletions.
diff --git a/.changeset/tidy-monkeys-remember.md b/.changeset/tidy-monkeys-remember.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/site-kit': minor
+---
+
+Add TryTerminal component
diff --git a/packages/site-kit/src/lib/components/Blurb.svelte b/packages/site-kit/src/lib/components/Blurb.svelte
@@ -2,7 +2,6 @@
 	import Section from './Section.svelte';
 </script>
 
-<!-- TODO: CSS Vars -->
 <Section --background="var(--sk-back-1)">
 	<div class="grid">
 		{#if $$slots.one}
@@ -22,31 +21,42 @@
 				<slot name="three" />
 			</div>
 		{/if}
-
-		{#if $$slots.four}
-			<div>
-				<slot name="four" />
-			</div>
-		{/if}
-
-		{#if $$slots.five}
-			<div>
-				<slot name="five" />
-			</div>
-		{/if}
 	</div>
-
-	{#if $$slots.six}
-		<div>
-			<slot name="six" />
-		</div>
-	{/if}
 </Section>
 
 <style>
 	.grid {
+		--columns: 1;
+
 		display: grid;
-		grid-template-columns: repeat(3, 1fr);
+		grid-template-columns: repeat(var(--columns), 1fr);
 		grid-gap: 1rem;
 	}
+
+	.grid :global(h2) {
+		font-size: var(--sk-text-xl);
+		line-height: 1.2;
+	}
+
+	.grid {
+		display: grid;
+		gap: 1em;
+		margin: 0 0 4rem 0;
+	}
+
+	.grid:last-child {
+		margin-bottom: 0;
+	}
+
+	@media (min-width: 900px) {
+		.grid :global(h2) {
+			font-size: var(--sk-text-xxl);
+		}
+
+		.grid {
+			--columns: 3;
+
+			gap: 7rem;
+		}
+	}
 </style>
diff --git a/packages/site-kit/src/lib/components/home/TryTerminal.svelte b/packages/site-kit/src/lib/components/home/TryTerminal.svelte
@@ -0,0 +1,96 @@
+<div class="terminal">
+	<div class="chrome">
+		<span class="red dot" />
+		<span class="yellow dot" />
+		<span class="green dot" />
+		<span class="title">terminal</span>
+	</div>
+	<pre><code
+			><span class="line"
+				>npm create <span class="orange-highlight">svelte</span>@latest my-app</span
+			>
+<span class="line">cd my-app</span>
+<span class="line">npm install</span>
+<span class="line">npm run dev -- --open</span></code
+		></pre>
+</div>
+
+<style>
+	.terminal {
+		background: rgba(0, 0, 0, 0.7);
+		margin: 0;
+		border-radius: var(--sk-border-radius);
+		overflow: hidden;
+	}
+
+	.terminal .chrome {
+		position: relative;
+		background: var(--sk-back-3);
+		color: var(--sk-text-3);
+		display: flex;
+		align-items: center;
+		font-size: var(--sk-text-s);
+		padding: 1rem;
+		gap: 1rem;
+	}
+
+	.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%);
+	}
+
+	.title {
+		position: absolute;
+		display: flex;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.terminal pre {
+		padding: 1em;
+		font-size: var(--sk-text-xs);
+	}
+
+	.line::before {
+		content: '$ ';
+		opacity: 0.3;
+	}
+
+	pre code {
+		color: white;
+		font-size: 1em;
+	}
+
+	.orange-highlight {
+		color: hsl(15, 100%, 65%);
+	}
+
+	@media (min-width: 440px) {
+		.terminal pre {
+			font-size: var(--sk-text-s);
+		}
+	}
+
+	@media (min-width: 1080px) {
+		.terminal pre {
+			font-size: var(--sk-text-m);
+		}
+	}
+</style>