removed the scroll thing, because i'm too lazy to continue for a while
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Successful in 21s

This commit is contained in:
BOTAlex 2025-05-24 05:12:04 +02:00
parent e3f015d4b3
commit e65b6c97c6
2 changed files with 501 additions and 481 deletions

View file

@ -1,8 +1,8 @@
<!-- 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 { fly } from "svelte/transition";
import MediaQuery from "svelte-media-queries";
import { Dices } from "@lucide/svelte";
let hideOnPrint: boolean;
@ -11,65 +11,76 @@
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';
import { afterNavigate } from "$app/navigation";
afterNavigate(() => {
const params = new URLSearchParams(window.location.search);
hideOnPrint = params.get('hideOnPrint') === '1';
hideOnPrint = params.get("hideOnPrint") === "1";
//console.log(hideOnPrint);
});
import { onMount } from 'svelte';
import { onMount } from "svelte";
import Zooter from "./comps/Zooter.svelte";
onMount(async () => {
const lock = document.createElement('meta');
lock.name = 'darkreader-lock';
const lock = document.createElement("meta");
lock.name = "darkreader-lock";
document.head.appendChild(lock);
});
function nextTheme(){
function nextTheme() {
let theme: string | null = null;
if (typeof localStorage !== 'undefined') {
theme = localStorage.getItem('theme');
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){
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);
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">
@ -78,7 +89,10 @@
{#if !isMobile}
<div class="desktop">
<a href="/" class="nav-head">
<DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
<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" />
@ -88,7 +102,11 @@
{@render SwitchThemeButton()}
<a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Zhen CV</a>
<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>
@ -97,20 +115,33 @@
{: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;"/>
<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
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
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> -->
@ -123,9 +154,23 @@
<!-- 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>
{/if}
{#if isMobile}
<style>
</style>
{/if}
<style lang="scss">
/* Nav bar. */
@ -159,7 +204,6 @@
border: none;
}
.nav-list {
display: flex;
flex-direction: column;
@ -271,21 +315,5 @@
.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>
{/if}
</style>

View file

@ -85,8 +85,8 @@
}
onMount(() => {
totalScroll =
document.documentElement.scrollHeight - window.innerHeight;
return; // Fuck this, I'm too lazy to fix this atm
totalScroll = document.documentElement.scrollHeight - window.innerHeight;
unscrollInterval = setInterval(() => {
// Prevents scroll to bottom on first try
@ -94,10 +94,7 @@
!notFirstScroll &&
scrollY > totalScroll - unscrollScrollDiv.scrollHeight
) {
smoothScrollTo(
totalScroll - unscrollScrollDiv.scrollHeight * 1.1,
0,
);
smoothScrollTo(totalScroll - unscrollScrollDiv.scrollHeight * 1.1, 0);
// Allow further scroll after delay
setTimeout(() => {
@ -117,10 +114,7 @@
}
if (totalScroll - unscrollScrollDiv.scrollHeight < scrollY) {
smoothScrollTo(
totalScroll - unscrollScrollDiv.scrollHeight,
200,
);
smoothScrollTo(totalScroll - unscrollScrollDiv.scrollHeight, 200);
}
if (totalScroll <= scrollY) {
@ -137,8 +131,7 @@
}
function onResize() {
totalScroll =
document.documentElement.scrollHeight - window.innerHeight;
totalScroll = document.documentElement.scrollHeight - window.innerHeight;
}
onDestroy(() => {
@ -164,9 +157,7 @@
<div class="w-full">
<!-- Keep scrolling thing -->
<div
class="h-64 w-full flex flex-col justify-center items-center"
>
<div class="hidden h-64 w-full flex flex-col justify-center items-center">
<div>Keep scrolling to veiw Zhen's portfolio site!</div>
<div class="flex justify-center">
<ArrowBigDown />
@ -176,7 +167,8 @@
</div>
</div>
<div class="h-64 w-full flex flex-col justify-end items-center"
<div
class="hidden h-64 w-full flex flex-col justify-end items-center"
bind:this={unscrollScrollDiv}
>
<img