close #25 and #26

source/src/App.tsx

@@ -27,20 +27,10 @@ const IENotSupported = styled.p`
 	font-family: ${theming.font.regular};
 `
 
-const StyledScrollableArea = styled.div`
-	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;
+const StyledContentContainer = styled.div`
+	flex: 1 1 auto;
 	margin-bottom: 3rem;
+	margin-top: 5rem;
 `
 
 const App = () => {
@@ -91,28 +81,27 @@ const App = () => {
 				<meta property="og:description" content="developomp's blog" />
 				<meta property="og:url" content={process.env.PUBLIC_URL} />
 			</Helmet>
+
 			<GlobalStyle />
 
 			<Navbar />
-			<StyledScrollableArea>
-				<StyedContentContainer>
-					{isLoading ? (
-						<Loading />
-					) : (
-						<Routes>
-							<Route
-								path="/"
-								element={<PostList howMany={5} title="Home" />}
-							/>
-							<Route path="/loading" element={<Loading />} />
-							<Route path="/search" element={<Search />} />
-							<Route path="/404" element={<NotFound />} />
-							<Route path="/*" element={<Page />} />
-						</Routes>
-					)}
-				</StyedContentContainer>
-				<Footer />
-			</StyledScrollableArea>
+			<StyledContentContainer>
+				{isLoading ? (
+					<Loading />
+				) : (
+					<Routes>
+						<Route
+							path="/"
+							element={<PostList howMany={5} title="Home" />}
+						/>
+						<Route path="/loading" element={<Loading />} />
+						<Route path="/search" element={<Search />} />
+						<Route path="/404" element={<NotFound />} />
+						<Route path="/*" element={<Page />} />
+					</Routes>
+				)}
+			</StyledContentContainer>
+			<Footer />
 		</ThemeProvider>
 	)
 }

source/src/components/MainContent.tsx

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

source/src/components/Navbar.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react"
 import styled from "styled-components"
 import { Link } from "react-router-dom"
 import ReactTooltip from "react-tooltip"
@@ -15,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;
-	max-height: 4rem;
+	position: fixed;
 	width: 100%;
 
 	background-color: ${(props) =>
@@ -65,6 +66,42 @@ const StyledLink = styled(Link)`
 	margin: 0 0.2rem 0 0.2rem;
 `
 
+const StyledReadProgress = styled.div`
+	height: 2px;
+
+	background-color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
+			light: theming.light.color1,
+			dark: theming.dark.color1,
+		})};
+`
+
+const ReadProgress = () => {
+	const [scroll, setScroll] = useState(0)
+
+	useEffect(() => {
+		const st = "scrollTop"
+		const sh = "scrollHeight"
+		const scrollHandler = () => {
+			const h = document.documentElement
+			const b = document.body
+
+			// https://stackoverflow.com/a/8028584/12979111
+			setScroll(
+				((h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight)) * 100
+			)
+		}
+
+		window.addEventListener("scroll", scrollHandler)
+
+		return () => {
+			window.removeEventListener("scroll", scrollHandler)
+		}
+	}, [])
+
+	return <StyledReadProgress style={{ width: `${scroll}%` }} />
+}
+
 const Navbar = () => {
 	return (
 		<StyledNav>
@@ -101,6 +138,7 @@ const Navbar = () => {
 
 				<Sidebar />
 			</StyledContainer>
+			<ReadProgress />
 		</StyledNav>
 	)
 }

source/src/styles/globalStyle.tsx

@@ -210,10 +210,14 @@ const globalStyle = css`
 	${markCSS}
 	${katexCSS}
 	
+	body {
+		overflow-x: hidden;
+		overflow-y: scroll;
+	}
+
 	html,
 	body,
 	#root {
-		overflow: hidden;
 		min-height: 100vh;
 		margin: 0;
 		display: flex;
@@ -235,19 +239,19 @@ 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};
 	}
 
+	// header anchor offset to compensate for navbar
+	:target:before {
+		content: "";
+		display: block;
+		height: 4rem;
+		margin: 4rem 0 0;
+	}
+
 	hr {
 		border: 0;
 		border-bottom: 1px solid;
@@ -255,6 +259,7 @@ const globalStyle = css`
 
 	* {
 		transition: color 0.1s linear;
+		scroll-behavior: smooth;
 	}
 `