adapts styling of rvg.legal
This commit is contained in:
Vendored
+13
@@ -0,0 +1,13 @@
|
||||
// See https://svelte.dev/docs/kit/types#app.d.ts
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="de" data-theme="nominandum">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="text-scale" content="scale" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,38 @@
|
||||
<script lang="ts">
|
||||
// Define the types for your props
|
||||
type ButtonType = 'button' | 'submit' | 'reset'
|
||||
type ButtonVariant = 'primary' | 'secondary'
|
||||
|
||||
// Define the props object including the Snippet for children
|
||||
let {
|
||||
type = 'button',
|
||||
disabled = false,
|
||||
variant = 'primary',
|
||||
children
|
||||
}: {
|
||||
type?: ButtonType;
|
||||
disabled?: boolean;
|
||||
variant?: ButtonVariant
|
||||
children: import('svelte').Snippet
|
||||
} = $props();
|
||||
|
||||
const getBgColor = (variant: ButtonVariant) => {
|
||||
return variant === 'primary' ? '#122f62' : 'transparent'
|
||||
}
|
||||
|
||||
const getTextColor = (variant: ButtonVariant) => {
|
||||
return variant === 'primary' ? 'white': 'primary-900'
|
||||
}
|
||||
|
||||
let bgColor = $derived(getBgColor(variant))
|
||||
let textColor = $derived(getTextColor(variant))
|
||||
|
||||
</script>
|
||||
|
||||
<button
|
||||
type="{type}"
|
||||
class="rounded-container not-disabled:bg-[{bgColor}] disabled:bg-[#0000001f] not-disabled:text-{textColor} disabled:text-[#00000042] whitespace-nowrap text-center text-[14px] leading-9 font-bold px-4 py-0 focus:outline-none focus:ring-2 focus:ring-primary-300 shadow-sm"
|
||||
disabled={disabled}
|
||||
>
|
||||
{@render children()}
|
||||
</button>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script lang="ts">
|
||||
import type {Snippet} from "svelte";
|
||||
|
||||
type Props = {
|
||||
title?: Snippet
|
||||
content?: Snippet
|
||||
footer?: Snippet
|
||||
class?: string
|
||||
}
|
||||
let {title, content, footer, class: className = ""}: Props = $props()
|
||||
</script>
|
||||
|
||||
<div class="bg-white rounded-2xl shadow-sm py-2 px-2 {className}">
|
||||
{#if title}
|
||||
<header>{@render title()}</header>
|
||||
{/if}
|
||||
{#if content}
|
||||
<main class="flex grow items-center">{@render content()}</main>
|
||||
{/if}
|
||||
{#if footer}
|
||||
<footer>{@render footer()}</footer>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
// place files you want to import through the `$lib` alias in this folder.
|
||||
@@ -0,0 +1,108 @@
|
||||
[data-theme='nominandum'] {
|
||||
--text-scaling: 1.067;
|
||||
|
||||
--base-font-color: var(--color-surface-900);
|
||||
--base-font-color-dark: var(--color-surface-50);
|
||||
--base-font-family: Nunito, Helvetica Neue, sans-serif;
|
||||
--base-font-size: inherit;
|
||||
--base-line-height: 1.5;
|
||||
--base-font-weight: 400;
|
||||
|
||||
--heading-font-color: var(--color-primary-900);
|
||||
--heading-font-color-dark: var(--color-primary-900);
|
||||
--heading-font-family: Nunito, Helvetica Neue, sans-serif;
|
||||
--heading-font-weight: 400;
|
||||
|
||||
--anchor-font-color: var(--color-primary-600);
|
||||
--anchor-font-color-dark: var(--color-primary-300);
|
||||
--anchor-text-decoration: none;
|
||||
--anchor-text-decoration-hover: underline;
|
||||
|
||||
--spacing: 0.25rem;
|
||||
--radius-base: 0.5rem;
|
||||
--radius-container: 24px;
|
||||
|
||||
--default-border-width: 1px;
|
||||
--default-divide-width: 1px;
|
||||
--default-ring-width: 2px;
|
||||
|
||||
--body-background-color: #EEF4F6;
|
||||
--body-background-color-dark: #0f172a;
|
||||
|
||||
/* Primary: Material Blue */
|
||||
/* Very Light / Ghostly */
|
||||
--color-primary-50: oklch(96.8% 0.010 253deg);
|
||||
--color-primary-100: oklch(92.8% 0.020 253deg);
|
||||
--color-primary-200: oklch(86.5% 0.040 253deg);
|
||||
--color-primary-300: oklch(77.5% 0.060 253deg);
|
||||
--color-primary-400: oklch(68.5% 0.080 253deg);
|
||||
|
||||
/* Mid-range / Muted Tones */
|
||||
--color-primary-500: oklch(59.5% 0.090 253deg);
|
||||
--color-primary-600: oklch(52.5% 0.095 253deg);
|
||||
--color-primary-700: oklch(45.5% 0.095 253deg);
|
||||
|
||||
/* Dark Range (Matching your base color) */
|
||||
--color-primary-800: oklch(38.5% 0.090 253deg);
|
||||
--color-primary-900: oklch(31.5% 0.090 253deg); /* YOUR BASE COLOR */
|
||||
--color-primary-950: oklch(23.5% 0.070 253deg);
|
||||
|
||||
--color-primary-contrast-dark: var(--color-primary-950);
|
||||
--color-primary-contrast-light: white;
|
||||
--color-primary-contrast-50: var(--color-primary-contrast-dark);
|
||||
--color-primary-contrast-100: var(--color-primary-contrast-dark);
|
||||
--color-primary-contrast-200: var(--color-primary-contrast-dark);
|
||||
--color-primary-contrast-300: var(--color-primary-contrast-dark);
|
||||
--color-primary-contrast-400: white;
|
||||
--color-primary-contrast-500: white;
|
||||
--color-primary-contrast-600: white;
|
||||
--color-primary-contrast-700: white;
|
||||
--color-primary-contrast-800: white;
|
||||
--color-primary-contrast-900: white;
|
||||
--color-primary-contrast-950: white;
|
||||
|
||||
/* Secondary: dezentes Blau-Grau */
|
||||
--color-secondary-50: oklch(97% 0.01 250deg);
|
||||
--color-secondary-100: oklch(93.5% 0.015 250deg);
|
||||
--color-secondary-200: oklch(88.5% 0.022 250deg);
|
||||
--color-secondary-300: oklch(80% 0.035 250deg);
|
||||
--color-secondary-400: oklch(68% 0.045 250deg);
|
||||
--color-secondary-500: oklch(56% 0.055 250deg);
|
||||
--color-secondary-600: oklch(48% 0.05 250deg);
|
||||
--color-secondary-700: oklch(40% 0.045 250deg);
|
||||
--color-secondary-800: oklch(32% 0.04 250deg);
|
||||
--color-secondary-900: oklch(24% 0.035 250deg);
|
||||
--color-secondary-950: oklch(17% 0.03 250deg);
|
||||
|
||||
--color-secondary-contrast-dark: var(--color-secondary-950);
|
||||
--color-secondary-contrast-light: white;
|
||||
|
||||
/* Tertiary: Akzent Cyan */
|
||||
--color-tertiary-50: oklch(97% 0.025 220deg);
|
||||
--color-tertiary-100: oklch(93% 0.045 220deg);
|
||||
--color-tertiary-200: oklch(87% 0.07 220deg);
|
||||
--color-tertiary-300: oklch(78% 0.105 220deg);
|
||||
--color-tertiary-400: oklch(69% 0.135 220deg);
|
||||
--color-tertiary-500: oklch(60% 0.15 220deg);
|
||||
--color-tertiary-600: oklch(52% 0.135 220deg);
|
||||
--color-tertiary-700: oklch(44% 0.115 220deg);
|
||||
--color-tertiary-800: oklch(36% 0.09 220deg);
|
||||
--color-tertiary-900: oklch(29% 0.065 220deg);
|
||||
--color-tertiary-950: oklch(21% 0.045 220deg);
|
||||
|
||||
/* Surface: Material-nahe kühle Grautöne */
|
||||
--color-surface-50: oklch(98.5% 0.004 255deg);
|
||||
--color-surface-100: oklch(96.5% 0.006 255deg);
|
||||
--color-surface-200: oklch(92.5% 0.01 255deg);
|
||||
--color-surface-300: oklch(86.5% 0.015 255deg);
|
||||
--color-surface-400: oklch(74% 0.02 255deg);
|
||||
--color-surface-500: oklch(62% 0.025 255deg);
|
||||
--color-surface-600: oklch(50% 0.025 255deg);
|
||||
--color-surface-700: oklch(39% 0.025 255deg);
|
||||
--color-surface-800: oklch(29% 0.025 255deg);
|
||||
--color-surface-900: oklch(21% 0.025 255deg);
|
||||
--color-surface-950: oklch(14% 0.025 255deg);
|
||||
|
||||
--color-surface-contrast-dark: var(--color-surface-950);
|
||||
--color-surface-contrast-light: white;
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
<script lang="ts">
|
||||
import './layout.css';
|
||||
import favicon from '$lib/assets/favicon.svg';
|
||||
|
||||
let {children} = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<link rel="icon" href={favicon}/>
|
||||
</svelte:head>
|
||||
<header style="height:72px" class="bg-white shadow grid place-content-center">
|
||||
<a href="/">
|
||||
<img height="33px" src="/logo.svg" alt="logo"/>
|
||||
</a>
|
||||
</header>
|
||||
{@render children()}
|
||||
|
||||
<footer class="flex flex-col justify-end gap-15 min-h-78.5 h-96 px-4 mt-8.75 text-white py-8.75"
|
||||
style="background-image: url('/footer.svg');background-position: top right; background-size: cover; background-repeat: no-repeat">
|
||||
<div class="w-full max-w-360 mx-auto">
|
||||
<h2 class="font-bold mb-4">Nominandum GmbH</h2>
|
||||
|
||||
<div class="flex flex-row flex-wrap gap-15 text-[14px] leading-5 mx-auto">
|
||||
<div class="not-sm:hidden">
|
||||
Holstenwall 1<br/>
|
||||
20355 Hamburg<br/>
|
||||
<br/>
|
||||
info[at]nom.legal
|
||||
</div>
|
||||
<div class="not-sm:hidden">
|
||||
Geschäftsführer Andreas Damke <br/>
|
||||
AG Hamburg <br/>
|
||||
HRB 161778<br/>
|
||||
UstId. DE321802543
|
||||
</div>
|
||||
<div>
|
||||
<a class="underline" href="">Impressum</a><br/>
|
||||
<a class="underline" href="">Datenschutzerklärung</a><br/>
|
||||
<a class="underline" href="">Nutzungsbedingungen</a><br/>
|
||||
</div>
|
||||
<div class="grow">
|
||||
<a class="underline" href="">Instagram</a><br/>
|
||||
<a class="underline" href="">LinkedIn</a><br/>
|
||||
</div>
|
||||
<div class="self-end text-gray-400">
|
||||
© 2018-{new Date().getFullYear()} all rights reserved.<br/>
|
||||
Nominandum is a protected trademark.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script>
|
||||
import Card from "$lib/components/Card.svelte";
|
||||
</script>
|
||||
|
||||
{#snippet content()}
|
||||
<div class="text-center justify-center flex grow flex-col min-h-[calc(-180px+100vh)]">
|
||||
<div class="flex flex-row justify-center items-baseline gap-2">
|
||||
<h1 class="h1 text-[20px] font-bold text-primary-900">Dateien hinzufügen</h1>
|
||||
<span class="font-extrabold text-primary-900 text-[20px]">
|
||||
+
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
<section class="px-4">
|
||||
<h1 class="h1 text-[20px] font-bold py-6 text-primary-900">beA-Edit</h1>
|
||||
<Card {content} class="h-full cursor-pointer"/>
|
||||
<!-- <Button variant="primary">-->
|
||||
<!-- Neu berechnen-->
|
||||
<!-- </Button>-->
|
||||
</section>
|
||||
@@ -0,0 +1,16 @@
|
||||
@import 'tailwindcss';
|
||||
@import '@skeletonlabs/skeleton/themes/cerberus';
|
||||
@import '@skeletonlabs/skeleton';
|
||||
@import '@skeletonlabs/skeleton-svelte';
|
||||
@import '../lib/nom-theme.css';
|
||||
|
||||
@plugin '@tailwindcss/forms';
|
||||
@plugin '@tailwindcss/typography';
|
||||
|
||||
|
||||
@font-face{
|
||||
font-family: 'Nunito';
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
src: url('$lib/assets/Nunito-VariableFont_wght.ttf') format("truetype");
|
||||
}
|
||||
Reference in New Issue
Block a user