fix: styles

Tauffer-Consulting · Mar 11, 2024 · 7725315 · 7725315
1 parent e370ed2
commit 7725315
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 95 deletions.
diff --git a/src/components/Home/Navbar/Hanburger/index.css b/src/components/Home/Navbar/Hanburger/index.css
@@ -12,6 +12,7 @@
 .menu-list {
   position: fixed;
   top: 0;
+  z-index: 3;
   left: calc(100vw - 250px);
   height: 100vh;
   width: 250px;
@@ -35,14 +36,14 @@
   align-self: flex-end;
 }
 
-ul {
+.ul {
   list-style-type: none;
   padding: 0;
   flex-grow: 1;
   overflow-y: auto;
 }
 
-li {
+.li {
   margin: 10px 0;
 }
 
@@ -52,7 +53,7 @@ li {
   margin-bottom: 5px;
 }
 
-a {
+.a {
   text-decoration: none;
   color: #333;
 }
diff --git a/src/components/Home/Navbar/Hanburger/index.tsx b/src/components/Home/Navbar/Hanburger/index.tsx
@@ -40,21 +40,20 @@ export const Hamburger: React.FC<Props> = ({ menuItems, buttonsItems }) => {
       {isOpen && (
         <>
           <div className="menu-list" ref={menuRef}>
-            <ul>
+            <ul className="ul">
               {menuItems.map((item, index) => (
-                <li key={index}>
-                  <a href={item.link}>{item.label}</a>
+                <li className="li" key={index}>
+                  <a className="a" href={item.link}>{item.label}</a>
                 </li>
               ))}
               {buttonsItems.length && (<div className='divider'></div>)}
               {buttonsItems.length && buttonsItems.map(b => (
-                <li>
+                <li className="li">
                   {b}
                 </li>
               ))}
             </ul>
           </div>
-
         </>
       )}
     </div>

diff --git a/src/components/Home/Navbar/index.tsx b/src/components/Home/Navbar/index.tsx
@@ -2,10 +2,8 @@ import React, { useCallback, useMemo, useState } from 'react'
 import "./index.css"
 import { Hamburger } from './Hanburger';
 import { Icon } from '@iconify/react'
-import { useWindowDimensions } from '@site/src/utils/useWindowSize';
 
 export const Navbar = () => {
-  const { width } = useWindowDimensions();
   const menuItems = useMemo(() => {
     return [
       { label: "Documentation", link: "/docs/intro" },
@@ -15,70 +13,63 @@ export const Navbar = () => {
     ]
   }, [])
 
-  const handleClickCloud = useCallback(()=>{
+  const handleClickCloud = useCallback(() => {
     window.open("https://domino-workflows.cloud/sign-in", "_blank")
-  },[])
+  }, [])
 
-  const handleClickContact = useCallback(()=>{
+  const handleClickContact = useCallback(() => {
     window.location.href = "#contact"
-  },[])
-
-  const handleClickGithub = useCallback(()=>{
-    window.open("https://github.com/Tauffer-Consulting/domino", "_blank")
-  },[])
+  }, [])
 
   return (
     <>
-      {width <= 1144 ? (
-        <nav id="navbar-small">
-          <img id="logo" src="brand/png/main_logo.png" alt="Logo" />
-          <Hamburger
-            menuItems={menuItems}
-            buttonsItems={
-              [<button id="primary" onClick={handleClickCloud}>
-                Try cloud
-              </button>,
-              <button id="secondary" onClick={handleClickContact}>
-                Contact
-              </button>,
-              <a id="github" href="https://github.com/Tauffer-Consulting/domino" target='_blank' >
-                Github <Icon icon="fa-brands:github" fontSize={36} />
-              </a>
-              ]}
-          />
-        </nav>
-      ) : (
-        <nav id="navbar">
-          <img id="logo" src="brand/png/main_logo.png" alt="Logo" />
+      <nav id="navbar-small">
+        <img id="logo" src="brand/png/main_logo.png" alt="Logo" />
+        <Hamburger
+          menuItems={menuItems}
+          buttonsItems={
+            [<button id="primary" onClick={handleClickCloud}>
+              Try cloud
+            </button>,
+            <button id="secondary" onClick={handleClickContact}>
+              Contact
+            </button>,
+            <a id="github" href="https://github.com/Tauffer-Consulting/domino" target='_blank' >
+              Github <Icon icon="fa-brands:github" fontSize={36} />
+            </a>
+            ]}
+        />
+      </nav>
+      <nav id="navbar">
+        <img id="logo" src="brand/png/main_logo.png" alt="Logo" />
 
-          <ul className='ul' id="central-links">
-            {menuItems.map(({ label, link }) =>
-              <li className='li'>
-                <a href={link}>
-                  {label}
-                </a>
-              </li>
-            )}
-          </ul>
-          <ul id="right-buttons" className='ul'>
-            <li className='li'>
-              <button id="primary" onClick={handleClickCloud}>
-                Try cloud
-              </button>
-            </li>
-            <li className='li'>
-              <button id="secondary" onClick={handleClickContact}>
-                Contact
-              </button>
-            </li>
+        <ul className='ul' id="central-links">
+          {menuItems.map(({ label, link }) =>
             <li className='li'>
-              <a id="github" href="https://github.com/Tauffer-Consulting/domino" target='_blank' >
-                <Icon icon="fa-brands:github" fontSize={36} />
+              <a href={link}>
+                {label}
               </a>
             </li>
-          </ul>
-        </nav>
-      )}
+          )}
+        </ul>
+        <ul id="right-buttons" className='ul'>
+          <li className='li'>
+            <button id="primary" onClick={handleClickCloud}>
+              Try cloud
+            </button>
+          </li>
+          <li className='li'>
+            <button id="secondary" onClick={handleClickContact}>
+              Contact
+            </button>
+          </li>
+          <li className='li'>
+            <a id="github" href="https://github.com/Tauffer-Consulting/domino" target='_blank' >
+              <Icon icon="fa-brands:github" fontSize={36} />
+            </a>
+          </li>
+        </ul>
+      </nav>
     </>
   )
 }
diff --git a/src/components/Home/Session1/Frame/index.tsx b/src/components/Home/Session1/Frame/index.tsx
@@ -9,7 +9,7 @@ export const Frame = () => {
         <div id="ellipse" className='red' />
         <div id="ellipse" className='yellow' />
         <div id="ellipse" className='green' />
-        <img id="gif" src="img/intro/gif-example.gif" />
+        <img id="gif" src="img/intro/gif-example.gif" alt="domino platform gif"/>
       </div>
     </div>
   )

diff --git a/src/pages/base.css b/src/pages/base.css
@@ -4,7 +4,7 @@ button#primary {
   padding: 0;
   cursor: pointer;
 
-  background: var(--ifm-color-primary);
+  background: #00B140;
   color: #fff;
 
   width: 115px;
@@ -18,7 +18,7 @@ button#primary:hover {
   padding: 0;
   cursor: pointer;
 
-  background: var(--ifm-color-primary-dark);
+  background: #008F34;
 }
 
 button#secondary {

diff --git a/src/pages/index.css b/src/pages/index.css
@@ -1,4 +1,5 @@
-html {
+#landing {
+  z-index: -2;
   background-color: #f0f0f0;
 }
 

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -11,7 +11,7 @@ import HomepageContactSession from '../components/Home/OldSections/HomepageConta
 
 export default function Home(): JSX.Element {
   return (
-    <div>
+    <div id="landing">
       <Navbar />
       <main>
         <Session1 />

diff --git a/src/utils/useWindowSize.tsx b/src/utils/useWindowSize.tsx