responsive design for mobile

src/App.css

@@ -19,7 +19,7 @@
 .App {
   display: flex;
   flex-direction: column;
-  background-color: #FFE9F3;
+  background-color: #d1aabc;
   align-items: center;
   margin: 0;
   padding: 0;
@@ -31,6 +31,10 @@
   height: 100vh;
 }
 
+.mobile-title {
+  display: none;
+}
+
 /* Navbar */
 
 .navbar {
@@ -73,6 +77,7 @@
 .sidebar-button {
   border: transparent;
   background-color: orchid;
+  box-shadow: 1px 1px rgb(111, 30, 151);
   text-align: center;
   height: 3.5rem;
   border-radius: 15px;
@@ -114,6 +119,7 @@
   top: 5rem;
   padding: 1.5rem;
   transition: right 0.6s ease-out;
+  z-index: 9;
 }
 
 /* Feed */
@@ -221,4 +227,48 @@
     width: 2rem;
     margin: 0 0.4rem;
   }
+}
+
+@media only screen and (max-width: 800px) {
+  .navbar {
+    position: static;
+  }
+
+  .desktop-title {
+    display: none;
+  }
+
+  .mobile-title {
+    display: inline-flex;
+  }
+
+  .nav-searchbar {
+    width: 12rem;
+    right: 12rem;
+  }
+
+  .sidebar-button {
+    position: fixed;
+    right: 0;
+    top: 0.6rem;
+    width: 4.5rem;
+  }
+
+  .content-container {
+    top: 0;
+  }
+
+  .feed {
+    width: 95vw;
+  }
+
+  .page-handling {
+    width: 15rem;
+    height: 2rem;
+  }
+
+  .page-handling button {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
 }

src/features/navbar/Navbar.js

@@ -12,7 +12,8 @@ export default function Navbar() {
     return (
         <>
         <div className="navbar">
-            <h1 className="nav-title">Reddit, but it's all cats</h1>
+            <h1 className="nav-title desktop-title">Reddit, but it's all cats</h1>
+            <h1 className="nav-title mobile-title">Cat Reddit</h1>
             <SearchBar />
             <button className="sidebar-button" onClick={handleCollapse}>Sidebar</button>
         </div>

src/features/posts/Post.css

@@ -6,8 +6,10 @@
     width: 75%;
     padding: 1rem 2rem;
     border-radius: 10px;
-    background-color: #bbd8d3;
+    background-color: #bfbbd8;
+    border: 1px solid rgb(250, 206, 248);
     margin: 3rem 0;
+    z-index: 5;
 }
 
 /* Title */
@@ -103,6 +105,10 @@ img, video {
     }
 
     .post-metadata * {
-        max-width: 15%;
+        max-width: 30%;
+    }
+
+    .hide-mobile {
+        display: none;
     }
 }

src/features/posts/Post.js

@@ -113,8 +113,8 @@ export default function Post({data, key}) {
                 <a className="post-subreddit" href={`https://www.reddit.com/r/${subreddit}`}>
                     {subreddit ? 'r/' + subreddit  : ''}
                 </a>
-                {ups ? <p>{ups} upvotes</p> : null}
+                {ups ? <p className="hide-mobile">{ups} upvotes</p> : null}
-                <p className="time-posted">posted at {time ? (localTime + ' on ' + localDate) : '...?'}</p>
+                <p className="time-posted hide-mobile">posted at {time ? (localTime + ' on ' + localDate) : '...?'}</p>
                 <button className="num-comments" onClick={handleClick}>
                     {comments ? visible + comments + ' comments' : 'no comments'}
                 </button>