normal optimize

Author: 15363205631

src/lib/Z-transitions.js

@@ -1,25 +1,5 @@
 import * as ease from "svelte/easing";
 
-export function slideWithPadding(node, { delay = 0, duration = 400, axis }) {
-    const width = window.getComputedStyle(node).width;
-    const padding = window.getComputedStyle(node).padding.split(' ').map(Number);
-    return {
-        delay,
-        duration,
-        axis,
-        easing: ease.quadOut,
-        css(t, u) {
-            return `
-					position: sticky;
-					overflow: hidden;
-					min-width: 0;
-					padding: ${padding[0] * t} ${padding[1] * t} ${padding[2] * t} ${padding[3] * t};
-					width:${parseInt(width.replace('px', '')) * t}px;
-				`;
-        }
-    };
-}
-
 export function scaleX(node, { delay = 0, duration = 200, direction = 'left' }) {
     return {
         delay,

src/lib/ZBlurBtn/ZBlurBtn.svelte

@@ -17,6 +17,7 @@
 <style>
 	button :global {
 		font-family: unset;
+		font-size: unset;
 		box-sizing: border-box;
 		margin: 0;
 		padding: 0;
@@ -26,7 +27,7 @@
 		border-radius: 0.7rem;
 		outline: none;
 		background-color: var(--header-btn-bg-color);
-		backdrop-filter: blur(10px);
+		backdrop-filter: blur(5px);
 		display: flex;
 		justify-content: center;
 		align-items: center;

src/lib/ZIcon/ZIcon.svelte

@@ -9,14 +9,21 @@
 	 */
 
 	/** @type {Props} */
-	let { option , height = '1.25rem', width = '1.25rem', stroke, fill, ...others } = $props();
+	let {
+		option,
+		height = '1.25rem',
+		width = '1.25rem',
+		stroke = 'var(--all-svg-color)',
+		fill = 'var(--all-svg-color)',
+		...others
+	} = $props();
 	// .replace(/\d+/g, (match) => parseInt(match, 10) * 2.4)
 	let viewBox = $derived(viewBoxs[option]);
 	let path = $derived(paths[option]);
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<svg style="--strokeColor:{stroke};--fillColor:{fill}" {...others} {viewBox} {height} {width}
+<svg {...others} style="--strokeColor:{stroke};--fillColor:{fill}" {viewBox} {height} {width}
 	>{@html path}</svg
 >
 

src/lib/ZIcon/Zicon.js

@@ -2,6 +2,7 @@
 	import { afterNavigate } from '$app/navigation';
 	import { page } from '$app/stores';
 	import ZBlurBtn from '$lib/ZBlurBtn/ZBlurBtn.svelte';
+	import ZIcon from '$lib/ZIcon/ZIcon.svelte';
 	import { onMount } from 'svelte';
 
 	let urls = $state();
@@ -15,14 +16,11 @@
 		const url = new URL($page.url);
 		urls = url.pathname.split('/').filter(Boolean);
 	});
-
-	$inspect(urls);
 </script>
 
 <div class="znav">
-	<div>></div>
 	{#each urls as url, i}
-		{#if i !== 0}
+		{#if i !== 0 && urls.length !== 0}
 			<span>/</span>
 		{/if}
 		<a href={'/' + urls.slice(0, i + 1).join('/')}>{url}</a>
@@ -32,30 +30,31 @@
 <style>
 	.znav :global {
 		display: flex;
-		padding: 0 1rem;
+		padding: 0 0.5rem;
 		height: 3rem;
 		min-width: 3rem;
 		align-items: center;
 		justify-content: center;
 		flex-wrap: nowrap;
 		flex-direction: row;
-		backdrop-filter: blur(10px);
-		background-color: var(--header-btn-bg-color);
 		border-radius: 0.7rem;
+		backdrop-filter: blur(5px);
+		background-color: var(--header-btn-bg-color);
 		* {
 			color: var(--header-text-color);
 		}
 		a {
-			font-size: large;
-			font-weight: bolder;
+			font-size: 0.9rem;
 			text-decoration: none;
+			color: var(--header-text-light-color);
 			&:hover {
 				text-decoration: solid underline;
 				color: var(--header-text-hover-color);
 			}
 		}
-		span{
-			padding: 0 1rem;
+		span {
+			color: var(--header-text-light-color);
+			padding: 0 0.5rem;
 		}
 	}
 </style>

src/lib/ZNav/ZNav.svelte

@@ -163,7 +163,7 @@
 		}
 		a.sidebar {
 			text-decoration: none;
-			color: var(----main-text-color);
+			color: var(--sidebar-text-color);
 			transition: all cubic-bezier(0.165, 0.84, 0.44, 1) 300ms 70ms;
 			&:hover {
 				text-decoration: underline;

src/lib/ZSibar/ZSidebar.svelte

@@ -95,6 +95,7 @@
 		width: 5rem;
 		height: var(--header-block-height);
 		justify-content: center;
+		font-size: 0.9rem;
 		& .theme-btnContainer {
 			display: flex;
 			flex-direction: column;

src/lib/ZThemeBtn/ZThemeBtn.svelte

@@ -10,9 +10,9 @@ export async function load() {
 		.filter((d) => d.isDirectory())
 		.map((d) => path.join(d.parentPath, d.name).replaceAll('\\', '/').replaceAll(baseDir, ''));
 
-	const docDir = 'docs/';
+	const docDir = 'Docs/';
 	const docItems = await readdir(docDir, { recursive: true, withFileTypes: true });
-	const docDirectory = docItems.map((d) => path.join(d.parentPath, d.name).replaceAll('\\', '/').replaceAll(docDir, '/docs/').replace('.md', ''));
+	const docDirectory = docItems.map((d) => path.join(d.parentPath, d.name).replaceAll('\\', '/').replaceAll(docDir, '/Docs/').replace('.md', ''));
 
 	directory = [...directory, ...docDirectory].filter((i) => !i.match(/\[.*\]/g));