header

neuland · Jun 6, 2024 · 7046c77 · 7046c77
1 parent 6352dc3
commit 7046c77
Show file tree

Hide file tree

Showing 6 changed files with 268 additions and 264 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -7,7 +7,7 @@ import DarkModeToggle from "./DarkModeToggle.astro";
     src="images/logo.svg"
     alt="Micro Frontends Tractor Store"
     typeof="foaf:Image"
-    class="size-28"
+    class="w-64 mt-12 mb-6"
   />
   <div
     class="justify-self-end py-2 flex items-center content-center text-text-bold"
@@ -19,7 +19,9 @@ import DarkModeToggle from "./DarkModeToggle.astro";
       <i
         class="fa-brands fa-github"
         aria-hidden="true"
-        title="The Tractor Store - Blueprint"></i>
+        title="The Tractor Store - Blueprint"
+      >
+      </i>
       <span>GitHub</span>
     </a>
   </div>

diff --git a/src/components/ImgText.astro b/src/components/ImgText.astro
@@ -15,12 +15,6 @@ import TeamBoundaries from "./teamBoundaries.astro";
      Placeholder
     </span>
   >-->
-  <h3
-    class="font-bold text-text-heading text-2xl md:text-3xl pt-4 pb-1 mb-2 w-fit overflow-hidden"
-    data-annotate="underline"
-  >
-    Placeholder
-  </h3>
 
   <div class="examples">
     <MFExample

diff --git a/src/components/Info.astro b/src/components/Info.astro
@@ -2,7 +2,7 @@
 ---
 
 <section class="mb-8 c-background">
-  <div class="max-w-7xl mx-auto px-6 sm:px-8 md:flex items-center">
+  <div class="max-w-6xl mx-auto px-6 sm:px-8 md:flex items-center">
     <div class="md:basis-1/2 relative aspect-[1.1]">
       <img
         src="images/screen1.svg"

diff --git a/src/components/Intro.astro b/src/components/Intro.astro
@@ -1,7 +1,7 @@
 ---
 ---
 
-<section class="mb-8">
+<section class="mb-20">
   <div class="mb-6">
     <!--<h1
       class="font-bold text-text-heading text-center text-4xl md:text-5xl pt-4"
@@ -15,28 +15,33 @@
        The Tractor Store
       </span>
     </h1>-->
-    <h1 class="pt-4 w-fit m-auto font-bold text-text-heading text-center text-4xl md:text-5xl" data-annotate="underline">
-      The Tractor Store
+    <h1 class="pt-4 m-auto font-bold text-text-heading text-3xl md:text-4xl">
+      <span data-annotate="underline">
+        a non-trivial micro frontends example project
+      </span>
     </h1>
-    <p class="pt-2 text-center">a non-trivial micro frontends example project</p>
   </div>
   <div>
     <p>
-      The Tractor Store is a template to experiment with micro frontend architecture. Goal is to create a real world application where developers can experiment with different integration techniques.
-
-      The idea is similar to TodoMVC or Movies, but with a <span data-annotate="highlight">focus on micro frontends.</span>
-
+      The Tractor Store is a template to experiment with micro frontend
+      architecture. Goal is to create a real world application where developers
+      can experiment with different integration techniques. The idea is similar
+      to TodoMVC or Movies, but with a <span data-annotate="highlight">
+        focus on micro frontends.
+      </span>
     </p>
   </div>
   <script type="module">
-    import { annotate } from 'https://unpkg.com/rough-notation?module';
-    const observer = new IntersectionObserver(handleIntersection, { threshold: [1] });
+    import { annotate } from "https://unpkg.com/rough-notation?module";
+    const observer = new IntersectionObserver(handleIntersection, {
+      threshold: [1],
+    });
 
-
-    Array.from(document.querySelectorAll('[data-annotate]'))
-        .forEach ((element) => {
-          observer.observe(element);
-        });
+    Array.from(document.querySelectorAll("[data-annotate]")).forEach(
+      (element) => {
+        observer.observe(element);
+      }
+    );
 
     function handleIntersection(entries, observer) {
       entries.forEach((entry) => {
@@ -48,13 +53,13 @@
     }
 
     function showAnnotation(element) {
-      const type = element.getAttribute('data-annotate');
+      const type = element.getAttribute("data-annotate");
       if (!type) {
         return;
       }
-      let color = '#ffde54'
+      let color = "#ffde54";
       if (document.documentElement.classList.contains("dark")) {
-        color = '#FF5A55'
+        color = "#FF5A55";
       }
       annotate(element, {
         type,
@@ -64,10 +69,9 @@
         animationDuration: 3000,
         animationDelay: 5000,
       }).show();
-      element.removeAttribute('data-annotate');
+      element.removeAttribute("data-annotate");
     }
 
     // TODO: add dark mode colors
-
   </script>
 </section>
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
@@ -28,7 +28,7 @@ import Footer from "../components/Footer.astro";
     <FontAwesome />
   </head>
 
-  <body class="max-w-7xl mx-auto min-h-screen px-6 sm:px-8">
+  <body class="max-w-6xl mx-auto min-h-screen px-6 sm:px-8">
     <Header />
     <main id="main">
       <slot name="main" />
@@ -41,7 +41,7 @@ import Footer from "../components/Footer.astro";
           "header"
           "main"
           "footer";
-        grid-template-rows: 5rem minmax(0, 1fr) 5rem;
+        grid-template-rows: auto minmax(0, 1fr) 5rem;
         grid-template-columns: minmax(0, 1fr);
       }
       main {