granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

auth: add port-breeze background and back-to-home link

Browse source
This commit is contained in:
Justin Edmund 2025-11-30 23:15:52 -08:00
parent 4b96633f69
commit e3e9ccdd6c
1 changed files with 31 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/routes/auth/+layout.svelte
View file

@ -1,5 +1,7 @@
<script lang="ts">
import type { Snippet } from 'svelte'
import Icon from '$lib/components/Icon.svelte'
import * as m from '$lib/paraglide/messages'
interface Props {
children: Snippet
@ -10,6 +12,10 @@
<div class="authContainer">
<div class="authBackground"></div>
<a href="/" class="backLink">
<Icon name="arrow-left" size={14} />
{m.auth_backToHome()}
</a>
<div class="authContent">
{@render children()}
</div>
@ -18,6 +24,7 @@
<style lang="scss">
@use '$src/themes/spacing' as *;
@use '$src/themes/effects' as *;
@use '$src/themes/typography' as *;
.authContainer {
min-height: 100vh;
@ -30,9 +37,7 @@
.authBackground {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
background-size: cover;
background-position: center;
background: #1a1a2e url('/images/port-breeze.jpg') center / cover no-repeat;
z-index: 0;
// Overlay for readability
@ -40,7 +45,29 @@
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.3);
background: rgba(0, 0, 0, 0.4);
}
}
.backLink {
position: absolute;
top: $unit-3x;
left: $unit-3x;
z-index: 2;
display: flex;
align-items: center;
gap: $unit;
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
font-size: $font-small;
padding: $unit $unit-2x;
border-radius: $unit;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(4px);
transition: background 0.2s ease;
&:hover {
background: rgba(0, 0, 0, 0.5);
}
}