Add footer with credits and website source
parent
50456aaf29
commit
67d0e1f6d0
GPG Key ID:
DFFFCC2C7A02DB45
@ -0,0 +1,18 @@
|
||||
import {detect} from "detect-browser";
|
||||
const browser = detect();
|
||||
|
||||
export function getBrowserName(): string {
|
||||
return `${ browser.name[0].toUpperCase() }${ browser.name.substring(1) }`;
|
||||
}
|
||||
|
||||
export function isChromium(): boolean {
|
||||
switch (browser.name) {
|
||||
case "chrome":
|
||||
case "opera":
|
||||
case "edge":
|
||||
return true;
|
||||
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,14 @@
|
||||
<script>
|
||||
import "../app.css";
|
||||
import Footer from "./footer.svelte";
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.main {
|
||||
margin-bottom: 2.6em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<slot/>
|
||||
<div class="main">
|
||||
<slot/>
|
||||
</div>
|
||||
<Footer/>
|
||||
@ -0,0 +1,20 @@
|
||||
<header class="banner">
|
||||
<a href="/">Back</a>
|
||||
<h1>Credits</h1>
|
||||
</header>
|
||||
<main class="content">
|
||||
<h2><a href="https://tech.lgbt/@sara">Sara</a></h2>
|
||||
<ul>
|
||||
<li>Icons</li>
|
||||
</ul>
|
||||
|
||||
<h2><a href="https://tech.lgbt/@punishedbernadetta">Punished Bernadetta</a></h2>
|
||||
<ul>
|
||||
<li>Style Improvements</li>
|
||||
</ul>
|
||||
|
||||
<h2><a href="https://social.funkyfish.cool/@trivernis">Trivernis</a></h2>
|
||||
<ul>
|
||||
<li>Repository Owner</li>
|
||||
</ul>
|
||||
</main>
|
||||
@ -0,0 +1,35 @@
|
||||
<style lang="scss">
|
||||
.footer {
|
||||
height: 2.5em;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
background-color: #FDF;
|
||||
|
||||
.footer-content {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0.5em 1em;
|
||||
width: calc(100% - 2em);
|
||||
height: calc(100% - 1em);
|
||||
|
||||
* {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
}
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer-content">
|
||||
<a class="left" href="/credits">Credits</a>
|
||||
<a class="right" href="https://git.trivernis.net/Trivernis/no-chromium">Source</a>
|
||||
</div>
|
||||
</footer>
|
||||
@ -1,10 +1,42 @@
|
||||
<script>
|
||||
import { getBrowserName, isChromium } from "$lib/browser";
|
||||
// import { browser } from "$app/environment";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
export let browserName;
|
||||
export let chromium = true;
|
||||
|
||||
onMount(() => {
|
||||
browserName = getBrowserName();
|
||||
chromium = isChromium();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="banner">
|
||||
{#if browserName }
|
||||
<center>
|
||||
<h1>No Chromium</h1>
|
||||
<h2>This website does not accept chromium based browsers</h2>
|
||||
<h3>Use a different web browser</h3>
|
||||
<h4><a href="/">Why?</a></h4>
|
||||
{#if chromium}
|
||||
<h1>{browserName} is not supported by this Website</h1>
|
||||
<h2>Use a different web browser</h2>
|
||||
<h4><a href="/">Why?</a></h4>
|
||||
{:else }
|
||||
<h1>Congrats, you're not using Chromium</h1>
|
||||
<h2>So why are you here?</h2>
|
||||
<h4><a href="/">More Info</a></h4>
|
||||
{/if }
|
||||
</center>
|
||||
{/if }
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue