text updates

web/style.css

@@ -71,14 +71,15 @@ code.block {
 
 img {
 	max-width: 100%;
-	image-rendering: pixelated;
 }
 
-#demo-cont {
+/* Demo */
+
+#demo-resize, #demo-dct {
 	visibility: hidden;
 }
 
-#demo-cont.visible {
+#demo-resize.visible, #demo-dct.visible {
 	visibility: visible;
 }
 
@@ -87,37 +88,64 @@ img {
 	min-width: 256px;
 }
 
+/* Resize demo */
+
+#resize {
+	position: relative;
+	height: 512px;
+	width: 100%;
+	transition: height 2s linear;
+}
+
+#resize.resize {
+	height: 256px;
+}
+
+#resize .image-original {
+	position: absolute;
+	width: 100%;
+	height: 512px;
+}
+
 #resize .image-original img {
 	max-height: 50vh;
 	min-height: 257px;
-	max-width: 50vw;
+	max-width: 100%;
 	min-width: 257px;
+	/* height: 512px; */
 }
 
-#image-original img {
+#resize-original {
+	position: relative;
+	height: 512px;
+}
+
+#resize-original img {
 	position: absolute;
 	max-width: 90vw;
-	max-height: 90vh;
+	max-height: 512px;
 	min-width: 257px;
 	min-height: 257px;
 	opacity: 1;
 	transition:
 		width 2s linear,
 		height 2s linear,
-		filter 3s linear,
-		opacity 3s ease-in;
+		filter 3s linear 2s,
+		opacity 3s ease-in 5s;
 }
 
-#image-original img.resize {
+#resize.resize #resize-original img {
 	width: 256px !important;
 	height: 256px !important;
+	filter: grayscale(1) blur(10px);
+	opacity: 0;
 }
 
-#image-original img.grayscale {
+#resize-original img.grayscale {
 	filter: grayscale(1) blur(10px);
 }
 
-#image-original img.fade {
+#resize-original img.fade {
 	opacity: 0;
 }