add themes, home component, body css

src/views/home/home.module.css

@@ -1,3 +1,24 @@
-.test {
+.content {
+  color: var(--color);
   font-size: 20px;
+  width: 100%;
+  height: 100%;
+  text-align: left;
+  width: 57.69em;
+  min-width: 750px;
+}
+
+.logo img {
+  width: 300px;
+  height: 120px;
+}
+
+.logo {
+  margin: 0px auto;
+}
+
+@media (max-width: 768px) {
+  .content {
+    width: auto;
+  }
 }

src/views/home/home.tsx

@@ -1,7 +1,37 @@
 import styles from './home.module.css';
+import useTheme from '../../hooks/use-theme';
+import { Link } from 'react-router-dom';
+
+// TODO: remove theme selector for debugging
+const ThemeSettings = () => {
+  const [theme, setTheme] = useTheme();
+
+  return (
+    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
+      <option value='yotsuba'>yotsuba</option>
+      <option value='yotsuba-b'>yotsuba-b</option>
+    </select>
+  );
+};
 
 const Home = () => {
-  return <div className={styles.test}>plebchan</div>;
+  return (
+    <div className={styles.content}>
+      <Link to='/'>
+        <div className={styles.logo}>
+          <img alt='plebchan' src='/assets/logo/logo-transparent.png' />
+        </div>
+      </Link>
+      <div className={styles.searchBar}>
+        <input type='text' placeholder='Search' />
+        <button>Search</button>
+      </div>
+      <ThemeSettings />
+      <div className={styles.box}>
+        <div className={styles.boxBar}>What is plebchan?</div>
+      </div>
+    </div>
+  );
 };
 
 export default Home;