phlaym/moshing-mammut
1
0
Fork 0
Code Issues 5 Pull Requests Projects Releases 8 Activity

Implement #1

Browse Source
This commit is contained in:
Max Nuding 2023-04-02 20:47:31 +02:00
parent 5f208ec074
commit 1066ea51a9
Signed by: phlaym
GPG Key ID: A06651BAB6777237
4 changed files with 88 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/app.html
View File

@ -8,6 +8,35 @@
<meta name="theme-color" content="#17063B" media="(prefers-color-scheme: dark)" /> <meta name="theme-color" content="#17063B" media="(prefers-color-scheme: dark)" />
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" /> <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
%sveltekit.head% %sveltekit.head%
<style>
body {
--color-text: #2F0C7A;
--color-bg: white;
--color-border: #17063B;
--color-link: #563ACC;
--color-link-visited: #858AFA;
color: var(--color-text);
background-color: var(--color-bg);
}
a {
color: var(--color-link);
}
a:visited {
color: var(--color-link-visited);
}
@media (prefers-color-scheme: dark) {
body {
--color-text: white;
--color-bg: #17063B;
--color-border: white;
--color-link: #8A9BF0;
--color-link-visited: #C384FB;
}
}
</style>
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>

1
src/lib/assets/git-branch-fill.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M7.10508 15.2101C8.21506 15.6501 9 16.7334 9 18C9 19.6569 7.65685 21 6 21C4.34315 21 3 19.6569 3 18C3 16.6938 3.83481 15.5825 5 15.1707V8.82929C3.83481 8.41746 3 7.30622 3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6C9 7.30622 8.16519 8.41746 7 8.82929V11.9996C7.83566 11.3719 8.87439 11 10 11H14C15.3835 11 16.5482 10.0635 16.8949 8.78991C15.7849 8.34988 15 7.26661 15 6C15 4.34315 16.3431 3 18 3C19.6569 3 21 4.34315 21 6C21 7.3332 20.1303 8.46329 18.9274 8.85392C18.5222 11.2085 16.4703 13 14 13H10C8.61653 13 7.45179 13.9365 7.10508 15.2101Z" fill="#000"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 669 B

43
src/lib/components/FooterComponent.svelte Normal file
View File

@ -0,0 +1,43 @@
<script>
import git from '$lib/assets/git-branch-fill.svg';
</script>
<div class="footer">
<div>
<span>Made with &#x1F918; by&nbsp;</span>
<a href="https://metalhead.club/@aymm" rel="me">@aymm@metalhead.club</a>
</div>
|
<div>
<a href="https://phlaym.net/git/phlaym/moshing-mammut">Source Code&nbsp;<img alt="Git branch" src={git} class="icon" /></a>
</div>
</div>
<style>
.footer {
position: sticky;
bottom: 0px;
display: flex;
justify-content: flex-start;
align-items: baseline;
gap: 10px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background-color: #54546788;
padding: 0.3em 1em;
margin: 0 -8px;
}
.icon {
position: relative;
top: 0.5em;
color: white;
}
@media (prefers-color-scheme: dark) {
.icon {
filter: invert();
}
.footer {
background-color: #6364FF88;
}
}
</style>

15
src/routes/+layout.svelte Normal file
View File

@ -0,0 +1,15 @@
<script lang="ts">
import FooterComponent from '$lib/components/FooterComponent.svelte'
</script>
<slot />
<div class="footer">
<FooterComponent />
</div>
<style>
.footer {
position: sticky;
bottom: 0px;
display: inline-block;
}
</style>