fix: demo card links, layout improvements, nav improvements

astro.config.mjs

@@ -11,7 +11,7 @@ export default defineConfig({
   integrations: [
     starlight({
       favicon: "./public/favicon.png",
-      title: "Very Good Engineering",
+      title: "VGV Engineering",
       head: [
         {
           // Fix theme flickering on page load.

src/components/vgv_card/vgv-card-header.astro

@@ -2,13 +2,13 @@
 
 ---
 
-<div>
+<div class="grow flex flex-col">
   <h2
     class="text-2xl font-semibold lg:tracking-tight mt-4 text-center w-[100%]"
   >
     <slot name="title" />
   </h2>
-  <p class="text-md my-6 text-center text-pretty">
+  <p class="grow text-md my-6 text-center text-pretty">
     <slot name="subtitle" />
   </p>
 </div>

src/components/vgv_card/vgv-card.astro

@@ -6,16 +6,16 @@ interface Props {
 const props = Astro.props;
 ---
 
-<a href={props.url} class="contents">
-  <div
-    class="drop-shadow-lg rounded-lg overflow-hidden h-[100%] w-[100%] max-w-[478px] bg-[var(--vgv-card-bg)]"
-  >
+<div
+  class="drop-shadow-lg rounded-lg overflow-hidden h-[100%] w-[100%] max-w-[478px] bg-[var(--vgv-card-bg)] flex flex-col"
+>
+  <a href={props.url} class="contents">
     <slot name="thumbnail" />
-    <div class="p-4">
+    <div class="m-4 grow flex flex-col justify-between">
       <slot />
     </div>
-  </div>
-</a>
+  </a>
+</div>
 
 <style>
   a,

src/components/vgv_nav/vgv-nav.astro

@@ -5,6 +5,9 @@ import SiteTitle from "@astrojs/starlight/components/SiteTitle.astro";
 import SocialIcons from "@astrojs/starlight/components/SocialIcons.astro";
 import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro";
 import type { Props } from "@astrojs/starlight/props";
+
+// Only show docs link from homepage
+const shouldShowLinks = Astro.url.pathname === "/";
 ---
 
 <header class="fixed top-0 w-[100%] transition-all backdrop-blur-2xl z-20">
@@ -16,6 +19,20 @@ import type { Props } from "@astrojs/starlight/props";
       </div>
       <div class="sl-flex">
         <Search {...Astro.props} />
+        <nav
+          class="flex flex-row grow sm:justify-center md:justify-start align-baseline items-center"
+        >
+          {
+            shouldShowLinks && (
+              <a
+                href="/architecture"
+                class="sm:ml-4 md:ml-8 mx-4 mt-[1px] flex text-lg no-underline hover:underline visited:text-inherit active:text-inherit"
+              >
+                Docs
+              </a>
+            )
+          }
+        </nav>
       </div>
       <div class="sl-hidden md:sl-flex right-group">
         <div class="sl-flex social-icons">

src/pages/index.astro

@@ -308,6 +308,23 @@ const actions = props.entry.data.hero?.actions ?? [];
                 <span> Music visualizer </span>
               </li>
             </ul>
+            <div class="mt-8 flex flex-row justify-center gap-4">
+              <CallToAction
+                attrs={{ class: "" }}
+                icon={{ type: "icon", name: "laptop" }}
+                variant="primary"
+                link="https://vgventures.github.io/airplane_entertainment_system/"
+              >
+                Online Demo
+              </CallToAction>
+              <CallToAction
+                attrs={{ class: "" }}
+                variant="secondary"
+                icon={{ type: "icon", name: "github" }}
+                link="https://github.com/VGVentures/airplane_entertainment_system"
+                >GitHub</CallToAction
+              >
+            </div>
           </span>
         </VgvCardHeader>
       </VgvCard>
@@ -346,6 +363,23 @@ const actions = props.entry.data.hero?.actions ?? [];
                 </span>
               </li>
             </ul>
+            <div class="mt-8 flex flex-row justify-center gap-4">
+              <CallToAction
+                attrs={{ class: "" }}
+                icon={{ type: "icon", name: "laptop" }}
+                variant="primary"
+                link="https://vgventures.github.io/financial_dashboard/"
+              >
+                Online Demo
+              </CallToAction>
+              <CallToAction
+                attrs={{ class: "" }}
+                variant="secondary"
+                icon={{ type: "icon", name: "github" }}
+                link="https://github.com/VGVentures/financial_dashboard"
+                >GitHub</CallToAction
+              >
+            </div>
           </span>
         </VgvCardHeader>
       </VgvCard>
@@ -369,10 +403,11 @@ const actions = props.entry.data.hero?.actions ?? [];
             <ul class="pl-4 mt-6 text-center md:text-left">
               <li class="flex gap-2">
                 <Icon name="approve-check" color="green" class="size-6" />
-                <span>
-                  Animated tachometer created with
-                  <a href="https://flame-engine.org/">Flame</a>
-                </span>
+                <div>
+                  Animated tachometer created with <a
+                    href="https://flame-engine.org/">Flame</a
+                  >
+                </div>
               </li>
               <li class="flex gap-2">
                 <Icon name="approve-check" color="green" class="size-6" />
@@ -383,6 +418,23 @@ const actions = props.entry.data.hero?.actions ?? [];
                 <span> Embedded game in a Flutter app </span>
               </li>
             </ul>
+            <div class="mt-8 flex flex-row justify-center gap-4">
+              <CallToAction
+                attrs={{ class: "" }}
+                icon={{ type: "icon", name: "laptop" }}
+                variant="primary"
+                link="https://vgventures.github.io/vehicle_cockpit/"
+              >
+                Online Demo
+              </CallToAction>
+              <CallToAction
+                attrs={{ class: "" }}
+                variant="secondary"
+                icon={{ type: "icon", name: "github" }}
+                link="https://github.com/VGVentures/vehicle_cockpit"
+                >GitHub</CallToAction
+              >
+            </div>
           </span>
         </VgvCardHeader>
       </VgvCard>
@@ -409,7 +461,7 @@ const actions = props.entry.data.hero?.actions ?? [];
         <GithubCard owner="flutter" repo="photobooth" />
         <GithubCard owner="flutter" repo="holobooth" />
         <GithubCard owner="VGVentures" repo="io_crossword" />
-        <GithubCard owner="VGVentures" repo="very_good_adventures" />
+        <GithubCard owner="VeryGoodOpenSource" repo="very_good_ranch" />
       </VgvHeroBreakoutVertical>
     </div>
   </div>

src/styles/vgv_brand.css

@@ -43,7 +43,8 @@
 :root[data-theme="light"] {
   --vgv-card-bg: #fafbfe;
   --vgv-card-bg-hover: var(--vgv-gray-10);
-  --vgv-card-fg: black;
+  --vgv-card-fg: var(--vgv-gray-80);
+  --vgv-card-fg-hover: var(--vgv-blue-80);
   --vgv-card-shadow: drop-shadow(0px 0px 8px var(--vgv-gray-30));
   --vgv-card-shadow-hover: drop-shadow(0px 0px 10px var(--vgv-gray-35));
 
@@ -64,15 +65,16 @@
   --vgv-card-bg: var(--vgv-gray-80);
   --vgv-card-bg-hover: var(--vgv-gray-70);
   --vgv-card-fg: white;
+  --vgv-card-fg-hover: var(--vgv-blue-60);
   --vgv-card-shadow: drop-shadow(0px 0px 8px var(--vgv-gray-80));
   --vgv-card-shadow-hover: drop-shadow(0px 0px 16px var(--vgv-gray-60));
 
   --vgv-footer-text: var(--vgv-gray-30);
   --vgv-footer-bg: var(--vgv-gray-80);
 
-  --vgv-nav-bg: transparent;
+  --vgv-nav-bg: black;
   --vgv-nav-glow: var(--vgv-gray-80);
-  --vgv-nav-opacity: 0;
+  --vgv-nav-opacity: 0.4;
 
   --vgv-home-bg: var(--sl-color-bg);