💄🎨 improve and simplify styling and make styling work consistently fo…

…r large images
slooi · Sep 8, 2024 · f5c888d · f5c888d
1 parent f0e6b06
commit f5c888d
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -9,10 +9,9 @@
 </head>
 
 <body>
-  <div ID="header">
-    <h1><b><i>CTRL+V</i></b> <span style="font-weight: 300;">to convert image to perceived lightness (L*)</span></h1>
-  </div>
-  <div id="app"></div>
+  <h1><b><i>CTRL+V</i></b> <span style="font-weight: 300;">to convert image to perceived lightness (L*)</span></h1>
+
+  <div id="content"></div>
   <script type="module" src="/src/main.ts"></script>
 </body>
 

diff --git a/src/main.ts b/src/main.ts
@@ -73,8 +73,11 @@ function drawTransformedImage(c: CanvasRenderingContext2D, originalImg: HTMLImag
 
   // Create new image
   const newImage = document.createElement("img")
+  const container = document.createElement("div")
   newImage.src = canvas.toDataURL();
-  document.getElementById("app")?.prepend(newImage)
+  container.classList.add("img-container")
+  container.append(newImage)
+  document.getElementById("content")?.prepend(container)
 }
 function transformRGBToPerceivedLightnessQuick(data: Uint8ClampedArray) {
   for (let i = 0; i < data.length; i += 4) {

diff --git a/src/style.css b/src/style.css
@@ -1,29 +1,46 @@
 *,
 html {
+  font-family: Arial, Helvetica, sans-serif;
   padding: 0;
   margin: 0;
+  box-sizing: border-box;
 
-  font-family: Arial, Helvetica, sans-serif;
+
+  --app-color: #ffffff;
+  --pattern-color: rgb(165, 165, 165);
+  --border-color: black;
+  /* 
+  --pattern-color: rgb(135, 135, 135);
+  --white: #AAD;
+  */
 }
 
-#header {
-  display: flex;
-  justify-content: center;
-  padding: 2rem;
+html {
+  display: grid;
+  text-align: center;
 }
 
-#app {
+h1 {
+  margin: 2rem;
+}
+
+#content {
+  display: grid;
+  gap: 1rem;
+  padding-bottom: 5rem;
+}
+
+.img-container {
   display: flex;
-  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
+  justify-content: center;
+
+  /* borders */
+  border-top: 0.25rem solid var(--border-color);
+  border-bottom: 0.25rem solid var(--border-color);
+
+  /* pattern */
+  background: linear-gradient(45deg, transparent 49%, var(--pattern-color) 49.99% 50.01%, transparent 51%);
+  background-size: 2.5em 2.5em;
+  background-color: var(--app-color);
+  opacity: 1;
 }