Major redesign of feed component styling

1 files changed, 18 insertions, 153 deletions

diff --git a/src/app/components/feed/feed.component.css b/src/app/components/feed/feed.component.css
index 3d22349..baa96d5 100644
--- a/src/app/components/feed/feed.component.css
+++ b/src/app/components/feed/feed.component.css
@@ -1,171 +1,36 @@
-#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;
+#create-post {
+  width: 100%;
+  margin: 1em 0;
 }
 
-/* Top bar */
-
-#top-bar {
-  display: flex;
-  flex-direction: row;
-  width: 98%;
-  margin: 0 auto;
-  margin-bottom: .5em;
-  box-sizing: border-box;
+#new-post-message {
+  min-height: 1.5em;
+  resize: vertical;
 }
 
-#top-bar-profile-pic {
-  height: 2.5em;
-  width: 2.5em;
-  margin-right: .5em;
+#attachments-btns {
+  padding: 0.5em 0;
 }
 
-#top-bar-profile-pic > img {
-  height: inherit;
-  width: inherit;
+#attachments-btns img, .file-button > input {
+  height: 1.4em;
+  width: 1.4em;
 }
 
-#top-bar-open-chat {
-  /* Until implemented */
-  display: none;
+#new-post-attachments {
+  margin-bottom: 0.5em;
 }
 
-/* Create post */
-
-#create-post-form {
-  width: 100%;
+.file-button {
   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;
-}
-
-#attachment-img {
-  height: 1.5em;
-  width: 1.5em;
+.file-button > img {
   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 */
+.file-button > input {
+  font-size: inherit;
+  color: transparent;
 }