initial commit

css/style.css

@@ -0,0 +1,118 @@
+@font-face {
+  font-family: "RobotoSlab";
+  src: url("../fonts/RobotoSlab-Regular.ttf");
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  font-family: RobotoSlab;
+  color: #707070;
+  height: 100%;
+  margin: 0;
+  scrollbar-color: #969696 #d8d8d8;
+
+  display: grid;
+  grid-template-columns: 25vw auto;
+  grid-template-rows: auto auto;
+  grid-template-areas:
+    "comments video"
+    "comments text";
+}
+
+aside {
+  grid-area: comments;
+  background-color: #ededed;
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+}
+
+main {
+  background-color: #282828;
+  grid-area: video;
+
+  display: grid;
+  justify-items: center;
+  align-items: center;
+}
+
+video {
+    max-width: 100%;
+    max-height: 75vh;
+}
+
+article {
+  grid-area: text;
+  background-color: white;
+  padding: 4vh 5vw 4vh 2vw;
+  overflow-y: auto;
+}
+
+article h1:first-child {
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3 {
+  margin-bottom: 0;
+}
+
+h1 {
+  font-size: 1.6rem;
+}
+h2 {
+  font-size: 1.4rem;
+}
+h3 {
+  font-size: 1.2rem;
+}
+
+p {
+  margin: 0;
+}
+article p:last-child {
+  margin-bottom: 2vw;
+}
+
+.comment {
+  display: grid;
+  padding: 3vh 2vw 3vh 1.5vw;
+  font-size: 0.88rem;
+
+  column-gap: 12px;
+  row-gap: 2px;
+  grid-template-columns: max-content auto;
+  grid-template-rows: max-content max-content;
+  grid-template-areas:
+    "icon time"
+    "icon comment";
+  border-bottom: 0.1vh solid #707070;
+}
+.comment:last-child {
+  border: none;
+}
+.activeComment {
+  background-color: #fff;
+}
+
+.icon {
+  grid-area: icon;
+  margin-top: 4px;
+  width: 36px;
+  height: 36px;
+  text-align: center;
+  vertical-align: top;
+}
+
+.time {
+  grid-area: time;
+  color: #c1c1c1;
+}
+
+.commentText {
+  grid-area: comment;
+}