Merge pull request #55 from 2308-Bread/feat/styling-refactor

Reintegrate navbar orientation for mobile
2308-Bread · Sep 7, 2024 · c4a3484 · c4a3484
2 parents c3cc746 + 702ece0
commit c4a3484
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
@@ -4,9 +4,9 @@ import MapComponent from "../Map/Map";
 
 const Main = () => {
   return (
-    <div className="main h-screen w-screen overflow-hidden flex justify-center items-center">
+    <div className="main h-screen w-screen overflow-hidden flex justify-center items-center mt-[-4rem] lg:mt-[-1rem]">
       <div className="map-wrapper flex flex-col h-[75%] w-full items-center">
-        <h2 className="font-fattest text-[#563c2c] hover:animate-wiggle focus:animate-wiggle drop-shadow-2xl text-center p-2 text-3xl md:text-3xl lg:text-4xl pt-0 md:pt-2 lg:pt-3">
+        <h2 className="font-fattest text-[#563c2c] hover:animate-wiggle focus:animate-wiggle drop-shadow-2xl text-center p-2 text-3xl md:text-4xl lg:text-5xl pt-0 md:pt-2 lg:pt-3">
           Let's learn about bread - Select a region to get baking!
         </h2>
         <div className="map-background bg-[#e29c73] shadow-[0_.5rem_1.5rem_rgba(0,0,0,.75)] w-[95%] flex justify-center mt-6 md:mt-6 lg:mt-5 p-3 rounded-3xl lg:w-[60vw] xl:w-[50vw]">

diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
@@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom";
 const MapComponent = () => {
   return (
     <MapContainer
-      center={[0, 0]}
+      center={[15, -25]}
       zoom={2}
       style={{ height: "80vh", width: "100%" }}
       maxBounds={[

diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css
@@ -8,7 +8,7 @@
 }
 
 /* RESETTING THE NAV ORIENTATION */
-@media screen and (min-width: 350px) {
+@media screen and (min-width: 640px) {
 	.navbar {
 		@apply top-0 bottom-auto;
 	}