Fix button behavior in downloads page (#1209)

Due to some merges the buttons on the download page started to get a bit stretchy. This PR fixes this behavior. Co-authored-by: Rok Garbas <rok@floxdev.com>
NixOS · Jan 31, 2024 · 986ece5 · 986ece5
1 parent a46d9a9
commit 986ece5
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 59 deletions.
diff --git a/src/components/pages/download/content/nixos-isoimage.astro b/src/components/pages/download/content/nixos-isoimage.astro
@@ -29,7 +29,7 @@ import Tag from "../../../ui/Tag.astro";
   It’s a <em>live CD</em>, so it allows you to get an impression of NixOS (and the Nix package manager) without installing it.
 </p>
 
-<div class="grid grid-flow-row gap-6 mx-[1rem]">
+<div class="grid grid-flow-row gap-6 mx-[1rem] justify-start">
   <span>
     <Button
       color="semidarkblue"
@@ -43,35 +43,41 @@ import Tag from "../../../ui/Tag.astro";
     <Tag color="darkgreen" classList={["hidden", "md:inline"]}>Recommended</Tag>
   </span>
 
-  <Button
-    color="semidarkblue"
-    href="https://channels.nixos.org/nixos-23.05/latest-nixos-gnome-aarch64-linux.iso"
-    shaHref="https://channels.nixos.org/nixos-23.05/latest-nixos-gnome-aarch64-linux.iso.sha256"
-    shaText="(SHA-256)"
-    classList = {["w-full", "md:w-auto", "block", "md:inline", "text-center", "md:text-left"]}
-  >
-    Download (GNOME, 64-bit ARM)
-  </Button>
+  <span>
+    <Button
+      color="semidarkblue"
+      href="https://channels.nixos.org/nixos-23.05/latest-nixos-gnome-aarch64-linux.iso"
+      shaHref="https://channels.nixos.org/nixos-23.05/latest-nixos-gnome-aarch64-linux.iso.sha256"
+      shaText="(SHA-256)"
+      classList = {["w-full", "md:w-auto", "block", "md:inline", "text-center", "md:text-left"]}
+    >
+      Download (GNOME, 64-bit ARM)
+    </Button>
+  </span>
 
-  <Button
-    color="semidarkblue"
-    href="https://channels.nixos.org/nixos-23.05/latest-nixos-plasma5-x86_64-linux.iso"
-    shaHref="https://channels.nixos.org/nixos-23.05/latest-nixos-plasma5-x86_64-linux.iso.sha256"
-    shaText="(SHA-256)"
-    classList = {["w-full", "md:w-auto", "block", "md:inline", "text-center", "md:text-left"]}
-  >
-    Download (Plasma Desktop, 64-bit Intel/AMD)
-  </Button>
+  <span>
+    <Button
+      color="semidarkblue"
+      href="https://channels.nixos.org/nixos-23.05/latest-nixos-plasma5-x86_64-linux.iso"
+      shaHref="https://channels.nixos.org/nixos-23.05/latest-nixos-plasma5-x86_64-linux.iso.sha256"
+      shaText="(SHA-256)"
+      classList = {["w-full", "md:w-auto", "block", "md:inline", "text-center", "md:text-left"]}
+    >
+      Download (Plasma Desktop, 64-bit Intel/AMD)
+    </Button>
+  </span>
 
-  <Button
-    color="semidarkblue"
-    href="https://channels.nixos.org/nixos-23.05/latest-nixos-plasma5-aarch64-linux.iso"
-    shaHref="https://channels.nixos.org/nixos-23.05/latest-nixos-plasma5-aarch64-linux.iso.sha256"
-    shaText="(SHA-256)"
-    classList = {["w-full", "md:w-auto", "block", "md:inline", "text-center", "md:text-left"]}
-  >
-    Download (Plasma Desktop, 64-bit ARM)
-  </Button>
+  <span>
+    <Button
+      color="semidarkblue"
+      href="https://channels.nixos.org/nixos-23.05/latest-nixos-plasma5-aarch64-linux.iso"
+      shaHref="https://channels.nixos.org/nixos-23.05/latest-nixos-plasma5-aarch64-linux.iso.sha256"
+      shaText="(SHA-256)"
+      classList = {["w-full", "md:w-auto", "block", "md:inline", "text-center", "md:text-left"]}
+    >
+      Download (Plasma Desktop, 64-bit ARM)
+    </Button>
+  </span>
 
 </div>
 
@@ -96,28 +102,33 @@ import Tag from "../../../ui/Tag.astro";
   It contains a number of rescue tools.
 </p>
 
-<div class="grid grid-flow-row gap-6 mx-[1rem] mb-[1rem]">
-  <Button
-    color="semidarkblue"
-    href="https://channels.nixos.org/nixos-23.05/latest-nixos-minimal-x86_64-linux.iso"
-    shaHref="https://channels.nixos.org/nixos-23.05/latest-nixos-minimal-x86_64-linux.iso.sha256"
-    shaText="(SHA-256)"
-    classList = {["w-full", "md:w-auto", "block", "md:inline", "text-center", "md:text-left"]}
-  >
-    Download (64-bit Intel/AMD)
-  </Button>
+<div class="grid grid-flow-row justify-start gap-6 mx-[1rem] mb-[1rem]">
+  <span>
+      <Button
+      color="semidarkblue"
+      href="https://channels.nixos.org/nixos-23.05/latest-nixos-minimal-x86_64-linux.iso"
+      shaHref="https://channels.nixos.org/nixos-23.05/latest-nixos-minimal-x86_64-linux.iso.sha256"
+      shaText="(SHA-256)"
+      classList = {["w-full", "md:w-auto", "block", "md:inline", "text-center", "md:text-left"]}
+    >
+      Download (64-bit Intel/AMD)
+    </Button>
+  </span>
 
-  <Button
-    color="semidarkblue"
-    href="https://channels.nixos.org/nixos-23.05/latest-nixos-minimal-aarch64-linux.iso"
-    shaHref="https://channels.nixos.org/nixos-23.05/latest-nixos-minimal-aarch64-linux.iso.sha256"
-    shaText="(SHA-256)"
-    classList = {["w-full", "md:w-auto", "block", "md:inline", "text-center", "md:text-left"]}
-  >
-    Download (64-bit ARM)
-  </Button>
+  <span>
+    <Button
+      color="semidarkblue"
+      href="https://channels.nixos.org/nixos-23.05/latest-nixos-minimal-aarch64-linux.iso"
+      shaHref="https://channels.nixos.org/nixos-23.05/latest-nixos-minimal-aarch64-linux.iso.sha256"
+      shaText="(SHA-256)"
+      classList = {["w-full", "md:w-auto", "block", "md:inline", "text-center", "md:text-left"]}
+    >
+      Download (64-bit ARM)
+    </Button>
+  </span>
 
-  <Button
+  <span>
+    <Button
     color="semidarkblue"
     href="https://channels.nixos.org/nixos-23.05/latest-nixos-minimal-i686-linux.iso"
     shaHref="https://channels.nixos.org/nixos-23.05/latest-nixos-minimal-i686-linux.iso.sha256"
@@ -126,6 +137,7 @@ import Tag from "../../../ui/Tag.astro";
   >
     Download (32-bit Intel/AMD)
   </Button>
+  </span>
 
 </div>
 
diff --git a/src/components/pages/explore/Timeline.astro b/src/components/pages/explore/Timeline.astro
@@ -33,11 +33,11 @@ const imageCommonClasses = "px-12 my-12";
 
     <div class:list={[textCommonClasses, "text-left", "relative"]}>
       <TimelineCenter number={number}/>
-      <TimelineText {...textProps} />
+      <TimelineText location="right" {...textProps} />
     </div>
   :
     <div class:list={[textCommonClasses, "order-last md:order-first", "text-left md:text-right"]}>
-      <TimelineText {...textProps} />
+      <TimelineText location="left" {...textProps} />
     </div>
 
     <div class="justify-self-center md:justify-self-start relative">

diff --git a/src/components/pages/explore/TimelineText.astro b/src/components/pages/explore/TimelineText.astro
@@ -6,6 +6,7 @@ interface Props {
   tags: Array<{ href: string | null, text:string}>;
   paragraphs: string[];
   emphasis?: string | null;
+  location?: "left" | "right";
 }
 
 const {
@@ -14,6 +15,7 @@ const {
   tags,
   paragraphs,
   emphasis = null,
+  location = "left",
 } = Astro.props;
 
 import Tag from "../../ui/Tag.astro";
@@ -22,9 +24,12 @@ import Tag from "../../ui/Tag.astro";
 
 <h2 class="text-[2rem] leading-[2.2rem] font-bold text-nixdarkblue">{heading}</h2>
 <p class="text-xl leading-[2.2rem] font-bold text-neutral-500">{subHeading}</p>
-<div class="inline-block">
+<div class="flex flex-wrap gap-1" class:list={[{
+  "justify-start md:justify-end": location === "left",
+  "justify-start": location === "right",
+}]}>
 {tags.map((tag) => (
-  <Tag href={tag.href} classList={["mx-1"]}>{tag.text}</Tag>
+  <Tag href={tag.href}>{tag.text}</Tag>
 ))}
 </div>
 {paragraphs.map((paragraph, idx, array) => {

diff --git a/src/components/ui/Input.astro b/src/components/ui/Input.astro
@@ -19,8 +19,8 @@ const { color = "nixdarkblue", size = "lg", icon = null, placeholder = "", name
     class:list={["h-8 w-8 hidden md:block absolute", {
         "text-nixdarkblue": color === "nixdarkblue",
         "text-white": color === "white",
-        "top-3 left-3": size === "lg",
-        "top-2 left-2.5": size === "sm-full"
+        "top-3.5 left-3": size === "lg",
+        "top-2.5 left-2.5": size === "sm-full"
     }]}
     pack="mdi"
     name="search"
@@ -31,7 +31,7 @@ const { color = "nixdarkblue", size = "lg", icon = null, placeholder = "", name
     class:list={["rounded-full text-xl placeholder-gray-400 text-normal", {
         "text-nixdarkblue placeholder-grey-200": color === "nixdarkblue",
         "border-white text-white placeholder-nixlighterblue bg-transparent": color === "white",
-        "py-3 pl-4 md:pl-11 pr-4 md:w-96 border-2": size === "lg",
+        "py-3 pl-4 md:pl-11 pr-4 md:w-[30rem] border-2": size === "lg",
         "px-4 md:px-10 md:pl-11 py-2 w-full border-1": size === "sm-full"
     }]}
     name={name}

diff --git a/src/components/ui/NixosSearchInput.astro b/src/components/ui/NixosSearchInput.astro
@@ -20,7 +20,7 @@ const { color = "nixdarkblue", size = "lg", collection = "packages", withSubmit
 ---
 
 <form method="get" action={`https://search.nixos.org/${collection}`} class:list={[{
-    "flex flex-col items-center justify-center gap-4": withSubmit,
+    "flex flex-col items-center justify-center gap-6": withSubmit,
 }]}>
     <Input color={color} size={size} placeholder={`Search for ${collectionMap[collection]}`} name="query" />
     {withSubmit && <Button color="green" type='submit'>Search</Button>}

diff --git a/src/components/ui/Tag.astro b/src/components/ui/Tag.astro
@@ -21,7 +21,7 @@ const colorMap = {
   "darkgreen": outline ? "bg-transparent border-nixdarkgreen" : "bg-nixdarkgreen"
 }
 
-const localClassList = `${colorMap[color]} w-fit rounded-lg font-bold ${outline ? "text-black border-2" : "!text-white"} !no-underline text-sm px-[0.5rem] py-[0.25rem]`;
+const localClassList = `${colorMap[color]} inline-block w-fit rounded-lg font-bold !text-white !no-underline text-sm px-[0.5rem] py-[0.25rem]`;
 ---
 
 {href

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -74,11 +74,11 @@ posts.sort((a, b) => {
   <div class="bg-nixlighterblue py-4">
     <Container class="flex justify-center flex-col w-full items-center gap-4">
       <h2
-        class="text-4xl text-center md:w-2/3 text-nixdarkblue leading-tight font-heading font-bold pb-2"
+        class="text-4xl text-center md:w-2/3 text-nixdarkblue leading-tight font-heading font-bold pb-0"
       >
         Choose from Thousands of Packages
       </h2>
-      <p class="font-extralight leading-relaxed text-2xl md:w-5/6 text-center">
+      <p class="font-extralight leading-relaxed text-2xl md:w-5/6 text-center pb-2">
         The Nix Packages collection (<a class="font-bold !text-nixdarkblue" href="#">Nixpkgs</a>) is a set of <span class="text-nixgreen font-bold">over 80 000 packages</span>
         for the Nix package manager.
       </p>