Show meta and enlarge the card

nclslbrn · Dec 11, 2023 · dc35847 · dc35847
1 parent eaf19cc
commit dc35847
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 18 deletions.
diff --git a/demo/src/index.ts b/demo/src/index.ts
@@ -1,5 +1,5 @@
 import { Scheme } from './../../src/index';
-import { palettes, getPalette } from "../../src/index"
+import { palettes, getPalette } from '../../src/index';
 
 const div = (className: string): HTMLElement => {
 	const elem = document.createElement('div');
@@ -10,24 +10,27 @@ const div = (className: string): HTMLElement => {
 const colorBlock = (palette: Scheme): HTMLElement => {
 	const block = div(`palette-block ${palette.theme}`);
 	block.style.backgroundColor = palette.background;
-	block.style.color = palette.stroke;
-
+
 	const colors = div(`colors col-${palette.colors.length}`);
 	palette.colors.forEach((color) => {
 		const colDiv = div('color');
 		colDiv.style.backgroundColor = color;
-    colDiv.style.border = `${Math.round(Math.random()*6)}px solid ${palette.stroke}`;
+		colDiv.style.border = `${Math.round(Math.random() * 8)}px solid ${
+			palette.stroke
+		}`;
 		colors.appendChild(colDiv);
 	});
-  const meta = div('palette-meta')
-  meta.innerHTML = `
-  <h3 
-    title="${palette.meta.title}, ${palette.meta.year}, ${palette.meta.techniques}">
-    ${palette.meta.artist}
-  </h3>`;
-
-  block.appendChild(colors);
-  block.appendChild(meta)
+	const meta = div('palette-meta');
+	meta.innerHTML = `
+  <h3>${palette.meta.artist}</h3>
+	<p>${palette.meta.title}</p>
+	<label>
+		<span>${palette.meta.year}</span>
+		<span>${palette.meta.techniques}</span>
+	</label>`;
+
+	block.appendChild(colors);
+	block.appendChild(meta);
 	block.addEventListener('click', function () {
 		navigator.clipboard.writeText(JSON.stringify(palette));
 	});
@@ -36,5 +39,5 @@ const colorBlock = (palette: Scheme): HTMLElement => {
 
 const app = document.getElementById('app');
 if (app !== null) {
-  palettes.forEach((palette) => app.appendChild(colorBlock(palette)));
-}
+	palettes.forEach((palette) => app.appendChild(colorBlock(palette)));
+}
diff --git a/demo/style.css b/demo/style.css
@@ -17,7 +17,7 @@ body {
 
 #app {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
 }
 
 .palette-block {
@@ -33,12 +33,26 @@ body {
 	box-shadow: 0 4px 8px rgb(0 0 0 / 30%);
 }
 
+.palette-block .palette-meta {
+	padding: 0 0.5em;
+}
+
 .palette-block.bright .palette-meta {
-	background-color: #fefefe;
+	background-color: #fefefe33;
+	color: #333;
 }
 
 .palette-block.dark .palette-meta {
-	background-color: #111111;
+	background-color: #11111133;
+	color: #fefefe;
+}
+.palette-block .palette-meta label {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+}
+.palette-block .palette-meta label > span:last-child {
+	text-align: right;
 }
 
 .palette-meta h3 {