css-ing to death of the writer

I hate css.
2023-08-14 17:14:46 +02:00
parent 6f6178b066
commit 3cc52e37b2
9 changed files with 245 additions and 52 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"@fortawesome/fontawesome-free": "^6.4.2",
+				"bulma": "^0.9.4",
 				"dotenv": "^16.3.1",
 				"js-yaml": "^4.1.0"
 			},
@@ -26,6 +27,7 @@
 				"eslint-plugin-svelte": "^2.30.0",
 				"prettier": "^2.8.0",
 				"prettier-plugin-svelte": "^2.10.1",
+				"sass": "^1.65.1",
 				"svelte": "^4.0.5",
 				"svelte-check": "^3.4.3",
 				"tslib": "^2.4.1",
@@ -1465,6 +1467,11 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/bulma": {
+			"version": "0.9.4",
+			"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
+			"integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
+		},
 		"node_modules/busboy": {
 			"version": "1.6.0",
 			"resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -2341,6 +2348,12 @@
 				"node": ">= 4"
 			}
 		},
+		"node_modules/immutable": {
+			"version": "4.3.2",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.2.tgz",
+			"integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==",
+			"dev": true
+		},
 		"node_modules/import-fresh": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -3304,6 +3317,23 @@
 				"rimraf": "bin.js"
 			}
 		},
+		"node_modules/sass": {
+			"version": "1.65.1",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.65.1.tgz",
+			"integrity": "sha512-9DINwtHmA41SEd36eVPQ9BJKpn7eKDQmUHmpI0y5Zv2Rcorrh0zS+cFrt050hdNbmmCNKTW3hV5mWfuegNRsEA==",
+			"dev": true,
+			"dependencies": {
+				"chokidar": ">=3.0.0 <4.0.0",
+				"immutable": "^4.0.0",
+				"source-map-js": ">=0.6.2 <2.0.0"
+			},
+			"bin": {
+				"sass": "sass.js"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
 		"node_modules/semver": {
 			"version": "7.5.4",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
 		"eslint-plugin-svelte": "^2.30.0",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",
+		"sass": "^1.65.1",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
 		"tslib": "^2.4.1",
@@ -38,6 +39,7 @@
 	"type": "module",
 	"dependencies": {
 		"@fortawesome/fontawesome-free": "^6.4.2",
+		"bulma": "^0.9.4",
 		"dotenv": "^16.3.1",
 		"js-yaml": "^4.1.0"
 	}
--- a/src/app.html
+++ b/src/app.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
--- a/src/app.scss
+++ b/src/app.scss
@@ -0,0 +1,119 @@
+html,
+body {
+	height: 100%;
+	background-color: var(--background);
+}
+
+body {
+	height: auto;
+	min-height: 100%;
+	background-image: var(--background-image);
+	background-size: cover;
+	background-position: center;
+	color: var(--text);
+	transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
+
+	a {
+		color: var(--link);
+		&:hover {
+			color: var(--link-hover);
+		}
+	}
+
+	.title {
+		color: var(--text-title);
+	}
+
+	.subtitle {
+		color: var(--text-subtitle);
+	}
+}
+
+h1 {
+	font-size: 2rem;
+}
+
+h2 {
+	font-size: 1.7rem;
+	margin-top: 2rem;
+	margin-bottom: 1rem;
+
+	.fas,
+	.fab,
+	.far {
+		margin-right: 10px;
+	}
+
+	span {
+		font-weight: bold;
+		color: var(--highlight-secondary);
+	}
+}
+
+header {
+	color: var(--text-header);
+
+	.dashboard-title {
+		padding-left: 16px;
+	}
+
+	.first-line {
+		.container {
+			display: flex;
+			flex-flow: row wrap;
+			align-items: center;
+		}
+
+		min-height: 100px;
+		background-color: var(--highlight-primary);
+
+		h1 {
+			margin-top: -12px;
+			font-size: 2rem;
+		}
+		.headline {
+			font-size: 0.9rem;
+			height: min-content;
+		}
+
+		.container {
+			min-height: 80px;
+			padding: 10px 0;
+		}
+		.logo {
+			i {
+				vertical-align: top;
+				padding: 8px 15px;
+				font-size: 48px;
+			}
+
+			img {
+				max-height: 70px;
+				max-width: 70px;
+			}
+		}
+	}
+
+	.navbar {
+		background-color: var(--highlight-secondary);
+
+		a {
+			color: var(--text-header);
+			padding: 8px 12px;
+
+			&:hover,
+			&:focus {
+				color: var(--text-header);
+				background-color: var(--highlight-hover);
+			}
+		}
+
+		.navbar-menu {
+			background-color: inherit;
+		}
+	}
+
+	.navbar-end {
+		text-align: right;
+	}
+}
--- a/src/config.yml
+++ b/src/config.yml
@@ -2,31 +2,30 @@ title: 'Hello World !!'
 subtitle: 'actually, I am a new pilot.'
 logo: 'icon-any.svg'
 icon: 'fa fa-cloud'
-asmask: false
+asmask: true

 colors:
-  dark:
-    test: red
-
+    dark:
+        test: red

 services:
-  - title: '/Cloud'
-    subtitle: 'Private Cloud Utilities'
-    icon: 'fas fa-cloud'
-    items:
-      - title: 'NAS'
-        subtitle: 'Network Attached Storage'
-        icon: 'fas fa-hard-drive'
-        target: '_blank'
-        url: '/NAS'
-        type: prowlarr
+    - title: '/Cloud'
+      subtitle: 'Private Cloud Utilities'
+      icon: 'fas fa-cloud'
+      items:
+          - title: 'NAS'
+            subtitle: 'Network Attached Storage'
+            icon: 'fas fa-hard-drive'
+            target: '_blank'
+            url: '/NAS'
+            type: prowlarr

-        keywords: 'cloud storage files'
+            keywords: 'cloud storage files'

-      - title: 'PiHole'
-        subtitle: 'A DNS Hole'
-        icon: 'fas fa-hard-drive'
-        target: '_blank'
-        url: '/pihole'
-        type: 'pihole'
-        keywords: 'cloud storage files'
+          - title: 'PiHole'
+            subtitle: 'A DNS Hole'
+            icon: 'fas fa-hard-drive'
+            target: '_blank'
+            url: '/pihole'
+            type: 'pihole'
+            keywords: 'cloud storage files'
--- a/src/lib/components/Brand.svelte
+++ b/src/lib/components/Brand.svelte
@@ -3,6 +3,7 @@

 	export let brand: BrandConfig = {};
 	export let size = 48;
+	export let color = 'var(--text)';
 	console.log(brand);

 	function masked() {
@@ -11,8 +12,8 @@
 </script>

 <div
-	class="logo container"
-	style="--size: {size}px; --mask: url({brand.logo || ''})"
+	class="container"
+	style="--size: {size}px; --mask: url({brand.logo || ''}); --mask-color: {color}"
 	class:masked={masked()}
 >
 	{#if brand.logo}
@@ -20,7 +21,7 @@
 			<img src={brand.logo} alt="logo" />
 		{/if}
 	{:else if brand.icon}
-		<i class="fa-fw {brand.icon}" />
+		<i class={brand.icon} />
 	{/if}
 </div>

@@ -29,11 +30,11 @@
 		width: var(--size);
 		min-width: min-content;
 		height: var(--size);
-		font-size: var(--size);
+		color: var(--mask-color);
 	}

 	.masked {
-		background: black;
+		background: var(--mask-color);
 		mask: var(--mask) center no-repeat;
 		mask-size: var(--size);
 		-webkit-mask: var(--mask) center no-repeat;
--- a/src/lib/components/ThemeVariantButton.svelte
+++ b/src/lib/components/ThemeVariantButton.svelte
@@ -9,12 +9,14 @@
 	}
 </script>

-<button on:click={next}>
-	{#if $themeVariant == 'default'}
-		<i class="fa fa-circle-half-stroke" />
-	{:else if $themeVariant == 'light'}
-		<i class="fa-regular fa-circle" />
-	{:else if $themeVariant == 'dark'}
-		<i class="fa-solid fa-circle" />
-	{/if}
-</button>
+<a on:click={next}>
+	<span class="icon">
+		{#if $themeVariant == 'default'}
+			<i class="fas fa-circle-half-stroke" />
+		{:else if $themeVariant == 'light'}
+			<i class="fa-regular fa-circle" />
+		{:else if $themeVariant == 'dark'}
+			<i class="fa-solid fa-circle" />
+		{/if}
+	</span>
+</a>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,8 +1,31 @@
 <script lang="ts">
+	import '/src/app.scss';
+	import 'bulma/css/bulma.min.css';
 	import '@fortawesome/fontawesome-free/css/all.min.css';
+
 	import { themeVariant } from '$lib/themeVariant';
+	import { browser } from '$app/environment';
+	$: {
+		if (browser) {
+			switch ($themeVariant) {
+				case 'default': {
+					document.body.classList.remove('is-dark');
+					document.body.classList.remove('is-light');
+					break;
+				}
+				case 'light': {
+					document.body.classList.remove('is-dark');
+					document.body.classList.add('is-light');
+					break;
+				}
+				case 'dark': {
+					document.body.classList.add('is-dark');
+					document.body.classList.remove('is-light');
+					break;
+				}
+			}
+		}
+	}
 </script>

-<div class:is-light={$themeVariant == 'light'} class:is-dark={$themeVariant == 'dark'}>
-	<slot />
-</div>
+<slot />
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -17,7 +17,7 @@

 	function renderColorVariables() {
 		return `<style>
-:root, body .is-light {
+:root, body.is-light {
  ${cssVariables(data.config.colors.light)}
 }
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
@@ -25,7 +25,7 @@
    ${cssVariables(data.config.colors.light)}
  }
 }
-:root, body .is-dark {
+:root, body.is-dark {
  ${cssVariables(data.config.colors.dark)}
 }
@media (prefers-color-scheme: dark) {
@@ -44,14 +44,31 @@
 </svelte:head>

 <header>
-	<Brand brand={data.config} />
-	<h1>{data.config.title}</h1>
-	{#if data.config.subtitle}
-		<h2>{data.config.subtitle}</h2>
-	{/if}
-	<ThemeVariantButton />
+	<section class="first-line">
+		<div class="container">
+			<div class="logo">
+				<a href="/">
+					<Brand brand={data.config} color="var(--text-header)" />
+				</a>
+			</div>
+			<div class="dashboard-title">
+				{#if data.config.subtitle}
+					<span class="headline">{data.config.subtitle}</span>
+				{/if}
+				<h1>{data.config.title}</h1>
+			</div>
+		</div>
+	</section>
+	<nav class="navbar" aria-label="main navigation">
+		<div class="container">
+			<div class="navbar-start" />
+			<div class="navbar-end"><ThemeVariantButton /></div>
+		</div>
+	</nav>
 </header>
-{#each data.config.services as group, i}
-	<ServiceGroup {group} groupData={data.serviceData[i]} />
-{/each}
-<pre> {JSON.stringify(data.config, null, 2)}</pre>
+
+<main class="section">
+	{#each data.config.services as group, i}
+		<ServiceGroup {group} groupData={data.serviceData[i]} />
+	{/each}
+</main>