Style Council page

Nonhuman-Nonsense · Mar 23, 2024 · e331084 · e331084
1 parent 32c6778
commit e331084
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 12 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -8,7 +8,7 @@
     />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
     <meta
       name="theme-color"
@@ -58,5 +58,19 @@
       src="https://kit.fontawesome.com/7686f58a35.js"
       crossorigin="anonymous"
     ></script>
+    <script>
+      // Listen for the wheel event
+      window.addEventListener(
+        "wheel",
+        function (event) {
+          // Check if the Ctrl key is pressed
+          if (event.ctrlKey) {
+            // Prevent the default behavior (zooming)
+            event.preventDefault();
+          }
+        },
+        { passive: false }
+      ); // Add { passive: false } option
+    </script>
   </body>
 </html>
diff --git a/client/src/App.css b/client/src/App.css
@@ -55,6 +55,11 @@ h4 {
   font-weight: normal;
 }
 
+.link {
+  color: white;
+  text-decoration: none;
+}
+
 .input-icon-wrapper {
   position: relative;
   display: inline-flex;

diff --git a/client/src/components/Council.jsx b/client/src/components/Council.jsx
@@ -9,11 +9,15 @@ function Council({ options }) {
     minHeight: "100vh",
     display: "flex",
     flexDirection: "column",
-    justifyContent: "space-around",
+    justifyContent: "end",
     alignItems: "center",
   };
 
-  // Styles for the table container
+  const textAreaStyle = {
+    width: "90%",
+    transform: "translateY(-140px)", // Move the textarea up by 10px
+  };
+
   const foodsContainerStyle = {
     position: "absolute",
     top: "50%",
@@ -68,11 +72,10 @@ function Council({ options }) {
 
   return (
     <div style={councilStyle}>
-      <h1>Welcome to the council {name}</h1>
       <textarea
         className="text-input"
         rows="5"
-        style={{ width: "90%" }}
+        style={textAreaStyle}
       ></textarea>
       <div style={foodsContainerStyle}>
         {foods.map((food, index) => (

diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
@@ -12,7 +12,7 @@ function Navbar() {
     left: 0,
     right: 0,
     margin: "0 auto",
-    width: "90%",
+    width: "calc(90% + 40px)", // Adjusted width
   };
 
   const navbarItemStyle = {
@@ -21,17 +21,56 @@ function Navbar() {
   };
 
   const linkItemStyle = {
-    marginLeft: "20px",
+    marginLeft: "25px",
   };
 
   return (
     <div style={navbarStyle}>
-      <h3 style={navbarItemStyle}>COUNCIL OF FOODS</h3>
+      <h3 style={navbarItemStyle}>
+        <a
+          className="link"
+          href="/"
+        >
+          COUNCIL OF FOODS
+        </a>
+      </h3>
       <div style={{ display: "flex" }}>
-        <h3 style={{ ...navbarItemStyle, ...linkItemStyle }}>ABOUT</h3>
-        <h3 style={{ ...navbarItemStyle, ...linkItemStyle }}>SETTINGS</h3>
-        <h3 style={{ ...navbarItemStyle, ...linkItemStyle }}>CONTACT</h3>
-        <h3 style={{ ...navbarItemStyle, ...linkItemStyle }}>SHARE</h3>
+        <h3 style={navbarItemStyle}>
+          <a
+            className="link"
+            href="#"
+            style={linkItemStyle}
+          >
+            ABOUT
+          </a>
+        </h3>
+        <h3 style={navbarItemStyle}>
+          <a
+            className="link"
+            href="#"
+            style={linkItemStyle}
+          >
+            SETTINGS
+          </a>
+        </h3>
+        <h3 style={navbarItemStyle}>
+          <a
+            className="link"
+            href="#"
+            style={linkItemStyle}
+          >
+            CONTACT
+          </a>
+        </h3>
+        <h3 style={navbarItemStyle}>
+          <a
+            className="link"
+            href="#"
+            style={linkItemStyle}
+          >
+            SHARE
+          </a>
+        </h3>
       </div>
     </div>
   );