Responsive v2

src/App.css

@@ -29,11 +29,16 @@ body {
  overflow-y: auto;
  display:block;
 }
+
 thead{
  position:sticky;
  top:0
 }
 
+input:checked ~ .dot {
+ transform: translateX(100%);
+ background-color: #fb7185;
+}
 
 ::-webkit-scrollbar {
  width: 12px;
@@ -50,7 +55,6 @@ thead{
 
 ::-webkit-scrollbar-thumb:hover {
  background-color: #0d527a;
- /* cursor: pointer; */
 }
 
 ::-webkit-scrollbar-track {
@@ -59,106 +63,8 @@ thead{
 
 ::-webkit-scrollbar-button:single-button {
  background-color: #081128;
- /* background-size: 8px; */
- /* background-repeat: no-repeat; */
-}
-/* 
-::-webkit-scrollbar-button:single-button:vertical:decrement {
- height: 10px;
- width: 10px;
- background-position: center 4px;
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(116, 111, 111)'><polygon points='50,00 0,50 100,50'/></svg>");
-}
-
-::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(143, 137, 137)'><polygon points='50,00 0,50 100,50'/></svg>");
-}
-
-::-webkit-scrollbar-button:single-button:vertical:increment {
- height: 10px;
- width: 10px;
- background-position: center 4px;
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(116, 111, 111)'><polygon points='0,0 100,0 50,50'/></svg>");
-}
-
-::-webkit-scrollbar-button:vertical:single-button:increment:hover {
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(143, 137, 137)'><polygon points='0,0 100,0 50,50'/></svg>");
-} */
-
-/* 
-.menus {
- display: flex;
- list-style: none;
-}
-
-.menu-items {
- position: relative;
- font-size: 14px;
-}
-
-.menu-items a {
- display: block;
- font-size: inherit;
- color: inherit;
- text-decoration: none;
 }
 
-.menu-items button {
- color: inherit;
- font-size: inherit;
- border: none;
- background-color: transparent;
- cursor: pointer;
- width: 100%;
-}
-
-.menu-items a,
-.menu-items button {
- text-align: left;
- padding: 0.7rem 1rem;
-}
-
-.menu-items a:hover,
-.menu-items button:hover {
- background-color: #f2f2f2;
-}
-
-.arrow::after {
- content: "";
- display: inline-block;
- margin-left: 0.28em;
- vertical-align: 0.09em;
- border-top: 0.42em solid;
- border-right: 0.32em solid transparent;
- border-left: 0.32em solid transparent;
-}
-
-.dropdown {
- position: absolute;
- right: 0;
- left: auto;
- box-shadow: 0 10px 15px -3px rgba(46, 41, 51, 0.08),
- 0 4px 6px -2px rgba(71, 63, 79, 0.16);
- font-size: 0.875rem;
- z-index: 9999;
- min-width: 10rem;
- padding: 0.5rem 0;
- list-style: none;
- background-color: #fff;
- border-radius: 0.5rem;
- display: none;
-}
-
-.dropdown.show {
- display: block;
-}
-
-.dropdown .dropdown-submenu {
- position: absolute;
- left: 100%;
- top: -7px;
-} */
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/App.tsx

@@ -1,28 +1,35 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { Test, Main, Disclaimer } from './pages';
+import { Main, Disclaimer, TermsOfUse } from './pages';
 import { Navbar } from './components/navbar';
 import { Footer } from './components/footer';
 import { PriceContextProvider } from './context/PriceContext';
+import { AppContextProvider } from './context/AppContext';
 
 function App() {
 
  return (
  <BrowserRouter>
- <div className = "min-h-[100vh] px-5 sm:px-10 md:px-15 lg:px-20 xl:px-40 2xl:px-60 py-8 bg-main caret-transparent">
+ <div className="bg-black text-sm text-red-300 text-right w-full py-1 px-5 sm:px-10 md:px-15 lg:px-20 xl:px-[8.5rem] 2xl:px-60">
+ StarkStation is Alpha!
+ </div>
+ <div className = "min-h-[100vh] px-5 sm:px-10 md:px-15 lg:px-20 xl:px-[8.5rem] 2xl:px-60 py-8 bg-main caret-transparent">
  <PriceContextProvider>
- <Navbar/>
- <Routes>
- <Route path="/" element={ <Main /> } />
- </Routes>
+ <AppContextProvider>
+ <Navbar/>
+ <Routes>
+ <Route path="/" element={ <Main /> } />
+ </Routes>
+
+ <Routes>
+ <Route path="/disclaimer" element={ <Disclaimer /> } />
+ </Routes>
 
- <Routes>
- <Route path="/disclaimer" element={ <Disclaimer /> } />
- </Routes>
+  <Routes>
+  <Route path="/terms-of-use" element={ <TermsOfUse /> } />
+  </Routes>
 
- {/* <Routes>
- <Route path="/test" element={ <Test /> } />
- </Routes> */}
- <Footer/>
+ <Footer/>
+ </AppContextProvider>
  </PriceContextProvider>
  </div>
  </BrowserRouter>