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 ( <>
-

Reddit, but it's all cats

+

Reddit, but it's all cats

+

Cat Reddit

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}) { {subreddit ? 'r/' + subreddit : ''} - {ups ?

{ups} upvotes

: null} -

posted at {time ? (localTime + ' on ' + localDate) : '...?'}

+ {ups ?

{ups} upvotes

: null} +

posted at {time ? (localTime + ' on ' + localDate) : '...?'}