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 {
height: 100%;
min-height: 100%;
}

4
src/app.html
View File

@@ -7,7 +7,9 @@
%sveltekit.head%
</head>
<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>
</body>

2
src/config.yml
View File

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

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

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

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

@@ -8,7 +8,7 @@
export let links: Array<LinkConfig>;
</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">
<div class="h-16 w-16">
<a href="/">

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

@@ -16,24 +16,22 @@
}
</script>
<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>
<a
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"
href={service.url}
target={service.target || ''}
>
<div class="flex flex h-12 w-12 flex-row text-4xl">
<Brand brand={brand()} />
</div>
<div>
<p class="text-xl">{service.title}</p>
<p class="text-md">
{#if component != undefined}
<svelte:component this={component} {data} />
{:else}
{service.subtitle}
{/if}
</p>
</div>
</a>

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

@@ -1,15 +1,15 @@
<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>;
export let columns: number;
</script>
<div class="group">
<div class="header">
<div>
<div class="mb-6 text-2xl">
<h3>
{#if group.icon}
<i class={group.icon} />
@@ -18,9 +18,20 @@
</h3>
</div>
<div class="services layout-{$layoutDirection}">
<div class={'gap-4' + ' layout-' + $layoutDirection} style={'--columns: ' + columns}>
{#each group.items as service, i}
<ServiceCard {service} data={groupData[i]} />
{/each}
</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">
import Brand from '$lib/components/Brand.svelte';
import Header from '$lib/components/Header.svelte';
import ServiceGroup from '$lib/components/ServiceGroup.svelte';
import type { ColorConfig } from '$lib/config';
import { layoutDirection } from '$lib/stores/layout';
import type { PageData } from './$types';
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>
<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} />
<main class="section">
<div class="container layout-{$layoutDirection}">
{#each data.config.services as group, i}
<ServiceGroup {group} groupData={data.serviceData[i]} />
{/each}
</div>
<main
class={'container mt-20 gap-12 transition-all ' + ' layout-' + $layoutDirection}
style={'--columns:' + data.config.columns}
>
{#each data.config.services as group, i}
<ServiceGroup {group} groupData={data.serviceData[i]} columns={data.config.columns} />
{/each}
</main>
<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>