New Sections component and Layouts clean up. (#1183)

Improvements related to issue #1139 which makes switch to wide layout
simple.

Author: nikoshell

src/components/Footer.astro

@@ -8,10 +8,8 @@ const buildTimestamp = __TIMESTAMP__;
 const gitVersion = __GIT_VERSION__;
 ---
 
-      <div class="mt-auto">
-<Fullbleed className="bg-primary text-white">
-  <footer
-    class="max-w-4xl lg:max-w-6xl mx-auto py-16 lg:grid grid-cols-2 px-6 gap-60"
+  <div
+    class="text-white max-w-4xl lg:max-w-6xl mx-auto py-10 lg:grid grid-cols-2 px-6 gap-60"
   >
     <div>
       <nav class="mb-12">
@@ -34,7 +32,7 @@ const gitVersion = __GIT_VERSION__;
       </nav>
     </div>
 
-    <article
+    <div
       class="flex flex-col lg:flex-row self-center gap-8 lg:gap-12 justify-end"
     >
       <div>
@@ -99,12 +97,9 @@ const gitVersion = __GIT_VERSION__;
             twitter.com/europython <span> ↗</span>
           </a>
         </p>
-
         <p class="mb-4" style="color: rgba(255, 255, 255, 0.4)">
-          version: {gitVersion} @ {buildTimestamp}
+        version: {gitVersion} @ {buildTimestamp}
         </p>
       </div>
-    </article>
+    </div>
   </footer>
-</Fullbleed>
-</div>

src/components/Header.astro

@@ -3,6 +3,7 @@ import { promises as fs } from "fs";
 import { NavItems } from "@components/nav-items";
 import HeaderActions from "@components/header/header-actions.astro";
 import HeaderLogo from "@components/header/header-logo.astro";
+import Search from "@components/Search.astro";
 
 import links from "../data/links.json";
 ---
@@ -54,4 +55,5 @@ import links from "../data/links.json";
       />
     </nav>
   </div>
+<Search />
 </header>

src/components/button-link/button-link.astro

@@ -22,18 +22,12 @@ const resolvedIsExternal =
 ---
 
 <a
-  class={`font-bold text-lg px-4 py-4 bg-button rounded-[10px] inline-block leading-4 hover:bg-button-hover not-prose
+  class={`button-link font-bold text-lg px-4 py-4 bg-button rounded-[10px] inline-block leading-4 hover:bg-button-hover not-prose
     ${secondary || disabled ? "bg-primary text-white hover:bg-primary-hover" : "text-text-inverted"}
     ${secondary ? "text-text" : ""}
     ${className || ""}
     ${disabled ? "opacity-50 pointer-events-none" : ""}`}
   href={url}
 >
   <slot />
-
-  {
-    resolvedIsExternal && (
-      <span class="inline-block ml-1 font-system text-lg leading-4">↗</span>
-    )
-  }
 </a>

src/components/card/card.astro

@@ -14,7 +14,7 @@ const { title, subtitle, url, image } = Astro.props;
 ---
 
 <div
-  class="min-w-[250px] w-full md:w-[40%] lg:w-[30%] p-4 bg-[#D5D6E6] rounded-2xl text-center flex flex-col"
+  class="prose-xl min-w-[250px] w-full md:w-[40%] lg:w-[30%] p-4 bg-[#D5D6E6] rounded-2xl text-center flex flex-col"
 >
   <a href={url} class="block">
     <div class="relative w-full">
@@ -29,7 +29,7 @@ const { title, subtitle, url, image } = Astro.props;
     </div>
   </a>
   <div class="flex items-center flex-col flex-grow mb-2">
-    <a href={url} class="block hover:underline">
+    <a href={url} class="button-link block hover:underline">
       <h3 >{title}</h3>
     </a>
     <slot />