diff --git a/src/Body.tsx b/src/Body.tsx
index 450072e..7243f78 100644
--- a/src/Body.tsx
+++ b/src/Body.tsx
@@ -8,6 +8,34 @@ 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) => (
+ ███
+);
+
+type ColouredLineProps = {
+ light: boolean;
+};
+
+const ColouredLine = ({ light }: ColouredLineProps) => {
+ const startIndex = light ? 8 : 0;
+ return (
+
+ {Array.from({ length: 8 }).map(
+ (
+ _value,
+ index, // Apparently this is the best way to map a range in JavaScript
+ ) => (
+
+ ),
+ )}
+
+ );
+};
+
// TODO: Automate screenshot of info for thumbnail?
const Fetch = () => {
return (
@@ -55,26 +83,8 @@ const Fetch = () => {
-
- ███
- ███
- ███
- ███
- ███
- ███
- ███
- ███
-
-
- ███
- ███
- ███
- ███
- ███
- ███
- ███
- ███
-
+
+
diff --git a/src/assets/thumb.png b/src/assets/thumb.png
index 66578b5..41bbcbc 100644
Binary files a/src/assets/thumb.png and b/src/assets/thumb.png differ
diff --git a/src/style.css b/src/style.css
index 1df5df9..3d04d1a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -300,6 +300,13 @@ p {
}
}
+/* Helper for capturing thumb.png*/
+@media print {
+ .invisible-div {
+ padding: 1rem;
+ }
+}
+
#basic-info {
display: flex;
flex-direction: column;