image modals for posts

css/main.css

@@ -178,7 +178,6 @@ span.ha-placeholder {
 	opacity: .55;
 }
 
-
 /* Lists */
 ::marker {
 	color: var(--color-pink);

css/modal.css

@@ -0,0 +1,84 @@
+img[tabindex="0"]:focus-visible {
+	outline: .15rem solid var(--color-teal);
+}
+
+dialog {
+	margin: auto;
+	flex-flow: column;
+	background: transparent;
+	border: none;
+	position: absolute;
+}
+
+dialog[open] {
+	display: flex;
+}
+
+dialog::backdrop {
+	background-color: rgba(from var(--color-bg) r g b / .8);
+	backdrop-filter: blur(4px);
+}
+
+body:has(dialog[open]) {
+	overflow: hidden;
+}
+
+.close-dialog {
+	background-color: rgba(from var(--color-teal) r g b / .2);
+	font-size: 1.5rem;
+	padding: 0 .5rem .15rem;
+	border-radius: 1rem;
+	color: var(--color-teal);
+	box-shadow: .15rem .15rem var(--color-shadow);
+	border: .08rem solid var(--color-teal);
+	align-self: flex-end;
+	justify-self: flex-start;
+	margin: 0 .1rem;
+	/* Click animation handling */
+	position: relative;
+	top: 1rem;
+	left: -.15rem;
+	transition: top .1s ease-in, left .1s ease-in;
+}
+
+.close-dialog:focus-visible {
+	outline: none;
+	background-color: var(--color-teal);
+	color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+	.close-dialog:hover {
+		outline: none;
+		background-color: var(--color-teal);
+		color: var(--color-bg);
+	}
+}
+
+@media (forced-colors: active) {
+	.close-dialog:focus-visible {
+		outline-offset: .08rem;
+		outline: .08rem solid;
+	}
+
+	@media (any-hover: hover) {
+		.close-dialog:hover {
+			outline-offset: .08rem;
+			outline: .08rem solid;
+		}
+	}
+}
+
+/* Click animation */
+.close-dialog:active {
+	top: 1.1rem;
+	left: -.05rem;
+	box-shadow: .05rem .05rem var(--color-shadow);
+}
+
+.modal-img {
+	max-height: calc(90vh - 2rem);
+  object-fit: contain;
+  width: auto;
+  margin: 0 1rem;
+}