fix

src/layouts/Base.astro

@@ -49,7 +49,6 @@ const { title } = Astro.props;
 				width: 100vw;
 				height: 100vh;
 				overflow-x: hidden;
-
 				background-color: var(--bg);
 				font-family:
 					system-ui,
@@ -66,6 +65,7 @@ const { title } = Astro.props;
 				font-size: 18px;
 				color: white;
 				scrollbar-color: #fff2 transparent;
+				tab-size: 4;
 				--bg: #0b0a0b;
 				--hbg: color-mix(in srgb, #0b0a0b, black); /* half background */
 				--acc: #ca3eed;

src/pages/basic-html.md

@@ -5,15 +5,18 @@ order: 1
 
 # Basic HTML
 
->### Note
+> ### Note
+>
 > For the purposes of easy documentation, all examples will be written with JSX syntax, which is not supported in the JavaScript standard and must be used with a preprocessor such as tsc, esbuild, Babel, etc. This is entirely optional, and the `html` tag function is provided to allow for use without a preprocessor:
 >
 > ```js
 > return (
 > 	html`<button on:click=${() => this.counter++}>I have been clicked ${use(this.counter)} times!</button>`;
 > )
 > ```
+>
 > Whereas the equivalent JSX would look like
+>
 > ```jsx
 > return (
 > 	<button on:click={() => this.counter++}>I have been clicked {use(this.counter)} times!</button>;
@@ -32,7 +35,9 @@ document.body.appendChild(button);
 ```
 
 We just created a button, with the class "some-button", and added it to the document. This is the simplest possible way of using dreamland, and is why it's so easy to slowly transition to using it from a plain-js codebase.
+
 > Note: If you are coming from react, you may be used to using `className` instead of `class`. In dreamland, we use `class` to match the standard HTML attribute.
+
 ### Extra (syntax) Sugar!
 
 What if we wanted to do something when the button is clicked? For any DOM event, you can use `on:` handlers.

src/pages/index.astro

@@ -50,7 +50,6 @@ document.body.appendChild(root);
 						dreamland has <b>no virtual DOM</b>, <b>no JSX</b>, and <b>no build step</b>. Just write your
 						components in javascript and attach them to the DOM.
 					</p>
-					<br />
 					<p>
 						dreamland is <b>extremely small</b>, coming in at <b>1.6kb</b> minified and gzipped.
 					</p>
@@ -130,9 +129,10 @@ document.body.appendChild(root);
 				gap: 3rem;
 				text-align: left;
 			}
-			@media (max-width: 800px) {
+			@media (max-width: 60rem) {
 				.split {
 					flex-direction: column-reverse;
+					gap: 0;
 				}
 			}
 

src/styles/style.css

@@ -1,6 +1,5 @@
 main {
 	color: #ddd;
-	tab-size: 4;
 	h1,
 	h2,
 	h3,