chore: extract header and footer
This commit is contained in:
Alexander Daichendt
parent
cb856ad213
commit
5e5106d2cd
3 changed files with 153 additions and 128 deletions
47
src/lib/components/Footer.svelte
Normal file
47
src/lib/components/Footer.svelte
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
<script context="module">
|
||||||
|
const year = new Date().getFullYear();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mdiCopyright } from '@mdi/js';
|
||||||
|
|
||||||
|
import Icon from 'mdi-svelte';
|
||||||
|
import Link from './Link.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<!-- container class inherited from __layout-->
|
||||||
|
<div class="container">
|
||||||
|
<p>Copyright <Icon path={mdiCopyright} size="1rem" /> {year} Alexander Daichendt</p>
|
||||||
|
|
||||||
|
<div class="footerLinks">
|
||||||
|
<Link href="/cat">Meeeeeow</Link>
|
||||||
|
<Link href="/privacy">Privacy Policy</Link>
|
||||||
|
<Link href="/impressum">Impressum</Link>
|
||||||
|
<Link href="https://github.com/AlexDaichendt/site">Source</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
footer {
|
||||||
|
background-color: var(--special-bg-color);
|
||||||
|
padding: 2rem;
|
||||||
|
margin-top: 4rem;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 500px) {
|
||||||
|
.footerLinks {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footerLinks {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
:global(footer div a) {
|
||||||
|
color: var(--text-soft-color) !important;
|
||||||
|
}
|
||||||
|
:global(footer div a:hover) {
|
||||||
|
color: var(--light-color) !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
100
src/lib/components/Header.svelte
Normal file
100
src/lib/components/Header.svelte
Normal file
|
|
@ -0,0 +1,100 @@
|
||||||
|
<script>
|
||||||
|
import ThemeSwitcher from './ThemeSwitcher.svelte';
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
|
||||||
|
const NAV_ITEMS = [
|
||||||
|
{ href: '/', label: 'Home' },
|
||||||
|
{ href: '/blog', label: 'Blog' },
|
||||||
|
{ href: '/contact', label: 'Contact' },
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<div class="header">
|
||||||
|
<a href="/">
|
||||||
|
<h1>Alex Daichendt</h1>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<ThemeSwitcher />
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<ol>
|
||||||
|
{#each NAV_ITEMS as navItem}
|
||||||
|
<li
|
||||||
|
class="navItem {$page.url.pathname === navItem.href ||
|
||||||
|
(navItem.href === '/blog' && $page.url.pathname.includes('/blog'))
|
||||||
|
? 'active'
|
||||||
|
: ''}"
|
||||||
|
>
|
||||||
|
<a href={navItem.href}>{navItem.label}</a>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
header {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navItem {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.navItem:not(:last-child)::after {
|
||||||
|
content: '·';
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navItem a:hover {
|
||||||
|
color: var(--text-strong-color);
|
||||||
|
}
|
||||||
|
.navItem a:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -2px;
|
||||||
|
right: 50%;
|
||||||
|
width: 0%;
|
||||||
|
border-bottom: 3px solid var(--outline-color);
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
.navItem a:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -2px;
|
||||||
|
left: 50%;
|
||||||
|
width: 0%;
|
||||||
|
border-bottom: 3px solid var(--outline-color);
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
.navItem a:hover:after {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.navItem a:hover:before {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.header h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
color: var(--special-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
ol {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,21 +1,10 @@
|
||||||
<script context="module">
|
|
||||||
const year = new Date().getFullYear();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import ThemeSwitcher from '$components/ThemeSwitcher.svelte';
|
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import { mdiCopyright } from '@mdi/js';
|
|
||||||
import Icon from 'mdi-svelte';
|
|
||||||
import '@fontsource/ubuntu-mono/400.css';
|
|
||||||
import Link from '$components/Link.svelte';
|
|
||||||
import MoveUpButton from '$components/MoveUpButton.svelte';
|
import MoveUpButton from '$components/MoveUpButton.svelte';
|
||||||
|
import Footer from '$lib/components/Footer.svelte';
|
||||||
|
import Header from '$lib/components/Header.svelte';
|
||||||
|
import '@fontsource/ubuntu-mono/400.css';
|
||||||
|
|
||||||
const NAV_ITEMS = [
|
|
||||||
{ href: '/', label: 'Home' },
|
|
||||||
{ href: '/blog', label: 'Blog' },
|
|
||||||
{ href: '/contact', label: 'Contact' },
|
|
||||||
];
|
|
||||||
$: wrappedTitle = $page.stuff.title
|
$: wrappedTitle = $page.stuff.title
|
||||||
? `${$page.stuff.title} - Alex Daichendt`
|
? `${$page.stuff.title} - Alex Daichendt`
|
||||||
: "Alex Daichendt's website";
|
: "Alex Daichendt's website";
|
||||||
|
|
@ -35,56 +24,18 @@
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<div class="container upper">
|
<div class="container upper">
|
||||||
<header>
|
<Header />
|
||||||
<div class="header">
|
|
||||||
<a href="/">
|
|
||||||
<h1>Alex Daichendt</h1>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<ThemeSwitcher />
|
|
||||||
</div>
|
|
||||||
<nav>
|
|
||||||
<ol>
|
|
||||||
{#each NAV_ITEMS as navItem}
|
|
||||||
<li
|
|
||||||
class="navItem {$page.url.pathname === navItem.href ||
|
|
||||||
(navItem.href === '/blog' && $page.url.pathname.includes('/blog'))
|
|
||||||
? 'active'
|
|
||||||
: ''}"
|
|
||||||
>
|
|
||||||
<a href={navItem.href}>{navItem.label}</a>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ol>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<MoveUpButton />
|
<MoveUpButton />
|
||||||
<footer>
|
<Footer />
|
||||||
<div class="container">
|
|
||||||
<p>Copyright <Icon path={mdiCopyright} size="1rem" /> {year} Alexander Daichendt</p>
|
|
||||||
|
|
||||||
<div class="footerLinks">
|
|
||||||
<Link href="/cat">Meeeeeow</Link>
|
|
||||||
<Link href="/privacy">Privacy Policy</Link>
|
|
||||||
<Link href="/impressum">Impressum</Link>
|
|
||||||
<Link href="https://github.com/AlexDaichendt/site">Source</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@import 'normalize.css';
|
@import 'normalize.css';
|
||||||
@import 'sanitize.css';
|
@import 'sanitize.css';
|
||||||
|
|
||||||
.footerLinks {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.upper {
|
.upper {
|
||||||
min-height: calc(100vh - 4rem - 8px);
|
min-height: calc(100vh - 4rem - 8px);
|
||||||
}
|
}
|
||||||
|
|
@ -92,87 +43,14 @@
|
||||||
max-width: 60rem;
|
max-width: 60rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
header {
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
}
|
|
||||||
.active {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
ol {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
.navItem {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
.navItem:not(:last-child)::after {
|
|
||||||
content: '·';
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navItem a:hover {
|
:global(.container) {
|
||||||
color: var(--text-strong-color);
|
|
||||||
}
|
|
||||||
.navItem a:after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: -2px;
|
|
||||||
right: 50%;
|
|
||||||
width: 0%;
|
|
||||||
border-bottom: 3px solid var(--outline-color);
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
.navItem a:before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: -2px;
|
|
||||||
left: 50%;
|
|
||||||
width: 0%;
|
|
||||||
border-bottom: 3px solid var(--outline-color);
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
.navItem a:hover:after {
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
.navItem a:hover:before {
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 70rem;
|
max-width: 70rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 1rem;
|
padding: 0 1rem;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
.header h1 {
|
|
||||||
margin: 0;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
color: var(--special-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
background-color: var(--special-bg-color);
|
|
||||||
padding: 2rem;
|
|
||||||
margin-top: 4rem;
|
|
||||||
}
|
|
||||||
:global(footer div a) {
|
|
||||||
color: var(--text-soft-color) !important;
|
|
||||||
}
|
|
||||||
:global(footer div a:hover) {
|
|
||||||
color: var(--light-color) !important;
|
|
||||||
}
|
|
||||||
:global(body) {
|
:global(body) {
|
||||||
background-color: var(--subtle-color);
|
background-color: var(--subtle-color);
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue