restructerd scss

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;
-	}
+	text-align: center;
 
 	.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 */