wip

1 files changed, 26 insertions, 29 deletions

diff --git a/client/src/ui/Note.js b/client/src/ui/Note.js
index 16b31cb..7ae9996 100644
--- a/client/src/ui/Note.js
+++ b/client/src/ui/Note.js
@@ -21,7 +21,7 @@ css`
 const Space = (props) => <div class="flex-space" {...props} />;
 
 css`
-section > header {
+.note > header {
 	display: flex;
 	flex-direction: row;
 
@@ -31,11 +31,11 @@ section > header {
 	background: var(--theme-header-bg);
 }
 
-section > header.small {
+.note > header.small {
 	height: 0.5rem;
 }
 
-section > header > * {
+.note > header > * {
 	margin: 0 0.35rem;
 	white-space: nowrap;
 	overflow: hidden;
@@ -43,7 +43,7 @@ section > header > * {
 	line-height: 1.75rem;
 }
 
-section > header > .avatar {
+.note > header > .avatar {
 	height: 1.25rem;
 	width: 1.25rem;
 	flex: 0 0 auto;
@@ -58,11 +58,11 @@ section > header > .avatar {
 	background: white;
 	color: black;
 }
-section > header > .avatar img {
+.note > header > .avatar img {
 	width: inherit;
 	height: inherit;
 }
-section > header > .collapse {
+.note > header > .collapse {
 	height: 1rem;
 	width: 1rem;
 	flex: 0 0 auto;
@@ -77,15 +77,15 @@ section > header > .collapse {
 
 	transition: background 0.3s;
 }
-section > header > .collapse:hover {
+.note > header > .collapse:hover {
 	background: var(--theme-note-bg);
 }
 
-section > header > .user {
+.note > header > .user {
 	flex: 0 0.5 auto;
 }
 
-section > header > .time {
+.note > header > .time {
 	flex: 0 0 auto;
 	font-size: 0.8em;
 	color: #363636;
@@ -119,55 +119,51 @@ const Header = ({ id, user, published, collapsed, onCollapse }) => {
 };
 
 css`
-section {
+.note {
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
 
-	width: 15rem;
-
 	overflow: hidden;
 	color: var(--theme-note-fg);
 	background: var(--theme-note-bg);
-	box-shadow: rgba(0,0,0, 0.7) 2px 4px 5px;
 
 	border-radius: 0.3rem;
+
+	box-shadow: rgba(0,0,0, 0.3) 0 0 4px;
+	transition: box-shadow 0.5s;
 }
 
-section.type-Tombstone {
+.note.type-Tombstone {
 	color: var(--theme-note-bg);
 	background: var(--theme-note-fg);
 }
 
-section > main {
+.note > main {
 	position: relative;
 	padding: 0.5rem;
 	overflow: hidden;
 	font-family: serif;
 }
 
-section > main > p:first-child {
+.note > main > p:first-child {
 	margin-top: 0;
 }
-section > main > p:last-child {
+.note > main > p:last-child {
 	margin-bottom: 0;
 }
 
-section.tombstone > main {
-	font-family: inherit;
-}
-
-section.hidden {
+.note.hidden {
 	display: none;
 }
 
-section.ellipsis > main {
+.note.ellipsis > main {
 	max-height: 7em;
 }
-section.ellipsis > .attachment {
+.note.ellipsis > .attachment {
 	display: none;
 }
-section.ellipsis > main::after {
+.note.ellipsis > main::after {
 	position: absolute;
 	display: block;
 	content: '';
@@ -180,11 +176,11 @@ section.ellipsis > main::after {
 	height: 1.25em;
 	background: linear-gradient(0deg, var(--theme-note-bg) 5%, var(--theme-note-bg-trans) 100%);
 }
-section.type-Tombstone.ellipsis > main::after {
+.note.type-Tombstone.ellipsis > main::after {
 	background: linear-gradient(0deg, var(--theme-note-fg) 5%, var(--theme-note-fg-trans) 100%);
 }
 
-section.collapsed > main {
+.note.collapsed > main {
 	max-height: 2em;
 }
 `;
@@ -213,7 +209,7 @@ export const Note = ({
 	});
 
 	return (
-		<section
+		<article
 			style={{
 				'--theme-header-bg': backgroundColor,
 				'position': position && 'absolute',
@@ -222,6 +218,7 @@ export const Note = ({
 				'visibility': onSize && !position ? 'hidden' : 'visible',
 			}}
 			class={cn(
+				'note',
 				`type-${type}`,
 				collapsed && 'collapsed',
 				ellipsis && 'ellipsis',
@@ -244,6 +241,6 @@ export const Note = ({
 				onClick={onClick}
 			/>
 			{attachment.map(a => <Attachment {...a} />)}
-		</section>
+		</article>
 	);
 };