fix: simplify footer

VGVentures · Aug 21, 2024 · 5a3fe48 · 5a3fe48
1 parent d628538
commit 5a3fe48
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 157 deletions.
diff --git a/src/components/vgv_footer/vgv-footer.astro b/src/components/vgv_footer/vgv-footer.astro
@@ -1,69 +1,53 @@
 ---
-import CallToAction from "@astrojs/starlight/components/CallToAction.astro";
 import { Image } from "astro:assets";
 import VGVWordmarkDark from "~/assets/logos/vgv_wordmark_dark.svg";
-import Pattern2 from "~/components/branding/pattern-2.astro";
+
+interface Props {
+  compact?: boolean;
+}
+
+const { compact = false } = Astro.props;
 ---
 
-<div class="footer-area">
-  <div class="background-container">
-    <div class="background">
-      <Pattern2 class="background-img" />
+<div
+  class:list={[
+    "footer-area bg-[var(--vgv-footer-bg)] flex flex-row justify-center ",
+    compact ? "compact" : "",
+  ]}
+>
+  <section
+    class="max-w-screen-xl flex flex-row gap-2 p-8 flex-wrap grow items-start"
+  >
+    <div
+      class="grow flex flex-row md:justify-start lg:justify-start xl:justify-start 2xl:justify-start justify-center"
+    >
+      <Image src={VGVWordmarkDark} alt="VGV Wordmark" class="logo" />
+    </div>
+    <div
+      class="links-container grow flex md:flex-col items-end justify-center flex-row flex-wrap"
+    >
+      <a href="https://verygood.ventures/">Home</a>
+      <a href="https://verygood.ventures/our-team">About</a>
+      <a href="https://verygood.ventures/testimonials">Testimonials</a>
+      <a href="https://verygood.ventures/careers">Careers</a>
+      <a href="https://verygood.ventures/success-stories">Our Work</a>
+      <a href="/">Engineering</a>
     </div>
-  </div>
-  <section class="footer-contents">
-    <section class="main-contents">
-      <div>
-        <Image src={VGVWordmarkDark} alt="VGV Wordmark" class="logo" />
-        <div class="shrink">
-          <CallToAction
-            variant="primary"
-            link="https://verygood.ventures/contact"
-          >
-            Let's talk
-          </CallToAction>
-        </div>
-      </div>
-      <div class="links-container">
-        <a href="https://verygood.ventures/">Home</a>
-        <a href="https://verygood.ventures/our-team">About</a>
-        <a href="https://verygood.ventures/testimonials">Testimonials</a>
-        <a href="https://verygood.ventures/careers">Careers</a>
-        <a href="https://verygood.ventures/success-stories">Our Work</a>
-        <a href="/">Engineering</a>
-      </div>
-    </section>
   </section>
 </div>
 
 <style>
-  .footer-area {
-    min-height: 24rem;
+  @media (min-width: 72rem) {
+    .compact {
+      margin-inline: var(--sl-content-margin-inline, auto);
+    }
   }
-  .footer-contents {
-    padding: 2.5rem var(--sl-content-pad-x);
-    height: 100%;
-    z-index: 10;
-    position: relative;
-    display: block;
+  .compact {
+    max-width: calc(var(--sl-content-width) + var(--sl-content-pad-x));
   }
+
   .logo {
     display: inline-block;
-    margin-bottom: 2rem;
-  }
-  .main-contents {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-  .shrink {
-    max-width: fit-content;
-  }
-  .links-container {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    margin-left: 8rem;
   }
 
   .links-container a,
@@ -83,22 +67,4 @@ import Pattern2 from "~/components/branding/pattern-2.astro";
     background-color: var(--vgv-gray-70);
     font-weight: bold;
   }
-
-  .background-container {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-    pointer-events: none;
-    overflow: hidden;
-    background-color: var(--vgv-footer-bg);
-  }
-
-  .background {
-    position: absolute;
-    width: 700px;
-    height: auto;
-    top: 15px;
-    left: 420px;
-  }
 </style>
diff --git a/src/components/vgv_two_column_content/vgv-two-column-content.astro b/src/components/vgv_two_column_content/vgv-two-column-content.astro
@@ -4,103 +4,23 @@ import type { Props as PageFrameProps } from "@astrojs/starlight/props";
 import VGVFooter from "../vgv_footer/vgv-footer.astro";
 
 interface Props extends PageFrameProps {}
+
+const props = Astro.props;
+
+const { hasSidebar } = props;
 ---
 
 <Default {...Astro.props}>
   <slot name="right-sidebar" slot="right-sidebar" />
   <slot slot="default" />
+  {hasSidebar && <VGVFooter compact={true} />}
 </Default>
-<div class="footer-pane">
-  <div class="footer">
-    <div class="content-panel">
-      <div class="sl-container">
-        <VGVFooter />
-      </div>
-    </div>
-  </div>
-</div>
+
+{!hasSidebar && <VGVFooter />}
 
 <style is:inline>
   .main-frame {
-    min-height: 100vh;
     display: flex;
     flex-direction: column;
   }
-
-  .main-frame > div {
-    flex-grow: 1;
-  }
-</style>
-
-<style>
-  .action-container {
-    display: block;
-    max-width: max-content;
-  }
-
-  .sl-container {
-    position: relative;
-  }
-
-  .footer {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    color: var(--vgv-footer-text);
-    background-color: var(--vgv-footer-bg);
-
-    position: relative;
-    overflow: hidden;
-  }
-
-  :global([data-has-sidebar][data-has-toc]) .footer {
-    background-color: inherit;
-  }
-  :global([data-has-sidebar][data-has-toc]) .sl-container {
-    background-color: var(--vgv-footer-bg);
-  }
-
-  .footer-pane {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-    isolation: isolate;
-  }
-
-  .container {
-    max-width: calc(var(--sl-content-width) - var(--sl-sidebar-width));
-  }
-
-  @media (min-width: 72rem) {
-    .footer-pane {
-      width: 100%;
-    }
-    :global([data-has-sidebar][data-has-toc]) .footer-pane {
-      --sl-content-margin-inline: auto 0;
-
-      order: 1;
-      width: calc(
-        var(--sl-content-width) +
-          (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2
-      );
-    }
-  }
-
-  /* From ContentPanel */
-  .content-panel {
-    height: 100%;
-  }
-  .content-panel + .content-panel {
-    border-top: 1px solid var(--sl-color-hairline);
-  }
-  .sl-container {
-    max-width: calc(var(--sl-content-width) + var(--sl-content-pad-x));
-    height: 100%;
-  }
-
-  @media (min-width: 72rem) {
-    .sl-container {
-      margin-inline: var(--sl-content-margin-inline, auto);
-    }
-  }
 </style>