Merge pull request #5 from taroj1205/refactor/styles

Made slight improvement to styling
2025-07-08 01:19:59 +02:00 · 2024-11-04 19:05:55 +00:00 · 2024-11-04 19:05:55 +00:00 · 571cf9f863
commit 571cf9f863
parent dc70cfc7e9 17bd6366c3
7 changed files with 56 additions and 19 deletions
--- a/package.json
+++ b/package.json
@ -23,6 +23,8 @@
    "tailwindcss": "3.2.7"
  },
  "dependencies": {
+    "@fontsource/dm-sans": "^5.1.0",
+    "@fontsource/inter": "^5.1.0",
    "clsx": "^2.1.1",
    "tailwind-merge": "^2.5.4"
  }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -8,6 +8,12 @@ importers:

  .:
    dependencies:
+      '@fontsource/dm-sans':
+        specifier: ^5.1.0
+        version: 5.1.0
+      '@fontsource/inter':
+        specifier: ^5.1.0
+        version: 5.1.0
      clsx:
        specifier: ^2.1.1
        version: 2.1.1
@ -312,6 +318,12 @@ packages:
    resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
    engines: {node: '>=14'}

+  '@fontsource/dm-sans@5.1.0':
+    resolution: {integrity: sha512-YpGtZ8Rbh+/84rn7o/rzBBFnikoLjhjtzKYAMZhSRr7xWU0piZDBFhUdI14M4Ub8emh0TSG/gU2pJOMUe9TGYA==}
+
+  '@fontsource/inter@5.1.0':
+    resolution: {integrity: sha512-zKZR3kf1G0noIes1frLfOHP5EXVVm0M7sV/l9f/AaYf+M/DId35FO4LkigWjqWYjTJZGgplhdv4cB+ssvCqr5A==}
+
  '@jridgewell/gen-mapping@0.3.5':
    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
    engines: {node: '>=6.0.0'}
@ -2095,6 +2107,10 @@ snapshots:

  '@fastify/busboy@2.1.1': {}

+  '@fontsource/dm-sans@5.1.0': {}
+
+  '@fontsource/inter@5.1.0': {}
+
  '@jridgewell/gen-mapping@0.3.5':
    dependencies:
      '@jridgewell/set-array': 1.2.1
--- a/src/components/header.astro
+++ b/src/components/header.astro
@ -6,8 +6,8 @@ import Navbar from "./navbar.astro";
 <header>
  <Navbar />
  <section>
-    <LanguageIcon class="h-6 w-6 text-primary" />
-    <a href="/download" class="btn-base py-2 px-4">Download Zen</a>
+    <LanguageIcon class="h-7 w-7 text-primary" />
+    <a href="/download" class="btn-base py-2">Download Zen</a>
  </section>
 </header>

@ -15,7 +15,7 @@ import Navbar from "./navbar.astro";
  @tailwind base;
  @layer base {
    header {
-      @apply flex w-full items-center justify-between pt-lg;
+      @apply flex w-full items-center justify-between pt-md;
    }

    section {
--- a/src/components/hero.astro
+++ b/src/components/hero.astro
@ -1,19 +1,24 @@
 ---
 import DownloadIcon from "./icons/download-icon.astro";
+import '@fontsource/dm-sans/700.css';
 ---

 <section id="hero" class="section">
  <h2>Stay focused, browse faster</h2>
-  <p class="max-w-prose text-lg text-muted">
+  <p class="max-w-prose text-xl text-muted">
    Zen is beautifully designed, privacy-focused, and packed with features. We
    care about your experience, not your data.
  </p>
  <div class="center flex flex-col gap-sm">
    <a href="/download" class="btn-base"> <DownloadIcon /> Download Zen</a>
-    <p class="text-sm text-muted/95">Available on Windows, Mac, and Linux</p>
+    <p class="text-md text-muted/95">Available on Windows, Mac, and Linux</p>
  </div>
-  <img
-    src="https://media.discordapp.net/attachments/1302453497651925082/1302664349655240825/nI0zVqK.png?ex=6728f037&is=67279eb7&hm=a307a77de19d56eb9165f3333a22ba5ea40e0ebb43fa1f03ecb11204ddc7e218&=&format=webp&quality=lossless&width=809&height=698"
-    alt="Zen Logo"
-  />
+    <img
+      src="https://media.discordapp.net/attachments/1302812062019358742/1302846711768678470/Default_Mode2.png?ex=67299a0d&is=6728488d&hm=6a9275e98149351b8415f76cf756d94c726b67beeefb59bbdab516e3a0c91203&=&format=webp&quality=lossless&width=1081&height=699"
+      alt="Zen Logo"
+      class="w-full rounded-lg drop-shadow-2xl"
+    />
+    <figcaption class="text-md text-muted/95">
+      Your experience using Zen may change over time, as new features are added, improved and adjusted with upstream Firefox updates. User discretion is advised.
+    </figcaption>
 </section>
--- a/src/components/navbar.astro
+++ b/src/components/navbar.astro
@ -6,8 +6,6 @@
    height="40"
    decoding="async"
    data-nimg="1"
-    class="mr-2 transition-all duration-300 hover:scale-110"
-    style="color:transparent"
    srcset="https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-black.svg 1x, https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-black.svg 2x"
    src="https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-black.svg"
  />
@ -25,10 +23,10 @@
  @tailwind base;
  @layer base {
    nav {
-      @apply flex justify-center text-primary;
+      @apply flex justify-center text-primary font-semibold text-lg gap-4;
    }
    ul {
-      @apply hidden justify-center gap-4 p-4 md:flex;
+      @apply hidden justify-center gap-8 p-4 md:flex;
    }
  }
 </style>
--- a/src/layouts/main.astro
+++ b/src/layouts/main.astro
@ -1,8 +1,8 @@
 ---
 import CircleEffect from "../components/circle-effect.astro";
 import Header from "../components/header.astro";
-
 const { title } = Astro.props;
+import '@fontsource/inter';
 ---

 <html lang="en">
@ -22,7 +22,7 @@ const { title } = Astro.props;
    <div class="container flex min-h-screen flex-col items-center gap-4xl">
      <CircleEffect />
      <Header />
-      <main class="flex flex-col gap-4"><slot /></main>
+      <main class="flex flex-col gap-4 w-full"><slot /></main>
    </div>
  </body>
 </html>
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@ -6,7 +6,7 @@ module.exports = {
    container: {
      center: true,
      padding: {
-        DEFAULT: "1rem",
+        DEFAULT: "2rem",
        xs: "0.5rem",
        sm: "2rem",
        lg: "4rem",
@ -14,7 +14,6 @@ module.exports = {
        "2xl": "6rem",
      },
    },
-
    extend: {
      colors: {
        primary: "hsl(258, 48%, 23%)",
@ -35,13 +34,29 @@ module.exports = {
        "8xl": "10rem",
        "9xl": "11rem",
      },
+      fontSize: {
+        "scale-large": "clamp(3rem, 6vw, 4rem)",
+      },
+      fontFamily: {
+        sans: [
+          "Inter",
+          "ui-sans-serif",
+          "system-ui",
+          "sans-serif",
+          '"Apple Color Emoji"',
+          '"Segoe UI Emoji"',
+          '"Segoe UI Symbol"',
+          '"Noto Color Emoji"',
+        ],
+        dm: ["DM Sans"],
+      },
    },
  },
  plugins: [
    plugin(({ addBase, addComponents, addUtilities, theme }) => {
      addBase({
        h2: {
-          "@apply text-7xl font-bold text-primary": {},
+          "@apply text-scale-large font-bold text-primary": {},
        },
      });
      addComponents({
@ -50,12 +65,13 @@ module.exports = {
          flexDirection: "column",
          gap: theme("spacing.md"),
          alignItems: "center",
+          textAlign: "center",
        },
        ".center": {
          "@apply text-center place-items-center": {},
        },
        ".btn-base": {
-          "@apply bg-black text-white font-semibold py-3 px-6 rounded-full w-fit flex items-center gap-2":
+          "@apply bg-black text-white font-semibold py-3 px-6 rounded-full w-fit flex items-center gap-2 text-lg drop-shadow-lg hover:drop-shadow-xl transition-all duration-300":
            {},
        },
      });