X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fsass%2Ftracker.scss;h=cf6cb6df77302212fcdb64902b93f2b04ac017f7;hb=90922f8595a8d4fd7780a0b137eed66eaf7d6c49;hp=ca20b6342d2893f47c77c694cf2a3ee7020c1df8;hpb=103371b7fdc3b11e1a937d46474819ab0a5425fb;p=alttp.git

diff --git a/resources/sass/tracker.scss b/resources/sass/tracker.scss
index ca20b63..cf6cb6d 100644
--- a/resources/sass/tracker.scss
+++ b/resources/sass/tracker.scss
@@ -1,12 +1,21 @@
 .tracker {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+	align-items: stretch;
+	justify-content: flex-start;
+
 	.auto-tracking {
 		.custom-toggle {
 			vertical-align: middle;
 		}
 	}
-	.dungeons {
+	.canvas {
 		width: 100%;
 		height: auto;
+		max-height: 100%;
+	}
+	.dungeons {
 		.count-display,
 		.dungeon-tag {
 			font-size: 0.5px;
@@ -32,8 +41,6 @@
 		}
 	}
 	.items {
-		width: 100%;
-		height: auto;
 		.med-display {
 			font-size: 0.3px;
 			font-weight: bold;
@@ -52,58 +59,54 @@
 		}
 	}
 	.tracker-map {
-		.canvas {
-			width: 100%;
-			height: auto;
-			.location {
+		.location {
+			.box {
+				width: 0.04px;
+				height: 0.04px;
+				transform: translate(-0.02px, -0.02px);
+				fill: #0d0;
+				stroke: black;
+				stroke-width: 1px;
+				vector-effect: non-scaling-stroke;
+			}
+			.text {
+				fill: black;
+				font-size: 0.02px;
+				font-weight: bold;
+				text-anchor: middle;
+				dominant-baseline: middle;
+				pointer-events: none;
+				user-select: none;
+			}
+			&.status-cleared {
 				.box {
-					width: 0.04px;
-					height: 0.04px;
-					transform: translate(-0.02px, -0.02px);
-					fill: #0d0;
-					stroke: black;
-					stroke-width: 1px;
-					vector-effect: non-scaling-stroke;
-				}
-				.text {
-					fill: black;
-					font-size: 0.02px;
-					font-weight: bold;
-					text-anchor: middle;
-					dominant-baseline: middle;
-					pointer-events: none;
-					user-select: none;
+					fill: grey;
+					opacity: 0.4;
 				}
-				&.status-cleared {
-					.box {
-						fill: grey;
-						opacity: 0.4;
-					}
+			}
+			&.status-partial {
+				.box {
+					fill: yellow;
 				}
-				&.status-partial {
-					.box {
-						fill: yellow;
-					}
+			}
+			&.status-unavailable {
+				.box {
+					fill: red;
 				}
-				&.status-unavailable {
-					.box {
-						fill: red;
-					}
+			}
+			&.size-lg {
+				.box {
+					width: 0.08px;
+					height: 0.08px;
+					transform: translate(-0.04px, -0.04px);
 				}
-				&.size-lg {
-					.box {
-						width: 0.08px;
-						height: 0.08px;
-						transform: translate(-0.04px, -0.04px);
-					}
-					.text {
-						font-size: 0.04px;
-					}
+				.text {
+					font-size: 0.04px;
 				}
-				&.clickable {
-					.box:hover {
-						stroke: white;
-					}
+			}
+			&.clickable {
+				.box:hover {
+					stroke: white;
 				}
 			}
 		}