General Visual Overhaul

astro.config.mjs

@@ -3,11 +3,12 @@ import tailwind from "@astrojs/tailwind";
 import sitemap from "@astrojs/sitemap";
 
 import mdx from "@astrojs/mdx";
+import icon from "astro-icon";
 
 // https://astro.build/config
 export default defineConfig({
   site: "https://ladybird.org",
-  integrations: [tailwind(), sitemap(), mdx()],
+  integrations: [tailwind(), sitemap(), mdx(), icon()],
   // Special case the initial posts from before the astro transition.
   // These are the super-SEO'd links that were shared around.
   redirects: {

package.json

@@ -12,10 +12,13 @@
     "format:check": "prettier --check \"**/*.{astro,ts,tsx,md,mdx,js,cjs,mjs,jsx}\""
   },
   "devDependencies": {
+    "@iconify-json/mdi": "^1.2.1",
+    "@iconify-json/mdi-light": "^1.2.1",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
     "@types/bun": "latest",
+    "astro-icon": "^1.1.4",
     "fast-xml-parser": "^4.4.0",
     "kleur": "^4.1.5",
     "prettier": "^3.3.3",

src/components/global/footer.astro

@@ -73,16 +73,27 @@
         <div>
           <div class="flex gap-14">
             <div class="flex flex-col">
-              <a href="/#about" class="mb-3 font-normal">About</a>
-              <a href="/#news" class="mb-3 font-normal">News</a>
-              <a href="/#gi" class="mb-3 font-normal">Get Involved</a>
+              <a href="/#about" class="mb-3 font-normal hover:brightness-75"
+                >About</a
+              >
+              <a href="/#news" class="mb-3 font-normal hover:brightness-75"
+                >News</a
+              >
+              <a href="/#gi" class="mb-3 font-normal hover:brightness-75"
+                >Get Involved</a
+              >
             </div>
 
             <div class="flex flex-col">
-              <a href="/#sponsors" class="mb-3 font-normal">Sponsors</a>
-              <a href="/#faq" class="mb-3 font-normal">FAQ</a>
-              <a href="mailto:[email protected]" class="font-normal mb-0"
-                >Contact Us</a
+              <a href="/#sponsors" class="mb-3 font-normal hover:brightness-75"
+                >Sponsors</a
+              >
+              <a href="/#faq" class="mb-3 font-normal hover:brightness-75"
+                >FAQ</a
+              >
+              <a
+                href="mailto:[email protected]"
+                class="font-normal hover:brightness-75 mb-0">Contact Us</a
               >
             </div>
           </div>

src/components/global/navigation.astro

@@ -1,3 +1,7 @@
+---
+import { Icon } from "astro-icon/components";
+---
+
 <header class="p-[20px] bg-[#000] relative">
   <div id="header-blobs" class="absolute pointer-events-none z-10 top-0 left-0">
     <img src="/assets/img/header-eclipse.svg" alt="Header Gradient Blobs" />
@@ -14,14 +18,15 @@
       />
     </a>
     <div id="header-links" class="flex-row gap-3 z-20 text-sm hidden lg:flex">
-      <a href="/#about" class="font-normal">About</a>
-      <a href="/#news" class="font-normal">News</a>
-      <a href="/#gi" class="font-normal">Get Involved</a>
-      <a href="/#sponsors" class="font-normal">Sponsors</a>
-      <a href="/#faq" class="font-normal">FAQ</a>
+      <a href="/#about" class="font-normal hover:brightness-75">About</a>
+      <a href="/#news" class="font-normal hover:brightness-75">News</a>
+      <a href="/#gi" class="font-normal hover:brightness-75">Get Involved</a>
+      <a href="/#sponsors" class="font-normal hover:brightness-75">Sponsors</a>
+      <a href="/#faq" class="font-normal hover:brightness-75">FAQ</a>
     </div>
     <div id="header-donate" class="hidden lg:block">
       <a href="https://donorbox.org/ladybird" class="btn btn--small">
+        <Icon name="mdi:donation-outline" class="size-5" />
         Donate
       </a>
     </div>

src/components/landing/general.astro

@@ -1,3 +1,7 @@
+---
+import { Icon } from "astro-icon/components";
+---
+
 <section id="gi" class="gi">
   <div class="container">
     <div class="gi__tf">
@@ -16,11 +20,15 @@
         it, build it, and join our Discord if you want to collaborate on it!
         We're looking forward to seeing you there.
       </p>
-      <div class="space-y-2">
-        <a href="https://discord.gg/nvfjVJ4Svh" class="btn">Join Discord</a>
-        <a href="https://github.com/LadybirdBrowser/ladybird" class="btn"
-          >Get the code</a
-        >
+      <div class="py-2 flex flex-col sm:flex-row gap-4">
+        <a href="https://discord.gg/nvfjVJ4Svh" class="btn">
+          <Icon name="mdi:discord" class="size-6" />
+          Join Discord
+        </a>
+        <a href="https://github.com/LadybirdBrowser/ladybird" class="btn">
+          <Icon name="mdi:code" class="size-6" />
+          Get the code
+        </a>
       </div>
     </div>
   </div>

src/components/landing/hero.astro

@@ -1,19 +1,26 @@
+---
+import { Icon } from "astro-icon/components";
+---
+
 <section
   class="bg-[#000] relative flex flex-col items-center pt-[80px] px-5 pb-0 lg:flex-row lg:pt-0 lg:min-h-[892px]"
 >
   <div class="container">
     <div class="max-w-[800px] relative z-[2]">
       <h1 class="text-[#fff] mb-4">
         Welcome to <span
-          class="bg-clip-text text-transparent bg-gradient-to-r from-[#6d98cc] to-[#8a64e5]"
+          class="bg-clip-text text-transparent bg-gradient-to-r from-lb-slate-blue to-lb-violet"
           style="-webkit-background-clip: text;">Ladybird</span
         >,<br />a truly independent<br />web browser.
       </h1>
       <p class="mb-8 text-[#fff]">
         We are building a brand-new browser from scratch, backed by a
         non-profit.
       </p>
-      <a href="/#gi" class="btn z-10">Get Involved</a>
+      <a href="/#gi" class="btn z-10">
+        Get Involved
+        <Icon name="mdi:arrow-right" class="size-5" />
+      </a>
     </div>
   </div>
   <div

src/components/landing/sponsors.astro

@@ -1,7 +1,20 @@
 ---
-const sponsors = [
+import { Icon } from "astro-icon/components";
+
+type SponsorList = {
+  name: string;
+  color: string;
+  sponsors: {
+    name: string;
+    href?: string;
+    logo?: string;
+  }[];
+};
+
+const sponsors: SponsorList[] = [
   {
     name: "Platinum",
+    color: "#87c3ff",
     sponsors: [
       {
         name: "FUTO",
@@ -17,6 +30,7 @@ const sponsors = [
   },
   {
     name: "Gold",
+    color: "#fbbe06",
     sponsors: [
       {
         name: "Ahrefs",
@@ -31,6 +45,7 @@ const sponsors = [
   },
   {
     name: "Silver",
+    color: "#b3cbe4",
     sponsors: [
       {
         name: "Paul Copplestone",
@@ -75,6 +90,7 @@ const sponsors = [
   },
   {
     name: "Bronze",
+    color: "#d6893b",
     sponsors: [
       {
         name: "JetBrains",
@@ -94,6 +110,7 @@ const sponsors = [
   },
   {
     name: "Copper",
+    color: "#91786d",
     sponsors: [
       {
         name: "Optimising.com.au",
@@ -138,7 +155,14 @@ const sponsors = [
           <div class="mb-[64px] relative">
             <div class="flex items-center mb-6">
               <span class="block w-full h-[1px] bg-[#d3d2d6]" />
-              <span class="text-2xl font-semibold px-5">{tier.name}</span>
+              <div class="flex flex-row items-center gap-2 px-5">
+                <Icon
+                  name="mdi:crown"
+                  class="size-8"
+                  style={`color: ${tier.color};`}
+                />
+                <span class="text-2xl font-semibold">{tier.name}</span>
+              </div>
               <span class="block w-full h-[1px] bg-[#d3d2d6]" />
             </div>
             <div class="flex flex-wrap items-center justify-center gap-4">

src/layouts/post.astro

@@ -15,7 +15,7 @@ const { frontmatter, title, description, author, image } = Astro.props;
         <div class="hero__tf">
           <p class="text-[#fff]">
             <span
-              class="bg-clip-text text-transparent bg-gradient-to-r from-[#6d98cc] to-[#8a64e5]"
+              class="bg-clip-text text-transparent bg-gradient-to-r from-lb-slate-blue to-lb-violet"
               >{frontmatter.author || "Announcement"}</span
             > | {frontmatter.date.toUTCString().slice(0, 16)}
           </p>

src/styles/global.css

@@ -2,6 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --lb-slate-blue: #6d98cc;
+  --lb-violet: #8a64e5;
+  --lb-violet-transparent: #8a64e533;
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --foreground-rgb: 255, 255, 255;
@@ -81,12 +87,21 @@ img {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 180px;
-  min-height: 64px;
-  background: linear-gradient(#6d98cc, #8a64e5);
+  gap: 8px;
+  padding-left: 18px;
+  padding-right: 18px;
+  min-width: 170px;
+  min-height: 60px;
+  background: linear-gradient(45deg, var(--lb-violet), var(--lb-slate-blue));
   color: #fff;
   border-radius: 100px;
-  text-shadow: #000 1px 0 2px;
+  transition: all 200ms;
+}
+
+.btn:hover {
+  background-position: left center;
+  transform: scale(1.02);
+  filter: contrast(1.2);
 }
 
 .btn--small {
@@ -125,7 +140,7 @@ h2 {
 
 h1 span,
 h2 span {
-  background-image: linear-gradient(#6d98cc, #8a64e5);
+  background-image: linear-gradient(var(--lb-slate-blue), var(--lb-violet));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
@@ -281,11 +296,11 @@ header a, footer a {
 }
 
 .why__slide-icon.lightgrey {
-  background-color: #6d98cc;
+  background-color: var(--lb-slate-blue);
 }
 
 .why__slide-icon.lightpurple {
-  background-color: #8a64e5;
+  background-color: var(--lb-violet);
 }
 
 .why__slide-icon.darkpurple {
@@ -367,6 +382,13 @@ header a, footer a {
   position: relative;
   max-width: 360px;
   margin: 0 auto;
+  padding: 12px;
+  border-radius: 25px;
+  transition: background-color 300ms;
+}
+
+.news__box:hover {
+  background-color: var(--lb-violet-transparent);
 }
 
 @media (min-width: 991px) {
@@ -387,7 +409,7 @@ header a, footer a {
 }
 
 .news__box-category span {
-  background: #815BE1;
+  background: var(--lb-violet);
   border: 3px solid #fff;
   border-radius: 5px;
   font-size: 16px;
@@ -546,10 +568,10 @@ header a, footer a {
 }
 
 .faq__wrapper .ac-header-number {
-  color: #8a64e5;
+  color: var(--lb-violet);
   font-size: 36px;
   font-weight: 500;
-  border: 3px solid #8a64e5;
+  border: 3px solid var(--lb-violet);
   border-radius: 9999px;
   margin-left: 24px;
   margin-right: 24px;
@@ -695,9 +717,9 @@ blockquote {
   display: inline-block;
   width: 100%;
   padding: 0 0 0 16px;
-  border-left: 3px solid #6d98cc;
+  border-left: 3px solid var(--lb-slate-blue);
   margin: 0 0 25px;
-  background: var(--Linear, linear-gradient(90deg, #6d98cc 0%, #8a64e5 100%));
+  background: var(--Linear, linear-gradient(90deg, var(--lb-slate-blue) 0%, var(--lb-violet) 100%));
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

tailwind.config.cjs

@@ -59,6 +59,8 @@ module.exports = {
         white: "#d8e7e7",
         eagle: "#a4b3b3",
         "pop-blue": "#2541ea",
+        "lb-slate-blue": "#6d98cc",
+        "lb-violet": "#8a64e5",
       },
       fontFamily: {
         sans: ["Inter", ...defaultTheme.fontFamily.sans],