WIP lost

src/app.scss

@@ -10,7 +10,7 @@ body {
 	background-image: var(--background-image);
 	background-size: cover;
 	background-position: center;
-	color: var(--text) !important;
+	color: var(--text);
 	transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
 }
 
@@ -22,21 +22,11 @@ a {
 }
 
 .title {
-	color: var(--text-title) !important;
+	color: var(--text-title);
 }
 
 .subtitle {
-	color: var(--text-subtitle) !important;
-}
-
-h1 {
-	font-size: 2rem;
-}
-
-h2 {
-	font-size: 1.7rem;
-	margin-top: 2rem;
-	margin-bottom: 1rem;
+	color: var(--text-subtitle);
 }
 
 header {
@@ -67,9 +57,11 @@ header {
 			h2 {
 				font-size: 0.9em;
 				line-height: 1em;
+				margin: 0;
 			}
 
 			h1 {
+				margin: 0;
 				font-size: 2em;
 				line-height: 1em;
 			}

src/config.yml

@@ -37,7 +37,6 @@ services:
             type: sonarr
             keywords: 'movies tracker torrent usenet'
 
-
     - title: '/Cloud'
       icon: 'fas fa-cloud'
       items:
@@ -54,6 +53,6 @@ services:
           - title: 'PiHole'
             subtitle: 'A DNS to send telemetry and ads to the void'
             target: '_blank'
-            url: 'https://pihole.lan/admin'
+            url: 'http://pihole.lan/admin'
             type: 'pihole'
             keywords: 'dns ads blocker internet'

src/lib/components/ServiceCard.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ServiceConfig } from '$lib/config';
+	import type { BrandConfig, ServiceConfig } from '$lib/config';
 	import { getServiceComponent } from '$lib/services/services';
 	import Brand from './Brand.svelte';
 
@@ -8,25 +8,32 @@
 
 	const component = getServiceComponent(service.type || '');
 
-	console.log(service);
+	function brand(): BrandConfig {
+		if (data?.logo != undefined && service.logo == undefined && service.icon == undefined) {
+			return { logo: data.logo, asmask: service.asmask || false };
+		}
+		return service;
+	}
 </script>
 
-<div class="card">
-	<div class="card-content">
-		<div class="media">
-			<div class="media-left">
-				<figure class="image">
-					<Brand brand={service} />
-				</figure>
-			</div>
-			<div class="media-content">
-				<p class="title is-4">{service.title}</p>
-				{#if component != undefined}
-					<p class="subtitle is-6"><svelte:component this={component} {data} /></p>
-				{:else}
-					<p class="subtitle is-6">{service.subtitle}</p>
-				{/if}
+<a href={service.url} target={service.target || ''}>
+	<div class="card">
+		<div class="card-content">
+			<div class="media">
+				<div class="media-left">
+					<figure class="image">
+						<Brand brand={brand()} />
+					</figure>
+				</div>
+				<div class="media-content">
+					<p class="title is-4">{service.title}</p>
+					{#if component != undefined}
+						<p class="subtitle is-6"><svelte:component this={component} {data} /></p>
+					{:else}
+						<p class="subtitle is-6">{service.subtitle}</p>
+					{/if}
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
+</a>

src/lib/services/pihole/+service.ts

@@ -1,7 +1,9 @@
 import { type ServiceComponentPath, type ServiceHandler } from '../service';
 
 export const handle: ServiceHandler = () => {
-	return { piholedata: 'coucou' };
+	const res = { logo: 'https://cdn.rawgit.com/pi-hole/graphics/master/Vortex/Vortex.svg' };
+
+	return res;
 };
 
 export const path: ServiceComponentPath = 'pihole/PiHoleContent.svelte';

src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import '/src/app.scss';
-	import 'bulma/css/bulma.min.css';
 	import '@fortawesome/fontawesome-free/css/all.min.css';
+	import 'bulma/css/bulma.min.css';
+	import '/src/app.scss';
 
 	import { themeVariant } from '$lib/stores/themeVariant';
 	import { browser } from '$app/environment';