feat(layout): add fonts, logos & more responsive styling

Header and footer logos, heading and body font faces, max width and centering on root
chingu-voyages · Oct 19, 2023 · 1e82c70 · 1e82c70
1 parent a020a18
commit 1e82c70
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 63 deletions.
diff --git a/index.html b/index.html
@@ -9,8 +9,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>YumYumYes!</title>
   </head>
-  <body class="bg-[#bfe2c4] p-4 md:p-8 xl:px-20 xl:py-28 2xl:px-28 2xl:py-60">
-    <div id="root" class="rounded-2xl shadow-md p-0 w-full max-w-full bg-yellow-50"></div>
+  <body class="bg-[#bfe2c4] p-4 md:p-8 xl:px-20 xl:py-28 2xl:px-28 2xl:py-60 text-lg xl:text-xl">
+    <div id="root" class="rounded-2xl shadow-md p-0 max-w-[1440px] mx-auto bg-yellow-50"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
diff --git a/src/assets/index.js b/src/assets/index.js
@@ -3,4 +3,6 @@ import vite from "./vite.svg";
 import menuIcon from "./Menu.svg";
 import close from "./close.svg";
 import github from "./github.png";
-export { react, vite, menuIcon, close, github };
+import colorLogo from "./brand/yumyumyes-logo-m.png";
+import creamLogo from "./brand/yumyumyes-logo-lightcream.svg";
+export { react, vite, menuIcon, close, github, colorLogo, creamLogo };
diff --git a/src/features/ui/Footer/Footer.jsx b/src/features/ui/Footer/Footer.jsx
@@ -5,12 +5,18 @@ import { Menu, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
 import { Link } from "react-router-dom";
 
+import { creamLogo as Logo } from "@/assets";
 import { github } from "@/assets";
 
 export const Footer = () => {
   const [toggle, setToggle] = useState(false);
   return (
     <footer className="bottom-0 w-full p-4 bg-[#2d2d2d] rounded-b-2xl, items-center text-[#F8F7F6]">
+      <aside className="w-40 xl:w-52 mx-auto my-4">
+        <Link to="/">
+          <img src={Logo} alt={name} />
+        </Link>
+      </aside>
       <nav className="text-center mb-4">
         <div className="hidden space-x-4 lg:block">
           {navLinks.map((navLink, index) => (

diff --git a/src/features/ui/Header/Header.jsx b/src/features/ui/Header/Header.jsx
@@ -5,15 +5,17 @@ import { Menu, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
 import { Link } from "react-router-dom";
 
+import { colorLogo as Logo } from "@/assets";
+
 export const Header = () => {
   const [toggle, setToggle] = useState(false);
   return (
-    <header className="site-header top-0 z-40 flex items-center justify-between h-16 px-4 bg-white shadow-sm shrink-0 gap-x-4 sm:gap-x-6 sm:px-6 lg:px-8 rounded-t-2xl">
-      <Link to="/">
-        <aside>
-          <p className="text-[#C7522B] font-semibold">{name}</p>
-        </aside>
-      </Link>
+    <header className="site-header top-0 z-40 flex items-center justify-between px-4 py-3 bg-white shadow-sm shrink-0 gap-x-4 sm:gap-x-6 sm:px-6 lg:px-8 rounded-t-2xl">
+      <aside className="w-40 lg:w-52">
+        <Link to="/">
+          <img src={Logo} alt={name} />
+        </Link>
+      </aside>
       <nav>
         <div className="hidden space-x-4 lg:block">
           {navLinks.map((navLink, index) => (
@@ -28,7 +30,7 @@ export const Header = () => {
               <img
                 src={toggle ? close : menuIcon}
                 alt="menu"
-                className="h-[18px] w-[18px] cursor-pointer object-contain text-[#6DD1E3]"
+                className="h-9 w-9 cursor-pointer object-contain text-[#6DD1E3]"
                 onClick={() => setToggle(!toggle)}
               />
             </Menu.Button>

diff --git a/src/pages/About.jsx b/src/pages/About.jsx
@@ -1,5 +1,9 @@
 const About = () => {
-  return <div>About</div>;
+  return (
+    <div className="p-10">
+      <h1 className="text-center">About</h1>
+    </div>
+  );
 };
 
 export default About;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -1,39 +1,7 @@
-import { useState } from "react";
-import { react, vite } from "../assets";
-
 const Home = () => {
-  const [count, setCount] = useState(0);
   return (
-    <div className="w-full h-full mx-auto">
-      <div className="flex flex-col items-center w-full h-full mt-24">
-        <div className="flex items-center justify-center w-full gap-8 px-4 mx-auto">
-          <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
-            <img src={vite} className="w-24 h-24" alt="Vite logo" />
-          </a>
-          <a href="https://react.dev" target="_blank" rel="noreferrer">
-            <img src={react} className="w-24 h-24" alt="React logo" />
-          </a>
-        </div>
-        <h1 className="mt-4 text-3xl font-bold">Vite + React</h1>
-        <div className="flex flex-col p-4 mx-auto mt-4 bg-white rounded-lg shadow-lg min-w-fit">
-          <button
-            className="bg-blue-500 hover:bg-blue-700 text-white font-bold  py-2 px-4 rounded w-[50%] mx-auto"
-            onClick={() => setCount((count) => count + 1)}
-          >
-            count is {count}
-          </button>
-          <p className="mt-4">
-            Edit{" "}
-            <code className="px-1 font-mono bg-gray-200 rounded">
-              src/App.jsx
-            </code>{" "}
-            and save to test HMR
-          </p>
-        </div>
-        <p className="mt-4 text-gray-600">
-          Click on the Vite and React logos to learn more
-        </p>
-      </div>
+    <div className="p-10">
+      <h1 className="text-center">YumYumYes!</h1>
     </div>
   );
 };

diff --git a/src/pages/Posts.jsx b/src/pages/Posts.jsx
@@ -2,8 +2,8 @@ import { PostList } from "@/features/posts";
 
 function Posts() {
   return (
-    <div>
-      <h1>Posts</h1>
+    <div className="p-10">
+      <h1 className="text-center">Posts</h1>
       <div>
         <PostList />
       </div>

diff --git a/src/pages/Recipes.jsx b/src/pages/Recipes.jsx
@@ -1,7 +1,7 @@
 const RecipesPage = () => {
   return (
-    <div className="text-center">
-      <h1>Recipes Page</h1>
+    <div className="p-10">
+      <h1 className="text-center">Recipes Page</h1>
     </div>
   );
 };

diff --git a/src/pages/RecipesDetail.jsx b/src/pages/RecipesDetail.jsx
@@ -1,5 +1,9 @@
 const RecipesDetailPage = () => {
-  return <div>RecipesDetailPage</div>;
+  return (
+    <div className="p-10">
+      <h1 className="text-center">Recipes Detail Page</h1>
+    </div>
+  );
 };
 
 export default RecipesDetailPage;
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -18,29 +18,24 @@
 body,
 input {
   font-family: var(--font-rasa);
+  font-size: 20px;
 }
 
 h1,
 h2,
 h3 {
   font-family: var(--font-kalam);
+  line-height: 1.25;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+h1 {
+  font-size: 60px;
 }
 
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+h2 {
+  font-size: 48px;
 }
 
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-.card {
-  padding: 2em;
+h3 {
+  font-size: 36px;
 }