design + palette count

nclslbrn · Dec 28, 2023 · 9e8a093 · 9e8a093
1 parent 08d0ca1
commit 9e8a093
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 17 deletions.
diff --git a/demo/src/index.ts b/demo/src/index.ts
@@ -5,6 +5,7 @@ import { sampler } from './sampler';
 
 const app = document.getElementById('app'),
 	form = document.createElement('form'),
+	paletteCount = document.createElement('h1'),
 	inputSearch = document.createElement('input'),
 	paletteGrid = div('palette-grid');
 
@@ -18,10 +19,12 @@ const filteredPalette = (input: string) => {
 
 if (app !== null) {
 	form.autocomplete = 'off';
+	form.appendChild(paletteCount);
 	form.appendChild(inputSearch);
 	app.appendChild(form);
 	app.appendChild(paletteGrid);
 	app.appendChild(sampler.ui());
+	paletteCount.innerText = `${palettes.length} iconic palettes`
 	palettes.forEach((palette) => paletteGrid.appendChild(colorBlock(palette)));
 	inputSearch.placeholder = 'type an artist name';
 	inputSearch.onkeyup = function (e: KeyboardEvent): void {

diff --git a/demo/style.css b/demo/style.css
@@ -16,17 +16,22 @@ body {
 	min-height: 100vh;
 }
 
-#app {
-	width: 84%;
-	margin: 1em 8%;
-}
-
 #app form,
 footer {
 	display: flex;
+	padding: 0 2em;
 	flex-flow: row nowrap;
-	width: 100%;
-	justify-content: space-evenly;
+	align-items: center;
+}
+
+#app form {
+	justify-content: space-between;
+	margin-bottom: 2em;
+	box-shadow: 0 10px 5px rgba(0 0 0 / 15%);
+}
+
+#app form h1 {
+	margin: 0.4em 0;
 }
 
 #app form input,
@@ -35,14 +40,24 @@ footer p {
 }
 
 #app form input {
-	font-size: 1.4em;
-	padding: 0.4em;
-	margin: 1em 0 2em;
-	border: 2px solid #ccc;
+	display: none;
+}
+
+@media screen and (min-width: 900px) {
+	#app form input {
+		display: block;
+		font-size: 1.4em;
+		padding: 0.4em;
+		border: 2px solid #ccc;
+	}
 }
+
+
 
 #app .palette-grid {
 	display: grid;
+	width: 84%;
+	margin: 1em 8%;
 	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 	grid-gap: 2em;
 }
@@ -52,7 +67,7 @@ footer p {
 	display: flex;
 	flex-flow: column;
 	align-items: center;
-	margin: 2em auto;
+	margin: 6em auto 0;
 }
 
 #app .create-palette img,
@@ -84,17 +99,19 @@ footer p {
 .palette-block {
 	display: flex;
 	text-align: center;
-	flex-flow: column nowrap;
+	flex-flow: column wrap;
 	justify-content: space-between;
 	padding: 0.5em;
 	text-align: center;
-	border-radius: 4px;
+	border-radius: 2em;
 	overflow: hidden;
 	box-shadow: 0 12px 18px rgb(0 0 0 / 24%);
 }
 
 .palette-block .palette-meta {
 	padding: 0 0.5em;
+	border-bottom-left-radius: 2em;
+	border-bottom-right-radius: 2em;
 }
 
 .palette-block.bright .palette-meta {
@@ -110,6 +127,7 @@ footer p {
 	display: flex;
 	flex-flow: row nowrap;
 	justify-content: space-between;
+	margin: 0.5em;
 }
 .palette-block .palette-meta label > span:last-child {
 	text-align: right;
@@ -118,6 +136,7 @@ footer p {
 .palette-meta h3 {
 	position: relative;
 	font-size: 1.4em;
+	margin: 0.2em 0;
 	z-index: 2;
 }
 .oalette-meta p {
@@ -136,9 +155,18 @@ footer p {
 }
 
 .palette-block .colors .color {
-	height: 3em;
-	flex-basis: 3em;
-	margin: 0.33em;
+	height: 4em;
+	flex-basis: 4em;
+	margin-left: -12.5%;
+	border-radius: 50%;
+}
+
+.palette-block .colors .color:first-child {
+	margin-left: 0;
+}
+
+footer {
+	justify-content: center;
 }
 
 footer > p {