light7734/bonfire
1
1
Fork 0
Code Issues 5 Pull requests Projects 1 Releases Packages Wiki Activity

feat: layout

Browse source
This commit is contained in:
light7734 2025-10-13 22:18:28 +03:30
parent 5213ae2c0a
commit f217dd7825
Signed by: light7734
GPG key ID: 8C30176798F1A6BA
1 changed files with 86 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
src/routes/+layout.svelte
View file

@ -1,8 +1,92 @@
<script lang="ts">
import '../app.css';
let { children } = $props();
import ThemeToggle from './theme.svelte';
</script>
<div class="">
{@render children()}
<div class="flex min-h-screen bg-dark-bg">
<div class="absolute right-0 top-0">
<ThemeToggle />
</div>
<!-- Left Section - Hidden on mobile, visible on lg screens -->
<div class="relative hidden border-r border-dark-neutral lg:flex lg:w-1/4">
<!-- Diagonal line pattern -->
<div class="absolute inset-0">
<svg class="h-full w-full" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="diagonal-left" patternUnits="userSpaceOnUse" width="40" height="40">
<line x1="0" y1="40" x2="40" y2="0" stroke="#928374" stroke-width="1" />
</pattern>
<linearGradient id="fade-left" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:white;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:white;stop-opacity:0.1" />
</linearGradient>
<mask id="fade-mask-left">
<rect width="100%" height="100%" fill="url(#fade-left)" />
</mask>
</defs>
<rect width="100%" height="100%" fill="url(#diagonal-left)" mask="url(#fade-mask-left)" />
</svg>
</div>
</div>
<!-- Main Content Section -->
<div class="relative min-w-[800px] flex-1 lg:w-1/2">
<!-- Left diagonal border -->
<div class="absolute bottom-0 left-0 top-0 w-8 overflow-hidden lg:w-12">
<svg class="h-full w-full" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<defs>
<pattern id="diagonal-border-left" patternUnits="userSpaceOnUse" width="12" height="12">
<line x1="0" y1="12" x2="12" y2="0" stroke="#928374" stroke-width="1" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#diagonal-border-left)" />
</svg>
</div>
<!-- Main content area -->
<div class="min-h-screen px-12 py-8 lg:px-24">
{@render children()}
</div>
<!-- Right diagonal border -->
<div class="absolute bottom-0 right-0 top-0 w-8 overflow-hidden lg:w-12">
<svg class="h-full w-full" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<defs>
<pattern id="diagonal-border-right" patternUnits="userSpaceOnUse" width="12" height="12">
<line x1="0" y1="12" x2="12" y2="0" stroke="#928374" stroke-width="1" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#diagonal-border-right)" />
</svg>
</div>
</div>
<!-- Right Section - Hidden on mobile, visible on lg screens -->
<div class="relative hidden border-l border-dark-neutral lg:flex lg:w-1/4">
<!-- Diagonal line pattern -->
<div class="absolute inset-0">
<svg class="h-full w-full" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="diagonal-right" patternUnits="userSpaceOnUse" width="40" height="40">
<line x1="0" y1="40" x2="40" y2="0" stroke="#928374" stroke-width="1" />
</pattern>
<linearGradient id="fade-right" x1="100%" y1="0%" x2="0%" y2="0%">
<stop offset="0%" style="stop-color:white;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:white;stop-opacity:0.2" />
</linearGradient>
<mask id="fade-mask-right">
<rect width="100%" height="100%" fill="url(#fade-right)" />
</mask>
</defs>
<rect width="100%" height="100%" fill="url(#diagonal-right)" mask="url(#fade-mask-right)" />
</svg>
</div>
</div>
</div>
<style>
/* Additional custom styles if needed */
</style>