From dda91e5c35316667a647c6ec8bbea4d116cf0202 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Sun, 30 Jan 2022 14:50:59 -0600
Subject: [PATCH 1/3] beginning responsive design, 1050px

---
 src/App.css                | 57 ++++++++++++++++++++++++++++++++++----
 src/features/posts/Feed.js |  4 +--
 2 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/src/App.css b/src/App.css
index 95c0ed7..d786894 100644
--- a/src/App.css
+++ b/src/App.css
@@ -132,12 +132,6 @@
   width: 90vw;
 }
 
-.about-the-app {
-  display: hidden;
-  flex-direction: column;
-  align-items: center;
-}
-
 .page-handling {
   display: inline-flex;
   flex-direction: row;
@@ -176,4 +170,55 @@
   margin-top: 5rem;
   position: relative;
   bottom: 6rem;
+}
+
+/* Media queries (tablet) */
+
+@media only screen and (max-width: 1050px) {
+  /* Navbar */
+
+  .navbar {
+    height: 4rem;
+  }
+
+  .nav-title {
+    font-size: 1rem;
+  }
+
+  .nav-searchbar {
+    width: 25rem;
+    right: 2rem;
+  }
+
+  /* Sidebar */
+
+  .sidebar-button {
+    height: 2.6rem;
+    width: 5rem;
+  }
+
+  .sidebar {
+    top: 4rem;
+  }
+
+  .sidebar-hidden {
+    top: 4rem;
+  }
+
+  /* Feed */
+
+  .content-container {
+    top: 4rem;
+  }
+
+  .page-handling {
+    height: 3rem;
+    padding: 0.5rem;
+  }
+
+  .page-handling button {
+    height: 2rem;
+    width: 2rem;
+    margin: 0 0.4rem;
+  }
 }
\ No newline at end of file
diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js
index b23f3d5..951823b 100644
--- a/src/features/posts/Feed.js
+++ b/src/features/posts/Feed.js
@@ -161,7 +161,7 @@ export default function Feed() {
 
         <div className="page-handling" id="top-page-handling">
             <button className="decrement" onClick={handleDecrement}>-</button>
-            <p>Page {currentPage} of {feedPages.length ? feedPages.length : 'unknown'}</p>
+            <p>Page {currentPage + 1} of {feedPages.length ? (feedPages.length + 1) : 'unknown'}</p>
             <button className="increment" onClick={handleIncrement}>+</button>
         </div>
 
@@ -172,7 +172,7 @@ export default function Feed() {
 
         <div className="page-handling" id="bottom-page-handling">
             <button className="decrement" onClick={handleDecrement}>-</button>
-            <p>Page {currentPage} of {feedPages.length ? feedPages.length : 'unknown'}</p>
+            <p>Page {currentPage + 1} of {feedPages.length ? (feedPages.length + 1) : 'unknown'}</p>
             <button className="increment" onClick={handleIncrement}>+</button>
         </div>
 

From 5284452b1fc5cdba79413a5a437638d345c01b95 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Sun, 30 Jan 2022 15:07:56 -0600
Subject: [PATCH 2/3] added responsive design for posts

---
 src/features/posts/Post.css | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/features/posts/Post.css b/src/features/posts/Post.css
index 1a1ed32..41c01f6 100644
--- a/src/features/posts/Post.css
+++ b/src/features/posts/Post.css
@@ -43,6 +43,7 @@ img, video {
 }
 
 .post-metadata * {
+    display: inline-flex;
     background-color:rgb(250, 206, 248);
     border-color: transparent;
     text-decoration: none;
@@ -84,4 +85,24 @@ img, video {
 
 .comments-hidden {
     display: none;
+}
+
+/* Queries */
+
+@media only screen and (max-width: 1050px) {        /* for tablets */
+    img, video {
+        max-height: 25rem;
+    }
+    .title {
+        font-size: 1.5rem;
+    }
+    .post-metadata {
+        font-size: 0.8rem;
+        text-align: center;
+        text-overflow: ellipsis;
+    }
+
+    .post-metadata * {
+        max-width: 15%;
+    }
 }
\ No newline at end of file

From 5e674e8cf552727ae8e3db139cb9ea5fc010f6c9 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Sun, 30 Jan 2022 15:25:24 -0600
Subject: [PATCH 3/3] responsive design for mobile

---
 src/App.css                   | 52 ++++++++++++++++++++++++++++++++++-
 src/features/navbar/Navbar.js |  3 +-
 src/features/posts/Post.css   | 10 +++++--
 src/features/posts/Post.js    |  4 +--
 4 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/src/App.css b/src/App.css
index d786894..bb2cb7e 100644
--- a/src/App.css
+++ b/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;
+  }
 }
\ No newline at end of file
diff --git a/src/features/navbar/Navbar.js b/src/features/navbar/Navbar.js
index 7c15270..30bff4e 100644
--- a/src/features/navbar/Navbar.js
+++ b/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>
diff --git a/src/features/posts/Post.css b/src/features/posts/Post.css
index 41c01f6..4c88234 100644
--- a/src/features/posts/Post.css
+++ b/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;
     }
 }
\ No newline at end of file
diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js
index aaaea2a..23a4396 100644
--- a/src/features/posts/Post.js
+++ b/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}
-                <p className="time-posted">posted at {time ? (localTime + ' on ' + localDate) : '...?'}</p>
+                {ups ? <p className="hide-mobile">{ups} upvotes</p> : null}
+                <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>