phash updates!

web/style.css

@@ -2,7 +2,7 @@ body {
 	margin: 0;
 	padding: 0;
 	color: var(--foreground);
-	background: url('bg.jpeg');
+	background: var(--background) url('bg.jpeg');
 	background-size: cover;
 	font-family: sans-serif;
 	height: 100%;
@@ -75,12 +75,12 @@ img {
 
 /* Demo */
 
-#demo-resize, #demo-dct {
-	visibility: hidden;
+.needs-image {
+	display: none;
 }
 
-#demo-resize.visible, #demo-dct.visible {
-	visibility: visible;
+.needs-image.visible {
+	display: block;
 }
 
 #base .image-original img {
@@ -209,4 +209,138 @@ figure {
   100% {
     transform: rotate(360deg);
   }
-}
+}
+/* Skeleton */
+
+.todo {
+	opacity: 0.55;
+	font-style: italic;
+	border-left: 3px solid var(--color3);
+	padding-left: 8px;
+}
+
+/* Hash visualisation */
+
+.hash-panel {
+	display: flex;
+	flex-flow: row wrap;
+	gap: 24px;
+	align-items: flex-start;
+}
+
+.hash-value {
+	font-size: 18px;
+	letter-spacing: 2px;
+}
+
+.bit-grid {
+	display: grid;
+	grid-template-columns: repeat(8, 20px);
+}
+
+.bit-grid.wide {
+	grid-template-columns: repeat(12, 20px);
+}
+
+.bit-grid .bit {
+	height: 20px;
+	box-sizing: border-box;
+	border: 1px solid var(--background);
+}
+
+.bit-grid .bit.on {
+	background: var(--foreground);
+}
+
+.bit-grid .bit.off {
+	background: color-mix(in srgb, var(--foreground) 12%, transparent);
+}
+
+.heat-grid {
+	display: grid;
+	grid-template-columns: repeat(8, 32px);
+}
+
+.heat-grid > div {
+	height: 32px;
+	box-sizing: border-box;
+}
+
+.pixelated, #image-resize img, #phash-resize img {
+	image-rendering: pixelated;
+	image-rendering: -moz-crisp-edges;
+}
+
+#phash-resize img {
+	width: 128px;
+	height: 128px;
+}
+
+.sample {
+	height: 48px;
+	margin: 0 4px;
+	cursor: pointer;
+	vertical-align: middle;
+}
+
+/* Mutation compare */
+
+.compare {
+	position: relative;
+	max-width: 640px;
+}
+
+.compare img {
+	display: block;
+	width: 100%;
+}
+
+.compare #compare-b {
+	position: absolute;
+	top: 0;
+	left: 0;
+	clip-path: inset(0 0 0 50%);
+}
+
+#compare-slider, #mutator-amount {
+	width: 320px;
+}
+
+.distances td {
+	text-align: center;
+	font-size: 18px;
+	min-width: 64px;
+	color: var(--color1);
+}
+
+/* Ranking */
+
+.thumb-grid {
+	display: flex;
+	flex-flow: row wrap;
+	gap: 8px;
+}
+
+.thumb-grid figure {
+	width: 96px;
+	margin: 0;
+	cursor: pointer;
+	text-align: center;
+}
+
+.thumb-grid figure.query {
+	outline: 2px solid var(--color1);
+}
+
+.thumb-grid img {
+	width: 96px;
+	height: 96px;
+	object-fit: cover;
+}
+
+.thumb-grid figcaption {
+	font-size: 11px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}