diff --git a/public/assets/banners/banner-20.png b/public/assets/banners/banner-20.jpg
similarity index 100%
rename from public/assets/banners/banner-20.png
rename to public/assets/banners/banner-20.jpg
diff --git a/src/app.tsx b/src/app.tsx
index c1cf23b5..50c456d2 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -6,6 +6,7 @@ import useTheme from './hooks/use-theme';
import Subplebbit from './views/subplebbit';
import { isHomeView } from './lib/utils/view-utils';
import BoardNav from './components/board-nav';
+import BoardBanner from './components/board-banner';
const App = () => {
const [theme] = useTheme();
@@ -27,8 +28,8 @@ const App = () => {
const boardLayout = (
<>
- {/*
-
+
+ {/*
*/}
>
diff --git a/src/components/board-banner/board-banner.module.css b/src/components/board-banner/board-banner.module.css
new file mode 100644
index 00000000..fc3c8143
--- /dev/null
+++ b/src/components/board-banner/board-banner.module.css
@@ -0,0 +1,34 @@
+.content {
+ text-align: center;
+ clear: both;
+}
+
+.bannerCnt img {
+ width: 300px;
+ height: 100px;
+ border: var(--banner-image-border);
+ max-width: 100%;
+}
+
+.boardTitle {
+ font-family: var(--board-title-font-family);
+ font-size: var(--board-title-font-size);
+ font-weight: 700;
+ letter-spacing: -2px;
+ margin-top: 0;
+ color: var(--board-title-text-color);
+}
+
+.boardAddress {
+ padding-top: 5px;
+ font-size: smaller;
+ color: var(--board-title-text-color);
+}
+
+.content hr {
+ width: 90%;
+ /* revert to browser styling for burichan and futaba */
+ border: var(--hr-border, revert);
+ border-top: var(--hr-border-top, revert);
+ height: var(--hr-height, revert);
+}
\ No newline at end of file
diff --git a/src/components/board-banner/board-banner.tsx b/src/components/board-banner/board-banner.tsx
new file mode 100644
index 00000000..2be8197a
--- /dev/null
+++ b/src/components/board-banner/board-banner.tsx
@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import styles from './board-banner.module.css';
+
+const totalBanners = 24;
+
+const ImageBanner = () => {
+ const [imagePath] = useState(() => {
+ const randomBannerIndex = Math.floor(Math.random() * totalBanners) + 1;
+ return `assets/banners/banner-${randomBannerIndex}.jpg`;
+ });
+
+ return
;
+};
+
+const BoardBanner = () => {
+ const { subplebbitAddress } = useParams();
+ const subplebbit = useSubplebbit({ subplebbitAddress });
+ const { address, title } = subplebbit || {};
+
+ return (
+
+
+
+
+
{title || `p/${address}`}
+ {title &&
p/{address}
}
+
+
+ );
+};
+
+export default BoardBanner;
diff --git a/src/components/board-banner/index.ts b/src/components/board-banner/index.ts
new file mode 100644
index 00000000..0f24e0f6
--- /dev/null
+++ b/src/components/board-banner/index.ts
@@ -0,0 +1 @@
+export { default } from './board-banner';
diff --git a/src/components/board-nav/board-nav.tsx b/src/components/board-nav/board-nav.tsx
index 1f96c36c..22c20034 100644
--- a/src/components/board-nav/board-nav.tsx
+++ b/src/components/board-nav/board-nav.tsx
@@ -57,7 +57,7 @@ const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => {
const BoardNav = () => {
const defaultSubplebbits = useDefaultSubplebbits();
- const subplebbitAddress = useParams().subplebbitAddress;
+ const { subplebbitAddress } = useParams();
return (
<>
diff --git a/src/themes.css b/src/themes.css
index f171bbb1..fbbd8dfd 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -2,11 +2,14 @@
--background-base-color: #ffe;
--background-pattern-image: url("/public/assets/background-fade.png");
--background-text-color: #fff;
+ --banner-image-border: 1px solid #800;
--boardnav-font-size: 9pt;
--boardnav-separator-color: #b86;
--boardnav-mobile-background-color: #f0e0d6;
--boardnav-mobile-border-bottom: 2px solid #d9c5b7;
--boardnav-mobile-font-size: 10px;
+ --board-title-font-size: 28px;
+ --board-title-font-family: Tahoma, sans-serif;
--body-font-color: maroon;
--body-font-family: arial, helvetica, sans-serif;
--body-font-size: 10pt;
@@ -14,8 +17,11 @@
--color1: #800;
--color2: #fca;
--color3: #fed;
- --external-link-text-color: #00f;
+ --external-link-text-color: rgb(160, 160, 180);
--external-link-text-decoration: underline;
+ --hr-border: none;
+ --hr-border-top: 1px solid #d9bfb7;
+ --hr-height: 0px;
--internal-link-text-color: #800;
--internal-link-text-color-hover: #e00;
--internal-link-text-decoration: none;
@@ -32,11 +38,15 @@
--background-base-color: #eef2ff;
--background-pattern-image: url("/public/assets/background-fade-blue.png");
--background-text-color: #fff;
+ --banner-image-border: 1px solid #000;
--boardnav-font-size: 9pt;
--boardnav-separator-color: #89a;
--boardnav-mobile-background-color: #d6daf0;
--boardnav-mobile-border-bottom: 2px solid #b7c5d9;
--boardnav-mobile-font-size: 10px;
+ --board-title-font-size: 28px;
+ --board-title-font-family: Tahoma, sans-serif;
+ --board-title-text-color: #af0a0f;
--body-font-color: #000;
--body-font-family: arial, helvetica, sans-serif;
--body-font-size: 10pt;
@@ -46,6 +56,8 @@
--color3: #eef2ff;
--external-link-text-color: #00f;
--external-link-text-decoration: underline;
+ --hr-border: none;
+ --hr-border-top: 1px solid #b7c5d9;
--internal-link-text-color: #34345c;
--internal-link-text-color-hover: #d00;
--internal-link-text-decoration: none;
@@ -67,6 +79,7 @@
--boardnav-mobile-background-color: #f0e0d6;
--boardnav-mobile-border-bottom: 2px solid #d9c5b7;
--boardnav-mobile-font-size: 11pt;
+ --board-title-font-size: 32px;
--body-font-color: maroon;
--body-font-family: times new roman, serif;
--body-font-size: 12pt;
@@ -97,6 +110,8 @@
--boardnav-mobile-background-color: #d6daf0;
--boardnav-mobile-border-bottom: 2px solid #b7c5d9;
--boardnav-mobile-font-size: 11pt;
+ --board-title-font-size: 32px;
+ --board-title-text-color: #af0a0f;
--body-font-color: #000;
--body-font-family: times new roman, serif;
--body-font-size: 12pt;
@@ -123,17 +138,23 @@
--background-base-color: #1d1f21;
--background-pattern-image: none;
--background-text-color: #282a2e;
+ --banner-image-border: 1px solid #000;
--boardnav-font-size: 9pt;
--boardnav-separator-color: #c5c8c6;
--boardnav-mobile-background-color: #1d1f21;
--boardnav-mobile-border-bottom: 2px solid #282a2e;
--boardnav-mobile-font-size: 10px;
+ --board-title-font-size: 28px;
+ --board-title-font-family: Tahoma, sans-serif;
--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);
+ --hr-border: none;
+ --hr-border-top: 1px solid #282a2e;
+ --hr-height: 0px;
--internal-link-text-color: #81a2be;
--internal-link-text-color-hover: #5f89ac;
--text-color: #c5c8c6;
@@ -146,14 +167,21 @@
:root .photon {
--background-base-color: #eee;
--background-pattern-image: none;
+ --banner-image-border: 1px solid #000;
--boardnav-font-size: 9pt;
--boardnav-separator-color: #333;
--boardnav-mobile-background-color: #ddd;
--boardnav-mobile-border-bottom: 2px solid #ccc;
--boardnav-mobile-font-size: 10px;
+ --board-title-font-size: 28px;
+ --board-title-font-family: Tahoma, sans-serif;
+ --board-title-text-color: #004a99;
--body-font-color: #333;
--body-font-family: arial, helvetica, sans-serif;
--body-font-size: 10pt;
+ --hr-border: none;
+ --hr-border-top: 1px solid #ddd;
+ --hr-height: 0px;
--internal-link-text-color: #f60;
--internal-link-text-color-hover: #f30;
--text-color: #333;