chore: added landing background 473c3038
Steve Simkins · 2026-04-08 13:24 2 file(s) · +62 −41
docs/docs/components/Landing.tsx +47 −39
3 3 
export function Landing() {
4 4 
	return (
5 5 
		<main
6 + 
			className="landing"
6 7 
			style={{
7 - 
				display: "flex",
8 + 
				position: "relative",
8 9 
				width: "100%",
9 - 
				minHeight: "85vh",
10 - 
				marginTop: "2rem",
11 - 
				flexDirection: "column",
12 - 
				alignItems: "center",
13 - 
				justifyContent: "center",
14 - 
				gap: "3rem",
15 - 
				padding: "1rem",
16 - 
				background: "#121113",
10 + 
				background: "#121113 url('/bg.png') center center / cover no-repeat",
17 11 
			}}
18 12 
		>
19 13 
			<div
20 14 
				style={{
21 15 
					display: "flex",
16 + 
					width: "100%",
17 + 
					minHeight: "100vh",
22 18 
					flexDirection: "column",
23 19 
					alignItems: "center",
24 - 
					gap: "1.5rem",
20 + 
					justifyContent: "center",
21 + 
					gap: "3rem",
22 + 
					padding: "1rem",
23 + 
					background: "rgba(0, 0, 0, 0.65)",
25 24 
				}}
26 25 
			>
27 - 
				<h1
26 + 
				<div
28 27 
					style={{
29 - 
						textAlign: "center",
30 - 
						fontSize: "48px",
31 - 
						fontWeight: 700,
32 - 
						fontFamily: '"Commit Mono", monospace, sans-serif',
33 - 
						textTransform: "uppercase",
34 - 
						color: "#ffffff",
35 - 
					}}
36 - 
				>
37 - 
					Andromeda
38 - 
				</h1>
39 - 
				<h3
40 - 
					style={{
41 - 
						textAlign: "center",
42 - 
						fontSize: "16px",
43 - 
						fontWeight: 400,
44 - 
						fontFamily: '"Commit Mono", monospace, sans-serif',
45 - 
						color: "#ffffff",
46 - 
						opacity: 0.7,
28 + 
						display: "flex",
29 + 
						flexDirection: "column",
30 + 
						alignItems: "center",
31 + 
						gap: "1.5rem",
47 32 
					}}
48 33 
				>
49 - 
					Minimal, self-hosted personal software in Rust
50 - 
				</h3>
51 - 
			</div>
52 - 
			<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
53 - 
				<Button type="link" href="/quickstart">
54 - 
					Get Started
55 - 
				</Button>
56 - 
				<Button type="link" href="https://github.com/stevedylandev/andromeda">
57 - 
					GitHub
58 - 
				</Button>
34 + 
					<h1
35 + 
						style={{
36 + 
							textAlign: "center",
37 + 
							fontSize: "48px",
38 + 
							fontWeight: 700,
39 + 
							fontFamily: '"Commit Mono", monospace, sans-serif',
40 + 
							textTransform: "uppercase",
41 + 
							color: "#ffffff",
42 + 
						}}
43 + 
					>
44 + 
						Andromeda
45 + 
					</h1>
46 + 
					<h3
47 + 
						style={{
48 + 
							textAlign: "center",
49 + 
							fontSize: "16px",
50 + 
							fontWeight: 400,
51 + 
							fontFamily: '"Commit Mono", monospace, sans-serif',
52 + 
							color: "#ffffff",
53 + 
							opacity: 0.7,
54 + 
						}}
55 + 
					>
56 + 
						Minimal, self-hosted personal software in Rust
57 + 
					</h3>
58 + 
				</div>
59 + 
				<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
60 + 
					<Button type="link" href="/quickstart">
61 + 
						Get Started
62 + 
					</Button>
63 + 
					<Button type="link" href="https://github.com/stevedylandev/andromeda">
64 + 
						GitHub
65 + 
					</Button>
66 + 
				</div>
59 67 
			</div>
60 68 
		</main>
61 69 
	);
docs/docs/landing.css +15 −2
1 - 
.vocs_DocsLayout_content {
1 + 
.vocs_DocsLayout_content:has(.landing) {
2 2 
	background: #121113 !important;
3 + 
	padding-top: 0 !important;
3 4 
}
4 5 

            

            
            

                5
                
                -
                
.vocs_Content {

            

            
            

                
                6
                +
                
.vocs_Content:has(.landing) {

            

            
            

                6
                7
                 
                
	height: 100%;

            

            
            

                7
                8
                 
                
	background: #121113 !important;

            

            
            

                8
                9
                 
                
}

            

            
            

                
                10
                +
                

            

            
            

                
                11
                +
                
:has(.landing) .vocs_Footer {

            

            
            

                
                12
                +
                
	display: none !important;

            

            
            

                
                13
                +
                
}

            

            
            

                
                14
                +
                

            

            
            

                
                15
                +
                
:has(.landing) .vocs_DesktopTopNav,

            

            
            

                
                16
                +
                
:has(.landing) .vocs_DesktopTopNav_withLogo,

            

            
            

                
                17
                +
                
:has(.landing) .vocs_MobileTopNav,

            

            
            

                
                18
                +
                
:has(.landing) .vocs_DocsLayout_gutterTop,

            

            
            

                
                19
                +
                
:has(.landing) .vocs_DocsLayout_gutterTop_sticky {

            

            
            

                
                20
                +
                
	display: none !important;

            

            
            

                
                21
                +
                
}