Add styling (#40)

Author: kevinobee

src/lib/styles/app.css

@@ -0,0 +1,60 @@
+:root {
+	--max-width: 1024px;
+	--min-width: 320px;
+	--font-size: 18px;
+	--font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	--line-height: 1.6;
+	--gap: 1rem;
+	--color: #333;
+	--bg: #eee;
+	--bg-code: hsla(0, 0%, 0%, 0.1);
+}
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+body {
+	max-width: var(--max-width);
+	min-width: var(--min-width);
+	margin: 0 auto;
+	padding: var(--gap);
+	background: var(--bg);
+	color: var(--color);
+	font-family: var(--font-family);
+	font-size: var(--font-size);
+	line-height: var(--line-height);
+	-webkit-font-smoothing: antialiased;
+	scrollbar-gutter: stable;
+}
+
+h1,
+h2 {
+	max-width: 50ch;
+	text-wrap: balance;
+	line-height: 1;
+}
+
+h2 {
+	padding-block-start: calc(var(--gap) * 0.7);
+}
+
+p {
+	max-width: 77ch;
+	text-wrap: pretty;
+}
+
+pre code {
+	padding-block: calc(var(--gap) / 5);
+	padding-inline: calc(var(--gap) / 2);
+	background-color: var(--bg-code);
+}
+
+code {
+	font-weight: 700;
+	padding-inline: calc(var(--gap) / 3);
+	background-color: var(--bg-code);
+}

src/routes/+layout.svelte

@@ -0,0 +1,7 @@
+<script>
+	import '$lib/styles/app.css';
+</script>
+
+<main>
+	<slot />
+</main>

src/routes/+page.svelte

@@ -18,15 +18,13 @@
 
 <h2>Installation</h2>
 
-<pre><code>
-npm install {npmPackage}
-</code></pre>
+<pre><code>npm install {npmPackage}</code></pre>
 
 <h2>Getting Started</h2>
 
 <p>
 	Add the <code>handleHttpResponseHeaders</code> Hook in <code>src/hooks.server.ts</code> file.
-	Refer to the repo
+	Refer to the repository's
 	<a
 		href="https://github.com/kevinobee/sveltekit-security-headers?tab=readme-ov-file#getting-started"
 		>README</a