comment mockup

public/s/css/f0ck.css

@@ -2798,4 +2798,128 @@ ul.navbar-nav-guests li.nav-item {
     .random:active {
         background: #00000036;
     }
-}
+}
+
+/* changes for comment mockup */
+body {
+    overflow: hidden;
+}
+
+
+.container {
+    padding-top: 0;
+    max-width: 100%;
+    overflow: scroll;
+    padding-bottom: 0;
+}
+
+#main {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    height: calc(100% - 40px);
+}
+
+#comments1 {
+    width: 100%;
+}
+
+.comment {
+    background: black;
+    padding: 5px;
+    margin: 10px;
+    display: grid;
+    grid-template-rows: 0fr 1fr;
+    grid-template-columns: 0fr 1fr;
+  }
+  .sidebar {
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: 0fr 0fr auto 0fr;
+    border: 1px solid #363636;
+    background-color: var(--metadata-bg);
+  }
+
+  .commentbox {
+    display: grid;
+    grid-template-rows: 1fr 0fr;
+    padding: 5px;
+    border-bottom: 2px solid black;
+    background: #373737;
+    grid-gap: 5px;
+  }
+
+  #comments1 {
+    background: #131313;
+    border: 1px solid black;
+    color: white;
+  }
+
+  button.commentbutton {
+    width: 5rem;
+    border: 1px solid black;
+    background: #131313;
+    color: white;
+  }
+
+  .commentholder {
+    overflow: scroll;
+    min-height: 100%;
+    width: 100%;
+    height: 0;
+  }
+
+
+  img.avatar_comments {
+    height: auto;
+    position: relative;
+    width: 35px;
+    margin: 0;
+    left: 0;
+    top: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .comment_content {
+    grid-column: 2;
+  }
+
+  .comment_content p {
+    margin: 0;
+    padding: 5px;
+  }
+
+  .comment_username {
+    align-items: baseline;
+    display: grid;
+    position: relative;
+    height: 100%;
+    padding-left: 5px;
+    position: relative;
+    top: -5px;
+  }
+
+  .comment {
+    background: #171717;
+    padding: 5px;
+    margin: 10px;
+    display: grid;
+    grid-template-rows: 0fr 0fr;
+    grid-template-columns: 0fr 1fr;
+    border: 1px solid black;
+  }
+
+  .comment_content img {
+    max-width: 150px;
+  }
+
+  .header_sidebar {
+    background: -webkit-linear-gradient(left, #4f4a4f, #131313);
+    color: var(--accent);
+  }
+
+  .header_sidebar span {
+    position: relative;
+    left: 4px;
+    font-weight: bold;
+  }