added fonts, changed some content

src/layouts/Layout.astro

@@ -20,20 +20,6 @@ const { title, description } = Astro.props;
 		<meta name="theme-color" content="#2B2D31" />
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
-		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link
-			href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"
-			rel="stylesheet"
-		/>
-		<link
-			href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap"
-			rel="stylesheet"
-		/>
-		<link
-			href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300;500;700&display=swap"
-			rel="stylesheet"
-		/>
 		<script defer src="/_vercel/insights/script.js"></script>
 		<ViewTransitions />
 		<meta name="generator" content={Astro.generator} />
@@ -42,7 +28,92 @@ const { title, description } = Astro.props;
 	<body>
 		<NavBar />
 		<slot />
-	</body><style is:global>
+
+		<style is:global>
+			@font-face {
+				font-family: "Fredoka";
+				src: url("/fonts/Fredoka-Bold.ttf") format("truetype");
+				font-weight: bold;
+				font-style: normal;
+			}
+
+			@font-face {
+				font-family: "Fredoka";
+				src: url("/fonts/Fredoka-Light.ttf") format("truetype");
+				font-weight: normal;
+				font-style: normal;
+			}
+
+			@font-face {
+				font-family: "Fredoka";
+				src: url("/fonts/Fredoka-Medium.ttf") format("truetype");
+				font-weight: 500;
+				font-style: normal;
+			}
+
+			@font-face {
+				font-family: "Fredoka";
+				src: url("/fonts/Fredoka-Regular.ttf") format("truetype");
+				font-weight: normal;
+				font-style: normal;
+			}
+
+			@font-face {
+				font-family: "Montserrat";
+				src: url("/fonts/Montserrat-Bold.ttf") format("truetype");
+				font-weight: bold;
+				font-style: normal;
+			}
+
+			@font-face {
+				font-family: "Montserrat";
+				src: url("/fonts/Montserrat-Light.ttf") format("truetype");
+				font-weight: 300;
+				font-style: normal;
+			}
+
+			@font-face {
+				font-family: "Montserrat";
+				src: url("/fonts/Montserrat-Medium.ttf") format("truetype");
+				font-weight: 500;
+				font-style: normal;
+			}
+
+			@font-face {
+				font-family: "Montserrat";
+				src: url("/fonts/Montserrat-Regular.ttf") format("truetype");
+				font-weight: normal;
+				font-style: normal;
+			}
+
+			@font-face {
+				font-family: "Montserrat";
+				src: url("/fonts/Montserrat-SemiBold.ttf") format("truetype");
+				font-weight: 600;
+				font-style: normal;
+			}
+
+			@font-face {
+				font-family: "Poppins";
+				src: url("/fonts/Poppins-Light.ttf") format("truetype");
+				font-weight: 300;
+				font-style: normal;
+			}
+
+			@font-face {
+				font-family: "Poppins";
+				src: url("/fonts/Poppins-Medium.ttf") format("truetype");
+				font-weight: 500;
+				font-style: normal;
+			}
+
+			@font-face {
+				font-family: "Poppins";
+				src: url("/fonts/Poppins-Regular.ttf") format("truetype");
+				font-weight: normal;
+				font-style: normal;
+			}
+
 			* {
 				box-sizing: border-box;
 				margin: 0;
@@ -90,4 +161,5 @@ const { title, description } = Astro.props;
 				overflow-x: auto;
 			}
 		</style>
+	</body>
 </html>

src/layouts/Markdown.astro

@@ -73,7 +73,7 @@ const { frontmatter } = Astro.props;
 	}
 
 	ul li a {
-		@apply underline underline-offset-2 hover:text-blue-400;
+		@apply underline underline-offset-2 decoration-1 hover:text-blue-400;
 	}
 
 	.hyperlink {

src/pages/about.astro

@@ -21,11 +21,10 @@ import Layout from "../layouts/Layout.astro";
 				/>
 				<h1 class="text-5xl font-bold">About</h1>
 				<p class="mt-5 text-lg mb-5">
-					Hello, I'm <span class="font-bold">Ryan</span>, a
-					computer science student based in Malaysia. The
-					objective of this website is to offer valuable
-					resources to aspiring streamers, helping them enhance
-					their streaming experience!
+					Hello, I'm <span class="font-bold">Ryan</span>, a computer
+					science student based in Malaysia. The objective of this
+					website is to offer valuable resources to aspiring
+					streamers, helping them enhance their streaming experience!
 				</p>
 				<p>
 					If you want to learn more about me, check out my <a
@@ -51,9 +50,9 @@ import Layout from "../layouts/Layout.astro";
 				What are Coworking & Study streams?
 			</h2>
 			<p class="w-4/5 lg:w-1/2">
-				Coworking and study streams are a type of stream where
-				people work or study together. It's a great way to stay
-				motivated and productive, especially if you're working!
+				Coworking and study streams are a type of stream where people
+				work or study together. It's a great way to stay motivated and
+				productive, especially if you're working!
 			</p>
 		</div>
 		<div
@@ -63,10 +62,9 @@ import Layout from "../layouts/Layout.astro";
 				How can this guide benefit me?
 			</h2>
 			<p class="w-4/5 lg:w-1/2">
-				This guide has been created to help out new (and old)
-				coworking streamers! It contains a bunch of resources that
-				you can use to enhance your stream, such as interactive
-				overlays and useful bots.
+				This guide has been created to help out coworking and study
+				streamers by providing tips and resources to enhance the
+				streaming experience!
 			</p>
 		</div>
 		<div
@@ -76,9 +74,9 @@ import Layout from "../layouts/Layout.astro";
 				Why should I stream myself working?
 			</h2>
 			<p class="w-4/5 lg:w-1/2">
-				Streaming yourself working is a great way to stay
-				accountable and productive. It's also a great way to grow
-				your following and meet new people!
+				Streaming yourself working is a great way to stay accountable
+				and productive. It's also a great way to grow your following and
+				meet new people!
 			</p>
 		</div>
 	</div>

src/pages/index.astro

@@ -7,7 +7,7 @@ import Layout from "../layouts/Layout.astro";
 	description="A guide for new and existing coworking streamers!"
 >
 	<div
-		class="flex flex-col lg:flex-row justify-center items-center h-full text-gray-100 sm:flex-col"
+		class="flex flex-col lg:flex-row justify-center items-center text-gray-100 sm:flex-col h-fit min-h-screen"
 	>
 		<div
 			class="w-full lg:w-2/3 flex flex-col justify-center items-center mt-40 lg:mt-0 mb-10 lg:mb-0"
@@ -46,9 +46,7 @@ import Layout from "../layouts/Layout.astro";
 					<div
 						class="task-list-header text-2xl flex flex-row justify-between bg-gray-900 px-5 py-3 rounded-md z-10 border border-solid border-b-white"
 					>
-						<div id="widget-title" class="font-bold">
-							!taskhelp
-						</div>
+						<div id="widget-title" class="font-bold">!taskhelp</div>
 						<div>1/65</div>
 					</div>
 					<div class="task-list-body px-1">
@@ -61,9 +59,7 @@ import Layout from "../layouts/Layout.astro";
 								RyanPython
 							</div>
 							<div class="mr-1">:</div>
-							<span class="line-through"
-								>build this website</span
-							>
+							<span class="line-through">build this website</span>
 						</div>
 						<div
 							class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
@@ -474,8 +470,7 @@ import Layout from "../layouts/Layout.astro";
 							</div>
 							<div class="mr-1">:</div>
 							<span class="max-w-[65%]"
-								>work on the millionth AI project for
-								self.dev</span
+								>work on the millionth AI project for self.dev</span
 							>
 						</div>
 						<div