mifi
7012f0fdd2
Reviewed-on: #7 Co-authored-by: mifi <badmf@mifi.dev> Co-committed-by: mifi <badmf@mifi.dev>
140 lines
4.1 KiB
Svelte
140 lines
4.1 KiB
Svelte
<script lang="ts">
|
|
import Navigation from '$lib/components/Navigation.svelte';
|
|
import { termsOfService } from '$lib/data/terms-of-service';
|
|
|
|
const navItems = [{ label: 'Home', href: '/', umamiEventLabel: 'home' }];
|
|
</script>
|
|
|
|
<Navigation items={navItems} page="terms-of-service" />
|
|
|
|
<main id="main" class="legal-page">
|
|
<div class="container narrow">
|
|
<header id="header" class="legal-header">
|
|
<h1>{termsOfService.title}</h1>
|
|
<p class="legal-last-updated">Last updated: {termsOfService.lastUpdated}</p>
|
|
</header>
|
|
|
|
<div class="legal-content">
|
|
{#each termsOfService.intro as para}
|
|
<p>{para}</p>
|
|
{/each}
|
|
|
|
{#each termsOfService.sections as section (section.id)}
|
|
<section
|
|
id={section.id}
|
|
class="legal-section"
|
|
aria-labelledby={`${section.id}-heading`}
|
|
>
|
|
<h2 id={`${section.id}-heading`}>{section.heading}</h2>
|
|
{#each section.body as para}
|
|
<p>
|
|
{#if section.id === 'contact' && para === 'legal@mifi.ventures'}
|
|
<a href="mailto:legal@mifi.ventures"
|
|
>legal@mifi.ventures</a
|
|
>
|
|
{:else if section.id === 'contact' && para === 'https://mifi.ventures'}
|
|
<a href="https://mifi.ventures" rel="noopener noreferrer"
|
|
>https://mifi.ventures</a
|
|
>
|
|
{:else}
|
|
{para}
|
|
{/if}
|
|
</p>
|
|
{/each}
|
|
{#if section.list}
|
|
<ul>
|
|
{#each section.list as item}
|
|
<li>{item}</li>
|
|
{/each}
|
|
</ul>
|
|
{/if}
|
|
</section>
|
|
{/each}
|
|
</div>
|
|
|
|
<nav class="legal-cross-links" aria-label="Related legal pages">
|
|
<a href="/privacy-policy">Privacy Policy</a>
|
|
</nav>
|
|
</div>
|
|
</main>
|
|
|
|
<style>
|
|
.legal-page {
|
|
padding: var(--space-xxl) 0;
|
|
background-color: var(--color-bg);
|
|
}
|
|
|
|
.narrow {
|
|
max-width: var(--max-narrow-width);
|
|
margin: 0 auto;
|
|
padding: 0 var(--space-md);
|
|
}
|
|
|
|
.legal-header {
|
|
margin-bottom: var(--space-xl);
|
|
}
|
|
|
|
.legal-header h1 {
|
|
font-family: var(--font-family-heading);
|
|
font-size: var(--font-size-xxl);
|
|
font-weight: var(--font-weight-bold);
|
|
line-height: var(--line-height-heading);
|
|
color: var(--color-text);
|
|
margin: 0 0 var(--space-sm) 0;
|
|
}
|
|
|
|
.legal-last-updated {
|
|
font-size: var(--font-size-medium);
|
|
color: var(--color-text-tertiary);
|
|
margin: 0;
|
|
}
|
|
|
|
.legal-content {
|
|
font-size: var(--font-size-base);
|
|
line-height: var(--line-height-base);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.legal-content p {
|
|
margin: 0 0 var(--space-md) 0;
|
|
}
|
|
|
|
.legal-section {
|
|
margin-bottom: var(--space-xl);
|
|
}
|
|
|
|
.legal-section h2 {
|
|
font-family: var(--font-family-heading);
|
|
font-size: var(--font-size-xl);
|
|
font-weight: var(--font-weight-semibold);
|
|
line-height: var(--line-height-tight);
|
|
color: var(--color-text);
|
|
margin: 0 0 var(--space-md) 0;
|
|
}
|
|
|
|
.legal-section ul {
|
|
margin: 0 0 var(--space-md) 0;
|
|
padding-left: var(--space-lg);
|
|
}
|
|
|
|
.legal-section li {
|
|
margin-bottom: var(--space-xs);
|
|
}
|
|
|
|
.legal-cross-links {
|
|
margin-top: var(--space-xxl);
|
|
padding-top: var(--space-xl);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
.legal-cross-links a {
|
|
color: var(--color-primary);
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.2em;
|
|
}
|
|
|
|
.legal-cross-links a:hover {
|
|
color: var(--color-primary-hover);
|
|
}
|
|
</style>
|