add desktop topnav, update themes

src/app.module.css

@@ -1,6 +1,8 @@
 .app {
   background: var(--background-base-color) var(--background-pattern-image) top center repeat-x;
-  font: 13px/1.231 arial, helvetica, sans-serif;
+  font-size: var(--body-font-size);
+  font-family: var(--body-font-family);
+  color: var(--body-font-color);
   z-index: 1;
   min-height: 100%;
   overflow-y: hidden;

src/app.tsx

@@ -1,10 +1,11 @@
 import { useEffect } from 'react';
-import { Route, Routes, useLocation } from 'react-router-dom';
+import { Outlet, Route, Routes, useLocation } from 'react-router-dom';
 import Home from './views/home';
 import styles from './app.module.css';
 import useTheme from './hooks/use-theme';
 import Subplebbit from './views/subplebbit';
 import { isHomeView } from './lib/utils/view-utils';
+import TopNav from './components/topnav';
 
 const App = () => {
   const [theme] = useTheme();
@@ -23,21 +24,23 @@ const App = () => {
   //   </>
   // );
 
-  // const boardLayout = (
+  const boardLayout = (
-  //   <>
+    <>
-  //     <TopNav />
+      <TopNav />
-  //     <ImageBanner />
+      {/* <ImageBanner />
-  //     <PostForm />
+      <PostForm />
-  //     <Stats />
+      <Stats /> */}
-  //     <Outlet />
+      <Outlet />
-  //   </>
+    </>
-  // );
+  );
 
   return (
     <div className={`${styles.app} ${isInHomeView ? 'yotsuba' : theme}`}>
       <Routes>
         <Route path='/' element={<Home />} />
-        <Route path='/p/:subplebbitAddress' element={<Subplebbit />} />
+        <Route element={boardLayout}>
+          <Route path='/p/:subplebbitAddress' element={<Subplebbit />} />
+        </Route>
       </Routes>
     </div>
   );

src/components/index.ts

@@ -0,0 +1 @@
+export { default } from './topnav';

src/components/topnav.module.css

@@ -0,0 +1,27 @@
+
+.boardNavDesktop {
+  padding: 5px;
+  font-size: var(--topnav-font-size);
+}
+
+.boardNavDesktop a {
+  color: var(--internal-link-text-color);
+  text-decoration: var(--internal-link-text-decoration);
+}
+
+.boardNavDesktop a:hover {
+  color: var(--internal-link-text-color-hover);
+  text-decoration: var(--internal-link-text-decoration-hover);
+}
+
+@media (max-width: 640px) {
+  .boardNavDesktop {
+    display: none;
+  }
+}
+
+@media (min-width: 640px) {
+  .boardNavMobile {
+    display: none;
+  }
+}

src/components/topnav.tsx

@@ -0,0 +1,42 @@
+import { Link } from 'react-router-dom';
+import useDefaultSubplebbits from '../hooks/use-default-subplebbits';
+import styles from './topnav.module.css';
+
+const BoardNavDesktop = ({ subplebbits }: { subplebbits: any }) => {
+  return (
+    <div className={styles.boardNavDesktop}>
+      [
+      {subplebbits.map((subplebbit: any, index: number) => (
+        <span key={subplebbit.address}>
+          {index === 0 ? null : ' '}
+          <Link to={`/p/${subplebbit.address}`} title={subplebbit.title || ''}>
+            {subplebbit.address.includes('.') ? subplebbit.address : subplebbit.title || subplebbit.address.slice(0, 10).concat('...')}
+          </Link>
+          {index !== subplebbits.length - 1 ? ' /' : null}
+        </span>
+      ))}
+      ]
+    </div>
+  );
+};
+
+const BoardNavMobile = ({ subplebbits }: { subplebbits: any }) => {
+  return (
+    <div className={styles.boardNavMobile}>
+      <h1>BoardNavMobile</h1>
+    </div>
+  );
+};
+
+const TopNav = () => {
+  const defaultSubplebbits = useDefaultSubplebbits();
+
+  return (
+    <>
+      <BoardNavDesktop subplebbits={defaultSubplebbits} />
+      <BoardNavMobile subplebbits={defaultSubplebbits} />
+    </>
+  );
+};
+
+export default TopNav;

src/themes.css

@@ -1,57 +1,142 @@
 :root .yotsuba {
   --background-base-color: #ffe;
   --background-pattern-image: url("/public/assets/background-fade.png");
+  --background-text-color: #fff;
+  --body-font-color: maroon;
+  --body-font-family: arial, helvetica, sans-serif;
+  --body-font-size: 10pt;
+  --box-border-color: #800;
   --color1: #800;
   --color2: #fca;
   --color3: #fed;
-  --text-color: maroon;
-  --text-color-on-color1: #fff;
-  --text-color-on-color2: #800;
-  --text-color-on-color2-hover: #c63;
-  --text-color-standard: #000;
-  --text-color-inverse: #fff;
-  --background-text-color: #fff;
   --external-link-text-color: #00f;
   --external-link-text-decoration: underline;
   --internal-link-text-color: #800;
   --internal-link-text-color-hover: #e00;
   --internal-link-text-decoration: none;
   --internal-link-text-decoration-hover: underline;
-  --box-border-color: #800;
+  --text-color: maroon;
+  --text-color-on-color1: #fff;
+  --text-color-on-color2: #800;
+  --text-color-on-color2-hover: #c63;
+  --text-color-standard: #000;
+  --text-color-inverse: #fff;
+  --topnav-font-size: 9pt;
+  --topnav-separator-color: #b86;
 }
 
 :root .yotsuba-b {
   --background-base-color: #eef2ff;
   --background-pattern-image: url("/public/assets/background-fade-blue.png");
+  --background-text-color: #fff;
+  --body-font-color: #000;
+  --body-font-family: arial, helvetica, sans-serif;
+  --body-font-size: 10pt;
+  --box-border-color: #000;
   --color1: #98e;
   --color2: #98e;
   --color3: #eef2ff;
-  --text-color: #000;
-  --text-color-on-color1: #000;
-  --text-color-on-color2: #000;
-  --text-color-on-color2-hover: #fff;
-  --text-color-standard: #000;
-  --text-color-inverse: #fff;
-  --background-text-color: #fff;
   --external-link-text-color: #00f;
   --external-link-text-decoration: underline;
   --internal-link-text-color: #34345c;
   --internal-link-text-color-hover: #d00;
   --internal-link-text-decoration: none;
   --internal-link-text-decoration-hover: underline;
+  --text-color: #000;
+  --text-color-on-color1: #000;
+  --text-color-on-color2: #000;
+  --text-color-on-color2-hover: #fff;
+  --text-color-standard: #000;
+  --text-color-inverse: #fff;
+  --topnav-font-size: 9pt;
+  --topnav-separator-color: #89a;
+}
+
+:root .futaba {
+  --background-base-color: #ffe;
+  --background-pattern-image: none;
+  --background-text-color: #fff;
+  --body-font-color: maroon;
+  --body-font-family: times new roman, serif;
+  --body-font-size: 12pt;
+  --box-border-color: #800;
+  --color1: #800;
+  --color2: #fca;
+  --color3: #fed;
+  --external-link-text-color: #00f;
+  --external-link-text-decoration: underline;
+  --internal-link-text-color: #00e;
+  --internal-link-text-color-hover: #e00;
+  --internal-link-text-decoration: underline;
+  --internal-link-text-decoration-hover: underline;
+  --text-color: maroon;
+  --text-color-on-color1: #fff;
+  --text-color-on-color2: #800;
+  --text-color-on-color2-hover: #c63;
+  --text-color-standard: #000;
+  --text-color-inverse: #fff;
+  --topnav-font-size: 11pt;
+  --topnav-separator-color: #89a;
+}
+
+:root .burichan {
+  --background-base-color: #eef2ff;
+  --background-pattern-image: none;
+  --background-text-color: #fff;
+  --body-font-color: #000;
+  --body-font-family: times new roman, serif;
+  --body-font-size: 12pt;
   --box-border-color: #000;
+  --color1: #98e;
+  --color2: #98e;
+  --color3: #eef2ff;
+  --external-link-text-color: #00f;
+  --external-link-text-decoration: underline;
+  --internal-link-text-color: #34345c;
+  --internal-link-text-color-hover: #d00;
+  --internal-link-text-decoration: underline;
+  --internal-link-text-decoration-hover: underline;
+  --text-color: #000;
+  --text-color-on-color1: #000;
+  --text-color-on-color2: #000;
+  --text-color-on-color2-hover: #fff;
+  --text-color-standard: #000;
+  --text-color-inverse: #fff;
+  --topnav-font-size: 11pt;
+  --topnav-separator-color: #89a;
+
 }
 
 :root .tomorrow {
   --background-base-color: #1d1f21;
   --background-pattern-image: none;
+  --background-text-color: #282a2e;
+  --body-font-color: #c5c8c6;
+  --body-font-family: arial, helvetica, sans-serif;
+  --body-font-size: 10pt;
+  --box-border-color: rgb(45, 47, 51);
   --color1: rgb(33, 35, 38);
   --color2: rgb(33, 35, 38);
+  --internal-link-text-color: #81a2be;
+  --internal-link-text-color-hover: #5f89ac;
   --text-color: #c5c8c6;
   --text-color-standard: #c5c8c6;
   --text-color-on-color1: #c5c8c6;
   --text-color-on-color2: #c5c8c6;
   --text-color-on-color3: #c5c8c6;
-  --background-text-color: #282a2e;
+  --topnav-font-size: 9pt;
-  --box-border-color: rgb(45, 47, 51);
+  --topnav-separator-color: #89a;
+}
+
+:root .photon {
+  --background-base-color: #eee;
+  --background-pattern-image: none;
+  --body-font-color: #333;
+  --body-font-family: arial, helvetica, sans-serif;
+  --body-font-size: 10pt;
+  --internal-link-text-color: #f60;
+  --internal-link-text-color-hover: #f30;
+  --text-color: #333;
+  --topnav-font-size: 9pt;
+  --topnav-separator-color: #333;
 }

src/views/home/home.module.css

@@ -147,7 +147,7 @@
   text-transform: capitalize;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 640px) {
   .content {
     min-width: 0;
     width: auto;

src/views/subplebbit/subplebbit.module.css

@@ -7,4 +7,4 @@
 
 .debug select {
   margin: 2px;
-}
+}