Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@nahiyankhan
nahiyankhan committed Oct 14, 2024
1 parent c00675b commit 14b2c63
Show file tree
Hide file tree
Showing 6 changed files with 26 additions and 19 deletions.
2 changes: 1 addition & 1 deletion src/components/Intro.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import BoxLines from "./BoxLines.astro";
<div class="flex flex-col sm:min-h-[50vh]">
<div class="mb-14 w-full sm:mb-40">
<div
class="relative mb-2 flex flex-wrap border-divider [&_svg]:nk-transition sm:mb-8 [&_svg]:ml-[-1px] [&_svg]:mt-[-1px] [&_svg]:h-full [&_svg]:w-[calc(100vw-16px)] [&_svg]:stroke-[hsl(var(--border-divider))] [&_svg]:stroke-[0.5px] sm:[&_svg]:max-w-screen-sm md:[&_svg]:max-w-screen-md lg:[&_svg]:max-w-screen-lg xl:[&_svg]:max-w-screen-xl 2xl:[&_svg]:max-w-screen-2xl [&_svg_path]:animate-[dashForward_1.5s_cubic-bezier(0.55,0,1,0.45)_forwards] [&_svg_path]:[stroke-dasharray:1000] [&_svg_path]:[stroke-dashoffset:1000] hover:[&_svg_path]:animate-[flicker_0.3s_cubic-bezier(0.55,0,1,0.45)_forwards]"
class="relative mb-2 flex flex-wrap border-divider [&_svg]:nk-transition sm:mb-8 [&_svg]:ml-[-1px] [&_svg]:mt-[-1px] [&_svg]:h-full [&_svg]:w-[calc(100vw-16px)] [&_svg]:stroke-[hsl(var(--border-divider))] [&_svg]:stroke-[0.5px] sm:[&_svg]:max-w-screen-sm md:[&_svg]:max-w-screen-md lg:[&_svg]:max-w-screen-lg xl:[&_svg]:max-w-screen-xl 2xl:[&_svg]:max-w-screen-2xl [&_svg_path]:animate-[dashForward_1.5s_cubic-bezier(0.55,0,1,0.45)_forwards] [&_svg_path]:[stroke-dasharray:1000] [&_svg_path]:[stroke-dashoffset:1000]"
>
<div
class="relative mb-2 sm:mb-4 [&::after]:absolute [&::after]:bottom-[-1px] [&::after]:left-0 [&::after]:block [&::after]:h-[1px] [&::after]:w-full [&::after]:animate-[borderForward_.7s_cubic-bezier(0.55,0,1,0.45)_forwards] [&::after]:bg-divider [&::after]:content-[''] [&::before]:left-0 [&::before]:top-0 [&::before]:block [&::before]:h-[1px] [&::before]:w-full [&::before]:animate-[borderForward_.7s_cubic-bezier(0.55,0,1,0.45)_forwards] [&::before]:bg-divider [&::before]:content-['']"
Expand Down
9 changes: 5 additions & 4 deletions src/components/Section.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,20 @@ import Contact from "@/assets/contact.svg?raw";
---

<div
x-data="{ inview: false }"
x-data="{ inview: false, inscrollup: false }"
x-ref="sectionTitle"
class="nk-transition border-x"
{...rest}
@scroll.window=`inview = $refs.sectionTitle.getBoundingClientRect().top <= (window.innerHeight * 4/5) && $refs.sectionTitle.getBoundingClientRect().top >= 100`
x-init=`inview = $refs.sectionTitle.getBoundingClientRect().top <= (window.innerHeight * 3/4)`
@scroll.window=`inview = $refs.sectionTitle.getBoundingClientRect().top <= (window.innerHeight * 4/5) && $refs.sectionTitle.getBoundingClientRect().top >= 100, inscrollup = $refs.sectionTitle.getBoundingClientRect().top <= (window.innerHeight * 4/5)`
x-init=`inview = $refs.sectionTitle.getBoundingClientRect().top <= (window.innerHeight * 3/4), inscrollup = $refs.sectionTitle.getBoundingClientRect().top <= (window.innerHeight * 4/5)`
>
<div class="nk-transition flex min-h-[50vh] flex-col" x-ref={title}>
<div class="relative w-max">
<BoxLines />
<div
class="nk-transition relative w-[fit-content] text-textProminent [&>svg]:h-8 sm:[&>svg]:h-14 md:[&>svg]:h-16 lg:[&>svg]:h-20 xl:[&>svg]:h-28 2xl:[&>svg]:h-32 [&_svg]:stroke-[hsl(var(--border-divider))] [&_svg]:stroke-[1px] [&_svg_path]:[stroke-dasharray:1000] [&_svg_path]:[stroke-dashoffset:1000]"
class="nk-transition relative w-[fit-content] text-textProminent opacity-0 [&>svg]:h-8 sm:[&>svg]:h-14 md:[&>svg]:h-16 lg:[&>svg]:h-20 xl:[&>svg]:h-28 2xl:[&>svg]:h-32 [&_svg]:stroke-[hsl(var(--border-divider))] [&_svg]:stroke-[1px] [&_svg_path]:opacity-0 [&_svg_path]:[stroke-dasharray:1000] [&_svg_path]:[stroke-dashoffset:1000]"
:class="inview ? '[&_svg_path]:animate-[dashForward_1s_cubic-bezier(0.55,0,1,0.45)_forwards]' : '[&_svg_path]:animate-[dashBackward_2s_cubic-bezier(0.55,0,1,0.45)_forwards]'"
:style="inscrollup && { opacity: 1 }"
>
<Fragment
set:html={title === "about"
Expand Down
10 changes: 5 additions & 5 deletions src/components/Settings.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ import ThemeToggle from "./ThemeToggle.astro";
:class="{ 'translate-x-0': $store.settings.open, 'translate-x-[100%]': !$store.settings.open }"
>
<div class="flex h-full flex-col">
<div class="[&::after]:bg-bgDivider relative flex h-6 justify-between border-b sm:h-8">
<div class="[&::after]:bg-bgDivider relative flex h-6 justify-between border-y px-2 sm:h-8">
<h3 class="text-textProminent">Settings</h3>
<button
class="relative flex h-5 items-center justify-center text-textProminent sm:h-8 sm:w-8"
class="relative flex h-full items-center justify-center text-textProminent"
type="button"
@click="$store.settings.toggle()"
>
Expand All @@ -34,17 +34,17 @@ import ThemeToggle from "./ThemeToggle.astro";
<!-- <p class="text-textProminent">Theme</p> -->
<ThemeToggle />
</div>
<div class="flex items-center justify-between pb-2">
<div class="flex items-center justify-between px-2 pb-2">
<button
class="disabled relative flex h-5 w-full items-center justify-between text-textProminent line-through sm:h-7 sm:w-full"
class="disabled relative flex h-full w-full items-center justify-between text-textProminent line-through"
type="button"
@click=""
disabled
>
<p class="text-textProminent">Party Mode (Coming soon)</p>
<Icon
aria-hidden="true"
class="mr-1 h-5 w-5 sm:h-7 sm:w-7"
class="h-5 w-5 sm:h-7 sm:w-7"
focusable="false"
name="mdi:party-popper"
/>
Expand Down
4 changes: 2 additions & 2 deletions src/components/ThemeToggle.astro
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<button
class="relative flex h-7 w-full items-center justify-between text-textProminent"
class="relative flex h-7 w-full items-center justify-between px-2 text-textProminent"
type="button"
x-data
@click="$store.theme.toggleMode()"
Expand All @@ -8,7 +8,7 @@
<p class="text-textProminent dark:hidden">Dark</p>
<svg
aria-hidden="true"
class="mr-1 h-5 w-5 duration-0 dark:hidden sm:h-6 sm:w-6"
class="h-5 w-5 duration-0 dark:hidden sm:h-6 sm:w-6"
fill="none"
focusable="false"
id="sun-svg"
Expand Down
2 changes: 1 addition & 1 deletion src/components/layout/Header.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import NK from "@/assets/nk.svg?raw";
<!-- <ThemeToggle /> -->
<div class="animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_1s_forwards] bg-bgColor opacity-0">
<button
class="relative flex h-full w-full items-center justify-center text-textProminent sm:h-[2rem-2px] sm:w-[2rem-2px]"
class="relative flex h-full w-full items-center justify-center text-textProminent"
type="button"
x-data
@click="$store.settings.toggle()"
Expand Down
18 changes: 12 additions & 6 deletions tailwind.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export default {
"button:not(.disabled)": {
"@apply redact": {},
"&::after": {
"@apply translate-x-[100%] w-[calc(100%+8px)] h-[calc(100%+16px)] w-full h-full top-0 left-0 duration-300": {},
"@apply translate-x-[100%] w-[calc(100%+8px)] h-[calc(100%+16px)] w-full h-full top-0 left-0 duration-300 scale-x-0": {},
},
"&:hover::after": {
"@apply md:scale-x-100 md:translate-x-0": {},
Expand Down Expand Up @@ -108,33 +108,39 @@ export default {
"50%": {
strokeDashoffset: "0",
stroke: "hsl(var(--border-divider) / 1)",
color: "transparent"
color: "transparent",
opacity: "1",
},
"80%": {
strokeDashoffset: "0",
stroke: "hsl(var(--border-divider) / 1)",
color: "transparent"
color: "transparent",
opacity: "1",
},
"100%": {
strokeDashoffset: "0",
stroke: "transparent",
color: "hsl(var(--text-prominent) / 1)"
color: "hsl(var(--text-prominent) / 1)",
opacity: "1",
},
},
dashBackward: {
"0%": {
strokeDashoffset: "0",
stroke: "transparent",
color: "hsl(var(--text-prominent) / 1)"
color: "hsl(var(--text-prominent) / 1)",
opacity: "1",
},
"20%": {
stroke: "hsl(var(--border-divider) / 1)",
color: "transparent"
color: "transparent",
opacity: "1",
},
"100%": {
strokeDashoffset: "1000",
stroke: "hsl(var(--border-divider) / 1)",
color: "transparent",
opacity: "1",
},
},
flicker: {
Expand Down

0 comments on commit 14b2c63

Please sign in to comment.