chore(frontend): use SASS rules & improve styling

Data5tream · Apr 6, 2023 · 1e494d6 · 1e494d6
1 parent 974c00a
commit 1e494d6
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 12 deletions.
diff --git a/frontend/src/lib/components/PageFooter.svelte b/frontend/src/lib/components/PageFooter.svelte
@@ -4,7 +4,7 @@
 	</div>
 </footer>
 
-<style>
+<style lang="scss">
 	footer {
 		width: 100%;
 		padding: 16px 0 8px;
@@ -19,11 +19,16 @@
 		font-size: 16px;
 	}
 
-	a, a:visited {
-      color: var(--c-white);
-	}
-	a:hover, a:active {
+	a {
+		&,
+		&:visited {
+			color: var(--c-white);
+		}
+
+		&:hover,
+		&:active {
 			background: var(--c-white);
-      color: var(--c-black);
+			color: var(--c-black);
+		}
 	}
 </style>
diff --git a/frontend/src/lib/components/StatusEntry.svelte b/frontend/src/lib/components/StatusEntry.svelte
@@ -14,11 +14,31 @@
 	</div>
 </div>
 
-<style>
+<style lang="scss">
 	.watchpoint {
+		position: relative;
 		flex: 1 0 0;
 		border: 1px solid var(--c-black);
 		min-width: 300px;
+
+		&:after {
+			content: '';
+			display: block;
+			position: absolute;
+			bottom: 0;
+			right: 0;
+			border: 2px solid var(--c-black);
+			border-top: 0;
+			border-left: 0;
+			width: 33.3334%;
+			height: 25%;
+			transition: all 0.3s;
+		}
+
+		&:hover:after {
+			width: 50%;
+			height: 40%;
+		}
 	}
 
 	h4 {

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -17,7 +17,7 @@
 </main>
 <PageFooter />
 
-<style>
+<style lang="scss">
 	main {
 		width: 100%;
 		max-width: 1400px;
@@ -30,10 +30,11 @@
 		color: var(--c-white);
 		padding: 8px 16px 8px 8px;
 		font-family: monospace;
-	}
-	h1:after {
-		content: '_';
-		animation: blink 2s infinite;
+
+		&:after {
+			content: '_';
+			animation: blink 2s infinite;
+		}
 	}
 
 	.error {