first attempt at image attachments!

1 files changed, 106 insertions, 1 deletions

diff --git a/css/microblog.css b/css/microblog.css
index 1bc41be..e6a657a 100644
--- a/css/microblog.css
+++ b/css/microblog.css
@@ -14,6 +14,12 @@ html {
 	color: var(--text-color);
 }
 
+img {
+	display: block;
+	max-width: 100%;
+	height: auto;
+}
+
 .wrap {
 	width: min(95%, 40rem);
 	margin: 2rem auto;
@@ -37,6 +43,10 @@ html {
 	background: coral;
 }
 
+.hidden {
+	display: none !important;
+}
+
 nav.main ul {
 	display: flex;
 	margin-bottom: 2rem;
@@ -191,6 +201,13 @@ form.edit,
 	outline: none;
 }
 
+:is(.postform, .edit) .post-nav {
+	width: 100%;
+	display: flex;
+	gap: 1rem;
+	align-items: center;
+}
+
 :is(.postform, .edit) input[type="submit"],
 .login input[type="submit"] {
 	-webkit-appearance: none;
@@ -209,10 +226,86 @@ form.edit,
 }
 
 :is(.postform, .edit) #count {
-	float: left;
 	color: var(--background-color);
 }
 
+:is(.postform, .edit) #post-droparea {
+	border: 0.15rem dashed rgba(0,0,0,0.2);
+	color: rgba(0,0,0,0.35);
+	padding: 0.25rem;
+	cursor: pointer;
+}
+
+:is(.postform, .edit) #post-droparea.drag,
+:is(.postform, .edit) #post-droparea:is(:hover, :focus) {
+	background-color: var(--primary-color);
+	color: #fff;
+	border: 0.15rem solid var(--primary-color);
+}
+
+:is(.postform, .edit) #post-attachments-label {
+	display: flex;
+	border: 0.15rem dashed rgba(0,0,0,0.4);
+	color: rgba(0,0,0,0.4);
+	padding: 0.25rem;
+	cursor: pointer;
+	position: relative;
+	align-self: stretch;
+	align-items: center;
+}
+
+:is(.postform, .edit) #post-attachments {
+	/* cover the entire label, for drag and drop */
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	opacity: 0;
+}
+
+:is(.postform, .edit) #post-attachments-list {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
+	padding-inline-end: 1rem;
+	align-self: stretch;
+	justify-content: center;
+}
+
+:is(.postform, .edit) #post-attachments-list li + li {
+	margin-block-start: 0.25em;
+	border-top: 1px solid rgba(0,0,0,0.2);
+	padding-block-start: 0.25em;
+}
+
+:is(.postform, .edit) #post-attachments-list img.file-preview {
+	display: inline-block;
+	vertical-align: middle;
+	margin-right: 1ch;
+	width: 1.75rem;
+	height: 1.75rem;
+	outline: 0px solid #f0f;
+	object-fit: cover;
+	background: #fff;
+}
+
+:is(.postform, .edit) #post-attachments-list input[type="checkbox"] {
+	-webkit-appearance: checkbox;
+	appearance: checkbox;
+}
+
+:is(.timeline, .single) .post-attachments {
+	grid-column-start: span 6;
+	margin-block-start: 1rem;
+}
+
+:is(.timeline, .single) .post-attachments li + li {
+	margin-block-start: 0.5rem;
+}
+
 :is(.postform, .edit) .message,
 .login .message {
 	background-color: #87b26c;
@@ -264,3 +357,15 @@ footer li a {
 	font-weight: bold;
 	margin-bottom: 0.5rem;
 }
+
+/*
+@supports (background: paint(id)) {
+	input[type="submit"] {
+		background: paint(squircle) !important;
+		--squircle-radius: 8px;
+		--squircle-fill: var(--primary-color);
+
+		border-radius: 0;
+	}
+}
+*/