333 lines
9.2 KiB
Svelte
333 lines
9.2 KiB
Svelte
<!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements -->
|
|
<script lang="ts">
|
|
import "$lib/app.css";
|
|
|
|
import { fly } from 'svelte/transition';
|
|
import MediaQuery from 'svelte-media-queries';
|
|
export let hideOnPrint: boolean;
|
|
|
|
import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
|
|
import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
|
|
|
|
const footerCollapseThreshold : string = '1000px';
|
|
const headerCollapseThreshold : string = '1000px';
|
|
let footerCollapse : boolean;
|
|
let headerCollapse : boolean;
|
|
|
|
let navbarHidden : boolean = true;
|
|
|
|
function resetNavBar() {
|
|
navbarHidden = true;
|
|
}
|
|
|
|
import { afterNavigate } from '$app/navigation';
|
|
afterNavigate(() => {
|
|
const params = new URLSearchParams(window.location.search);
|
|
hideOnPrint = params.get('hideOnPrint') === '1';
|
|
//console.log(hideOnPrint);
|
|
});
|
|
|
|
import { onMount } from 'svelte';
|
|
import { themeChange } from 'theme-change'
|
|
onMount(() => {
|
|
const lock = document.createElement('meta');
|
|
lock.name = 'darkreader-lock';
|
|
document.head.appendChild(lock);
|
|
|
|
themeChange(false) // false parameter is required for svelte
|
|
});
|
|
</script>
|
|
|
|
<!-- Detect mobile -->
|
|
<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
|
|
<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={headerCollapse} />
|
|
|
|
<!-- Nav bar -->
|
|
<div class="bg-base-200 p-0">
|
|
<header class="{hideOnPrint ? 'hide-on-print' : ''}">
|
|
<div class="nav-bar pr-4 bg-base-200">
|
|
{#if !headerCollapse}
|
|
<div class="desktop">
|
|
<a href="/" class="nav-head">
|
|
<DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
|
|
<h3 id="logo-text">The Deprived Devs</h3>
|
|
</a>
|
|
<div class="nav-spacer" />
|
|
<select class="prose" data-choose-theme>
|
|
<option value="light">Light</option>
|
|
<option value="dark">Dark</option>
|
|
<option value="synthwave">Synthwave</option>
|
|
<option value="retro">Retro</option>
|
|
<option value="cyberpunk">Cyberpunk</option>
|
|
<option value="valentine">Valentine</option>
|
|
<option value="halloween">Halloween</option>
|
|
<option value="forest">Forest</option>
|
|
<option value="aqua">Aqua</option>
|
|
<option value="black">Black</option>
|
|
<option value="luxury">Luxury</option>
|
|
<option value="dracula">Dracula</option>
|
|
<option value="business">Business</option>
|
|
<option value="night">Night</option>
|
|
<option value="coffee">Coffee</option>
|
|
<option value="dim">Dim</option>
|
|
<option value="sunset" selected>Sunset</option>
|
|
</select>
|
|
|
|
<a href="/">Home</a>
|
|
<a href="https://botalex.itch.io/">Games</a>
|
|
<!-- <a href="/posts">Blog</a>
|
|
<a href="/about">About</a> -->
|
|
</div>
|
|
{:else}
|
|
<div class="collapsed">
|
|
<a on:click={resetNavBar} href="/" class="nav-head">
|
|
<DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
|
|
<h3 id="logo-text">The Deprived Devs</h3>
|
|
</a>
|
|
<div class="nav-spacer" />
|
|
<button id="toggle-nav" on:click={() => navbarHidden = !navbarHidden}>
|
|
<HamburgerMenuIcon Class="fill-base-content"/>
|
|
</button>
|
|
</div>
|
|
{#if !navbarHidden}
|
|
<div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
|
|
<select data-choose-theme>
|
|
<option value="light">Default</option>
|
|
<option value="dark">Dark</option>
|
|
<option value="cupcake">Cupcake</option>
|
|
<option value="bumblebee">Bumblebee</option>
|
|
<option value="emerald">Emerald</option>
|
|
<option value="corporate">Corporate</option>
|
|
<option value="synthwave">Synthwave</option>
|
|
<option value="retro">Retro</option>
|
|
<option value="cyberpunk">Cyberpunk</option>
|
|
<option value="valentine">Valentine</option>
|
|
<option value="halloween">Halloween</option>
|
|
<option value="garden">Garden</option>
|
|
<option value="forest">Forest</option>
|
|
<option value="aqua">Aqua</option>
|
|
<option value="lofi">Lofi</option>
|
|
<option value="pastel">Pastel</option>
|
|
<option value="fantasy">Fantasy</option>
|
|
<option value="wireframe">Wireframe</option>
|
|
<option value="black">Black</option>
|
|
<option value="luxury">Luxury</option>
|
|
<option value="dracula">Dracula</option>
|
|
<option value="cmyk">CMYK</option>
|
|
<option value="autumn">Autumn</option>
|
|
<option value="business">Business</option>
|
|
<option value="acid">Acid</option>
|
|
<option value="lemonade">Lemonade</option>
|
|
<option value="night">Night</option>
|
|
<option value="coffee">Coffee</option>
|
|
<option value="winter">Winter</option>
|
|
<option value="dim">Dim</option>
|
|
<option value="nord">Nord</option>
|
|
<option value="sunset">Sunset</option>
|
|
</select>
|
|
|
|
<a on:click={resetNavBar} href="/">Home</a>
|
|
<a on:click={resetNavBar} href="https://botalex.itch.io/">Games</a>
|
|
<!-- <a on:click={resetNavBar} href="/posts">Blog</a>
|
|
<a on:click={resetNavBar} href="/about">About</a> -->
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Page content -->
|
|
<slot />
|
|
|
|
<!-- About footer -->
|
|
<footer class="{hideOnPrint ? 'hide-on-print' : ''}">
|
|
<div class="about-container">
|
|
<div class="credits">
|
|
<span>© 2023-2024</span>
|
|
<br>
|
|
<span>Benjamin Dreyer</span>
|
|
<br>
|
|
<span>Oliver Schwenger</span>
|
|
<br>
|
|
<span>Sylvester Junge</span>
|
|
<br>
|
|
<span>Zhentao Wei</span>
|
|
<br>
|
|
<br>
|
|
<span>Website <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website/src/branch/dev" target="_blank">source code</a></span>
|
|
</div>
|
|
<div>
|
|
<h3>About Us</h3>
|
|
<a href="/about">About</a>
|
|
</div>
|
|
<div class="contact">
|
|
<h3>Contact</h3>
|
|
<a href="https://discord.gg/awatEEqc3M" target="_blank" class="social">
|
|
<img src="/images/icons/discord.svg" alt="Discord"/>
|
|
<span>Discord</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
|
|
<style lang="scss">
|
|
/* Nav bar. */
|
|
header {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
header a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-bar {
|
|
width: 100%;
|
|
max-width: 1400px;
|
|
}
|
|
|
|
.desktop {
|
|
width: 100%;
|
|
display: flex;
|
|
gap: 30px;
|
|
}
|
|
|
|
.collapsed {
|
|
width: 100%;
|
|
display: flex;
|
|
}
|
|
|
|
#toggle-nav {
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
|
|
.nav-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
#logo-link {
|
|
width: 64px;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
#logo-text {
|
|
font-size: 24px;
|
|
color: oklch(var(--bc));
|
|
font-family: var(--title-font);
|
|
margin: 0;
|
|
|
|
min-width: 200px;
|
|
}
|
|
|
|
.nav-spacer {
|
|
width: 100%;
|
|
}
|
|
|
|
header a {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
font-size: 22px;
|
|
font-family: var(--title-font);
|
|
// Text color
|
|
color: oklch(var(--bc));
|
|
}
|
|
|
|
/* Footer. */
|
|
footer {
|
|
margin-top: 50px;
|
|
padding: 25px 0;
|
|
background-color: oklch(var(--b3));
|
|
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.about-container {
|
|
width: 80%;
|
|
height: 100%;
|
|
|
|
color: oklch(var(--bc));
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.about-container > div {
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.credits {
|
|
line-height: 2;
|
|
}
|
|
|
|
.contact {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.social {
|
|
display: flex;
|
|
align-content: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.social > img {
|
|
width: 24px;
|
|
}
|
|
|
|
footer h3 {
|
|
margin-top: 0px;
|
|
color: var(--text2);
|
|
}
|
|
|
|
footer a {
|
|
color: var(--text2);
|
|
text-decoration-line: underline;
|
|
}
|
|
|
|
a:hover {
|
|
filter: brightness(130%);
|
|
}
|
|
|
|
@media print {
|
|
.hide-on-print {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
{#if footerCollapse}
|
|
<style>
|
|
.about-container {
|
|
flex-direction: column;
|
|
justify-content: center !important;
|
|
gap: 25px;
|
|
}
|
|
</style>
|
|
{/if}
|
|
|
|
{#if headerCollapse}
|
|
<style>
|
|
|
|
</style>
|
|
{/if}
|