Improved posts style

styles/post.scarlet

@@ -0,0 +1,111 @@
+post-content-padding-y = 0.75rem
+
+.post-author
+	horizontal
+	justify-content center
+	align-items flex-start
+	margin-right post-avatar-text-margin
+
+.post-header
+	horizontal
+	horizontal-line-bottom
+
+.post-creator
+	flex 1
+
+.post-date
+	color hsla(text-color-h, text-color-s, text-color-l, 0.5)
+	white-space nowrap
+
+.post-content
+	ui-element
+	flex-grow 1
+	padding 0.75rem 1rem
+	position relative
+
+	h1, h2, h3
+		font-weight bold
+		text-align left
+		line-height 1.5em
+		margin 1rem 0
+
+	h1
+		font-size 1.5rem
+
+	h2
+		font-size 1.3rem
+
+	h3
+		font-size 1.1rem
+
+	img
+		max-width 100%
+		max-height 450px
+		width 100%
+		object-fit cover
+
+	:hover
+		.post-toolbar
+			opacity 1
+
+.new-post-actions
+	justify-content flex-end
+	opacity 0
+	height 0
+	transform translateY(-50%)
+	transition all transition-speed ease
+
+	button
+		pointer-events none
+
+.new-post-actions-enabled
+	opacity 1
+	height auto
+	margin-bottom 0.75rem
+	transform translateY(0)
+
+	button
+		pointer-events all
+
+.post-toolbar
+	horizontal
+	opacity 0
+	position absolute
+	bottom 0.25rem
+	right 0.25rem
+	default-transition
+
+.post-tool
+	opacity 0.7
+
+	:hover
+		cursor pointer
+		opacity 1
+
+.post-likes
+	color hsla(text-color-h, text-color-s, text-color-l, 0.4)
+	margin-right 0.4em
+
+.post-permalink
+	color permalink-color
+
+.post-like
+	color like-color
+
+.post-unlike
+	color unlike-color
+
+.post-delete
+	color delete-color
+
+.post-save
+	// ...
+
+.post-edit-interface
+	vertical
+
+.post-title-input
+	margin-bottom post-content-padding-y
+
+.post-text-input
+	min-height 200px