I think i forgot to include this file lol
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Successful in 22s
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Successful in 22s
This commit is contained in:
parent
0925af468e
commit
0c2ab8d93f
1 changed files with 259 additions and 287 deletions
|
|
@ -1,319 +1,291 @@
|
|||
<!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements -->
|
||||
<script lang="ts">
|
||||
import "../app.css";
|
||||
import { fly } from "svelte/transition";
|
||||
import MediaQuery from "svelte-media-queries";
|
||||
import { Dices } from "@lucide/svelte";
|
||||
let hideOnPrint: boolean;
|
||||
import "../app.css";
|
||||
import { fly } from 'svelte/transition';
|
||||
import MediaQuery from 'svelte-media-queries';
|
||||
import { Dices } from "@lucide/svelte";
|
||||
let hideOnPrint: boolean;
|
||||
|
||||
let { children } = $props();
|
||||
let { children } = $props();
|
||||
|
||||
import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
|
||||
import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
|
||||
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 isMobile: boolean = $state(false);
|
||||
const footerCollapseThreshold : string = '1000px';
|
||||
const headerCollapseThreshold : string = '1000px';
|
||||
let footerCollapse : boolean;
|
||||
let isMobile : boolean = $state(false);
|
||||
|
||||
let navbarHidden: boolean = $state(true);
|
||||
let navbarHidden : boolean = $state(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 Zooter from "./comps/Zooter.svelte";
|
||||
|
||||
onMount(async () => {
|
||||
const lock = document.createElement("meta");
|
||||
lock.name = "darkreader-lock";
|
||||
document.head.appendChild(lock);
|
||||
});
|
||||
|
||||
function nextTheme() {
|
||||
let theme: string | null = null;
|
||||
|
||||
if (typeof localStorage !== "undefined") {
|
||||
theme = localStorage.getItem("theme");
|
||||
function resetNavBar() {
|
||||
navbarHidden = true;
|
||||
}
|
||||
|
||||
const themesArr = (window as any).AvailableThemes;
|
||||
let nextTheme = "dark";
|
||||
if (
|
||||
theme == "null" ||
|
||||
theme == "undefined" ||
|
||||
theme == undefined ||
|
||||
theme == null
|
||||
) {
|
||||
} else {
|
||||
nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length];
|
||||
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 Zooter from "./comps/Zooter.svelte";
|
||||
|
||||
onMount(async () => {
|
||||
const lock = document.createElement('meta');
|
||||
lock.name = 'darkreader-lock';
|
||||
document.head.appendChild(lock);
|
||||
});
|
||||
|
||||
function nextTheme(){
|
||||
let theme: string | null = null;
|
||||
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
theme = localStorage.getItem('theme');
|
||||
}
|
||||
|
||||
const themesArr = (window as any).AvailableThemes;
|
||||
let nextTheme = "dark";
|
||||
if (theme == "null" || theme == "undefined" || theme == undefined || theme == null){
|
||||
|
||||
} else {
|
||||
nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length];
|
||||
}
|
||||
|
||||
console.log("Slecting: " + nextTheme);
|
||||
document.documentElement.setAttribute('data-theme', nextTheme);
|
||||
localStorage.setItem('theme', nextTheme);
|
||||
}
|
||||
|
||||
console.log("Slecting: " + nextTheme);
|
||||
document.documentElement.setAttribute("data-theme", nextTheme);
|
||||
localStorage.setItem("theme", nextTheme);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
{#snippet SwitchThemeButton()}
|
||||
<div
|
||||
class="tooltip tooltip-bottom grid place-content-center"
|
||||
data-tip="Switch theme"
|
||||
>
|
||||
<button class="cursor-pointer" onclick={nextTheme}> <Dices /></button>
|
||||
</div>
|
||||
<div class="tooltip tooltip-bottom grid place-content-center" data-tip="Switch theme">
|
||||
<button class="cursor-pointer" onclick={nextTheme}> <Dices/></button>
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
<!-- Detect mobile -->
|
||||
<MediaQuery
|
||||
query="(max-width: {footerCollapseThreshold})"
|
||||
bind:matches={footerCollapse}
|
||||
/>
|
||||
<MediaQuery
|
||||
query="(max-width: {headerCollapseThreshold})"
|
||||
bind:matches={isMobile}
|
||||
/>
|
||||
<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
|
||||
<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={isMobile} />
|
||||
|
||||
<!-- Nav bar -->
|
||||
<div class="bg-base-200 p-0">
|
||||
<header class="{hideOnPrint ? 'hide-on-print' : ''} bg-base-300">
|
||||
<div class="nav-bar pr-4">
|
||||
{#if !isMobile}
|
||||
<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" />
|
||||
<header class="{hideOnPrint ? 'hide-on-print' : ''} bg-base-300">
|
||||
<div class="nav-bar pr-4">
|
||||
{#if !isMobile}
|
||||
<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" />
|
||||
|
||||
<!-- <a href="/">Home</a> -->
|
||||
<!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> -->
|
||||
<!-- <a href="/">Home</a> -->
|
||||
<!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> -->
|
||||
|
||||
{@render SwitchThemeButton()}
|
||||
|
||||
<a
|
||||
href="/zhen/cv/rev2?hideOnPrint=1"
|
||||
target="_blank"
|
||||
style="width: 7.5rem;">Zhen CV</a
|
||||
>
|
||||
<a href="/tools" style="width: 7.5rem;">Tools</a>
|
||||
<a href="https://botalex.itch.io/" target="_blank">Games</a>
|
||||
<!-- <a href="/posts">Blog</a>
|
||||
{@render SwitchThemeButton()}
|
||||
|
||||
<a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Zhen CV</a>
|
||||
<a href="/tools" style="width: 7.5rem;">Tools</a>
|
||||
<a href="https://botalex.itch.io/" target="_blank">Games</a>
|
||||
<!-- <a href="/posts">Blog</a>
|
||||
<a href="/about">About</a> -->
|
||||
</div>
|
||||
{:else}
|
||||
<div class="collapsed shadow-xl">
|
||||
<a onclick={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" />
|
||||
{@render SwitchThemeButton()}
|
||||
<div class="px-1"></div>
|
||||
<button
|
||||
id="toggle-nav"
|
||||
onclick={() => {
|
||||
navbarHidden = !navbarHidden;
|
||||
console.log(navbarHidden);
|
||||
}}
|
||||
>
|
||||
<HamburgerMenuIcon Class="fill-base-content" />
|
||||
</button>
|
||||
</div>
|
||||
{#if !navbarHidden}
|
||||
<div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
|
||||
<!-- <a onclick={resetNavBar} href="/">Home</a> -->
|
||||
<a
|
||||
onclick={resetNavBar}
|
||||
href="https://botalex.itch.io/"
|
||||
target="_blank">Games</a
|
||||
>
|
||||
<a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank">Zhen's CV</a>
|
||||
<!-- <a onclick={resetNavBar} href="/posts">Blog</a>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="collapsed shadow-xl">
|
||||
<a onclick={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" />
|
||||
{@render SwitchThemeButton()}
|
||||
<div class="px-1"></div>
|
||||
<button id="toggle-nav" onclick={() => {navbarHidden = !navbarHidden; console.log(navbarHidden);}}>
|
||||
<HamburgerMenuIcon Class="fill-base-content"/>
|
||||
</button>
|
||||
</div>
|
||||
{#if !navbarHidden}
|
||||
<div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
|
||||
<!-- <a onclick={resetNavBar} href="/">Home</a> -->
|
||||
<a onclick={resetNavBar} href="https://botalex.itch.io/" target="_blank">Games</a>
|
||||
<a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank">Zhen's CV</a>
|
||||
<!-- <a onclick={resetNavBar} href="/posts">Blog</a>
|
||||
<a onclick={resetNavBar} href="/about">About</a> -->
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Page content -->
|
||||
{@render children?.()}
|
||||
|
||||
<!-- Page content -->
|
||||
{@render children?.()}
|
||||
|
||||
<Zooter bind:hideOnPrint />
|
||||
<Zooter bind:hideOnPrint/>
|
||||
</div>
|
||||
|
||||
{#if footerCollapse}
|
||||
<style>
|
||||
.about-container {
|
||||
flex-direction: column;
|
||||
justify-content: center !important;
|
||||
gap: 25px;
|
||||
|
||||
<style lang="scss">
|
||||
/* Nav bar. */
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
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;
|
||||
|
||||
& h3 {
|
||||
font-size: larger;
|
||||
}
|
||||
}
|
||||
|
||||
.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 isMobile}
|
||||
<style>
|
||||
</style>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
{/if}
|
||||
|
||||
<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;
|
||||
|
||||
& h3 {
|
||||
font-size: larger;
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue