From 57f25488ff78b6e21eaceecd0a18710c0ce5a15e Mon Sep 17 00:00:00 2001
From: s <s.looi2@outlook.com>
Date: Sun, 8 Sep 2024 18:00:47 +0900
Subject: [PATCH] :lipstick: make pasted images appear under header and make
 app background a pattern

---
 src/main.ts   |  2 +-
 src/style.css | 20 ++++++++++++++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 501959c..aac1a91 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -74,7 +74,7 @@ function drawTransformedImage(c: CanvasRenderingContext2D, originalImg: HTMLImag
   // Create new image
   const newImage = document.createElement("img")
   newImage.src = canvas.toDataURL();
-  document.body.prepend(newImage)
+  document.getElementById("app")?.prepend(newImage)
 }
 function transformRGBToPerceivedLightnessQuick(data: Uint8ClampedArray) {
   for (let i = 0; i < data.length; i += 4) {
diff --git a/src/style.css b/src/style.css
index 126c735..6a344be 100644
--- a/src/style.css
+++ b/src/style.css
@@ -6,12 +6,24 @@ html {
   font-family: Arial, Helvetica, sans-serif;
 }
 
-img {
-  display: block;
+#header {
+  display: flex;
+  justify-content: center;
+  padding: 2rem;
 }
 
 #app {
   display: flex;
-  justify-content: center;
-  padding: 2rem;
+  flex-direction: column;
+  align-items: center;
+  /* background-color: rgb(255, 255, 255); */
+  row-gap: 1rem;
+  padding: 1rem 0;
+  border-top: 0.25rem solid #AAD;
+  border-bottom: 0.25rem solid #AAD;
+
+  background: linear-gradient(45deg, transparent 49%, #AAD 49% 51%, transparent 51%), linear-gradient(-45deg, transparent 49%, #AAD 49% 51%, transparent 51%);
+  background-size: 1em 1em;
+  background-color: #ffffff;
+  opacity: 1
 }
\ No newline at end of file