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 ( <>
{ups} upvotes
: null} -posted at {time ? (localTime + ' on ' + localDate) : '...?'}
+ {ups ?{ups} upvotes
: null} +posted at {time ? (localTime + ' on ' + localDate) : '...?'}