src/Body.tsx

@@ -8,34 +8,6 @@ import LinkedIn from "./assets/linkedin.svg?react";
 import Mastodon from "./assets/mastodon.svg?react";
 import DarkModeToggleIcon from "./assets/darkmodetoggle.svg?react";
 
-type ColouredBlockProps = {
-	colorNum: number;
-};
-
-const ColouredBlock = ({ colorNum }: ColouredBlockProps) => (
-	<span style={{ color: `var(--color${colorNum})` }}>███</span>
-);
-
-type ColouredLineProps = {
-	light: boolean;
-};
-
-const ColouredLine = ({ light }: ColouredLineProps) => {
-	const startIndex = light ? 8 : 0;
-	return (
-		<p className="blocks">
-			{Array.from({ length: 8 }).map(
-				(
-					_value,
-					index, // Apparently this is the best way to map a range in JavaScript
-				) => (
-					<ColouredBlock colorNum={startIndex + index} key={index} />
-				),
-			)}
-		</p>
-	);
-};
-
 // TODO: Automate screenshot of info for thumbnail?
 const Fetch = () => {
 	return (
@@ -83,8 +55,26 @@ const Fetch = () => {
 					<p>
 						<br />
 					</p>
-					<ColouredLine light={false} />
+					<p className="blocks">
-					<ColouredLine light={true} />
+						<span style={{ color: "var(--color0)" }}>███</span>
+						<span style={{ color: "var(--color1)" }}>███</span>
+						<span style={{ color: "var(--color2)" }}>███</span>
+						<span style={{ color: "var(--color3)" }}>███</span>
+						<span style={{ color: "var(--color4)" }}>███</span>
+						<span style={{ color: "var(--color5)" }}>███</span>
+						<span style={{ color: "var(--color6)" }}>███</span>
+						<span style={{ color: "var(--color7)" }}>███</span>
+					</p>
+					<p className="blocks">
+						<span style={{ color: "var(--color8)" }}>███</span>
+						<span style={{ color: "var(--color9)" }}>███</span>
+						<span style={{ color: "var(--color10)" }}>███</span>
+						<span style={{ color: "var(--color11)" }}>███</span>
+						<span style={{ color: "var(--color12)" }}>███</span>
+						<span style={{ color: "var(--color13)" }}>███</span>
+						<span style={{ color: "var(--color14)" }}>███</span>
+						<span style={{ color: "var(--color15)" }}>███</span>
+					</p>
 				</div>
 			</div>
 		</div>

src/style.css

@@ -300,13 +300,6 @@ p {
 	}
 }
 
-/* Helper for capturing thumb.png*/
-@media print {
-	.invisible-div {
-		padding: 1rem;
-	}
-}
-
 #basic-info {
 	display: flex;
 	flex-direction: column;