layouting

src/app.scss

@@ -6,6 +6,12 @@
 	font-size: 100%;
 }
 
+// @media (max-width: 800px) {
+// 	:root {
+// 		font-size: 90%;
+// 	}
+// }
+
 * {
 	box-sizing: border-box;
 	scrollbar-width: thin;

src/routes/+page.svelte

@@ -180,26 +180,65 @@
 	}
 
 	.assignment-name {
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
+		@include nowrap;
 		width: 100%;
 	}
 
 	.assignment-score {
-		width: 80px;
+		width: min-content;
 		text-align: right;
 		white-space: nowrap;
-		padding-left: $spacing-small;
+		padding-left: 0;
 	}
 
 	.course-grade {
 		padding: 0;
 		font-weight: bold;
 	}
 
-	.course-score {
-		text-align: right;
+	// @media (max-height: 650px) {
+	// 	.value {
+	// 		display: none;
+	// 	}
+	// 	.grades {
+	// 		grid-row: 2/4;
+	// 	}
+	// }
+
+	@media (max-width: 950px) {
+		.layout {
+			grid-template-columns: 1fr 1fr 1fr 1.75fr;
+		}
+		.week-assignments {
+			display: none;
+		}
+		h1 {
+			grid-column: 1 / 4;
+		}
+		.assignments {
+			grid-column: 4;
+		}
+		.grades {
+			grid-column: 1 / 4;
+		}
+	}
+
+	@media (max-width: 750px) {
+		.layout {
+			grid-template-columns: 1fr 1fr 1fr;
+		}
+		.improvement {
+			display: flex;
+		}
+		.assignments {
+			display: none;
+		}
+		h1 {
+			grid-column: 1 / 4;
+		}
+		.grades {
+			grid-column: 1 / 4;
+		}
 	}
 
 	@media (max-width: $breakpoint-phone) {

src/routes/course/[courseIndex]/+page.svelte

@@ -342,10 +342,8 @@
 		}
 
 		h1 {
+			@include nowrap;
 			margin-top: 0;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
 		}
 
 		.grid-heading-container {

src/variables.scss

@@ -12,3 +12,9 @@ $breakpoint-phone: 480px;
 	border-radius: $roundness;
 	padding: $spacing;
 }
+
+@mixin nowrap {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}