src/app.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
-@config "$src/../tailwind.config.ts";
+@config "../tailwind.config.ts";
 
 @font-face {
 	font-family: 'Lineyka';
@@ -29,8 +29,4 @@
 .no-x-scroll {
 	max-width: 100%;
 	overflow-x: hidden;
-}
-
-.hero-background {
-	@apply bg-[url('/common/background-day.webp')] dark:bg-[url('/common/background-night.webp')] bg-cover bg-fixed;
 }

src/lib/components/HoverIcon.svelte

@@ -6,22 +6,17 @@
 	export let src: string | null = null;
 	export let text: string;
 	export let size: number = 32;
-	export let black: boolean = false;
 
 	let isUrl;
 	$: isUrl = src?.startsWith('/') || src?.startsWith('http');
 </script>
 
-<div
-	class="{className} {black
-		? 'fill-slate-950'
-		: 'fill-slate-50'} text-sm uppercase transition-all"
->
+<div class="{className} fill-slate-50 text-sm uppercase transition-all">
 	{#if src}
 		{#if isUrl}
 			<img {src} alt={text} width={size} height={size} />
 		{:else}
-			<Icon width={size} height={size} icon={src} color={black ? '#020618' : '#f8fafc'} />
+			<Icon width={size} height={size} icon={src} color="#f8fafc" />
 		{/if}
 	{:else}
 		{text}

src/lib/components/NavBar.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-	import HoverIcon from '$lib/components/HoverIcon.svelte';
-	import { page } from '$app/state';
-
-	export let routes: App.Route[];
-	export let isVertical: boolean = false;
-</script>
-
-<nav
-	class="flex flex-row gap-2 bg-slate-100 not-landscape:justify-around not-landscape:px-2 landscape:flex-col landscape:py-2"
->
-	{#each routes as route (route.href)}
-		<a class="nav-button {page.url.pathname === route.href ? 'active' : ''}" href={route.href}>
-			<div class="p-1">
-				<HoverIcon
-					src={route.icon}
-					class="text-sm uppercase"
-					text={route.href}
-					size={32}
-					black={page.url.pathname !== route.href}
-				/>
-			</div>
-			<div class="contour">
-				{route.label}
-			</div>
-		</a>
-	{/each}
-</nav>
-
-<style>
-	@import '$src/app.css';
-
-	.nav-button {
-		@apply flex aspect-square flex-col items-center justify-center gap-0.5 p-2 text-slate-950 not-landscape:h-24 hover:bg-emerald-400 landscape:w-24;
-
-		> .contour {
-			@apply rounded-full bg-slate-50 px-1.5 py-0.5 text-center;
-		}
-
-		&.active {
-			@apply bg-emerald-600;
-		}
-	}
-</style>

src/lib/components/SocialHyperlink.svelte

@@ -13,7 +13,9 @@
 
 <a {href} class="{className} group inline-block" target={isLinkLocal(href) ? '_self' : '_blank'}>
 	<span
-		class="inline-block size-6 rounded-sm bg-emerald-800 p-0.5 align-bottom transition-all group-hover:scale-110 sm:size-8 sm:rounded-xl sm:p-1"
+		class="inline-block {sm.current
+			? 'size-8 rounded-xl p-1'
+			: 'size-6 rounded-sm p-0.5'} bg-emerald-800 align-bottom transition-all group-hover:scale-110"
 	>
 		<HoverIcon src={customIcon ?? tryGetIcon(href)} text={href} size={sm.current ? 24 : 20} />
 	</span>

src/routes/+error.svelte

@@ -3,11 +3,11 @@
 </script>
 
 <svelte:head>
-	<title>{page.status} &mdash; Tea Sanctuary</title>
+	<title>404 &mdash; Tea Sanctuary</title>
 </svelte:head>
 
 <section
-	class="hero-background flex h-screen shrink-0 flex-col items-center justify-center gap-12 overflow-hidden p-4"
+	class="bg-[url('/common/background-day.webp')] dark:bg-[url('/common/background-night.webp')] bg-fixed bg-cover sticky flex h-screen shrink-0 flex-col items-center justify-center gap-12 overflow-hidden p-4"
 >
 	<div class="flex flex-nowrap flex-col gap-5">
 		<div class="flex flex-nowrap flex-col gap-3 items-center justify-center lg:flex-row lg:flex-nowrap">
@@ -25,8 +25,4 @@
 			</div>
 		</div>
 	</div>
-</section>
-
-<style>
-	@import "$src/app.css";
-</style>
+</section>

src/routes/+layout.svelte

@@ -1,15 +1,20 @@
 <script lang="ts">
 	import '../app.css';
 	// import '../syntax-highlight.css'; // https://github.com/PrismJS/prism-themes
-	import NavBar from '$src/lib/components/NavBar.svelte';
+	import { page } from '$app/state';
+	import { slide } from 'svelte/transition';
+	import { navigating } from '$app/state';
+	// import NavButton from '$lib/components/Nav-Button.svelte';
+	import Icon from '@iconify/svelte';
 
 	const routes: App.Route[] = [
-		{ label: 'главная', icon: 'material-symbols:emoji-food-beverage', href: '/' },
-		{ label: 'команда', icon: 'material-symbols:groups', href: '/team' },
-		{ label: 'блог', icon: 'material-symbols:newspaper', href: '/blog' },
-		{ label: 'проекты', icon: 'material-symbols:work', href: '/projects' },
-		{ label: 'контакты', icon: 'material-symbols:chat', href: '/contact' }
+		{ label: 'команда', icon: 'material-symbols:person', href: '/team' },
+		{ label: 'новости', icon: 'material-symbols:newspaper', href: '/blog' },
+		{ label: 'проекты', icon: 'material-symbols:work', href: '/projects' }
 	];
+
+	let isMenuOpen = false;
+	$: if (navigating) isMenuOpen = false;
 </script>
 
 <svelte:head>
@@ -20,21 +25,16 @@
 	<title>Tea Sanctuary</title>
 </svelte:head>
 
-<div class="flex h-screen w-screen flex-row portrait:flex-col-reverse">
-	<NavBar {routes} />
-	<div class="flex grow-1 flex-col overflow-auto">
-		<div class="relative grow-1">
-			<slot />
-		</div>
-
-		<footer class="bg-emerald-950">
-			<div
-				class="mx-auto w-full max-w-screen-xl justify-center px-2 py-6 text-center text-emerald-50 md:flex"
-			>
-				<p>
-					<span class="font-bold">&copy; 2025 Tea Sanctuary</span>
-				</p>
-			</div>
-		</footer>
-	</div>
+<div class="relative flex flex-col">
+	<slot />
 </div>
+
+<footer class="bg-emerald-950">
+	<div
+		class="mx-auto w-full max-w-screen-xl justify-center px-2 py-6 text-center text-emerald-50 md:flex"
+	>
+		<p>
+			<span class="font-bold">&copy; 2025 Tea Sanctuary</span>
+		</p>
+	</div>
+</footer>

src/routes/+page.svelte

@@ -4,13 +4,10 @@
 	import { PUBLIC_TS_DISCORD } from '$env/static/public';
 </script>
 
-<svelte:head>
-	<title>Tea Sanctuary</title>
-</svelte:head>
-
 <section
 	class="flex shrink-0 flex-col items-center justify-center gap-5 overflow-hidden p-4 hero-background"
 >
+	<div class="basis-full"></div>
 	<div
 		class="flex flex-col flex-nowrap items-center justify-center gap-3 lg:flex-row lg:flex-nowrap"
 	>
@@ -141,7 +138,13 @@
 </section>
 
 <style>
-	@import "$src/app.css";
+	@import "tailwindcss";
+	@plugin "@tailwindcss/typography";
+	@config "../../tailwind.config.ts";
+
+	.hero-background {
+		@apply bg-[url('/common/background-day.webp')] dark:bg-[url('/common/background-night.webp')] bg-cover bg-fixed;
+	}
 
 	section > h1 {
 		@apply font-disket mb-4 text-2xl font-bold sm:text-4xl;

svelte.config.js

@@ -26,9 +26,6 @@ const config = {
 			handleMissingId: ({ event, resolve }) => {
 				return;
 			}
-		},
-		alias: {
-			$src: "src/"
 		}
 	},
 	extensions: ['.svelte', '.md'],