1 files changed, 134 insertions, 0 deletions
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.css b/src/DevHive.Angular/src/app/components/post/post.component.css
new file mode 100644
index 0000000..1b88c7d
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/post/post.component.css
@@ -0,0 +1,134 @@
+.post {
+  display: flex;
+  width: 98%;
+
+  margin: .5em auto;
+  box-sizing: border-box;
+  padding: .5em;
+  background-color: var(--card-bg);
+  position: relative;
+}
+
+.post:first-child {
+  margin-top: 0;
+}
+
+hr {
+  border: 1px solid black;
+  width: 90%;
+}
+
+/* Author */
+
+.author {
+  display: flex;
+  margin-bottom: .2em;
+}
+
+.author:hover {
+  cursor: pointer;
+}
+
+.author > img {
+  width: 2.2em;
+  height: 2.2em;
+  margin-right: .2em;
+}
+
+.author-info > .handle {
+  font-size: .9em;
+  color: gray;
+}
+
+/* Content */
+
+.content {
+  flex: 1;
+}
+
+.message {
+  margin: .3em 0;
+  word-break: break-all;
+}
+
+.bottom-post {
+  font-size: .5em;
+  color: gray;
+  display: flex;
+  align-items: center;
+}
+
+.separator {
+  margin: 0 .5em;
+}
+
+.comment-count {
+  font-size: 1em;
+}
+
+.comment-count > img {
+  height: .8em;
+}
+
+.message:hover, .timestamp:hover {
+  cursor: pointer;
+}
+
+/* Rating */
+
+/* Temporary, until ratings are implemented fully */
+.rating {
+  display: none !important;
+}
+
+.rating {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 4.4em;
+  margin: auto -.1em auto 0;
+}
+
+.score {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+
+.vote {
+  display: flex;
+  align-items: center;
+  flex: 1;
+
+  background: var(--card-bg);
+  font-size: 1em;
+
+  border: 1px solid var(--card-bg);
+  box-sizing: border-box;
+  border-radius: .2em;
+
+  }
+
+.vote:hover {
+  border: 1px solid var(--focus-color);
+  color: var(--focus-color);
+  cursor: pointer;
+}
+
+/* Attachments */
+
+.attachments {
+  display: flex;
+  width: 98%;
+  margin: -.3em auto .5em auto;
+  flex-wrap: wrap;
+}
+
+.attachments:empty {
+  display: none;
+}
+
+.attachments > * {
+  flex: 1;
+}