feat: imporvement pass over sections

2026-02-15 15:42:27 -06:00
parent c4be4653be
commit 8a649b7647
7 changed files with 67 additions and 92 deletions
--- a/src/components/buttons/GiteaButton.astro
+++ b/src/components/buttons/GiteaButton.astro
@@ -21,7 +21,7 @@ const { title, url } = Astro.props;
      class="h-4 w-4 md:h-6 md:w-6"
    />
    <span class="ml-2">
-      {title}
+      Continue to Gitea
    </span>
    <Icon
      name="mdi:keyboard-arrow-right"
--- a/src/components/sections/FeaturesSection.astro
+++ b/src/components/sections/FeaturesSection.astro
@@ -8,9 +8,7 @@ const global = await directus.request(readSingleton('site_global'));
 ---

 <section class="mx-auto mb-20 max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full">
-  <div
-    class="flex flex-col items-center justify-center gap-y-2 sm:flex-row sm:gap-x-12 sm:gap-y-0 lg:gap-x-24"
-  >
+  <div class="flex flex-col items-center justify-center gap-y-2 sm:flex-row sm:gap-x-12 sm:gap-y-0 lg:gap-x-24">
    <div class="max-w-5xl sm:px-6 lg:px-8">
      <div class="flex flex-wrap gap-6 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 justify-center">
        <FeaturesCard
--- a/src/components/sections/GiteaSection.astro
+++ b/src/components/sections/GiteaSection.astro
@@ -1,22 +1,20 @@
 ---
 import GiteaButton from '@components/buttons/GiteaButton.astro';

-const { title, subTitle, url } = Astro.props;
-const btnTitle = 'Continue to Gitea';
-
 interface Props {
  title: string;
  subTitle?: string;
  url?: string;
 }
+
+const { title, subTitle, url } = Astro.props;
 ---

 <section class="lg:px- relative mx-auto mb-20 max-w-340 px-4 pt-30 pb-30 sm:px-6">
-  <div
-    class="smooth-reveal absolute top-[55%] left-0 scale-90 md:top-[20%] xl:top-[25%] xl:left-[10%]"
-  >
+  <!-- Animated shapes -->
+  <div class="smooth-reveal absolute top-[55%] left-0 scale-90 md:top-[20%] xl:top-[25%] xl:left-[10%]">
    <svg
-      class="animate-hover animate-hover-1"
+      class="gitea-animate-hover gitea-animate-hover-1"
      width="64"
      height="64"
      fill="none"
@@ -46,7 +44,7 @@ interface Props {
  </div>
  <div class="smooth-reveal absolute top-0 left-[85%] scale-75">
    <svg
-      class="animate-hover animate-hover-2"
+      class="gitea-animate-hover gitea-animate-hover-2"
      width="64"
      height="64"
      fill="none"
@@ -80,11 +78,9 @@ interface Props {
        d="M10.5 19H9M15 19h-1.5"></path>
    </svg>
  </div>
-  <div
-    class="smooth-reveal absolute bottom-[5%] left-[60%] scale-[.6] xl:bottom-[15%] xl:left-[35%]"
-  >
+  <div class="smooth-reveal absolute bottom-[5%] left-[60%] scale-[.6] xl:bottom-[15%] xl:left-[35%]">
    <svg
-      class="animate-hover animate-hover-3"
+      class="gitea-animate-hover gitea-animate-hover-3"
      width="64"
      height="64"
      fill="none"
@@ -106,59 +102,54 @@ interface Props {
      ></path>
    </svg>
  </div>
-  <!-- Hero Section Heading -->
+  <!-- Heading -->
  <div class="smooth-reveal-2 mx-auto mt-5 max-w-xl text-center">
-    <h2
-      class="block text-4xl leading-tight font-bold tracking-tight text-balance text-neutral-800 md:text-5xl lg:text-5xl dark:text-neutral-200"
-    >
+    <h1 class="card-text-header block">
      {title}
-    </h2>
+    </h1>
  </div>
-  <!-- Hero Section Sub-heading -->
+  <!-- Sub-heading -->
  <div class="smooth-reveal-2 mx-auto mt-5 max-w-3xl text-center">
-    {
-      subTitle && (
-        <p class="text-lg text-pretty text-neutral-600 dark:text-neutral-400">{subTitle}</p>
-      )
-    }
+    {subTitle && (
+    <p class="card-text-header-description">
+      {subTitle}
+    </p>
+    )}
  </div>
-  <!-- Github Button -->
-  {
-    url && (
-      <div class="smooth-reveal-2 mt-8 flex justify-center gap-3">
-        <GiteaButton url={url} title={btnTitle} />
-      </div>
-    )
-  }
+  <!-- Gitea Button -->
+  {url && (
+  <div class="smooth-reveal-2 flex justify-center mt-8 gap-3">
+    <GiteaButton url={url}/>
+  </div>
+  )}
 </section>

 <style>
-  @keyframes animate-hover {
+  @keyframes gitea-animate-hover {
    from {
      transform: translateY(15px);
    }
-
    to {
      transform: translateY(-15px);
    }
  }

-  .animate-hover {
-    animation: animate-hover ease-in-out;
+  .gitea-animate-hover {
+    animation: gitea-animate-hover ease-in-out;

    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

-  .animate-hover-1 {
+  .gitea-animate-hover-1 {
    animation-duration: 5s;
  }

-  .animate-hover-2 {
+  .gitea-animate-hover-2 {
    animation-duration: 5.5s;
  }

-  .animate-hover-3 {
+  .gitea-animate-hover-3 {
    animation-duration: 6s;
  }
 </style>
--- a/src/components/sections/HeaderSection.astro
+++ b/src/components/sections/HeaderSection.astro
@@ -15,21 +15,17 @@ const { title, subTitle, btnExists, btnTitle, btnURL } = Astro.props;
 <section class="mx-auto mt-10 px-4 sm:px-6 lg:px-8 lg:pt-10 2xl:max-w-full">
  <div class="flex-wrap md:flex md:items-center md:justify-between">
    <div class="w-full md:w-auto">
-      <h1
-        class="smooth-reveal block text-4xl font-bold tracking-tight text-balance text-neutral-800 md:text-5xl lg:text-6xl dark:text-neutral-200"
-      >
+      <h1 class="smooth-reveal card-text-header block lg:text-6xl">
        {title}
      </h1>
-      <p class="smooth-reveal mt-4 text-lg text-pretty text-neutral-600 dark:text-neutral-400">
+      <p class="smooth-reveal card-text-header-description mt-4">
        {subTitle}
      </p>
-      {
-        btnExists ? (
-          <div class="smooth-reveal mt-4 md:mt-8">
-            <GoLinkPrimary title={btnTitle} url={btnURL} />
-          </div>
-        ) : null
-      }
+      {btnExists ? (
+      <div class="smooth-reveal mt-4 md:mt-8">
+        <GoLinkPrimary title={btnTitle} url={btnURL}/>
+      </div>
+      ) : null}
    </div>
  </div>
 </section>
--- a/src/components/sections/HeroSection.astro
+++ b/src/components/sections/HeroSection.astro
@@ -3,9 +3,6 @@ import GoLinkPrimary from '@components/buttons/GoLinkPrimary.astro';
 import GoLinkSecondary from '@components/buttons/GoLinkSecondary.astro';
 import Image from '@components/ui/images/Image.astro';

-const { title, subTitle, primaryBtn, primaryBtnURL, secondaryBtn, secondaryBtnURL, src, alt } =
-  Astro.props;
-
 interface Props {
  title: string;
  subTitle?: string;
@@ -18,49 +15,42 @@ interface Props {
  rounded?: boolean;
 }

+const { title, subTitle, primaryBtn, primaryBtnURL, secondaryBtn, secondaryBtnURL, src, alt } = Astro.props;
+
 const roundedClasses = Astro.props.rounded ? "rounded-xl" : null;
 ---

-<section
-  class="mx-auto grid max-w-340 gap-4 px-4 py-14 sm:px-6 md:grid-cols-2 md:items-center md:gap-8 lg:px-8 2xl:max-w-full"
->
+<section class="mx-auto grid max-w-340 gap-4 px-4 py-14 sm:px-6 md:grid-cols-2 md:items-center md:gap-8 lg:px-8 2xl:max-w-full">
  <div>
-    <h1
-      class="smooth-reveal block text-3xl font-bold tracking-tight text-balance text-neutral-800 sm:text-4xl lg:text-7xl lg:leading-tight dark:text-neutral-200"
-    >
+    <h1 class="smooth-reveal card-text-header block lg:text-7xl">
      <Fragment set:html={title} />
    </h1>
-    {
-      subTitle && (
-        <p class="smooth-reveal mt-6 text-lg leading-relaxed text-pretty text-neutral-700 lg:w-4/5 dark:text-neutral-300">
-          {subTitle}
-        </p>
-      )
-    }
-
-    <div class="smooth-reveal mt-7 grid w-full gap-3 sm:inline-flex">
+    {subTitle && (
+    <p class="smooth-reveal card-text-header-description lg:w-4/5 mt-6">
+      {subTitle}
+    </p>
+    )}
+    <div class="smooth-reveal grid sm:inline-flex mt-7 w-full gap-3">
      {primaryBtn && <GoLinkPrimary title={primaryBtn} url={primaryBtnURL} />}
      {secondaryBtn && <GoLinkSecondary title={secondaryBtn} url={secondaryBtnURL} />}
    </div>
  </div>

-  <div class="smooth-reveal-fade hidden w-full md:block">
-    <div class="top-12 flex w-full justify-center overflow-hidden md:ml-4">
-      {
-        src && alt && (
-          <Image
-            src={src}
-            alt={alt}
-            class={`h-full w-[420px] scale-100 object-cover object-center ${roundedClasses}`}
-            draggable="false"
-            loading="eager"
-            format="webp"
-            quality="low"
-            widths={[840]}
-            disableBlur={true}
-          />
-        )
-      }
+  <div class="smooth-reveal-fade md:block w-full hidden">
+    <div class="flex justify-center w-full top-12 md:ml-4 overflow-hidden">
+      {src && alt && (
+      <Image
+        src={src}
+        alt={alt}
+        class={`h-full w-105 scale-100 object-cover object-center ${roundedClasses}`}
+        draggable="false"
+        loading="eager"
+        format="webp"
+        quality="low"
+        widths={[840]}
+        disableBlur={true}
+      />
+      )}
    </div>
  </div>
 </section>
--- a/src/components/sections/WeatherSection.astro
+++ b/src/components/sections/WeatherSection.astro
@@ -8,7 +8,7 @@ const { forecastDays, error } = await getFiveDayForecast(latitude, longitude, ti

 <section class="mx-auto mb-20 max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full">
  <div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
-    <h1 class="card-text-header smooth-reveal block font-bold md:leading-tight">
+    <h1 class="smooth-reveal card-text-header block">
      Weather in my Area 
    </h1>
    <div class="smooth-reveal mx-auto mt-5 max-w-3xl text-center">
--- a/src/styles/utilities.css
+++ b/src/styles/utilities.css
@@ -73,8 +73,8 @@

@utility card-text-header {
  @apply text-header
-         md:text-5xl
-         text-4xl
+         text-4xl md:text-5xl
+         font-bold leading-tight tracking-tight text-balance
 }

@utility card-text-header-minor {
@@ -87,7 +87,7 @@
@utility card-text-header-description {
  @apply text-primary
         text-lg
-         text-pretty
+         text-pretty leading-relaxed
 }

@utility card-text-title {