wrap indicator for grid

src/scss/elements/header.scss

@@ -1,5 +1,15 @@
 @use "../variables.scss";
 
+@mixin navigation-button {
+	button {
+		padding: 0 20px 0 20px;
+		&:hover {
+			background-color: white;
+			& > a { color: black; }
+		}
+	}
+}
+
 @mixin navigation {
 	.header-left {
 		height: 100%;
@@ -7,16 +17,10 @@
 		background-color: rgb(0,0,0);
 	}
 	.header-right {
+		@include navigation-button;
+
 		display: flex;
 		height: 100%;
-
-		button {
-			padding: 0 20px 0 20px;
-			&:hover {
-				background-color: white;
-				& > a { color: black; }
-			}
-		}
 	}
 }
 

src/scss/elements/terminal.scss

@@ -1,8 +1,8 @@
 @mixin text-styles {
-	.red   { color: var(--text-red) }
-	.green { color: var(--text-green) }
-	.blue  { color: var(--text-blue) }
-	.cyan  { color: var(--text-cyan) }
+	.red   { color: rgb(var(--color-red)) }
+	.green { color: rgb(var(--color-green)) }
+	.blue  { color: rgb(var(--color-blue)) }
+	.cyan  { color: rgb(var(--color-cyan)) }
 	.bold  { font-weight: bold; }
 }
 
@@ -12,11 +12,19 @@
 		display: flex;
 		gap: 30px;
 	}
+	.stdout-horizontal-wrap {
+		display: flex;
+		gap: 5px;
+	}
 }
 
 @mixin term-elements {
 	.return { margin-top: 25px; }
 	.shell-prompt { display: flex; }
+	.wrap-indicator {
+		width: 2px;
+		background-color: rgba(var(--color-blue), .3);
+	}
 }
 
 @mixin formatting {

src/scss/variables.scss

@@ -2,13 +2,13 @@ $header-Y: 30px;
 $footer-Y: 30px;
 $component-padding: 20px;
 
-@mixin text-colors {
-	--text-red:   rgb(200, 0, 0);
-	--text-green: rgb(0, 200, 0);
-	--text-blue:  rgb(0, 0, 200);
-	--text-cyan:  rgb(18,167,148);
+@mixin color-matrix {
+	--color-red:   200, 0, 0;
+	--color-green: 0, 200, 0;
+	--color-blue:  0, 0, 200;
+	--color-cyan:  18,167,148;
 }
 
 @mixin css-global {
-	@include text-colors;
+	@include color-matrix;
 }