Makes the layout responsive

src/app.scss

@@ -10,7 +10,7 @@ body {
 	background-image: var(--background-image);
 	background-size: cover;
 	background-position: center;
-	color: var(--text);
+	color: var(--text) !important;
 	transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
 }
 
@@ -128,23 +128,59 @@ main {
 		gap: 32px;
 	}
 
-	.service-group {
+	.group .services.layout-column {
-		background: lime;
-	}
-
-	.service-group.layout-column {
 		display: flex;
 		flex-flow: column nowrap;
 		gap: 16px;
 	}
 
-	.service-group.layout-row {
+	.group .services.layout-row {
 		display: grid;
 		grid-template-columns: var(--layout-template);
 		gap: 16px;
 	}
 
-	.service-card {
+	@media (max-width: 768px) {
-		background: orange;
+		.layout-column {
+			grid-template-columns: 1fr;
+		}
+
+		.group .services.layout-row {
+			grid-template-columns: 1fr;
+		}
+	}
+
+	.group .header {
+		display: flex;
+		flex-flow: row nowrap;
+		font-size: 1.7em;
+		padding-bottom: 8px;
+	}
+
+	.card {
+		background: var(--card-background);
+		transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.media-content {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.card .image {
+		width: 48px;
+		height: 48px;
+		font-size: 48px;
+	}
+
+	.card:hover {
+		transform: translate(0, -3px);
+
+		.tag {
+		}
 	}
 }

src/config.yml

@@ -28,7 +28,7 @@ services:
 
           - title: 'PiHole'
             subtitle: 'A DNS Hole'
-            icon: 'fas fa-hard-drive'
+            logo: 'https://cdn.rawgit.com/pi-hole/graphics/master/Vortex/Vortex.svg'
             target: '_blank'
             url: '/pihole'
             type: 'pihole'
@@ -43,7 +43,6 @@ services:
             icon: 'fas fa-hard-drive'
             target: '_blank'
             url: '/NAS'
-            type: prowlarr
 
             keywords: 'cloud storage files'
 

src/lib/components/Brand.svelte

@@ -22,9 +22,10 @@
 
 <style>
 	div {
-		width: 100%;
 		height: 100%;
+		width: 100%;
 		color: var(--mask-color);
+		display: flex;
 	}
 
 	img {

src/lib/components/ServiceCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { ServiceConfig } from '$lib/config';
 	import { getServiceComponent } from '$lib/services/services';
+	import Brand from './Brand.svelte';
 
 	export let service: ServiceConfig;
 	export let data: any;
@@ -8,9 +9,22 @@
 	const component = getServiceComponent(service.type || '');
 </script>
 
-<div class="service-card">
+<div class="card">
-	<p>{service.title}</p>
+	<div class="card-content">
-	{#if component != undefined}
+		<div class="media">
-		<svelte:component this={component} {data} />
+			<div class="media-left">
-	{/if}
+				<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}
+			</div>
+		</div>
+	</div>
 </div>

src/lib/components/ServiceGroup.svelte

@@ -1,14 +1,26 @@
 <script lang="ts">
 	import type { ServiceGroupConfig } from '$lib/config';
 	import { layoutDirection } from '$lib/stores/layout';
+	import Brand from './Brand.svelte';
 	import ServiceCard from './ServiceCard.svelte';
 
 	export let group: ServiceGroupConfig;
 	export let groupData: Array<unknown>;
 </script>
 
-<div class="service-group layout-{$layoutDirection}">
+<div class="group">
-	{#each group.items as service, i}
+	<div class="header">
-		<ServiceCard {service} data={groupData[i]} />
+		<h3>
-	{/each}
+			{#if group.icon}
+				<i class={group.icon} />
+			{/if}
+			{group.title}
+		</h3>
+	</div>
+
+	<div class="services layout-{$layoutDirection}">
+		{#each group.items as service, i}
+			<ServiceCard {service} data={groupData[i]} />
+		{/each}
+	</div>
 </div>