Moved from DevHive

1 files changed, 179 insertions, 0 deletions

diff --git a/src/app/components/feed/feed.component.css b/src/app/components/feed/feed.component.css
new file mode 100644
index 0000000..cb155c6
--- /dev/null
+++ b/src/app/components/feed/feed.component.css
@@ -0,0 +1,179 @@
+#feed-page {
+  height: 100%;
+  max-width: 40em;
+  box-sizing: border-box;
+  border: .5em solid var(--bg-color);
+
+  margin: 0 auto;
+
+  display: flex;
+}
+
+@media screen and (max-width: 750px) {
+  #profile-bar {
+    display: none !important;
+  }
+  #top-bar-profile-pic {
+    display: initial;
+  }
+}
+@media screen and (min-width: 750px) {
+  #profile-bar {
+    display: initial;
+  }
+  #top-bar-profile-pic {
+    display: none !important;
+  }
+}
+
+/* Content */
+
+#feed-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Profile bar */
+
+#profile-bar {
+  width: 20%;
+  height: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  box-sizing: border-box;
+  background-color: var(--bg-color);
+
+  margin-right: .5em;
+  padding-bottom: 1em;
+  padding: .5em;
+  border-radius: .6em;
+}
+
+#profile-bar-profile-pic {
+  width: 7em;
+  height: 7em;
+  box-sizing: border-box;
+  padding: .5em;
+}
+
+#profile-bar-name {
+  text-align: center;
+}
+
+#profile-bar-username {
+  margin: .5em 0;
+}
+
+#profile-bar > #profile-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* Top bar */
+
+#top-bar {
+  display: flex;
+  flex-direction: column;
+  width: 98%;
+  margin: 0 auto;
+  margin-bottom: .5em;
+  box-sizing: border-box;
+}
+
+#top-bar-profile-pic {
+  height: 2.5em;
+  width: 2.5em;
+  margin-right: .5em;
+}
+
+#top-bar-profile-pic > img {
+  height: inherit;
+  width: inherit;
+}
+
+#top-bar-open-chat {
+  /* Until implemented */
+  display: none;
+}
+
+#main-content {
+  display: flex;
+}
+
+/* Create post */
+
+#create-post-form {
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+#form-inputs {
+  display: flex;
+}
+
+#top-bar-create-post {
+  flex: 1;
+  font-size: inherit;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  box-sizing: border-box;
+  border: 2px solid var(--bg-color);
+  border-radius: .6em;
+}
+
+#file-upload {
+  font-size: inherit;
+  color: transparent;
+  width: 1.5em;
+  height: 1.5em;
+}
+
+#file-upload:hover {
+  cursor: pointer;
+}
+
+#file-upload::-webkit-file-upload-button {
+  visibility: hidden;
+}
+
+#attachment-img {
+  height: 1.5em;
+  width: 1.5em;
+  position: absolute;
+  right: .4em;
+  pointer-events: none;
+}
+
+/* Posts */
+
+#no-posts-msg {
+  width: 100%;
+  margin-top: 1em;
+  color: gray;
+  text-align: center;
+}
+
+/* Elements, that act as buttons */
+
+#profile-bar > #profile-info:hover,
+#top-bar-profile-pic:hover {
+  cursor: pointer;
+}
+
+/* Can't copy text from */
+
+#profile-bar,
+.vote {
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+/Edge */
+  user-select: none; /* Standard */
+}