fix(docs): return styling to pre-regression (global style removal)

feat(root page): break out hero links into chips, add accent colors on hover
feat(root page): redesign the hero element, add dividers between sections
2024-10-27 01:39:38 +03:00 · 2024-10-27 01:31:14 +03:00 · 2024-10-27 01:30:33 +03:00 · 2024-10-27 01:23:33 +03:00 · 2024-10-27 00:42:30 +03:00 · 2024-10-25 16:34:09 +03:00
13 changed files with 69 additions and 306 deletions
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -0,0 +1 @@
+bunx lint-staged
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@ -9,13 +9,17 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
 		"lint": "prettier --check .",
-		"format": "prettier --write ."
+		"format": "prettier --write .",
+		"prepare": "husky"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/enhanced-img": "^0.3.9",
 		"@sveltejs/kit": "^2.5.27",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"autoprefixer": "^10.4.20",
+		"husky": "^9.1.6",
+		"lint-staged": "^15.2.10",
 		"postcss": "^8.4.47",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.2.6",
@ -23,12 +27,15 @@
 		"svelte-check": "^4.0.0",
 		"tailwindcss": "^3.4.11",
 		"typescript": "^5.5.0",
-		"vite": "^5.4.4",
-		"@sveltejs/enhanced-img": "^0.3.9"
+		"vite": "^5.4.4"
 	},
 	"type": "module",
 	"dependencies": {
 		"clsx": "^2.1.1",
+		"moderndash": "^3.12.0",
 		"svelte-highlight": "^7.7.0"
+	},
+	"lint-staged": {
+		"{package.json,*.js,src/**.{svelte,ts,js,css}}": "prettier --write --ignore-unknown"
 	}
 }
--- a/src/lib/Highlight.svelte
+++ b/src/lib/Highlight.svelte
@ -9,13 +9,13 @@
 		alt
 	} = $props();

-	let renderedCode = $derived(slice ? code.replace(/\/\*<hidden>[^]*?<\/hidden>\*\//, "")
-		: code.replace(/\/\*(<hidden>|<\/hidden>)\*\//g,""));
+	let renderedCode = $derived(slice ? code.replace(/#<hidden>[^]*?#<\/hidden>/, "")
+		: code.replace(/#(<hidden>|<\/hidden>)/g,""));
 	
 </script>

 <p class="sr-only">{alt}</p>
-<div class="font-mono relative" aria-hidden title={alt}>
+<div class=" font-mono relative" aria-hidden title={alt}>
 	<!-- HACK: apply the pre-wrap style to the child to avoid
 		 HTML formatting whitespace issues down the line. -->
 	<div class="*:whitespace-pre-wrap"><Highlight {language} code={renderedCode} /></div>
@ -27,3 +27,4 @@
 		({slice ? "show" : "hide"} full)
 	</button>
 </div>
+
--- a/src/lib/assets/arrow-from-left-to-down.svg
+++ b/src/lib/assets/arrow-from-left-to-down.svg
@ -1,65 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="512"
-   height="512"
-   viewBox="0 0 135.46666 135.46667"
-   version="1.1"
-   id="svg1"
-   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
-   sodipodi:docname="arrow-from-left-to-down.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview1"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     inkscape:document-units="px"
-     inkscape:zoom="2.0436167"
-     inkscape:cx="387.79288"
-     inkscape:cy="184.2322"
-     inkscape:window-width="2560"
-     inkscape:window-height="1360"
-     inkscape:window-x="30"
-     inkscape:window-y="26"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs1" />
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <path
-       style="fill:none;stroke:#b1e9d0;stroke-width:5.29167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       d="m 7.7680906,7.5091541 c 0,0 38.4917724,-4.5181708 58.9080194,0.7768092 6.293471,1.6322199 13.239679,7.0217937 14.112031,13.4646907 1.34283,9.91768 -7.073472,16.7234 -14.77889,15.435432 -8.086315,-1.351635 -9.539445,-10.597699 -6.065485,-14.788091 8.975288,-10.826254 21.354159,-4.201044 30.166085,0.64734 2.989795,1.645006 7.69663,6.452256 9.710113,10.875327 4.705176,10.335987 3.978976,18.111457 -3.884045,20.973846 C 90.59464,56.838903 81.70025,53.264158 81.69442,44.407585 81.68972,37.287142 88.552418,32.24187 95.938614,31.83997 107.58063,31.2065 115.43554,39.783947 118.1221,45.677357 c 2.40997,5.286669 4.24774,17.185947 3.44851,22.940777 -1.69551,12.208548 -16.05405,30.036616 -16.05405,30.036616"
-       id="path3"
-       sodipodi:nodetypes="csssssssssssc" />
-    <path
-       sodipodi:type="star"
-       style="fill:#b1e9d0;fill-opacity:1;stroke:#b1e9d0;stroke-width:5.29167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
-       id="path2"
-       inkscape:flatsided="false"
-       sodipodi:sides="3"
-       sodipodi:cx="57.973808"
-       sodipodi:cy="96.324318"
-       sodipodi:r1="24.403963"
-       sodipodi:r2="12.201981"
-       sodipodi:arg1="0.53437152"
-       sodipodi:arg2="1.5815691"
-       inkscape:rounded="0"
-       inkscape:randomized="0"
-       d="M 78.975588,108.75326 57.842362,108.52559 36.709136,108.29792 47.47292,90.109846 58.236701,71.921771 68.606144,90.337518 Z"
-       inkscape:transform-center-x="-5.9930106"
-       inkscape:transform-center-y="0.12432086"
-       transform="rotate(-151.201,79.803925,98.585649)" />
-  </g>
-</svg>
--- a/src/lib/assets/arrow-from-up-to-down.svg
+++ b/src/lib/assets/arrow-from-up-to-down.svg
@ -1,65 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="512"
-   height="512"
-   viewBox="0 0 135.46666 135.46667"
-   version="1.1"
-   id="svg1"
-   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
-   sodipodi:docname="arrow-from-up-to-down.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview1"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     inkscape:document-units="px"
-     inkscape:zoom="1.0218084"
-     inkscape:cx="-239.28166"
-     inkscape:cy="117.92818"
-     inkscape:window-width="2560"
-     inkscape:window-height="1360"
-     inkscape:window-x="30"
-     inkscape:window-y="26"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs1" />
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <path
-       style="fill:none;stroke:#b1e9d0;stroke-width:5.29167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       d="m 50.793004,3.8400172 c 0.04577,8.2393038 1.789258,13.0051818 11.002986,16.1775828 8.487892,2.922487 10.530007,10.902745 9.095497,17.254543 -2.20475,9.762305 -12.026078,13.604391 -18.921467,9.932072 -7.236246,-3.853849 -5.672512,-13.081852 -1.04597,-15.94941 11.953088,-7.408596 21.581254,2.810421 28.393024,10.210195 2.311161,2.510667 5.244184,8.56553 5.745989,13.399355 1.172635,11.295848 -1.989381,18.436358 -10.354507,18.64865 -5.68235,0.144207 -12.977472,-6.074328 -10.16553,-14.472655 2.260712,-6.75203 10.371898,-9.352025 17.502237,-7.383337 11.238728,3.103015 15.956913,13.733677 16.629083,20.175576 0.60296,5.778691 -1.440166,17.644438 -4.028604,22.846059"
-       id="path3"
-       sodipodi:nodetypes="cssssssssssc" />
-    <path
-       sodipodi:type="star"
-       style="fill:#b1e9d0;fill-opacity:1;stroke:#b1e9d0;stroke-width:5.29167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
-       id="path2"
-       inkscape:flatsided="false"
-       sodipodi:sides="3"
-       sodipodi:cx="57.973808"
-       sodipodi:cy="96.324318"
-       sodipodi:r1="24.403963"
-       sodipodi:r2="12.201981"
-       sodipodi:arg1="0.53437152"
-       sodipodi:arg2="1.5815691"
-       inkscape:rounded="0"
-       inkscape:randomized="0"
-       d="M 78.975588,108.75326 57.842362,108.52559 36.709136,108.29792 47.47292,90.109846 58.236701,71.921771 68.606144,90.337518 Z"
-       inkscape:transform-center-x="-4.7162935"
-       inkscape:transform-center-y="1.5424015"
-       transform="rotate(-157.87918,75.76367,97.954627)" />
-  </g>
-</svg>
--- a/src/lib/assets/box.svg
+++ b/src/lib/assets/box.svg
@ -1,45 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   viewBox="0 0 135.46666 135.46667"
-   version="1.1"
-   id="svg1"
-   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
-   sodipodi:docname="box.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview1"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     inkscape:document-units="px"
-     showguides="true"
-     inkscape:zoom="2"
-     inkscape:cx="144.75"
-     inkscape:cy="288.25"
-     inkscape:window-width="2560"
-     inkscape:window-height="1360"
-     inkscape:window-x="30"
-     inkscape:window-y="26"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs1" />
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <path
-       id="path1-2"
-       style="fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       d="M 67.733331,5.8132883 12.707612,35.665484 V 99.801825 L 67.733331,129.65338 122.75906,99.801825 V 35.665484 Z m 0,123.8400917 V 65.64932 Z M 12.707604,35.665484 67.733331,65.51703 122.75906,35.665484 M 40.220467,20.739056 95.246189,50.591263 Z" />
-  </g>
-</svg>
--- a/src/lib/components/FlowerDivider.svelte
+++ b/src/lib/components/FlowerDivider.svelte
@ -1,16 +1,17 @@
-<script>
-	import flower from "$lib/assets/flower.svg";
-	import flowerGray from "$lib/assets/flower-gray.svg";
+<script lang="ts">
+	import { range } from "moderndash"
 </script>

-<div class="flex w-full justify-center gap-x-12 flex-nowrap">
-	<!--
-		NOTE: enhanced:img seems to break when trying to have more than one element, so we are
-		using the normal img element instead...
-	-->
-	<img src={flower} width="24" height="24" alt="flower" />
-	<img src={flowerGray} width="24" height="24" alt="flower" />
-	<img src={flower} width="24" height="24" alt="flower" />
-	<img src={flowerGray} width="24" height="24" alt="flower" />
-	<img src={flower} width="24" height="24" alt="flower" />
+<div class="flex w-full justify-center gap-x-12">
+	{#snippet flower(alt)}
+		{#if alt}
+			<enhanced:img src="$lib/assets/flower-gray.svg" width="24" height="24" alt="flower" />
+		{:else}
+			<enhanced:img src="$lib/assets/flower.svg" width="24" height="24" alt="flower" />
+		{/if}
+	{/snippet}
+
+	{#each range(1, 5) as i}
+		{@render flower(i % 2 == 0)}
+	{/each}
 </div>
--- a/src/lib/components/PackageTile.svelte
+++ b/src/lib/components/PackageTile.svelte
@ -1,12 +0,0 @@
-<script lang="ts">
-	import box from "$lib/assets/box.svg?raw";
-
-	let props = $props();
-</script>
-
-<div class="flex pr-4 shadow w-60 rounded-full whitespace-nowrap bg-zinc-100 font-bold overflow-hidden">
-	<span class="w-11 h-10 bg-teal-500 py-2 pl-3 pr-2 text-white">
-		{@html box}
-	</span>
-	<span class="flex py-2 pl-2">{@render props.children?.()}</span>
-</div>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -7,9 +7,8 @@
 	import clsx from "clsx";

 	let { children } = $props();
-	globalThis.PKGS = "Petalpkgs";
+	globalThis.PKGS = "petalpkgs";
 	globalThis.DISTRO = "FleurixOS";
-	globalThis.PKGS_COUNT = "67,589";
 </script>

 <svelte:head>
@ -17,12 +16,12 @@
    <meta property="og:title" content="floral.systems" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content={$page.url?.toString()} />
-    <meta name="theme-color" content="#27a27b">
+    <meta name="theme-color" content="#136951">
 </svelte:head>

 <div class="flex flex-col underline-offset-[4px]">
 	<nav class="min-h-16 h-16 bg-zinc-50 mb-2">
-		<div class="mx-auto container flex h-full justify-between px-2">
+		<div class="mx-auto container flex h-full justify-between">
 			<a class="group flex h-full items-center justify-center font-aladin text-3xl/10
 					  text-coral-970 transition-colors duration-75 no-link-style gap-x-2
 					  hover:bg-clip-text hover:bg-gradient-to-r hover:from-coral-500 hover:from-15% hover:to-coral-400 hover:text-transparent"
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,24 +1,20 @@
 <script>
 	import Highlight from "$lib/Highlight.svelte";
 	import LinkChip from "$lib/components/LinkChip.svelte";
-	import PackageTile from "$lib/components/PackageTile.svelte";
 	import FlowerDivider from "$lib/components/FlowerDivider.svelte";

-	import leaf from "$lib/assets/leaf.svg";
-	import petal from "$lib/assets/petal.svg";
-
 	import nix from "svelte-highlight/languages/nix";

 	import demo1 from "./demo1/vm.nix?raw";
 	import forkGraph from "./fork.svg?raw";
 </script>

-<div class="flex flex-col gap-y-16 px-2">
-	<div class="mt-4 sm:mt-16">
-		<h1 class="text-5xl sm:text-6xl text-balance">A declarative, comprehensive <span class="text-teal-500 font-aladin font-bold">package&nbsp;ecosystem</span></h1>
-		<p class="mt-4 text-xl lg:text-2xl max-w-3xl text-balance">
+<div class="flex flex-col gap-y-24">
+	<div class="mt-16">
+		<h1 class="text-6xl text-balance">A declarative, comprehensive <span class="text-teal-500 font-aladin font-bold">package&nbsp;ecosystem</span></h1>
+		<p class="mt-4 text-xl lg:text-2xl max-w-4xl text-balance">
 			Declaratively own your Linux systems with<wbr>
-			full end-to-end&nbsp;customizability of <b class="text-teal-500">{PKGS_COUNT}</b> packages.
+			full end-to-end&nbsp;customizability of <b class="text-teal-500">67,589</b> packages.
 		</p>
 		<div class="flex pt-4 gap-x-2">
 			<LinkChip
@ -52,47 +48,33 @@

 	<div class="">
 		<h2 class="w-fit text-4xl pb-4">
-			<span class="font-aladin font-bold text-teal-500">{DISTRO}</span> — our Linux distribution
+			<span class="text-teal-500">{DISTRO}</span> — our linux distribution
 		</h2>
-		<div class="text-xl flex flex-col h-full max-w-3xl">
+		<div class="grid lg:grid-cols-[1.15fr,calc(theme(gap.12)),1fr] items-end">
+			<div class="clear-left text-xl flex flex-col h-full">
 				Gain certainty in your deployed system configuration by
 				replacing your opaque state with code.
-		</div>
-		<div class="pt-4">
-			<LinkChip
-				href="https://fleurixos.org"
-				target="_blank"
-				class="hover:border-teal-200"
-			>
-				<!-- NOTE: enhanced:img breaks when creating multiple elements with the same src -->
-				<img src={leaf} width="24" height="24" />
-				<span>Try FleurixOS</span>
-			</LinkChip>
-		</div>
-		<div class="grid grid-cols-[1fr,1fr] gap-4 mt-4 align-top place-items-start">
-			<div class="flex relative w-full">
-				<div class="text-sm bg-blue-50 p-2 rounded-md drop-shadow max-w-3xl max-sm:max-w-full h-fit w-full">
+				<div class="grow"></div>
+				<div class="text-sm bg-blue-50 p-2 rounded-md drop-shadow mt-2">
 					<Highlight
 						language={nix} code={demo1}
 						alt="Definition of a simple {DISTRO} system running MediaWiki with the HTTP port opened."
 					/>
 				</div>
 			</div>
-			<div class="drop-shadow flex flex-col mx-auto rounded overflow-hidden w-full max-w-3xl">
-				<div class="p-2 bg-zinc-100 w-full flex justify-between grow">
+			<div class="text-4xl flex justify-center items-center h-full">
+				⇒
+			</div>
+			<div class="float-right drop-shadow flex flex-col rounded overflow-hidden">
+				<div class="p-2 bg-gradient-to-b from-zinc-100 from-40% to-white w-full flex justify-between grow bg-teal-500">
 					<div class="p-1 px-3 bg-zinc-200 w-full rounded-sm">
-						<span class="text-zinc-500">http://</span><b>localhost</b><span class="text-zinc-500">:80</span>
-					</div>
-					<div class="flex items-center pl-4 pr-2 gap-x-2">
-						<div class="w-3 h-3 rounded-full bg-[#facc15]" />
-						<div class="w-3 h-3 rounded-full bg-teal-400" />
-						<div class="w-3 h-3 rounded-full bg-coral-400" />
+						<span class="text-zinc-700">http://</span><b>localhost</b>:80
 					</div>
+					<span class="text-zinc-700 font-black text-lg select-none pl-2">⨯</span>
 				</div>
 				<!-- screenshot taken as Responsive (3660x2121), DPR=1 in Firefox DevTools (@the phone/tablet icon) -->
 				<enhanced:img src="./demo1/mediawiki.png?format=png"
 					alt="The main page of a brand-new MediaWiki instance hosted on the VM. It starts: 'MediaWiki has been installed.'"
-					class="w-full"
 				/>
 			</div>
 		</div>
@ -100,57 +82,9 @@

 	<FlowerDivider />

-	<div>
-		<h2 class="text-4xl w-fit pb-4">
-			<span class="font-aladin font-bold text-teal-500">{PKGS}</span> — our package set
-		</h2>
-		<div class="text-xl h-full max-w-3xl">
-			A complete package set with <b class="text-teal-500">{PKGS_COUNT}</b> packages, built on top of 21 years of volunteer labor to reproducibly package software.
-		</div>
-		<div class="pt-4">
-			<LinkChip
-				href="https://fleurixos.org"
-				target="_blank"
-				class="hover:border-coral-200"
-			>
-				<!-- NOTE: enhanced:img breaks when creating multiple elements with the same src -->
-				<img src={petal} width="24" height="24" />
-				<span>Use Petalpkgs</span>
-			</LinkChip>
-		</div>
-		<div class="grid grid-cols-2 lg:grid-cols-4 place-items-center grid-flow-dense gap-4 max-w-5xl mx-auto mt-6">
-			<PackageTile>LLVM</PackageTile>
-			<PackageTile>GCC</PackageTile>
-			<PackageTile>NodeJS</PackageTile>
-			<PackageTile>Rust</PackageTile>
-			<PackageTile>Firefox</PackageTile>
-			<PackageTile>Aseprite</PackageTile>
-			<PackageTile>Discord</PackageTile>
-			<PackageTile>KDE</PackageTile>
-			<PackageTile>Python</PackageTile>
-			<PackageTile>Inkscape</PackageTile>
-			<PackageTile>Pipewire</PackageTile>
-			<PackageTile>Kitty</PackageTile>
-			<PackageTile>Element</PackageTile>
-			<PackageTile>Blender</PackageTile>
-			<PackageTile>Ruby</PackageTile>
-			<PackageTile>Chromium</PackageTile>
-			<PackageTile>Steam</PackageTile>
-			<PackageTile>Thunderbird</PackageTile>
-			<PackageTile>VS Code</PackageTile>
-			<PackageTile>Vim</PackageTile>
-			<PackageTile>GNOME Desktop</PackageTile>
-			<PackageTile>Emacs</PackageTile>
-			<PackageTile>Lutris</PackageTile>
-			<PackageTile>Lix</PackageTile>
-		</div>
-	</div>
-
-	<FlowerDivider />
-
 	<div class="pb-60">
 		<h2 class="text-4xl w-fit pb-4">
-			Our <span class="font-aladin font-bold text-teal-500">vision</span> for <span class="font-aladin fontold text-coral-970">floral.systems</span>
+			A <span class="text-teal-500">reimagining</span> of the NixOS community
 		</h2>
 		<div class="grid lg:grid-cols-[1.15fr,1fr] gap-12">
 			<div class="text-xl flex flex-col gap-4">
@ -212,7 +146,8 @@

 <!-- https://pad.lix.systems/v0Bew569R_2IB0abRSy4kA?view=#Pretty-much-final-draft-About-us -->

-<div class="grid lg:grid-cols-3 gap-6 justify-center my-8 w-full xl:w-[115%] xl:-ms-[7.5%] opacity-[0.4] hidden">
+{#if false}
+<div class="grid lg:grid-cols-3 gap-6 justify-center my-8 w-full xl:w-[115%] xl:-ms-[7.5%] opacity-[0.4]">
 	<div class="bg-blue-50 p-4 rounded-lg drop-shadow-lg">
 		<h3 class="text-2xl font-bold text-coral-600">Community Focused</h3>
 		Floral is a non-profit organization ran by volunteer developers.<br>
@ -231,5 +166,6 @@
 		you should have an easy time compared to traditional *nix distributions.
 	</div>
 </div>
+{/if}

 <!-- show nixos tests -->
--- a/src/routes/demo1/vm.nix
+++ b/src/routes/demo1/vm.nix
@ -8,7 +8,7 @@ with import <nixpkgs> { }; nixos
      pkgs.writeText "password" "correcthorsebatterystaple";
  };

-  networking.firewall.allowedTCPPorts = [ 80 ];/*<hidden>*/
+  networking.firewall.allowedTCPPorts = [ 80 ];#<hidden>

  users.users.root.openssh.authorizedKeys.keys = [
    "…your key here…"
@ -18,8 +18,8 @@ with import <nixpkgs> { }; nixos
    settings.PermitRootLogin = "yes";
  };
  # run with:
-  # nix-build vm.nix -A vm && \
-  # (rm nixos.qcow2 ; QEMU_NET_OPTS='hostfwd=tcp::3000-:80' ./result/bin/run-nixos-vm)
-  #
-  # xdg-open http://localhost:3000/*</hidden>*/
+  # nix-build vm.nix -A vm && (rm nixos.qcow2 ; QEMU_NET_OPTS='hostfwd=tcp::3000-:80' ./result/bin/run-nixos-vm)
+  # xdg-open http://localhost:3000
+
+#</hidden>
 }
--- a/src/routes/docs/+layout.svelte
+++ b/src/routes/docs/+layout.svelte
@ -17,15 +17,20 @@
 			</ul>
 		</nav>
 	</div>
-	<div class="Layout-docs-content w-[700px] max-w-[700px]">{@render children?.()}</div>
+	<div class="Layout-docs-content w-[700px] max-w-[700px] text-xl">{@render children?.()}</div>
 	<div class="grow"></div>
 </div>

 <style>
 	:global(.Layout-docs-content p:not(.no-docs-style)) {
-		@apply text-xl tracking-tight mb-1;
+		@apply tracking-tight mb-1;
 	}
+
 	:global(.Layout-docs-content h1:not(.no-docs-style)) {
-		@apply text-center underline underline-offset-8 decoration-teal-700 font-aladin text-teal-950;
+		@apply text-4xl lg:text-5xl my-4 text-center underline underline-offset-8 decoration-teal-800 font-aladin text-teal-950;
+	}
+
+	:global(.Layout-docs-content h2:not(.no-docs-style)) {
+		@apply text-teal-600 text-2xl font-semibold my-1;
 	}
 </style>
Author	SHA1	Message	Date
mei (ckie)	a62087432e	fix(docs): return styling to pre-regression (global style removal)	2024-10-27 01:39:38 +03:00
Jake Hamilton	2bfe24b195	feat(root page): break out hero links into chips, add accent colors on hover	2024-10-27 01:31:14 +03:00
Jake Hamilton	99800ce829	feat(root page): redesign the hero element, add dividers between sections	2024-10-27 01:30:33 +03:00
Jake Hamilton	18dfb6face	feat(root page): redesign the hero element, add dividers between sections Co-authored-by: ckie <git-525ff67@ckie.dev>	2024-10-27 01:23:33 +03:00
mei (ckie)	11ca9cd554	feat: setup lint-staged with prettier	2024-10-27 00:42:30 +03:00
mei (ckie)	f530be0493	fix(/): don't include old blocks in DOM	2024-10-25 16:34:09 +03:00