added larg screen support

source/src/App.tsx

@@ -65,6 +65,7 @@ body::-webkit-scrollbar-thumb {
 	display:inline-block;
 	flex: 1 1 auto;
 	margin-bottom: 3rem;
+	margin-top: 3rem;
 }
 
 code {

source/src/components/Navbar.tsx

@@ -14,11 +14,8 @@ import Sidebar from "./Sidebar"
 import ThemeToggleButton from "./ThemeToggleButton"
 
 const StyledNav = styled.nav`
-	display: flex;
-	align-items: center;
-	height: 2rem;
-	margin: 0;
-	padding: 1rem;
+	position: absolute;
+	width: 100%;
 	background-color: ${(props) =>
 		theming.theme(props.theme.currentTheme, {
 			light: theming.light.backgroundColor0,
@@ -29,8 +26,22 @@ const StyledNav = styled.nav`
 			light: theming.light.color0,
 			dark: theming.dark.color0,
 		})};
+`
+
+const StyledContainer = styled.div`
+	margin: 0 auto;
+	align-items: center;
+	display: flex;
+	height: 2rem;
+	padding: 1rem;
 	box-shadow: 0 4px 10px rgb(0 0 0 / 5%);
 
+	/* 20px is for scrollbar */
+	@media only screen and (min-width: calc(${theming.size
+			.screen_size2} + 20px)) {
+		width: calc(${theming.size.screen_size2} - 20px);
+	}
+
 	.right {
 		margin-left: auto;
 	}
@@ -59,9 +70,12 @@ export default class Navbar extends React.Component {
 	render() {
 		return (
 			<StyledNav>
+				<StyledContainer>
 					<Link to="/">
 						<StyledImg
-						src={process.env.PUBLIC_URL + "/icon/icon_circle.svg"}
+							src={
+								process.env.PUBLIC_URL + "/icon/icon_circle.svg"
+							}
 						/>
 					</Link>
 					<StyledNavLinks>
@@ -90,6 +104,7 @@ export default class Navbar extends React.Component {
 
 					<SearchBox />
 					<Sidebar />
+				</StyledContainer>
 			</StyledNav>
 		)
 	}

source/src/theming.ts

@@ -23,6 +23,7 @@ export default {
 		large: 0,
 		x_large: 0,
 		screen_size1: "1000px",
+		screen_size2: "1500px",
 	},
 	color: {
 		linkColor: "#3273dc",