added directories

src/App.js

@@ -20,7 +20,7 @@ const GlobalStyle = createGlobalStyle`
 
 export default function App() {
   const [bodyStyle, setBodyStyle] = useState({
-    background: "#ffe url(/fade.png) top repeat-x",
+    background: "#ffe url(/assets/fade.png) top repeat-x",
     color: "maroon",
     fontFamily: "Helvetica, Arial, sans-serif"
   });
@@ -32,11 +32,10 @@ export default function App() {
   return (
   <div>
     <Helmet>
-      <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+      <link rel="apple-touch-icon" sizes="180x180" href="/assets/logo/apple-touch-icon.png" />
-      <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+      <link rel="icon" type="image/png" sizes="32x32" href="/assets/logo/favicon-32x32.png" />
-      <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+      <link rel="icon" type="image/png" sizes="16x16" href="/assets/logo/favicon-16x16.png" />
       <link rel="manifest" href="/site.webmanifest" />
-      <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#fee9cd" />
       <meta name="msapplication-TileColor" content="#fee9cd" />
       <meta name="theme-color" content="#ffffff" />
     </Helmet>

src/components/Board.jsx

@@ -142,7 +142,7 @@ const Board = ({ setBodyStyle }) => {
     switch (event.target.value) {
       case "Yotsuba":
         setBodyStyle({
-          background: "#ffe url(/fade.png) top repeat-x",
+          background: "#ffe url(/assets/fade.png) top repeat-x",
           color: "maroon",
           fontFamily: "Arial, Helvetica, sans-serif"
         });
@@ -151,7 +151,7 @@ const Board = ({ setBodyStyle }) => {
 
       case "Yotsuba B":
         setBodyStyle({
-          background: "#eef2ff url(/fade-blue.png) top center repeat-x",
+          background: "#eef2ff url(/assets/fade-blue.png) top center repeat-x",
           color: "#000",
           fontFamily: "Arial, Helvetica, sans-serif"
         });
@@ -196,7 +196,7 @@ const Board = ({ setBodyStyle }) => {
 
       default:
         setBodyStyle({
-          background: "#ffe url(/fade.png) top repeat-x",
+          background: "#ffe url(/assets/fade.png) top repeat-x",
           color: "maroon",
           fontFamily: "Arial, Helvetica, sans-serif"
         });

src/components/Home.jsx

@@ -9,7 +9,7 @@ const Home = ({ setBodyStyle }) => {
 
   useEffect(() => {
     setBodyStyle({
-      background: "#ffe url(/fade.png) top repeat-x",
+      background: "#ffe url(/assets/fade.png) top repeat-x",
       color: "maroon",
       fontFamily: "Helvetica, Arial, sans-serif"
     });
@@ -43,7 +43,7 @@ const Home = ({ setBodyStyle }) => {
       <Header>
         <Logo>
           <Link to="/">
-            <img alt="plebchan" src="/logo-transparent.png" />
+            <img alt="plebchan" src="/assets/logo/logo-transparent.png" />
           </Link>
         </Logo>
       </Header>
@@ -77,7 +77,7 @@ const Home = ({ setBodyStyle }) => {
                   <Link to="/board" onClick={() => {
                     handleClick(subplebbit.title, subplebbit.address);
                   }} >
-                    <img alt="board logo" src="/plebchan.png" />
+                    <img alt="board logo" src="/assets/plebchan.png" />
                   </Link>
                   <div className="board-text">
                     <b>{subplebbit.address}</b>

src/components/ImageBanner.jsx

@@ -8,7 +8,7 @@ const ImageBanner = () => {
   }, []);
 
   return (
-    <img id="banner-img" src={`banner-${currentImage}.jpg`} alt="banner" />
+    <img id="banner-img" src={`/assets/banners/banner-${currentImage}.jpg`} alt="banner" />
   );
 };
 

src/components/Thread.jsx

@@ -51,7 +51,7 @@ const Thread = ({ setBodyStyle }) => {
     switch (event.target.value) {
       case "Yotsuba":
         setBodyStyle({
-          background: "#ffe url(/fade.png) top repeat-x",
+          background: "#ffe url(/assets/fade.png) top repeat-x",
           color: "maroon",
           fontFamily: "Arial, Helvetica, sans-serif"
         });
@@ -60,7 +60,7 @@ const Thread = ({ setBodyStyle }) => {
 
       case "Yotsuba B":
         setBodyStyle({
-          background: "#eef2ff url(/fade-blue.png) top center repeat-x",
+          background: "#eef2ff url(/assets/fade-blue.png) top center repeat-x",
           color: "#000",
           fontFamily: "Arial, Helvetica, sans-serif"
         });
@@ -105,7 +105,7 @@ const Thread = ({ setBodyStyle }) => {
 
       default:
         setBodyStyle({
-          background: "#ffe url(/fade.png) top repeat-x",
+          background: "#ffe url(/assets/fade.png) top repeat-x",
           color: "maroon",
           fontFamily: "Arial, Helvetica, sans-serif"
         });