Group up existing components into elements

elements/Postable/Postable.scarlet

@@ -0,0 +1,109 @@
+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-header-info
+	flex 1
+	clip-long-text
+
+.post-action
+	display flex
+	align-items center
+	border none
+	background none
+	padding 0
+	height auto
+	color hsla(text-color-h, text-color-s, text-color-l, 0.5)
+
+	:hover
+		color link-hover-color
+		background none
+
+.post-header-action
+	opacity 0
+	margin-right 0.5rem
+
+.post-date
+	color hsla(text-color-h, text-color-s, text-color-l, 0.5)
+	white-space nowrap
+
+.post-box
+	ui-element
+	flex-grow 1
+	padding 0.75rem 1rem
+	position relative
+	overflow hidden
+
+	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-header-action
+			opacity 1
+
+.post-toolbar
+	horizontal
+	justify-content flex-end
+	margin-top typography-margin
+	padding-top typography-margin
+	border-top 1px solid reverse-light-color
+
+.post-toolbar-action
+	margin-left 1rem
+
+	[data-like="true"]
+		color hsla(0, 90%, 50%, 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-edit-interface
+	vertical
+
+.post-title-input
+	margin-bottom post-content-padding-y
+
+.post-text-input
+	min-height 200px