tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Tben 2023-07-20 21:26:23 +01:00
parent 164ad29628
commit 2049c4472f
3 changed files with 52 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
app/(utils)/homepage-timeline.ts
View File

@ -22,22 +22,24 @@ export default function homepageTimeline({ componentRef }: { componentRef: { cur
/**
* Origin
*/
if (scrollTop < 300) {
gsap.to("nav", {
opacity: 1,
pointerEvents: "visible",
});
gsap.to("header", {
zIndex: 2000,
});
} else {
gsap.to("nav", {
opacity: 0,
pointerEvents: "none",
});
gsap.to("header", {
zIndex: 0,
});
if (!isMobile) {
if (scrollTop < 300) {
gsap.to("nav", {
opacity: 1,
pointerEvents: "visible",
});
gsap.to("header", {
zIndex: 2000,
});
} else {
gsap.to("nav", {
opacity: 0,
pointerEvents: "none",
});
gsap.to("header", {
zIndex: 0,
});
}
}
/**

4
layouts/general_layout/GeneralHeader.tsx
View File

@ -61,7 +61,7 @@ const GeneralHeader = (): React.ReactElement => {
<a
href="/"
data-href="/"
className="logo-link-block"
className="logo-link-block scale-90 sm:scale-100"
>
<Image
src="/images/logo-white.svg"
@ -74,7 +74,7 @@ const GeneralHeader = (): React.ReactElement => {
<HeaderNav />
<button
className="p-2 w-14 h-14 rounded-full flex flex-col items-center justify-center gap-2 hover:bg-[white]/90 xl:hidden fixed right-10 z-10 -rotate-45"
className="p-2 w-14 h-14 rounded-full flex flex-col items-center justify-center gap-2 hover:bg-[white]/90 xl:hidden fixed top-[35px] right-10 z-10 -rotate-45"
onClick={(e) => {
e.preventDefault();
setMobileNavOpen(!mobileNavOpen);

32
styles/tw_main.css
View File

@ -150,6 +150,18 @@
top: 330px
}
.top-\[30px\] {
top: 30px
}
.top-\[40px\] {
top: 40px
}
.top-\[35px\] {
top: 35px
}
.z-0 {
z-index: 0
}
@ -320,6 +332,12 @@
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.scale-90 {
--tw-scale-x: .9;
--tw-scale-y: .9;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
@ -671,6 +689,14 @@
opacity: 0.6
}
@media (min-width: 450px) {
.sm\:scale-100 {
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
}
@media (min-width: 600px) {
.md\:relative {
position: relative
@ -741,6 +767,12 @@
width: 60%
}
.xl\:scale-100 {
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.xl\:flex-row {
flex-direction: row
}