diff --git a/index.html b/index.html
index 4b582ff..e407eaa 100644
--- a/index.html
+++ b/index.html
@@ -9,10 +9,9 @@
-
-
+ CTRL+V to convert image to perceived lightness (L*)
+
+
diff --git a/src/main.ts b/src/main.ts
index aac1a91..ff8829d 100644
--- 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
index 6a344be..7e627ea 100644
--- 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;
}
\ No newline at end of file