added mobile board feed

src/components/Board.jsx

@@ -9,7 +9,7 @@ import InfiniteScroll from 'react-infinite-scroller';
 
 const Board = ({ setBodyStyle }) => {
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
-  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle } = useContext(BoardContext);
+  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, setSelectedThread, selectedStyle, setSelectedStyle } = useContext(BoardContext);
   const [showPostFormLink, setShowPostFormLink] = useState(true);
   const [showPostForm, setShowPostForm] = useState(false);
   const [name, setName] = useState('');
@@ -390,50 +390,127 @@ const Board = ({ setBodyStyle }) => {
             const renderedComments = renderComments(comments);
             return (
             <>
-            <div key={`t-${thread.cid}`} className="thread">
+              <div key={`t-${thread.cid}`} className="thread">
-              <div key={`c-${thread.cid}`} className="post-container op-container">
+                <div key={`c-${thread.cid}`} className="post-container op-container">
-                <div key={`po-${thread.cid}`} className="post op">
+                  <div key={`po-${thread.cid}`} className="post op">
-                  <hr key={`hr-${thread.cid}`} />
+                    <hr key={`hr-${thread.cid}`} />
-                  <div key={`pi-${thread.cid}`} className="post-info">
+                    <div key={`pi-${thread.cid}`} className="post-info">
-                    <div key={`f-${thread.cid}`} className="file">
+                      <div key={`f-${thread.cid}`} className="file">
-                      <div key={`ft-${thread.cid}`} className="file-text">
+                        <div key={`ft-${thread.cid}`} className="file-text">
-                        File:&nbsp;
+                          File:&nbsp;
-                        <a key={`fa-${thread.cid}`} href={`${thread.link}`} target="_blank">filename.something</a>&nbsp;(metadata)
+                          <a key={`fa-${thread.cid}`} href={`${thread.link}`} target="_blank">filename.something</a>&nbsp;(metadata)
+                        </div>
+                        <a key={`fta-${thread.cid}`} href={handleVoidClick} target="_blank" className="file-thumb">
+                          <img key={`fti-${thread.cid}`} src="/assets/plebchan-psycho.png" alt="filename.something" />
+                        </a>
                       </div>
-                      <a key={`fta-${thread.cid}`} href={handleVoidClick} target="_blank" className="file-thumb">
+                      <span key={`nb-${thread.cid}`} className="name-block">
-                        <img key={`fti-${thread.cid}`} src="/assets/plebchan-psycho.png" alt="filename.something" />
+                        <span key={`q-${thread.cid}`} className="title">
+                          {thread.title ? `${thread.title}` : null}&nbsp;
+                        </span>
+                        <span key={`n-${thread.cid}`} className="name">{thread.author.displayName || "Anonymous"}</span>
+                        &nbsp;
+                        <span key={`pa-${thread.cid}`} className="poster-address">
+                          (User: {thread.author.address})
+                        </span>
+                        &nbsp;
+                        <span key={`dt-${thread.cid}`} className="date-time" data-utc="data">2 weeks ago</span>
+                        &nbsp;
+                        <span key={`pn-${thread.cid}`} className="post-number">
+                          <a key={`pl1-${thread.cid}`} href={handleVoidClick} title="Link to this post">No.</a>
+                          <a key={`pl2-${thread.cid}`} href={handleVoidClick} title="Reply to this post">00000001</a>
+                          &nbsp;
+                          <span key={`rl1-${thread.cid}`}>
+                            [
+                            <Link key={`rl2-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="reply-link" >Reply</Link>
+                            ]
+                          </span>
+                        </span>
+                        <a key={`pmb-${thread.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a>
+                        <div key={`bi-${thread.cid}`} id="backlink-id" className="backlink">
+                          <span key={`ql1-${thread.cid}`}>
+                            <a key={`ql2-${thread.cid}`} className="quote-link" href={handleVoidClick}>{'>>'}00000002</a>
+                          </span>
+                        </div>
+                      </span>
+                      <blockquote key={`bq-${thread.cid}`}>
+                        {thread.content ? (
+                          <>
+                            {thread.content}
+                          </>
+                        ) : null}
+                      </blockquote>
+                    </div>
+                  </div>
+                </div>
+                {renderedComments.map(reply => {
+                  counter++;
+                  const counterString = counter.toString().padStart(8, '0');
+                  return (
+                <div key={`pc-${reply.cid}`} className="post-container reply-container">
+                  <div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
+                  <div key={`pr-${reply.cid}`} className="post-reply">
+                    <div key={`pi-${reply.cid}`} className="post-info">
+                      <span key={`nb-${reply.cid}`} className="nameblock">
+                        <span key={`n-${reply.cid}`} className="name">{reply.author.displayName || "Anonymous"}</span>
+                        &nbsp;
+                        <span key={`pa-${reply.cid}`} className="poster-address">
+                          (User: {reply.author.address})
+                        </span>
+                      </span>
+                      &nbsp;
+                      <span key={`dt-${reply.cid}`} className="date-time" data-utc="data">2 weeks ago</span>
+                      &nbsp;
+                      <span key={`pn-${reply.cid}`} className="post-number">
+                        <a key={`pl1-${reply.cid}`} href={handleVoidClick} title="Link to this post">No.</a>
+                        <a key={`pl2-${reply.cid}`} href={handleVoidClick} title="Reply to this post">{counterString}</a>
+                      </span>
+                      <a key={`pmb-${reply.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a>
+                    </div>
+                    <blockquote key={`pm-${reply.cid}`} className="post-message">
+                      <a className="quotelink" href={handleVoidClick}>
+                        {`>>${counterString}`}{<br />}
+                      </a>
+                      {reply.content}
+                    </blockquote>
+                  </div>
+                </div>
+                )})}
+              </div>
+              <div key={`mob-t-${thread.cid}`} className="thread-mobile">
+                <hr key={`mob-hr-${thread.cid}`} />
+                <div key={`mob-c-${thread.cid}`} className="post-container op-container">
+                  <div key={`mob-po-${thread.cid}`} className="post op">
+                    <div key={`mob-pi-${thread.cid}`} className="post-info-mobile">
+                      <a key={`mob-pb-${thread.cid}`} className="post-menu-button-mobile" href={handleVoidClick}>...</a>
+                      <span className="name-block-mobile">
+                        <span key={`mob-n-${thread.cid}`} className="name-mobile">{thread.author.displayName || "Anonymous"}</span>
+                        &nbsp;
+                        <span key={`mob-pa-${thread.cid}`} className="poster-address-mobile">
+                          (User:&nbsp;
+                          <span key={`mob-ha-${thread.cid}`} className="highlight-address-mobile" title="Highlight posts by this address">{thread.author.address}</span>
+                          )
+                        </span>
+                        <br key={`mob-br1-${thread.cid}`} />
+                        <span key={`mob-s-${thread.cid}`} className="subject-mobile">
+                          {/* {thread.title ? `${thread.title}` : null} */}
+                          This is a test title because titles are (…)
+                        </span>
+                      </span>
+                      <span key={`mob-dt-${thread.cid}`} className="date-time-mobile">
+                        2 weeks ago
+                        &nbsp;
+                        <a key={`mob-no-${thread.cid}`} href={handleVoidClick} title="Link to this post">No.</a>
+                        <a key={`mob-no2-${thread.cid}`} href={handleVoidClick} title="Reply to this post">00000001</a>
+                      </span>
+                    </div>
+                    <div key={`mob-f-${thread.cid}`} className="file-mobile">
+                      <a key={`mob-ft${thread.cid}`} className="file-thumb-mobile" href={handleVoidClick} target="_blank">
+                        <img key={`mob-img-${thread.cid}`} src="/assets/plebchan-psycho.png" alt="" />
+                        <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">58 KB JPG</div>
                       </a>
                     </div>
-                    <span key={`nb-${thread.cid}`} className="name-block">
+                    <blockquote key={`mob-bq-${thread.cid}`} className="post-message-mobile">
-                      <span key={`q-${thread.cid}`} className="title">
-                        {thread.title ? `${thread.title}` : null}&nbsp;
-                      </span>
-                      <span key={`n-${thread.cid}`} className="name">{thread.author.displayName || "Anonymous"}</span>
-                      &nbsp;
-                      <span key={`pa-${thread.cid}`} className="poster-address">
-                        (User: {thread.author.address})
-                      </span>
-                      &nbsp;
-                      <span key={`dt-${thread.cid}`} className="date-time" data-utc="data">2 weeks ago</span>
-                      &nbsp;
-                      <span key={`pn-${thread.cid}`} className="post-number">
-                        <a key={`pl1-${thread.cid}`} href={handleVoidClick} title="Link to this post">No.</a>
-                        <a key={`pl2-${thread.cid}`} href={handleVoidClick} title="Reply to this post">00000001</a>
-                        &nbsp;
-                        <span key={`rl1-${thread.cid}`}>
-                          [
-                          <Link key={`rl2-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="reply-link" >Reply</Link>
-                          ]
-                        </span>
-                      </span>
-                      <a key={`pmb-${thread.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a>
-                      <div key={`bi-${thread.cid}`} id="backlink-id" className="backlink">
-                        <span key={`ql1-${thread.cid}`}>
-                          <a key={`ql2-${thread.cid}`} className="quote-link" href={handleVoidClick}>{'>>'}00000002</a>
-                        </span>
-                      </div>
-                    </span>
-                    <blockquote key={`bq-${thread.cid}`}>
                       {thread.content ? (
                         <>
                           {thread.content}
@@ -441,42 +518,45 @@ const Board = ({ setBodyStyle }) => {
                       ) : null}
                     </blockquote>
                   </div>
-                </div>
+                  <div key={`mob-pl-${thread.cid}`} className="post-link-mobile">
-              </div>
+                    <span key={`mob-info-${thread.cid}`} className="info-mobile">{thread.replyCount} Replies / ? Images</span>
-              {renderedComments.map(reply => {
+                    <Link key={`rl2-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="button-mobile" >View Thread</Link>
-                counter++;
-                const counterString = counter.toString().padStart(8, '0');
-                return (
-              <div key={`pc-${reply.cid}`} className="post-container reply-container">
-                <div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
-                <div key={`pr-${reply.cid}`} className="post-reply">
-                  <div key={`pi-${reply.cid}`} className="post-info">
-                    <span key={`nb-${reply.cid}`} className="nameblock">
-                      <span key={`n-${reply.cid}`} className="name">{reply.author.displayName || "Anonymous"}</span>
-                      &nbsp;
-                      <span key={`pa-${reply.cid}`} className="poster-address">
-                        (User: {reply.author.address})
-                      </span>
-                    </span>
-                    &nbsp;
-                    <span key={`dt-${reply.cid}`} className="date-time" data-utc="data">2 weeks ago</span>
-                    &nbsp;
-                    <span key={`pn-${reply.cid}`} className="post-number">
-                      <a key={`pl1-${reply.cid}`} href={handleVoidClick} title="Link to this post">No.</a>
-                      <a key={`pl2-${reply.cid}`} href={handleVoidClick} title="Reply to this post">{counterString}</a>
-                    </span>
-                    <a key={`pmb-${reply.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a>
                   </div>
-                  <blockquote key={`pm-${reply.cid}`} className="post-message">
-                    <a className="quotelink" href={handleVoidClick}>
-                      {`>>${counterString}`}{<br />}
-                    </a>
-                    {reply.content}
-                  </blockquote>
                 </div>
+                {renderedComments.map(reply => {
+                  counter++;
+                  const counterString = counter.toString().padStart(8, '0');
+                  return (
+                  <div key={`mob-rc-${reply.cid}`} className="post-container reply-container">
+                    <div key={`mob-pr-${reply.cid}`} className="post-reply">
+                      <div key={`mob-pi-${reply.cid}`} className="post-info-mobile">
+                        <a className="post-menu-button-mobile" title="Post menu">...</a>
+                        <span key={`mob-nb-${reply.cid}`} className="name-block-mobile">
+                          <span key={`mob-n-${reply.cid}`} className="name-mobile">{reply.author.displayName || "Anonymous"}</span>
+                          &nbsp;
+                          <span key={`mob-pa-${reply.cid}`} className="poster-address-mobile">
+                            (User:&nbsp;
+                            <span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile" title="Highlight posts by this address">CCxfJWFT...</span>
+                            )
+                          </span>
+                          <br key={`mob-br-${reply.cid}`} />
+                        </span>
+                        <span key={`mob-dt-${reply.cid}`} className="date-time-mobile">
+                          2 weeks ago&nbsp;
+                          <a key={`mob-pl1-${reply.cid}`} href={handleVoidClick} title="Link to this post">No.</a>
+                          <a key={`mob-pl2-${reply.cid}`} href={handleVoidClick} title="Reply to this post">{counterString}</a>
+                        </span>
+                      </div>
+                      <blockquote className="post-message-mobile">
+                        <a className="quotelink-mobile" href={handleVoidClick}>
+                          {`>>${counterString}`}{<br />}
+                        </a>
+                        {reply.content}
+                      </blockquote>
+                    </div>
+                  </div>
+                )})}
               </div>
-              )})}
-            </div>
             </>
             )})}
           </InfiniteScroll>

src/components/Catalog.jsx

@@ -10,7 +10,7 @@ import InfiniteScroll from 'react-infinite-scroller';
 
 const Catalog = ({ setBodyStyle }) => {
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
-  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle } = useContext(BoardContext);
+  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, setSelectedThread, selectedStyle, setSelectedStyle } = useContext(BoardContext);
   const [showPostFormLink, setShowPostFormLink] = useState(true);
   const [showPostForm, setShowPostForm] = useState(false);
   const [name, setName] = useState('');

src/components/styles/Board.styled.jsx

@@ -310,8 +310,9 @@ export const Header = styled.div`
         }
 
         .board-address {
+          color: #af0a0f;
           margin-top: 5px;
-          font-size: 11pt;
+          font-size: 10pt;
         }`;
 
       case 'Burichan':
@@ -1380,11 +1381,10 @@ export const TopBar = styled.div`
   }
 
   @media (max-width: 480px) {
-    line-height: 30px;
+    line-height: 25px;
 
     hr {
-      margin-left: calc((100% - 100vw) / 2);
+      display: none;
-      margin-right: calc((100% - 100vw) / 2);
     }
 
     #catalog-button-desktop {
@@ -1535,32 +1535,11 @@ ${({ selectedStyle }) => {
 `;
 
 export const BoardForm = styled.div`
-  .file {
-    display: block;
-  }
-
-  .file-text {
-    max-width: 600px;
-    white-space: nowrap;
-  }
-
-  .fileText a {
-    text-decoration: underline;
-  }
-
-  .file-thumb {
-    float: left;
-    margin: 3px 20px 5px 20px;
-  }
-
-  .file-thumb img {
-    border: none;
-    float: left;
-    max-width: 250px;
-    max-height: 250px;
-  }
-
   @media (min-width: 480px) {
+    .thread-mobile {
+      display: none;
+    }
+
     .post-info {
       margin: 3px;
       display: block;
@@ -1573,6 +1552,10 @@ export const BoardForm = styled.div`
   }
 
   @media (max-width: 480px) {
+    .thread {
+      display: none;
+    }
+
     hr {
       margin-left: calc((100% - 100vw) / 2);
       margin-right: calc((100% - 100vw) / 2);
@@ -1593,6 +1576,204 @@ export const BoardForm = styled.div`
     }
   }
 
+  .file {
+    display: block;
+
+    .file-text {
+      max-width: 600px;
+      white-space: nowrap;
+    }
+  
+    .fileText a {
+      text-decoration: underline;
+    }
+  
+    .file-thumb {
+      float: left;
+      margin: 3px 20px 5px 20px;
+    }
+  
+    .file-thumb img {
+      border: none;
+      float: left;
+      max-width: 250px;
+      max-height: 250px;
+    }
+  }
+
+  .thread-mobile {
+    border-top: none;
+    margin: 0;
+    clear: both;
+
+    hr {
+      margin-top: 30px;
+      margin-bottom: 30px;
+    }
+
+    .op-container {
+      margin: 0 -5px;
+      padding: 5px;
+      display: block;
+      overflow: hidden;
+
+      .op {
+        display: inline;
+        margin: 4px 0;
+        overflow: hidden;
+      }
+  
+      .post-info-mobile {
+        overflow: hidden;
+        padding: 5px;
+        margin: -5px -6px -5px -5px;
+        display: block;
+        clear: left;
+      }
+  
+      .post-menu-button-mobile {
+        text-decoration: none;
+        line-height: 1em;
+        width: 1em;
+        text-align: center;
+        outline: none;
+        transform: rotate(90deg);
+        margin: 4px -5px 0 4px !important;
+        float: left;
+        font-weight: 700;
+        opacity: 1 !important;
+        height: .5em !important;
+        font-size: 16px;
+      }
+  
+      .name-block-mobile {
+        clear: none;
+        float: left;
+  
+        .subject-mobile {
+          display: block;
+        }
+      }
+
+      .date-time-mobile {
+        float: right;
+        text-align: right;
+      }
+  
+      .file-mobile {
+        display: block;
+  
+        .file-thumb-mobile {
+          margin-left: 10px !important;
+          margin-right: 10px !important;
+          text-decoration: none;
+          float: left;
+          margin-bottom: 5px;
+          margin-top: 15px;
+        }
+  
+        .file-info-mobile {
+          padding-top: 5px;
+          text-align: center;
+          text-decoration: none;
+          display: block !important;
+          clear: left !important;
+        }
+      }
+  
+      img {
+        border: none;
+        float: left;
+        max-width: 100px;
+        max-height: 100px;
+        object-fit: scale-down;
+      }
+  
+      blockquote {
+        padding-top: 5px;
+        display: block;
+        margin: 10px !important;
+      }
+  
+      .post-link-mobile {
+        clear: both !important;
+        padding: 5px;
+        overflow: hidden;
+        margin: -5px;
+        display: block !important;
+      }
+  
+      .info-mobile {
+        margin-top: 8px;
+        float: left;
+      }
+  
+      .button-mobile {
+        float: right;
+        border-radius: 3px;
+        padding: 6px 10px 5px;
+        user-select: none;
+        text-decoration: none;
+      }
+    }
+
+    .reply-container {
+      margin: 7px 2px 0;
+      padding-left: 0;
+
+      .post-reply {
+        margin-top: 0 !important;
+        width: 100%;
+        padding: 0 !important;
+        display: table;
+        overflow: hidden;
+      }
+
+      .post-info-mobile {
+        margin: 0;
+        overflow: hidden;
+        padding: 5px;
+        display: block !important;
+        clear: left !important;
+
+        .post-menu-button-mobile {
+          text-decoration: none;
+          line-height: 1em;
+          width: 1em;
+          text-align: center;
+          outline: none;
+          transform: rotate(90deg);
+          margin: 4px -5px 0 4px !important;
+          float: left;
+          font-weight: 700;
+          opacity: 1 !important;
+          height: .5em !important;
+          font-size: 16px;
+        }
+
+        .name-block-mobile {
+          clear: none;
+          float: left;
+        }
+
+        .date-time-mobile {
+          float: right;
+          text-align: right;
+
+          a {
+            text-decoration: none;
+          }
+        }
+      }
+
+      blockquote {
+        display: block;
+        margin: 10px !important;
+      }
+    }
+
+  }
+
   ${({ selectedStyle }) => {
     switch (selectedStyle) {
       case 'Yotsuba':
@@ -2465,4 +2646,638 @@ export const BoardForm = styled.div`
       
     }
   }}
+
+${({ selectedStyle }) => {
+    switch (selectedStyle) {
+      case 'Yotsuba':
+        return `
+          .op-container {
+            background-color: #f5e9e1;
+            border: 1px solid #d9bfb7 !important;
+
+            .post-info-mobile {
+              border-bottom: 1px solid #d9bfb7;
+              background-color: #ead6ca;
+            }
+  
+            .post-menu-button-mobile {
+              color: #00e;
+            }
+  
+            .name-mobile {
+              color: #117743;
+              font-weight: 700;
+            }
+  
+            .subject-mobile {
+              color: #cc1105;
+              font-weight: 700;
+            }
+  
+            .date-time-mobile {
+              color: maroon;
+            }
+  
+            .file-thumb-mobile {
+              color: #00e !important;
+            }
+  
+            .file-info-mobile {
+              color: #707070;
+              font-size: 9pt !important;
+            }
+  
+            blockquote {
+              font-size: 11pt;
+            }
+  
+            .post-link-mobile {
+              background-color: #ead6ca;
+              border-top: 1px solid #d9bfb7;
+            }
+  
+            .info-mobile {
+              color: #800;
+            }
+  
+            .button-mobile {
+              color: #800;
+              font-weight: 700;
+              background-color: #f0e0d6;
+              border: 1px solid #c0a69d;
+              background-image: url(/assets/buttonfade.png);
+              background-repeat: repeat-x;
+              text-decoration: none;
+            }
+          }
+
+          .reply-container {
+            background-color: #f0e0d6;
+
+            .post-reply {
+              background-color: #f0e0d6;
+              border: 1px solid #d9bfb7;
+            }
+
+            .post-info-mobile {
+              border-bottom: 1px solid #d9bfb7;
+              background-color: #ead6ca;
+
+              .post-menu-button-mobile {
+                color: #00e;
+              }
+
+              .name-mobile {
+                color: #117743;
+                font-weight: 700;
+              }
+
+              .date-time-mobile {
+                color: maroon;
+
+                a {
+                  color: maroon;
+                }
+              }
+            }
+
+            blockquote {
+              font-size: 11pt;
+
+              .quotelink-mobile {
+                color: navy !important;
+                text-decoration: underline;
+              }
+
+              .quotelink-mobile:hover {
+                color: red !important;
+              }
+            }
+          }
+        }`;
+
+      case 'Yotsuba B':
+        return `
+          .op-container {
+            background-color: #d6daf0;
+            border: 1px solid #b7c5d9 !important;
+
+            .post-info-mobile {
+              border-bottom: 1px solid #b7c5d9;
+              background-color: #c9cde8;
+            }
+  
+            .post-menu-button-mobile {
+              color: #34345c;
+            }
+  
+            .name-mobile {
+              color: #117743;
+              font-weight: 700;
+            }
+  
+            .subject-mobile {
+              color: #0f0c5d;
+              font-weight: 700;
+            }
+  
+            .date-time-mobile {
+              color: #000;
+            }
+  
+            .file-thumb-mobile {
+              color: #81a2be !important;
+            }
+  
+            .file-info-mobile {
+              color: #707070;
+              font-size: 9pt !important;
+            }
+  
+            blockquote {
+              font-size: 11pt;
+            }
+  
+            .post-link-mobile {
+              background-color: #c9cde8;
+              border-top: 1px solid #b7c5d9;
+            }
+  
+            .info-mobile {
+              color: #34345c;
+            }
+  
+            .button-mobile {
+              color: #34345c;
+              font-weight: 700;
+              background-color: #d6daf0;
+              border: 1px solid #b7c5d9;
+              background-image: url(/assets/buttonfade-blue.png);
+              background-repeat: repeat-x;
+              text-decoration: none;
+            }
+          }
+
+          .reply-container {
+            background-color: #d6daf0;
+
+            .post-reply {
+              background-color: #d6daf0;
+              border: 1px solid #b7c5d9;
+            }
+
+            .post-info-mobile {
+              border-bottom: 1px solid #b7c5d9;
+              background-color: #c9cde8;
+
+              .post-menu-button-mobile {
+                color: #34345c;
+              }
+
+              .name-mobile {
+                color: #117743;
+                font-weight: 700;
+              }
+
+              .date-time-mobile {
+                color: #000;
+
+                a {
+                  color: #000;
+                }
+              }
+            }
+
+            blockquote {
+              font-size: 11pt;
+            }
+          }
+        }`;
+
+      case 'Futaba':
+        return `
+          .op-container {
+            background-color: #f5e9e1;
+            border: 1px solid #d9bfb7 !important;
+
+            .post-info-mobile {
+              border-bottom: 1px solid #d9bfb7;
+              background-color: #ead6ca;
+            }
+  
+            .post-menu-button-mobile {
+              color: #00e;
+            }
+  
+            .name-mobile {
+              color: #117743;
+              font-weight: 700;
+            }
+  
+            .subject-mobile {
+              color: #cc1105;
+              font-weight: 700;
+            }
+  
+            .date-time-mobile {
+              color: maroon;
+            }
+  
+            .file-thumb-mobile {
+              color: #00e !important;
+            }
+  
+            .file-info-mobile {
+              color: #707070;
+              font-size: 9pt !important;
+            }
+  
+            blockquote {
+              font-size: 12pt;
+            }
+  
+            .post-link-mobile {
+              background-color: #ead6ca;
+              border-top: 1px solid #d9bfb7;
+            }
+  
+            .info-mobile {
+              color: #800;
+            }
+  
+            .button-mobile {
+              color: #800;
+              font-weight: 700;
+              background-color: #f0e0d6;
+              border: 1px solid #c0a69d;
+              background-image: url(/assets/buttonfade.png);
+              background-repeat: repeat-x;
+              text-decoration: none;
+            }
+          }
+
+          .reply-container {
+            background-color: #f0e0d6;
+
+            .post-reply {
+              background-color: #f0e0d6;
+              border: 1px solid #d9bfb7;
+            }
+
+            .post-info-mobile {
+              border-bottom: 1px solid #d9bfb7;
+              background-color: #ead6ca;
+
+              .post-menu-button-mobile {
+                color: #00e;
+              }
+
+              .name-mobile {
+                color: #117743;
+                font-weight: 700;
+              }
+
+              .date-time-mobile {
+                color: maroon;
+
+                a {
+                  color: maroon;
+                }
+              }
+            }
+
+            blockquote {
+              font-size: 12pt;
+
+              .quotelink-mobile {
+                color: navy !important;
+                text-decoration: underline;
+              }
+
+              .quotelink-mobile:hover {
+                color: red !important;
+              }
+            }
+          }
+        }`;
+
+      case 'Burichan':
+        return `
+          .op-container {
+            background-color: #d6daf0;
+            border: 1px solid #b7c5d9 !important;
+
+            .post-info-mobile {
+              border-bottom: 1px solid #b7c5d9;
+              background-color: #c9cde8;
+            }
+  
+            .post-menu-button-mobile {
+              color: #34345c;
+            }
+  
+            .name-mobile {
+              color: #117743;
+              font-weight: 700;
+            }
+  
+            .subject-mobile {
+              color: #0f0c5d;
+              font-weight: 700;
+            }
+  
+            .date-time-mobile {
+              color: #000;
+            }
+  
+            .file-thumb-mobile {
+              color: #81a2be !important;
+            }
+  
+            .file-info-mobile {
+              color: #707070;
+              font-size: 9pt !important;
+            }
+  
+            blockquote {
+              font-size: 12pt;
+            }
+  
+            .post-link-mobile {
+              background-color: #c9cde8;
+              border-top: 1px solid #b7c5d9;
+            }
+  
+            .info-mobile {
+              color: #34345c;
+            }
+  
+            .button-mobile {
+              color: #34345c;
+              font-weight: 700;
+              background-color: #d6daf0;
+              border: 1px solid #b7c5d9;
+              background-image: url(/assets/buttonfade-blue.png);
+              background-repeat: repeat-x;
+              text-decoration: none;
+            }
+          }
+
+          .reply-container {
+            background-color: #d6daf0;
+
+            .post-reply {
+              background-color: #d6daf0;
+              border: 1px solid #b7c5d9;
+            }
+
+            .post-info-mobile {
+              border-bottom: 1px solid #b7c5d9;
+              background-color: #c9cde8;
+
+              .post-menu-button-mobile {
+                color: #34345c;
+              }
+
+              .name-mobile {
+                color: #117743;
+                font-weight: 700;
+              }
+
+              .date-time-mobile {
+                color: #000;
+
+                a {
+                  color: #000;
+                }
+              }
+            }
+
+            blockquote {
+              font-size: 12pt;
+            }
+          }
+        }`;
+
+      case 'Tomorrow':
+        return `
+          .op-container {
+            background-color: #282A2E;
+            border: 1px solid #2D2F33 !important;
+
+            .post-info-mobile {
+              border-bottom: 1px solid #2D2F33;
+              background-color: #212326;
+            }
+  
+            .post-menu-button-mobile {
+              color: #81A2BE;
+            }
+  
+            .name-mobile {
+              color: #117743;
+              font-weight: 700;
+            }
+
+            .poster-address-mobile {
+              color: #707070;
+            }
+  
+            .subject-mobile {
+              color: #B294BB;
+              font-weight: 700;
+            }
+  
+            .date-time-mobile {
+              color: #707070;
+            }
+  
+            .file-thumb-mobile {
+              color: #81A2BE !important;
+            }
+  
+            .file-info-mobile {
+              color: #707070;
+              font-size: 9pt !important;
+            }
+  
+            blockquote {
+              color: #C5C8C6;
+              font-size: 11pt;
+            }
+  
+            .post-link-mobile {
+              background-color: #212326;
+              border-top: 1px solid #2D2F33;
+            }
+  
+            .info-mobile {
+              color: #707070;
+            }
+  
+            .button-mobile {
+              color: #707070;
+              font-weight: 700;
+              background-color: rgb(27,28,30);
+              border: 1px solid #282A2E;
+              background-image: url(/assets/buttonfade-dark.png);
+              background-repeat: repeat-x;
+              text-decoration: none;
+            }
+          }
+
+          .reply-container {
+            background-color: #f0e0d6;
+            color: #C5C8C6;
+
+            .post-reply {
+              background-color: #282A2E;
+              border: 1px solid #2D2F33;
+            }
+
+            .post-info-mobile {
+              border-bottom: 1px solid #2D2F33;
+              background-color: #212326;
+
+              .post-menu-button-mobile {
+                color: #81A2BE;
+              }
+
+              .name-mobile {
+                color: #117743;
+                font-weight: 700;
+              }
+
+              .date-time-mobile {
+                color: #707070;
+
+                a {
+                  color: #707070;
+                }
+              }
+            }
+
+            blockquote {
+              font-size: 11pt;
+            }
+
+            .quotelink-mobile {
+              color: #81A2BE;
+            }
+
+            .quotelink-mobile:hover {
+              color: #5F89AC;
+            }
+          }
+        }`;
+
+      case 'Photon':
+        return `
+          .op-container {
+            background-color: #eee;
+            border: 1px solid #ccc !important;
+
+            .post-info-mobile {
+              border-bottom: 1px solid #ccc;
+              background-color: #ddd;
+            }
+  
+            .post-menu-button-mobile {
+              color: #f60;
+            }
+  
+            .name-mobile {
+              color: #004a99;
+              font-weight: 700;
+            }
+  
+            .subject-mobile {
+              color: #111;
+              font-weight: 700;
+            }
+  
+            .date-time-mobile {
+              color: #333;
+            }
+  
+            .file-thumb-mobile {
+              color: #f60 !important;
+            }
+  
+            .file-info-mobile {
+              color: #707070;
+              font-size: 9pt !important;
+            }
+  
+            blockquote {
+              font-size: 11pt;
+            }
+  
+            .post-link-mobile {
+              background-color: #ddd;
+              border-top: 1px solid #ccc;
+            }
+  
+            .info-mobile {
+              color: #333;
+            }
+  
+            .button-mobile {
+              background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(224, 224, 224, 1) 100%);
+              border: 1px solid #ccc;
+              color: #333;
+              border-radius: 3px 3px 3px 3px;
+              font-weight: 700;
+              padding: 6px 10px 5px;
+              background-repeat: repeat-x;
+              cursor: pointer;
+            }
+          }
+
+          .reply-container {
+            background-color: #eee;
+
+            .post-reply {
+              background-color: #eee;
+              border: 1px solid #ccc;
+            }
+
+            .post-info-mobile {
+              border-bottom: 1px solid #ccc;
+              background-color: #ddd;
+
+              .post-menu-button-mobile {
+                color: #f60;
+              }
+
+              .name-mobile {
+                color: #004a99;
+                font-weight: 700;
+              }
+
+              .date-time-mobile {
+                color: #333;
+
+                a {
+                  color: #333;
+                }
+              }
+            }
+
+            blockquote {
+              font-size: 11pt;
+            }
+
+            .quotelink-mobile {
+              color: #f60;
+            }
+
+            .quotelink-mobile:hover {
+              color: #ff3300;
+            }
+          }
+        }`;
+      
+    }
+  }}
 `;