Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-27 05:51:51 +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 ( return (
<> <>
<div className="absolute inset-x-0 top-0 flex h-[88px] items-center justify-center"> <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 /> <Lightbar />
</div> </div>
</div> </div>

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

@ -1,61 +1,78 @@
.lightbar, .lightbar-visual { .lightbar, .lightbar-visual {
position: absolute; position: absolute;
top: 0; top: 0;
width: 150vw; width: 500vw;
height: 800px; height: 800px;
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
} }
.lightbar { .lightbar {
left: 50vw;
transform: translateX(-50%);
}
@screen sm {
.lightbar, .lightbar-visual {
width: 150vw;
}
.lightbar {
left: -25vw; left: -25vw;
display: flex; transform: initial;
justify-content: center; }
align-items: center; }
--d: 3s;
--animation: cubic-bezier(.75,-0.00,.25,1); .lightbar {
animation: boot var(--d) var(--animation) forwards; display: flex;
justify-content: center;
align-items: center;
--d: 3s;
--animation: cubic-bezier(.75, -0.00, .25, 1);
animation: boot var(--d) var(--animation) forwards;
} }
.lightbar-visual { .lightbar-visual {
left: 0; left: 0;
--top: theme('colors.background.main'); --top: theme('colors.background.main');
--bottom: theme('colors.lightBar.light'); --bottom: theme('colors.lightBar.light');
--first: conic-gradient(from 90deg at 80% 50%,var(--top),var(--bottom)); --first: conic-gradient(from 90deg at 80% 50%, var(--top), var(--bottom));
--second: conic-gradient(from 270deg at 20% 50%,var(--bottom),var(--top)); --second: conic-gradient(from 270deg at 20% 50%, var(--bottom), var(--top));
mask-image: radial-gradient(100% 50% at center center, black, transparent); mask-image: radial-gradient(100% 50% at center center, black, transparent);
background-image: var(--first), var(--second); background-image: var(--first), var(--second);
background-position-x: 1%, 99%; background-position-x: 1%, 99%;
background-position-y: 0%, 0%; background-position-y: 0%, 0%;
background-size: 50% 100%, 50% 100%; background-size: 50% 100%, 50% 100%;
opacity: 1; opacity: 1;
transform: rotate(180deg) translateZ(0px) translateY(400px); transform: rotate(180deg) translateZ(0px) translateY(400px);
transform-origin: center center; transform-origin: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
animation: lightbarBoot var(--d) var(--animation) forwards; animation: lightbarBoot var(--d) var(--animation) forwards;
} }
.lightbar canvas { .lightbar canvas {
width: 40%; width: 40%;
height: 300px; height: 300px;
transform: translateY(-250px); transform: translateY(-250px);
} }
@keyframes boot { @keyframes boot {
from { from {
opacity: 0.25; opacity: 0.25;
} }
to {
opacity: 1; to {
} opacity: 1;
}
} }
@keyframes lightbarBoot { @keyframes lightbarBoot {
0% { 0% {
transform: rotate(180deg) translateZ(0px) translateY(400px) scaleX(0.8); transform: rotate(180deg) translateZ(0px) translateY(400px) scaleX(0.8);
} }
100% {
transform: rotate(180deg) translateZ(0px) translateY(400px) scaleX(1); 100% {
} transform: rotate(180deg) translateZ(0px) translateY(400px) scaleX(1);
}
} }