💄 make pasted images appear under header and make app background a pa…

…ttern
slooi · Sep 8, 2024 · 57f2548 · 57f2548
1 parent addfcde
commit 57f2548
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git 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
@@ -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
 }