add right side hero

vexide · Jan 12, 2024 · e793b69 · e793b69
1 parent 918158f
commit e793b69
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 25 deletions.
diff --git a/src/components/Button.svelte b/src/components/Button.svelte
@@ -33,7 +33,7 @@
 		font-family: inherit;
 		border-radius: 0;
 		font-family: var(--font-monospace);
-		font-size: 16px;
+		font-size: 1.6rem;
 		font-weight: 400;
 		padding-inline: 24px;
 		padding-block: 12px;

diff --git a/src/components/CodeExample.astro b/src/components/CodeExample.astro
@@ -1,37 +1,76 @@
 ---
+import { Code } from "astro:components";
+
 interface Props {
 	filename: string;
-	lang?: string;
+	lang: string;
 	code: string;
-	[key: string]: any;
 }
 
 const {
-	element: Element = "section",
-	class: className,
-	...rest
-} = Astro.props as Props;
+	filename,
+	lang,
+	code,
+} = Astro.props;
 ---
 
-<Element class:list={["page-section", { className }]} {...rest}>
-	<div class="page-section-inner">
-		<slot />
+<div class="code-example">
+	<div class="code-example-header">
+		<strong>{filename}</strong>
+		{Astro.slots.has("actions") && (
+			<div class="code-example-actions">
+				<slot name="actions" />
+			</div>
+		)}
 	</div>
-
-	<slot name="outer" />
-</Element>
+	<!-- @ts-ignore -->
+	<Code {lang} {code}></Code>
+</div>
 
 <style>
-	.page-section {
-		position: relative;
+	.code-example {
+		display: flex;
+		flex-direction: column;
+		border: 1px solid var(--background-secondary);
+		flex: 1 1 auto;
+		min-height: 0;
+		background: var(--background-primary);
 	}
 
-	.page-section-inner {
-		display: block;
+	.code-example-header {
+		user-select: none;
+		display: flex;
+		background: var(--background-secondary);
+		padding-inline: 12px;
+		padding-block: 8px;
+		justify-content: space-between;
 		position: relative;
-		box-sizing: border-box;
-		max-inline-size: 1280px;
-		padding-inline: 24px;
-		margin-inline: auto;
+		align-items: center;
+	}
+
+	.code-example-header strong {
+		font-weight: 600;
+		font-size: 1.4rem;
+	}
+
+	.code-example :global(pre) {
+		background-color: transparent !important;
+		padding: 12px;
+		margin: 0;
+		overflow: auto;
+	}
+
+	.code-example :global(code) {
+		line-height: 1.4;
+		counter-reset: step;
+		counter-increment: step 0;
+	}
+
+	.code-example :global(code .line::before) {
+		content: counter(step);
+		counter-increment: step;
+		display: inline-block;
+		margin-inline-end: 1.5rem;
+		color: var(--foreground-secondary);
 	}
 </style>
diff --git a/src/constants.ts b/src/constants.ts
@@ -11,11 +11,12 @@ export const EXAMPLES: Example[] = [
 		name: "Basic",
 		code: `#[derive(Default)]
 pub struct Robot;
+
 #[async_trait]
 impl AsyncRobot for Robot {
 	async fn opcontrol(&mut self) -> pros::Result {
 		println!("basic example");
-	
+
 		Ok(())
 	}
 }

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -142,6 +142,7 @@ const {
 	}
 
 	code {
+		/* tab-size: 4ch; */
 		font-family: var(--font-monospace);
 	}
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -36,7 +36,10 @@ import CircuitsPattern from "~/components/CircuitsPattern.svelte";
 				</div>
 			</div>
 			<div class="hero-right">
-				<Code lang="rust" code={EXAMPLES[0].code} />
+				<CodeExample lang="rust" filename="main.rs" code={EXAMPLES[0].code} />
+				<div class="hero-card">
+					<h2 class="title"></h2>
+				</div>
 			</div>
 			<Fragment slot="outer">
 				<CircuitsPattern client:load />
@@ -59,12 +62,22 @@ import CircuitsPattern from "~/components/CircuitsPattern.svelte";
 	}
 
 	.title {
-		font-size: 7.2rem;
-		font-weight: 200;
+		color: var(--foreground-primary);
 		font-family: var(--font-monospace);
+		font-weight: 200;
 		margin-block-start: 0;
 	}
 
+	h1.title {
+		font-size: 7.2rem;
+	}
+
+	h2.title {
+		font-size: 2.4rem;
+		font-weight: 400;
+		margin: 0;
+	}
+
 	.subtext {
 		font-size: 2.4rem;
 		line-height: 2;
@@ -108,4 +121,16 @@ import CircuitsPattern from "~/components/CircuitsPattern.svelte";
 		display: flex;
 		gap: 16px;
 	}
+
+	.hero-card {
+		display: flex;
+		flex-direction: column;
+		flex: 0 0 auto;
+		max-height: 100%;
+		min-height: 0;
+		border-radius: 8px;
+		background: var(--background-secondary);
+		box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028), 12.5px 12.5px 10px rgba(0, 0, 0, 0.035), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042), 41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05), 100px 100px 80px rgba(0, 0, 0, 0.07);
+		padding: 24px;
+	}
 </style>