site restructuring

- navbar won't hide content when clicking headers and stuff
- using grid layout

source/src/App.tsx

@@ -27,10 +27,20 @@ const IENotSupported = styled.p`
 	font-family: ${theming.font.regular};
 `
 
-const StyledContentContainer = styled.div`
+const StyledScrollableArea = styled.div`
-	flex: 1 1 auto;
+	height: calc(100vh - 4rem);
+
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+
+	overflow-y: scroll;
+	overflow-x: hidden;
+`
+
+const StyedContentContainer = styled.div`
+	margin-top: 3rem;
 	margin-bottom: 3rem;
-	margin-top: 5rem;
 `
 
 const App = () => {
@@ -81,27 +91,28 @@ const App = () => {
 				<meta property="og:description" content="developomp's blog" />
 				<meta property="og:url" content={process.env.PUBLIC_URL} />
 			</Helmet>
-
 			<GlobalStyle />
 
 			<Navbar />
-			<StyledContentContainer>
+			<StyledScrollableArea>
-				{isLoading ? (
+				<StyedContentContainer>
-					<Loading />
+					{isLoading ? (
-				) : (
+						<Loading />
-					<Routes>
+					) : (
-						<Route
+						<Routes>
-							path="/"
+							<Route
-							element={<PostList howMany={5} title="Home" />}
+								path="/"
-						/>
+								element={<PostList howMany={5} title="Home" />}
-						<Route path="/loading" element={<Loading />} />
+							/>
-						<Route path="/search" element={<Search />} />
+							<Route path="/loading" element={<Loading />} />
-						<Route path="/404" element={<NotFound />} />
+							<Route path="/search" element={<Search />} />
-						<Route path="/*" element={<Page />} />
+							<Route path="/404" element={<NotFound />} />
-					</Routes>
+							<Route path="/*" element={<Page />} />
-				)}
+						</Routes>
-			</StyledContentContainer>
+					)}
-			<Footer />
+				</StyedContentContainer>
+				<Footer />
+			</StyledScrollableArea>
 		</ThemeProvider>
 	)
 }

source/src/components/Footer.tsx

@@ -7,7 +7,10 @@ import theming from "../styles/theming"
 
 const StyledFooter = styled.footer`
 	display: flex;
-	height: 7.77rem; /* congratulation. You've found the lucky 777 */
+
+	// congratulation. You've found the lucky 7s
+	min-height: 7.77rem;
+	max-height: 7.77rem;
 
 	align-items: center;
 	justify-content: center;

source/src/components/MainContent.tsx

@@ -4,7 +4,6 @@ import theming from "../styles/theming"
 import Card from "./Card"
 
 export const mainContentCSS = css`
-	margin-top: 3rem;
 	width: 50%;
 
 	@media screen and (max-width: ${theming.size.screen_size1}) {

source/src/components/Navbar.tsx

@@ -16,7 +16,7 @@ import NavbarData from "../data/NavbarData"
 const StyledNav = styled.nav`
 	/* set z index to arbitrarily high value to prevent other components from drawing over the navbar */
 	z-index: 9999;
-	position: fixed;
+	max-height: 4rem;
 	width: 100%;
 
 	background-color: ${(props) =>

source/src/pages/Page/index.tsx

@@ -20,10 +20,6 @@ import { useEffect } from "react"
 
 const map: Map = _map
 
-const StyledPage = styled(MainContent)`
-	padding-top: 0;
-`
-
 const StyledTitle = styled.h1`
 	margin-bottom: 1rem;
 `
@@ -134,7 +130,7 @@ const Page = () => {
 				/>
 			</Helmet>
 
-			<StyledPage>
+			<MainContent>
 				{isSeries ? (
 					<NextPrevButtons
 						prevURL={seriesData?.prev}
@@ -176,7 +172,7 @@ const Page = () => {
 						__html: fetchedPage.content,
 					}}
 				/>
-			</StyledPage>
+			</MainContent>
 		</>
 	)
 }

source/src/pages/Search/index.tsx

@@ -46,6 +46,7 @@ const defaultDateRange = [
 
 const StyledSearch = styled(MainContent)`
 	text-align: center;
+	margin-bottom: 2rem;
 `
 
 const StyledSearchContainer = styled.div`
@@ -277,6 +278,7 @@ const Search = () => {
 					</StyledSearchControlContainer>
 				</StyledSearchContainer>
 			</StyledSearch>
+
 			{postCards}
 		</>
 	)

source/src/styles/globalStyle.tsx

@@ -209,15 +209,11 @@ const globalStyle = css`
 	${headerCSS}
 	${markCSS}
 	${katexCSS}
-
+	
-	body {
-		overflow-x: hidden;
-		overflow-y: scroll;
-	}
-
 	html,
 	body,
 	#root {
+		overflow: hidden;
 		min-height: 100vh;
 		margin: 0;
 		display: flex;
@@ -239,6 +235,14 @@ const globalStyle = css`
 		text-rendering: optimizeLegibility;
 	}
 
+	#root {
+		display: grid;
+		grid-template-rows: 4rem / auto;
+
+		height: 100vh;
+		width: 100vw;
+	}
+
 	a {
 		text-decoration: none;
 		color: ${theming.color.linkColor};