Mobile display updates
Some checks failed
Docker / build (push) Has been cancelled

This commit is contained in:
yuriko 🦊 2025-06-28 14:17:54 -04:00
parent 4c58b94f96
commit 13307bc7f4
Signed by: jaiden
SSH key fingerprint: SHA256:f8tvveBoXBrKZIQDWLLcpQrKbATUCGg98x2N4YzkDM8
3 changed files with 37 additions and 5 deletions

View file

@ -34,6 +34,7 @@ wa-page[view='desktop'] {
border-inline-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}
[slot*='subheader'],
[slot*='navigation'],
[slot*='navigation-header'],
[slot*='navigation-footer']{
@ -45,6 +46,10 @@ wa-page[view='mobile'] {
[slot*='header'] {
display: none;
}
[slot*='subheader'],
[slot*='navigation-header'] {
display: flex;
}
--menu-width: auto;
--aside-width: auto;
}
@ -54,6 +59,21 @@ wa-page[view='mobile'] {
--wa-color-text-link: var(--wa-color-text-normal);
}
[slot*='subheader'] {
border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
a {
text-decoration: none;
--wa-color-text-link: var(--wa-color-text-normal);
}
}
[slot*='navigation-header'] {
a {
text-decoration: none;
--wa-color-text-link: var(--wa-color-text-normal);
}
}
[slot*='navigation-footer'] {
border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
a {

View file

@ -16,6 +16,23 @@
@livewire('app.navbar')
</header>
<nav slot="subheader">
<div class="wa-cluster">
<wa-icon-button data-toggle-nav name="bars" label="Menu"></wa-icon-button>
<a href="{{ route('home') }}" class="wa-cluster" style="font-size: 1.5rem;" wire:navigate.hover>
<wa-icon name="paw-simple"></wa-icon>
{{ config('app.name') }}
</a>
</div>
</nav>
<nav slot="navigation-header">
<a href="{{ route('home') }}" class="wa-cluster" style="font-size: 1.5rem;" wire:navigate.hover>
<wa-icon name="paw-simple"></wa-icon>
{{ config('app.name') }}
</a>
</nav>
<nav slot="navigation">
@livewire('app.nav-menu')
</nav>

View file

@ -1,9 +1,4 @@
<div class="wa-stack">
<a href="{{ route('home') }}" class="wa-cluster" style="font-size: 1.5rem;" wire:navigate.hover>
<wa-icon name="paw-simple"></wa-icon>
{{ config('app.name') }}
</a>
@auth
<a href="{{ route('posts.home') }}" class="wa-cluster" wire:navigate.hover>
<wa-icon name="images"></wa-icon>