Improve and adapt demo app

Author: ahansson

src/app.scss

@@ -1,3 +1,12 @@
 @use 'hgrid-css/sass/hgrid' with (
-  $link-color: #b4006f
+
+  // These are examples of variables 
+  // you can customize. Full list: 
+  // https://github.com/ahansson/hgrid-css/blob/main/sass/variables/_variables.scss
+
+  $link-color: #b4006f,
+  $body-bg: #f0d8a4,
+  $turn-off-link-decoration: true,
+  $use-global-link-underlines: true,
+  $link-underline-color: #d569a6
 );

src/lib/Counter/index.svelte

@@ -15,9 +15,7 @@
 
 <div class="counter">
 	<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
-		<svg aria-hidden="true" viewBox="0 0 1 1">
-			<path d="M0,0.5 L1,0.5" />
-		</svg>
+		<span class="translate-push8v">-</span>
 	</button>
 
 	<div class="counter-viewport">
@@ -28,9 +26,7 @@
 	</div>
 
 	<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
-		<svg aria-hidden="true" viewBox="0 0 1 1">
-			<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
-		</svg>
+		<span class="translate-push8v">+</span>
 	</button>
 </div>
 
@@ -51,24 +47,13 @@
 		border: 0;
 		background-color: transparent;
 		color: var(--text-color);
-		font-size: 2rem;
+		font-size: 4rem;
 	}
 
 	.counter button:hover {
 		background-color: var(--secondary-color);
 	}
 
-	svg {
-		width: 25%;
-		height: 25%;
-	}
-
-	path {
-		vector-effect: non-scaling-stroke;
-		stroke-width: 2px;
-		stroke: var(--text-color);
-	}
-
 	.counter-viewport {
 		width: 8em;
 		height: 4em;

src/lib/Header/index.svelte

@@ -1,12 +1,12 @@
 <script>
 	import { page } from '$app/stores';
-	import logo from './svelte-logo.svg';
+	import logo from './../../../static/icon.png';
 </script>
 
-<header>
-	<div class="corner">
-		<a href="https://kit.svelte.dev">
-			<img src={logo} alt="SvelteKit" />
+<header class="flex justify-content-space-between">
+	<div class="corner padding-10">
+		<a href="https://hgrid.io">
+			<img src={logo} alt="Hgrid" />
 		</a>
 	</div>
 
@@ -24,21 +24,17 @@
 		</svg>
 	</nav>
 
-	<div class="corner">
-		<!-- TODO put something else here? github link? -->
+	<div class="corner pr-40 pt-10">
+		<p><a href="https://github.com/ahansson/hgrid-css">GitHub</a></p>
 	</div>
 </header>
 
 <style>
-	header {
-		display: flex;
-		justify-content: space-between;
-	}
 
-	.corner {
-		width: 3em;
-		height: 3em;
-	}
+  .corner {
+    width: 5.4rem;
+    height: 5.4rem;
+  }
 
 	.corner a {
 		display: flex;
@@ -107,7 +103,7 @@
 		padding: 0 1em;
 		color: var(--heading-color);
 		font-weight: 700;
-		font-size: 0.8rem;
+		font-size: 1.7rem;
 		text-transform: uppercase;
 		letter-spacing: 10%;
 		text-decoration: none;

src/lib/Header/svelte-logo.svg

@@ -5,41 +5,19 @@
 
 <Header />
 
-<main>
+<main class="flex flex-1 f-direction-column padding-10 width-100pct margin-0-auto box-sizing-border-box">
 	<slot />
 </main>
 
-<footer>
-	<p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
+<footer class="text-center">
+	<p>visit <a href="https://kit.svelte.dev" target="_blank" rel="noopener">kit.svelte.dev</a> to learn <code>SvelteKit</code></p>
+	<p>visit <a href="https://hgrid.io" target="_blank" rel="noopener">hgrid.io</a> to get going with <code>hgrid-css</code></p>
 </footer>
 
 <style>
-	main {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		padding: 1rem;
-		width: 100%;
-		max-width: 1024px;
-		margin: 0 auto;
-		box-sizing: border-box;
-	}
-
-	footer {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		padding: 40px;
-	}
-
-	footer a {
-		font-weight: bold;
-	}
-
 	@media (min-width: 480px) {
 		footer {
-			padding: 40px 0;
+			padding: 4rem 0;
 		}
 	}
 </style>

src/routes/__layout.svelte

@@ -18,16 +18,15 @@
 	<title>About</title>
 </svelte:head>
 
-<div class="content">
+<div class="content text-center padding-top-80 max-width-75pct margin-0-auto">
 	<h1>About this app</h1>
 
 	<p>
-		This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your own by typing the
+		This is a <a href="https://kit.svelte.dev" target="_blank">SvelteKit</a> app. You can make your own by typing the
 		following into your command line and following the prompts:
 	</p>
 
-	<!-- TODO lose the @next! -->
-	<pre>npm init svelte@next</pre>
+	<pre><code>npm init svelte</code></pre>
 
 	<p>
 		The page you're looking at is purely static HTML, with no client-side interactivity needed.
@@ -40,11 +39,3 @@
 		it with JavaScript disabled!
 	</p>
 </div>
-
-<style>
-	.content {
-		width: 100%;
-		max-width: var(--column-width);
-		margin: var(--column-margin-top) auto 0 auto;
-	}
-</style>

src/routes/about.svelte

@@ -10,50 +10,15 @@
 	<title>Home</title>
 </svelte:head>
 
-<section>
-	<h1>
-		<div class="welcome">
-			<picture>
-				<source srcset="svelte-welcome.webp" type="image/webp" />
-				<img src="svelte-welcome.png" alt="Welcome" />
-			</picture>
-		</div>
+<section class="flex f-direction-column justify-content-center align-items-center flex-1 text-center">
 
-		to your new<br />SvelteKit app
+	<h1 class="mt-80">
+		Welcome to your <br />SvelteKit demo app with CSS from <strong>hgrid</strong>
 	</h1>
 
-	<h2>
-		try editing <strong>src/routes/index.svelte</strong>
+	<h2 class="h5 font-normal">
+		This content is located in <code><mark>src/routes/index.svelte</mark></code>
 	</h2>
 
 	<Counter />
 </section>
-
-<style>
-	section {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		flex: 1;
-	}
-
-	h1 {
-		width: 100%;
-	}
-
-	.welcome {
-		position: relative;
-		width: 100%;
-		height: 0;
-		padding: 0 0 calc(100% * 495 / 2048) 0;
-	}
-
-	.welcome img {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0;
-		display: block;
-	}
-</style>

src/routes/index.svelte

@@ -41,7 +41,7 @@
 	<title>Todos</title>
 </svelte:head>
 
-<div class="todos">
+<div class="todos text-center max-width-75pct margin-0-auto padding-100">
 	<h1>Todos</h1>
 
 	<form
@@ -77,8 +77,8 @@
 					result: patch
 				}}
 			>
-				<input type="hidden" name="done" value={todo.done ? '' : 'true'} />
-				<button class="toggle" aria-label="Mark todo as {todo.done ? 'not done' : 'done'}" />
+				<input class="margin-0" type="hidden" name="done" value={todo.done ? '' : 'true'} />
+				<button class="toggle translate-push40h" aria-label="Mark todo as {todo.done ? 'not done' : 'done'}" />
 			</form>
 
 			<form
@@ -117,7 +117,7 @@
 	}
 
 	.new {
-		margin: 0 0 0.5rem 0;
+		margin: 0 0 2rem 0;
 	}
 
 	input {
@@ -126,7 +126,7 @@
 
 	input:focus-visible {
 		box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.1);
-		border: 1px solid #ff3e00 !important;
+		border: 2px solid #b70e71 !important;
 		outline: none;
 	}
 
@@ -142,7 +142,7 @@
 
 	.todo {
 		display: grid;
-		grid-template-columns: 2rem 1fr 2rem;
+		grid-template-columns: 6rem 1fr 2rem;
 		grid-gap: 0.5rem;
 		align-items: center;
 		margin: 0 0 0.5rem 0;
@@ -156,12 +156,11 @@
 
 	.done {
 		transform: none;
-		opacity: 0.4;
+		opacity: 0.6;
 		filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.1));
 	}
 
 	form.text {
-		position: relative;
 		display: flex;
 		align-items: center;
 		flex: 1;
@@ -171,6 +170,7 @@
 		flex: 1;
 		padding: 0.5em 2em 0.5em 0.8em;
 		border-radius: 3px;
+    margin: unset;
 	}
 
 	.todo button {
@@ -180,13 +180,17 @@
 		background-color: transparent;
 		background-position: 50% 50%;
 		background-repeat: no-repeat;
+    position: relative;
+    top: 1rem;
+    right: 3rem;
 	}
 
 	button.toggle {
 		border: 1px solid rgba(0, 0, 0, 0.2);
 		border-radius: 50%;
 		box-sizing: border-box;
 		background-size: 1em auto;
+    padding: unset;
 	}
 
 	.done .toggle {