You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
1.6 KiB
CSS
119 lines
1.6 KiB
CSS
@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;
|
|
}
|