restructerd scss

app/Footer.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "../styles/Footer.module.scss";
+import styles from "../styles/modules/Footer.module.scss";
 import Image from "next/image";
 export default function Footer() {
 	return (

app/Nav.tsx

@@ -1,5 +1,5 @@
 "use client";
-import styles from "../styles/Nav.module.scss";
+import styles from "../styles/modules/Nav.module.scss";
 import Image from "next/image";
 import Link from "next/link";
 import { useEffect } from "react";

app/articles/[categoryName]/[articleName]/ContentTable.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import prisma from "../../../../lib/prisma";
-import styles from "../../../../styles/TutorialContentTable.module.scss";
+import styles from "../../../../styles/modules/TutorialContentTable.module.scss";
 import { Article, ContentTableEntry } from "@prisma/client";
 
 export default function ContentTable({

app/articles/[categoryName]/[articleName]/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "../../../../styles/Sidebar.module.scss";
+import styles from "../../../../styles/modules/Sidebar.module.scss";
 export default function Sidebar() {
 	return (
 		<div className={styles.sidebar}>

app/articles/[categoryName]/[articleName]/page.tsx

@@ -1,7 +1,7 @@
 import { marked } from "marked";
 import ContentTable from "./ContentTable";
 import Sidebar from "./Sidebar";
-import styles from "../../../../styles/Tutorial.module.scss";
+import styles from "../../../../styles/modules/Tutorial.module.scss";
 import LoadMarkdown from "./LoadMarkdown";
 import prisma from "../../../../lib/prisma";
 import { Article, Category, ContentTableEntry } from "@prisma/client";

app/articles/[categoryName]/page.tsx

@@ -1,4 +1,4 @@
-import styles from "../../../styles/Category.module.scss";
+import styles from "../../../styles/modules/Category.module.scss";
 import Link from "next/link";
 import prisma from "../../../lib/prisma";
 import { Article, Category } from "@prisma/client";

app/articles/page.tsx

@@ -1,4 +1,4 @@
-import styles from "../../styles/CategoryList.module.scss";
+import styles from "../../styles/modules/CategoryList.module.scss";
 import Link from "next/link";
 import prisma from "../../lib/prisma";
 import { Category, Svg, Prisma } from "@prisma/client";

app/layout.tsx

@@ -1,5 +1,5 @@
 import "../styles/globals.scss";
-import "../styles/colorVariables.scss";
+import "../styles/variables_colors.scss";
 import "../styles/variables.scss";
 import Nav from "./Nav";
 import Footer from "./Footer";

app/testing/typography/page.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+export default function Typograhy() {
+	return (
+		<div>
+			<h1>Testing this headline</h1>
+			<h2>Testing this headline</h2>
+			<h3>Testing this headline</h3>
+			<h4>Testing this headline</h4>
+			<h5>Testing this headline</h5>
+			<h6>Testing this headline</h6>
+			<br />
+			<p>
+				This is a paragraph Lorem ipsum dolor sit, amet consectetur adipisicing
+				elit. Dolores enim unde obcaecati ea harum voluptate, nisi quia. Quod,
+				et autem! Aperiam mollitia ullam ab eaque quidem facilis est ducimus
+				delectus.
+			</p>
+			<br />
+			<a href="#">This is a link</a>
+		</div>
+	);
+}

styles/globals.scss

@@ -1,5 +1,7 @@
-@import "colorVariables.scss";
+@import "variables_colors.scss";
 @import "variables.scss";
+@import "typography.scss";
+
 * {
 	box-sizing: border-box;
 	padding: 0;
@@ -15,13 +17,7 @@
 html,
 body {
 	max-width: 100vw;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-		"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-		sans-serif;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
 	background-color: var(--color-background-body);
-	color: var(--color-font);
 	min-height: 100vh;
 	display: flex;
 	flex-direction: column;
@@ -30,28 +26,3 @@ body {
 		flex: 1;
 	}
 }
-
-p,
-a {
-	letter-spacing: 1px;
-	&:visited {
-		color: var(--color-font);
-	}
-}
-
-a {
-	font-weight: bold;
-	text-decoration: none;
-	color: var(--color-font-link);
-	transition: color 50ms linear;
-
-	&:hover {
-		text-decoration: underline;
-		color: var(--color-font-link-hover) !important;
-	}
-
-	&:visited {
-		text-decoration: none;
-		color: var(--color-font-link);
-	}
-}

styles/modules/Category.module.scss

@@ -1,4 +1,4 @@
-@import "variables.scss";
+@import "../variables.scss";
 .category {
 	h1 {
 		text-align: center;

styles/modules/CategoryList.module.scss

@@ -1,9 +1,6 @@
-@import "variables.scss";
+@import "../variables.scss";
 .categoryList {
-	h1 {
 	text-align: center;
-		font-size: 1.5em;
-	}
 
 	.content {
 		margin-top: 30px;

styles/modules/Footer.module.scss

@@ -1,4 +1,4 @@
-@import "variables.scss";
+@import "../variables.scss";
 .footer {
 	padding: 200px 15px 30px 15px;
 	display: flex;

styles/modules/Nav.module.scss

@@ -1,4 +1,4 @@
-@import "variables.scss";
+@import "../variables.scss";
 .nav {
 	background-color: var(--color-background-nav);
 	height: $nav-height-inital;

styles/modules/Sidebar.module.scss

@@ -1,4 +1,4 @@
-@import "variables.scss";
+@import "../variables.scss";
 
 .sidebar {
 	.stickyContainer {

styles/modules/Tutorial.module.scss

@@ -1,4 +1,4 @@
-@import "variables.scss";
+@import "../variables.scss";
 .tutorial {
 	display: grid;
 	gap: 70px;

styles/modules/TutorialContentTable.module.scss

@@ -1,4 +1,5 @@
-@import "variables.scss";
+@import "../variables.scss";
+
 .tutorialContentTable {
 	@media (max-width: $tutorial-breakpoint-2) {
 		display: none;

styles/typography.scss

@@ -0,0 +1,72 @@
+// This file includes styles for text and font styles in the project.
+// It does not include color styles, which are defined in the 'variables_colors.scss' and 'global.scss' files.
+
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+@import "variables_colors.scss";
+@import "variables.scss";
+
+html,
+body {
+	font-family: "Roboto", sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	color: var(--color-font);
+	font-size: $font-size-default;
+	letter-spacing: $font-letter-spacing-default;
+}
+
+/* Headings */
+h1 {
+	font-size: calc($font-size-default + $font-size-headline-step * 6);
+	font-weight: bold;
+	letter-spacing: $font-letter-spacing-headline-large;
+}
+
+h2 {
+	// 5 skipped on purpose
+	font-size: calc($font-size-default + $font-size-headline-step * 4);
+	font-weight: bold;
+	letter-spacing: $font-letter-spacing-headline-medium;
+}
+
+h3 {
+	font-size: calc($font-size-default + $font-size-headline-step * 3);
+	font-weight: bold;
+	letter-spacing: $font-letter-spacing-headline-small;
+}
+
+h4 {
+	font-size: calc($font-size-default + $font-size-headline-step * 2);
+	font-weight: bold;
+	letter-spacing: $font-letter-spacing-headline-small;
+}
+
+h5 {
+	font-size: calc($font-size-default + $font-size-headline-step * 1);
+	font-weight: bold;
+	letter-spacing: $font-letter-spacing-headline-small;
+}
+
+h6 {
+	font-size: $font-size-default;
+	font-weight: bold;
+	letter-spacing: 1.25px;
+}
+
+/* General Texts */
+a {
+	font-weight: bold;
+	text-decoration: none;
+	color: var(--color-font-link);
+	transition: color 50ms linear;
+
+	&:hover {
+		text-decoration: underline;
+		color: var(--color-font-link-hover) !important;
+	}
+
+	&:visited {
+		text-decoration: none;
+		color: var(--color-font-link);
+	}
+}

styles/variables.scss

@@ -1,3 +1,13 @@
+// This file stores all SCSS variables in one place to simplify the use of variables throughout the project.
+
+/* Typography */
+$font-size-default: 1em;
+$font-size-headline-step: 0.12em;
+$font-letter-spacing-default: 1px;
+$font-letter-spacing-headline-large: 2px;
+$font-letter-spacing-headline-medium: 1.5px;
+$font-letter-spacing-headline-small: 1.25px;
+
 /* Tutorial Page */
 $tutorial-grid-sticky-top: 60px;
 $tutorial-content-table-width: 200px;
@@ -28,6 +38,5 @@ $categoryList-breakpoint-1: 850px;
 $categoryList-breakpoint-2: 600px;
 
 /* Category */
-
 $category-breakpoint-1: 800px;
 $category-breakpoint-2: 550px;

styles/variables_colors.scss

@@ -1,3 +1,7 @@
+// We use pure CSS variables in this file because SCSS variables get hardcoded after compiling,
+// which means the dynamic changing effect is lost.
+// Using CSS variables allows us to change the values at runtime
+
 :root {
 	/*! By default colors are in DARK mode */
 	/* Colors: General */