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>
|
<script>
|
||||||
import "../app.css";
|
import "../app.css";
|
||||||
|
import Footer from "./footer.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.main {
|
||||||
|
margin-bottom: 2.6em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="main">
|
||||||
<slot/>
|
<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="container">
|
||||||
<div class="banner">
|
<div class="banner">
|
||||||
|
{#if browserName }
|
||||||
<center>
|
<center>
|
||||||
<h1>No Chromium</h1>
|
{#if chromium}
|
||||||
<h2>This website does not accept chromium based browsers</h2>
|
<h1>{browserName} is not supported by this Website</h1>
|
||||||
<h3>Use a different web browser</h3>
|
<h2>Use a different web browser</h2>
|
||||||
<h4><a href="/">Why?</a></h4>
|
<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>
|
</center>
|
||||||
|
{/if }
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue