Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add status bar shadow and safe-area offset for Android

Browse Source 
Add drop shadow under the safe-area-inset-top zone to visually
separate Android status icons from page content. Adjust StickyImage
sticky positioning and max-height to account for safe-area-inset.
This commit is contained in:
Alexander Bocken
2026-04-06 00:10:06 +02:00
parent f508ba30cd
commit a4ea6c6e66
2 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/faith/StickyImage.svelte
+4 -4
View File
@@ -133,13 +133,13 @@
.image-wrap-desktop {
display: block;
position: sticky;
top: 4rem;
top: calc(4rem + env(safe-area-inset-top, 0px));
align-self: start;
order: 1;
}
.overlay .image-wrap-desktop img {
height: auto;
max-height: calc(100vh - 5rem);
max-height: calc(100vh - 5rem - env(safe-area-inset-top, 0px));
width: auto;
max-width: 25vw;
}
@@ -154,12 +154,12 @@
.sticky-image-layout:not(.overlay) .image-wrap-desktop {
display: block;
position: sticky;
top: 4rem;
top: calc(4rem + env(safe-area-inset-top, 0px));
flex: 1;
order: 1;
}
.sticky-image-layout:not(.overlay) .image-wrap-desktop img {
max-height: calc(100vh - 4rem);
max-height: calc(100vh - 4rem - env(safe-area-inset-top, 0px));
height: auto;
width: 100%;
object-fit: contain;