gameboy: DONE ENOUGH

html/gameboy.css

@@ -0,0 +1,48 @@
+/*chonk matric with stereno sound */
+.shell {
+    /*padding: 0px 45px;*/
+    padding-top: 8px;
+    background-color: #aab;
+    width: 285px;
+    height: 225px;
+    border-radius: 10px 10px 40px 10px;
+    overflow: hidden;
+    margin: 0 auto;
+}
+
+.screen {
+    margin: 0 auto;
+}
+
+.lines {
+    margin: 0 10px;
+    margin-bottom: 3px;
+    height: 10px;
+}
+
+.top-line {
+    background-color: #635;
+    height: 2px;
+    position: relative;
+    top: 0px;
+}
+
+.bottom-line {
+    background-color: #325;
+    height: 2px;
+    top: 3px;
+
+    position: relative;
+}
+
+.headline {
+    color: white;
+    font-size: 0.45rem;
+    padding: 0 2px;
+    background-color: #aaa;
+    bottom: 2px;
+    position: relative;
+    top: -7px;
+    left: 85px;
+    width: fit-content;
+}

html/gameboy.tsx

@@ -67,7 +67,7 @@ const Shell = ({ children }: { children: ComponentChild }) => (
 );
 
 // body: "#aaaaaa"
-// horrid url
+// horrid url, but color-picked from
 // 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(
     <>
@@ -83,7 +83,9 @@ render_and_copy(
             />
         </Shell>
         <p id="gameboy-description" style="font-size: 0px">
-            // TODO: !!!
+            the screen and grey border of a Game Boy. at the top, it says "CHONK
+            MATRIX WITH STERENO SOUND." the blank screen's pixels are comically
+            large, but faithfully colored
         </p>
     </>
 );