gameboy: colors i'm happy with

html/gameboy.tsx

@@ -46,26 +46,44 @@ const Draw = ({
             height: `${height * pixel_width_px}px`,
             backgroundColor: bg_color,
         }}
+        class="screen"
     >
         {...new Array(width * height)
             .fill(null)
             .map(() => <Pixel width_px={pixel_width_px} colors={colors} />)}
     </div>
 );
+
+// you know what, let's just to the dark grey part. sorry!
 const Shell = ({ children }: { children: ComponentChild }) => (
-    <div class="shell">{children}</div>
+    <div class="shell" aria-describedby={"user-content-gameboy-description"}>
+        <div class="lines">
+            <div class="top-line"></div>
+            <div class="bottom-line"></div>
+            <div class="headline">CHONK MATRIX WITH STERENO SOUND</div>
+        </div>
+        {children}
+    </div>
 );
 
-// https://www.color-hex.com/color-palette/26401
 // body: "#aaaaaa"
+// horrid url
+// https://duet-cdn.vox-cdn.com/thumbor/0x0:2048x1364/750x500/filters:focal(1024x682:1025x683):format(webp)/cdn.vox-cdn.com/uploads/chorus_asset/file/23755199/a31768dc_f45b_4ac7_8f34_6f99e835ed358223055624103571533.jpg
 render_and_copy(
-    <Draw
-        // the actual aspect ratio
-        // it has slightly more pixels though
-        width={10}
-        height={9}
-        pixel_width_px={20}
-        colors={["#8bac0f", "#306230", "#0f380f"]}
-        bg_color="#9bbc0f"
-    />
+    <>
+        <Shell>
+            <Draw
+                // the actual aspect ratio
+                // it has slightly more pixels though
+                width={10}
+                height={9}
+                pixel_width_px={20}
+                bg_color="#779268"
+                colors={["#52643a", "#22311D", "#0E190B"]}
+            />
+        </Shell>
+        <p id="gameboy-description" style="font-size: 0px">
+            // TODO: !!!
+        </p>
+    </>
 );