Merge pull request #5 from taroj1205/refactor/styles

Made slight improvement to styling

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"
   }

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

src/components/header.astro

@@ -6,8 +6,8 @@ import Navbar from "./navbar.astro";
 <header>
   <Navbar />
   <section>
-    <LanguageIcon class="h-6 w-6 text-primary" />
+    <LanguageIcon class="h-7 w-7 text-primary" />
-    <a href="/download" class="btn-base py-2 px-4">Download Zen</a>
+    <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 {

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"
+      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>

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>

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>

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":
             {},
         },
       });