Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-11-13 08:15:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

Make lightbar wider on mobile, move to top

Browse Source
This commit is contained in:
Jip Fr 2023-08-21 13:16:00 +02:00
parent fe7c496e0a
commit b94b6b0249
2 changed files with 61 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/layout/Navigation.tsx
View File

@ -19,7 +19,7 @@ export function Navigation(props: NavigationProps) {
return (
<>
<div className="absolute inset-x-0 top-0 flex h-[88px] items-center justify-center">
<div className="absolute inset-x-0 mt-20 flex items-center sm:mt-0">
<div className="absolute inset-x-0 -mt-[22%] flex items-center sm:mt-0">
<Lightbar />
</div>
</div>

19
src/components/utils/Lightbar.css
View File

@ -1,14 +1,29 @@
.lightbar, .lightbar-visual {
position: absolute;
top: 0;
width: 150vw;
width: 500vw;
height: 800px;
pointer-events: none;
user-select: none;
}
.lightbar {
left: 50vw;
transform: translateX(-50%);
}
@screen sm {
.lightbar, .lightbar-visual {
width: 150vw;
}
.lightbar {
left: -25vw;
transform: initial;
}
}
.lightbar {
display: flex;
justify-content: center;
align-items: center;
@ -46,6 +61,7 @@
opacity: 0.25;
}
to {
opacity: 1;
}
@ -55,6 +71,7 @@
0% {
transform: rotate(180deg) translateZ(0px) translateY(400px) scaleX(0.8);
}
100% {
transform: rotate(180deg) translateZ(0px) translateY(400px) scaleX(1);
}