add mobile button style

src/components/board-banner/board-banner.module.css

@@ -31,4 +31,11 @@
   border: var(--hr-border, revert);
   border-top: var(--hr-border-top, revert);
   height: var(--hr-height, revert);
-}
+}
+
+
+@media (max-width: 640px) {
+  .bannerCnt {
+    padding-top: 35px;
+  }
+ }

src/components/board-stats/board-stats.module.css

@@ -40,4 +40,11 @@
 
 .lowercase {
   text-transform: lowercase;
+}
+
+
+@media (max-width: 640px) {
+  .content {
+    display: none;
+  }
 }

src/components/post-form/post-form.module.css

@@ -1,15 +1,48 @@
-.togglePostForm {
+.postFormButtonDesktop {
   font-size: var(--post-form-toggle-font-size);
   font-weight: var(--post-form-toggle-font-weight);
   text-align: center;
 }
 
-.togglePostForm span {
+.postFormButtonDesktop span {
   color: var(--button-text-color);
   text-decoration: var(--button-text-decoration);
 }
 
-.togglePostForm span:hover {
+.postFormButtonDesktop span:hover {
   cursor: pointer;
   color: var(--button-text-color-hover);
+}
+
+.postFormButtonMobile {
+  text-align: center;
+  padding-top: 5px;
+}
+
+.postFormButtonMobile span {
+  font-size: var(--button-font-size-mobile);
+  font-weight: var(--button-font-weight-mobile);
+  font-family: var(--button-font-family-mobile);
+  border-radius: 3px;
+  padding: 5px 10px 5px;
+  background-color: var(--button-background-color-mobile);
+  color: var(--button-text-color-mobile);
+  border: var(--button-border-mobile);
+  background-image: var(--button-background-image-mobile);
+  background-repeat: var(--button-background-repeat-mobile);
+  text-decoration: var(--button-text-decoration-mobile);
+  user-select: none;
+  display: inline-block;
+}
+
+@media (max-width: 640px) {
+  .postFormButtonDesktop {
+    display: none;
+  }
+}
+
+@media (min-width: 641px) {
+  .postFormButtonMobile {
+    display: none;
+  }
 }

src/components/post-form/post-form.tsx

@@ -9,9 +9,14 @@ const PostForm = ({ address }: PostFormProps) => {
   const { t } = useTranslation();
 
   return (
-    <div className={styles.togglePostForm}>
+    <>
-      [<span>{t('start_new_thread')}</span>]
+      <div className={styles.postFormButtonDesktop}>
-    </div>
+        [<span>{t('start_new_thread')}</span>]
+      </div>
+      <div className={styles.postFormButtonMobile}>
+        <span>{t('start_new_thread')}</span>
+      </div>
+    </>
   );
 };
 

src/themes.css

@@ -17,6 +17,10 @@
   --box-border-color: #800;
   --button-text-color: #00e;
   --button-text-color-hover: red;
+  --button-font-size-mobile: 10pt;
+  --button-font-weight-mobile: 700;
+  --button-background-image-mobile: url("/public/assets/buttons/buttonfade.png");
+  --button-border-mobile: 1px solid #c0a69d;
   --color1: #800;
   --color2: #fca;
   --color3: #fed;