diff --git a/.gitignore b/.gitignore
index 22545811..6c655ec2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,14 +1,15 @@
 # Deps
-node_modules
+node_modules/
 
 # Output
-/.svelte-kit
-/build
-/dist
-/dist_*
-/target
-/.gro
-/.zzz
+.svelte-kit/
+build/
+dist/
+dist_*/
+target/
+.gro/
+.fuz/
+.zzz/
 
 # Generated test repos
 /src/test/fixtures/repos/
diff --git a/src/lib/ModulesDetail.svelte b/src/lib/ModulesDetail.svelte
index 4edf2619..0a5b5eab 100644
--- a/src/lib/ModulesDetail.svelte
+++ b/src/lib/ModulesDetail.svelte
@@ -44,7 +44,7 @@
 		{#each repos_modules as repo_modules (repo_modules)}
 			{@const {repo, modules} = repo_modules}
 			<li class="repo_module">
-				<header class="width_100 position_relative">
+				<header class="width:100% position:relative">
 					<a href="#{repo.name}" id={repo.name} class="subtitle">🔗</a>
 					<a href={resolve(`/tree/${repo.repo_name}`)}>{repo.name}</a>
 				</header>
diff --git a/src/lib/ModulesPage.svelte b/src/lib/ModulesPage.svelte
index 1495ae46..04a629c5 100644
--- a/src/lib/ModulesPage.svelte
+++ b/src/lib/ModulesPage.svelte
@@ -19,7 +19,7 @@
 	<title>modules {repo.package_json.glyph} {repo.package_json.name}</title>
 </svelte:head>
 
-<main class="box width_100">
+<main class="box width:100%">
 	<div class="p_lg">
 		<PageHeader {repo} />
 	</div>
diff --git a/src/lib/PullRequestsPage.svelte b/src/lib/PullRequestsPage.svelte
index 9c7715fa..b1ce593e 100644
--- a/src/lib/PullRequestsPage.svelte
+++ b/src/lib/PullRequestsPage.svelte
@@ -20,7 +20,7 @@
 	<title>pull requests {repo.package_json.glyph} {repo.package_json.name}</title>
 </svelte:head>
 
-<main class="box width_100">
+<main class="box width:100%">
 	<div class="p_lg">
 		<PageHeader {repo} />
 	</div>
diff --git a/src/lib/TreeItemPage.svelte b/src/lib/TreeItemPage.svelte
index 04d35bea..875cd217 100644
--- a/src/lib/TreeItemPage.svelte
+++ b/src/lib/TreeItemPage.svelte
@@ -26,7 +26,7 @@
 	<title>{slug} - tree {repo.package_json.glyph} {repo.package_json.name}</title>
 </svelte:head>
 
-<main class="box width_100">
+<main class="box width:100%">
 	<div class="p_lg">
 		<PageHeader {repo} />
 	</div>
diff --git a/src/lib/TreePage.svelte b/src/lib/TreePage.svelte
index 33150d5c..b86d5af7 100644
--- a/src/lib/TreePage.svelte
+++ b/src/lib/TreePage.svelte
@@ -21,7 +21,7 @@
 	<title>tree {repo.package_json.glyph} {repo.name}</title>
 </svelte:head>
 
-<main class="box width_100">
+<main class="box width:100%">
 	<div class="p_lg">
 		<PageHeader {repo} />
 	</div>
diff --git a/src/routes/MainHeader.svelte b/src/routes/MainHeader.svelte
index e3d27f7f..b312f628 100644
--- a/src/routes/MainHeader.svelte
+++ b/src/routes/MainHeader.svelte
@@ -5,7 +5,7 @@
 
 <header class="pane p_lg">
 	<div class="box bg mb_lg">
-		<h1 class="mb_lg font_size_xl2 font_weight_400">fuz_gitops</h1>
+		<h1 class="mb_lg font_size_xl2 font-weight:400">fuz_gitops</h1>
 		<!-- TODO FuzGitopsLogo -->
 		<Svg
 			data={logo_fuz}
@@ -14,5 +14,5 @@
 			label="a friendly blue spider facing you"
 		/>
 	</div>
-	<p class="text_align_center">a tool for managing many repos 🪄</p>
+	<p class="text-align:center">a tool for managing many repos 🪄</p>
 </header>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 3789cab7..67df3df8 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -18,7 +18,7 @@
 		<PageHeader repo={library}></PageHeader>
 	</div>
 	<EcosystemLinksPanel />
-	<section class="box width_100 mb_lg">
+	<section class="box width:100% mb_lg">
 		<div class="panel p_md width_upto_md">
 			<LibraryDetail {library} />
 		</div>