made it easier to work with card and main content

converted card and main content card to a styled components

source/src/components/Card.tsx

@@ -0,0 +1,29 @@
+import styled, { css } from "styled-components"
+
+import theming from "../styles/theming"
+
+export const cardCSS = css`
+	margin: auto;
+	background-color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
+			light: "white",
+			dark: "#2F3136",
+		})};
+	padding: 2rem;
+	border-radius: 6px;
+	box-shadow: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
+			light: "0 4px 10px rgb(0 0 0 / 5%), 0 0 1px rgb(0 0 0 / 10%);",
+			dark: "0 4px 10px rgb(0 0 0 / 30%), 0 0 1px rgb(0 0 0 / 30%);",
+		})};
+
+	@media screen and (max-width: ${theming.size.screen_size1}) {
+		padding: 1rem;
+	}
+`
+
+const Card = styled.div`
+	${cardCSS}
+`
+
+export default Card

source/src/components/Loading.tsx

@@ -4,9 +4,11 @@
 
 import styled from "styled-components"
 
+import MainContent from "./MainContent"
+
 import theming from "../styles/theming"
 
-const StyledContainer = styled.div`
+const StyledContainer = styled(MainContent)`
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
@@ -93,7 +95,7 @@ const StyledSVG = styled.svg`
 
 const Spinner = () => {
 	return (
-		<StyledContainer className="card main-content">
+		<StyledContainer>
 			<StyledSVG
 				width="37"
 				height="48"

source/src/components/MainContent.tsx

@@ -0,0 +1,21 @@
+import styled, { css } from "styled-components"
+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}) {
+		width: auto;
+		margin: 1rem;
+		margin-top: 3rem;
+	}
+`
+
+const MainContent = styled(Card)`
+	${mainContentCSS}
+`
+
+export default MainContent

source/src/components/PostCard.tsx

@@ -10,12 +10,13 @@ import {
 	faHourglass,
 } from "@fortawesome/free-solid-svg-icons"
 
-import Tag from "../components/Tag"
+import Tag from "./Tag"
-import TagList from "../components/TagList"
+import TagList from "./TagList"
+import MainContent from "./MainContent"
 
 import theming from "../styles/theming"
 
-const StyledPostCard = styled.div`
+const StyledPostCard = styled(MainContent)`
 	box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
 	text-align: left;
 	margin-bottom: 2rem;
@@ -72,7 +73,6 @@ const PostCard = (props: Props) => {
 	return (
 		<StyledPostCard
 			key={props.postData.url}
-			className="card main-content"
 			onClick={() => {
 				navigate(process.env.PUBLIC_URL + props.postData.url)
 			}}

source/src/pages/NotFound.tsx

@@ -1,9 +1,11 @@
 import styled from "styled-components"
 import { Helmet } from "react-helmet-async"
 
+import MainContent from "../components/MainContent"
+
 import theming from "../styles/theming"
 
-const StyledNotFound = styled.div`
+const StyledNotFound = styled(MainContent)`
 	text-align: center;
 
 	color: ${(props) =>
@@ -33,7 +35,7 @@ const NotFound = () => {
 				<meta property="og:description" content="Page does not exist" />
 			</Helmet>
 
-			<StyledNotFound className="card main-content">
+			<StyledNotFound>
 				<Styled404>404</Styled404>
 				<br />
 				Page was not found :(

source/src/pages/Page.tsx

@@ -17,10 +17,11 @@ import {
 	faHourglass,
 } from "@fortawesome/free-solid-svg-icons"
 
-import Tag from "../components/Tag"
+import MainContent from "../components/MainContent"
-import TagList from "../components/TagList"
-import NotFound from "./NotFound"
 import Loading from "../components/Loading"
+import TagList from "../components/TagList"
+import Tag from "../components/Tag"
+import NotFound from "./NotFound"
 
 import theming from "../styles/theming"
 
@@ -29,6 +30,10 @@ import { useEffect } from "react"
 
 const map: Map = _map
 
+const StyledPage = styled(MainContent)`
+	padding-top: 0;
+`
+
 const StyledTitle = styled.h1`
 	margin-bottom: 1rem;
 `
@@ -308,7 +313,7 @@ const Page = () => {
 				/>
 			</Helmet>
 
-			<div className="card main-content" style={{ paddingTop: 0 }}>
+			<StyledPage>
 				{isSeries ? (
 					<NextPrevButton
 						prevURL={seriesData?.prev}
@@ -355,7 +360,7 @@ const Page = () => {
 						__html: fetchedPage.content,
 					}}
 				/>
-			</div>
+			</StyledPage>
 		</>
 	)
 }

source/src/pages/Search.tsx

@@ -13,13 +13,14 @@ import _map from "../data/map.json"
 import searchData from "../data/search.json"
 import theming from "../styles/theming"
 
-import "react-date-range/dist/styles.css"
-import "react-date-range/dist/theme/default.css"
-
 import PostCard from "../components/PostCard"
+import MainContent from "../components/MainContent"
 
 import { Map } from "../types/typings"
 
+import "react-date-range/dist/styles.css"
+import "react-date-range/dist/theme/default.css"
+
 const map: Map = _map
 
 const searchIndex = elasticlunr.Index.load(searchData as never)
@@ -36,7 +37,7 @@ interface Query {
 	query: string
 }
 
-const StyledSearch = styled.div`
+const StyledSearch = styled(MainContent)`
 	text-align: center;
 `
 
@@ -289,7 +290,7 @@ const Search = () => {
 				<title>pomp | Search</title>
 			</Helmet>
 
-			<StyledSearch className="card main-content">
+			<StyledSearch>
 				<h1>Search</h1>
 
 				<StyledSearchContainer>

source/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

source/src/styles/globalStyle.tsx

@@ -176,41 +176,6 @@ const whiteLinkCSS = css`
 	}
 `
 
-const cardCSS = css`
-	.card {
-		margin: auto;
-		background-color: ${(props) =>
-			theming.theme(props.theme.currentTheme, {
-				light: "white",
-				dark: "#2F3136",
-			})};
-		padding: 2rem;
-		border-radius: 6px;
-		box-shadow: ${(props) =>
-			theming.theme(props.theme.currentTheme, {
-				light: "0 4px 10px rgb(0 0 0 / 5%), 0 0 1px rgb(0 0 0 / 10%);",
-				dark: "0 4px 10px rgb(0 0 0 / 30%), 0 0 1px rgb(0 0 0 / 30%);",
-			})};
-
-		@media screen and (max-width: ${theming.size.screen_size1}) {
-			padding: 1rem;
-		}
-	}
-`
-
-const mainContentCSS = css`
-	.main-content {
-		margin-top: 3rem;
-		width: 50%;
-
-		@media screen and (max-width: ${theming.size.screen_size1}) {
-			width: auto;
-			margin: 1rem;
-			margin-top: 3rem;
-		}
-	}
-`
-
 const globalStyle = css`
 	${scrollbarCSS}
 	${codeCSS}
@@ -218,8 +183,6 @@ const globalStyle = css`
 	${tableCSS}
 	${blockquoteCSS}
 	${whiteLinkCSS}
-	${cardCSS}
-	${mainContentCSS}
 
 	body {
 		overflow-x: hidden;