moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Placeholder: use a better gradient fade on mobile

This commit is contained in:
Alex Gleason 2021-10-20 11:24:03 -05:00
parent 5cdb7ea926
commit c738c261c0
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/styles/placeholder.scss
View File

@ -74,9 +74,11 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1; z-index: 1;
// On mobile, extend the gradient up to the ThumbNavigation height
background-image: linear-gradient( background-image: linear-gradient(
0deg, 0deg,
var(--background-color) 0%, var(--background-color) 0%,
var(--background-color) var(--thumb-navigation-height),
hsla(var(--foreground-color_hsl), 0) 50%, hsla(var(--foreground-color_hsl), 0) 50%,
hsla(var(--foreground-color_hsl), 0) 100% hsla(var(--foreground-color_hsl), 0) 100%
); );
@ -84,6 +86,16 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
@media (min-width: 895px) {
// On desktop, fade into the bottom of the page
background-image: linear-gradient(
0deg,
var(--background-color) 0%,
hsla(var(--foreground-color_hsl), 0) 50%,
hsla(var(--foreground-color_hsl), 0) 100%
);
}
} }
} }
} }