atuleu/flanders
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More tailwind css for the win.

Browse Source
This commit is contained in:
Alexandre Tuleu
2023-09-19 21:45:07 +02:00
parent 08f006c308
commit 668eb715af
8 changed files with 60 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app.css
View File

@@ -7,5 +7,6 @@ html {
} }
body { body {
height: 100%;
min-height: 100%; min-height: 100%;
} }

4
src/app.html
View File

@@ -7,7 +7,9 @@
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div class="bg-neutral-400 p-4 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-400"> <div
class="h-full bg-neutral-400 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-400"
>
<div class="container mx-auto">%sveltekit.body%</div> <div class="container mx-auto">%sveltekit.body%</div>
</div> </div>
</body> </body>

2
src/config.yml
View File

@@ -17,7 +17,7 @@ services:
icon: 'fas fa-photo-film' icon: 'fas fa-photo-film'
items: items:
- title: 'Jellyfin' - title: 'Jellyfin'
subtitle: 'Media server for movies and shows' subtitle: 'Media server'
target: '_blank' target: '_blank'
url: 'https://eagle.tuleu.me' url: 'https://eagle.tuleu.me'
type: jellyfin type: jellyfin

5
src/lib/components/Brand.svelte
View File

@@ -25,10 +25,13 @@
width: 100%; width: 100%;
color: var(--mask-color); color: var(--mask-color);
display: flex; display: flex;
justify-content: center;
align-items: center;
} }
img { img {
width: 100%; max-width: 100%;
max-height: 100%;
} }
.masked { .masked {

2
src/lib/components/Header.svelte
View File

@@ -8,7 +8,7 @@
export let links: Array<LinkConfig>; export let links: Array<LinkConfig>;
</script> </script>
<header class="flex flex-col gap-4"> <header class="bg-red-300 flex flex-col justify-between gap-8 pt-12">
<section class="flex h-16 flex-row items-center gap-4"> <section class="flex h-16 flex-row items-center gap-4">
<div class="h-16 w-16"> <div class="h-16 w-16">
<a href="/"> <a href="/">

36
src/lib/components/ServiceCard.svelte
View File

@@ -16,24 +16,22 @@
} }
</script> </script>
<a href={service.url} target={service.target || ''}> <a
<div class="card"> class="min-h-24 flex w-full flex-row gap-2 rounded-2xl bg-neutral-600 bg-opacity-30 p-6 transition-all hover:-translate-y-2 focus:-translate-y-2 focus:outline-none"
<div class="card-content"> href={service.url}
<div class="media"> target={service.target || ''}
<div class="media-left"> >
<figure class="image"> <div class="flex flex h-12 w-12 flex-row text-4xl">
<Brand brand={brand()} /> <Brand brand={brand()} />
</figure> </div>
</div> <div>
<div class="media-content"> <p class="text-xl">{service.title}</p>
<p class="title is-4">{service.title}</p> <p class="text-md">
{#if component != undefined} {#if component != undefined}
<p class="subtitle is-6"><svelte:component this={component} {data} /></p> <svelte:component this={component} {data} />
{:else} {:else}
<p class="subtitle is-6">{service.subtitle}</p> {service.subtitle}
{/if} {/if}
</div> </p>
</div>
</div>
</div> </div>
</a> </a>

19
src/lib/components/ServiceGroup.svelte
View File

@@ -1,15 +1,15 @@
<script lang="ts"> <script lang="ts">
import type { ServiceGroupConfig } from '$lib/config'; import type { ServiceGroupConfig } from '$lib/config';
import { layoutDirection } from '$lib/stores/layout'; import { layoutDirection } from '$lib/stores/layout';
import Brand from './Brand.svelte';
import ServiceCard from './ServiceCard.svelte'; import ServiceCard from './ServiceCard.svelte';
export let group: ServiceGroupConfig; export let group: ServiceGroupConfig;
export let groupData: Array<unknown>; export let groupData: Array<unknown>;
export let columns: number;
</script> </script>
<div class="group"> <div>
<div class="header"> <div class="mb-6 text-2xl">
<h3> <h3>
{#if group.icon} {#if group.icon}
<i class={group.icon} /> <i class={group.icon} />
@@ -18,9 +18,20 @@
</h3> </h3>
</div> </div>
<div class="services layout-{$layoutDirection}"> <div class={'gap-4' + ' layout-' + $layoutDirection} style={'--columns: ' + columns}>
{#each group.items as service, i} {#each group.items as service, i}
<ServiceCard {service} data={groupData[i]} /> <ServiceCard {service} data={groupData[i]} />
{/each} {/each}
</div> </div>
</div> </div>
<style>
.layout-row {
display: grid;
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
}
.layout-column {
display: flex;
flex-flow: row wrap;
}
</style>

64
src/routes/+page.svelte
View File

@@ -1,60 +1,32 @@
<script lang="ts"> <script lang="ts">
import Brand from '$lib/components/Brand.svelte';
import Header from '$lib/components/Header.svelte'; import Header from '$lib/components/Header.svelte';
import ServiceGroup from '$lib/components/ServiceGroup.svelte'; import ServiceGroup from '$lib/components/ServiceGroup.svelte';
import type { ColorConfig } from '$lib/config';
import { layoutDirection } from '$lib/stores/layout'; import { layoutDirection } from '$lib/stores/layout';
import type { PageData } from './$types'; import type { PageData } from './$types';
export let data: PageData; export let data: PageData;
function colorVariables(colors: ColorConfig): string {
const cssVars: Array<string> = [];
for (const [key, value] of Object.entries(colors)) {
cssVars.push(`--${key}:${value}`);
}
return cssVars.join(';');
}
function renderCssVariables() {
return `<style>
:root, body.is-light {
${colorVariables(data.config.colors.light)}
}
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
:root, body {
${colorVariables(data.config.colors.light)}
}
}
:root, body.is-dark {
${colorVariables(data.config.colors.dark)}
}
@media (prefers-color-scheme: dark) {
:root, body {
${colorVariables(data.config.colors.dark)}
}
}
:root {
--layout-template: repeat(${data.config.columns},1fr);
}
</style>`;
}
</script> </script>
<svelte:head>
<!-- it is safe here because config is comming from config.yml and thus is trusted. -->
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html renderCssVariables()}
</svelte:head>
<Header section={data.config} links={data.config.links} /> <Header section={data.config} links={data.config.links} />
<main class="section"> <main
<div class="container layout-{$layoutDirection}"> class={'container mt-20 gap-12 transition-all ' + ' layout-' + $layoutDirection}
{#each data.config.services as group, i} style={'--columns:' + data.config.columns}
<ServiceGroup {group} groupData={data.serviceData[i]} /> >
{/each} {#each data.config.services as group, i}
</div> <ServiceGroup {group} groupData={data.serviceData[i]} columns={data.config.columns} />
{/each}
</main> </main>
<footer /> <footer />
<style>
.layout-column {
display: grid;
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
}
.layout-row {
display: grid;
grid-template-rows: repeat(var(--columns), minmax(0, 1fr));
}
</style>