update css variables naming

src/app.module.css

@@ -1,5 +1,5 @@
 .app {
-  background: var(--background-color) var(--background-fade) top center repeat-x;
+  background: var(--background-base-color) var(--background-pattern-image) top center repeat-x;
   font: 13px/1.231 arial, helvetica, sans-serif;
   z-index: 1;
   min-height: 100%;

src/themes.css

@@ -1,21 +1,25 @@
 :root .yotsuba {
-  --background-color: #ffe;
-  --background-fade: url("/public/assets/background-fade.png");
-  --color-primary: #800;
-  --text-primary: #fff;
-  --text-black: #000;
-  --text-white: #fff;
-  --text-background: #fff;
-  --text-link: #00f;
+  --background-base-color: #ffe;
+  --background-pattern-image: url("/public/assets/background-fade.png");
+  --primary-color: #800;
+  --secondary-color: #fca;
+  --text-color-on-primary: #fff;
+  --text-color-on-secondary: #800;
+  --text-color-standard: #000;
+  --text-color-inverse: #fff;
+  --background-text-color: #fff;
+  --link-text-color: #00f;
 }
 
 :root .yotsuba-b {
-  --background-color: #eef2ff;
-  --background-fade: url("/public/assets/background-fade-blue.png");
-  --color-primary: #98e;
-  --text-primary: #000;
-  --text-black: #000;
-  --text-white: #fff;
-  --text-background: #fff;
-  --text-link: #00f;
-}
+  --background-base-color: #eef2ff;
+  --background-pattern-image: url("/public/assets/background-fade-blue.png");
+  --primary-color: #98e;
+  --secondary-color: #98e;
+  --text-color-on-primary: #000;
+  --text-color-on-secondary: #000;
+  --text-color-standard: #000;
+  --text-color-inverse: #fff;
+  --background-text-color: #fff;
+  --link-text-color: #00f;
+}

src/views/home/home.module.css

@@ -1,5 +1,4 @@
 .content {
-  color: var(--color-primary);
   width: 100%;
   height: 100%;
   margin: auto;
@@ -30,20 +29,28 @@
 }
 
 .box {
-  background: var(--text-background);
-  color: var(--text-black);
+  background: var(--background-text-color);
+  color: var(--text-color-standard);
   border: 1px solid;
   margin-bottom: 0.5em;
   padding-bottom: 0.5em;
 }
 
 .boxBar {
-  background: var(--color-primary);
-  color: var(--text-primary);
   padding-left: 0.5em;
   line-height: 2em;
 }
 
+.primaryColorBar {
+  background: var(--primary-color);
+  color: var(--text-color-on-primary);
+}
+
+.secondaryColorBar {
+  background: var(--secondary-color);
+  color: var(--text-color-on-secondary);
+}
+
 .boxBar h2 {
   font-size: 131%;
   font-weight: 700;
@@ -58,7 +65,7 @@
 }
 
 .boxContent a, .boxContent a:visited{
-  color: var(--text-link);
+  color: var(--link-text-color);
 }
 
 .searchBar {
@@ -85,7 +92,7 @@
 
 .searchBar button {
   margin-left: 4px;
-  padding: 3px 10px;
+  padding: 3px 5px;
   display: inline-block;
   text-transform: capitalize;
   font-size: 14px;
@@ -98,6 +105,8 @@
 
 @media (max-width: 768px) {
   .content {
+    min-width: 0;
     width: auto;
+    padding: 10px;
   }
 }

src/views/home/home.tsx

@@ -59,7 +59,7 @@ const Home = () => {
         <button>{t('go')}</button>
       </div>
       <div className={styles.box}>
-        <div className={styles.boxBar}>
+        <div className={`${styles.boxBar} ${styles.primaryColorBar}`}>
           <h2>{t('what_is_plebchan')}</h2>
         </div>
         <div className={styles.boxContent}>
@@ -70,11 +70,17 @@ const Home = () => {
         </div>
       </div>
       <div className={styles.box}>
-        <div className={styles.boxBar}>
+        <div className={`${styles.boxBar} ${styles.secondaryColorBar}`}>
           <h2 className={styles.capitalize}>{t('boards')}</h2>
         </div>
         <div className={styles.boxContent}></div>
       </div>
+      <div className={styles.box}>
+        <div className={`${styles.boxBar} ${styles.secondaryColorBar}`}>
+          <h2 className={styles.capitalize}>{t('popular_threads')}</h2>
+        </div>
+        <div className={styles.boxContent}></div>
+      </div>
     </div>
   );
 };