109 lines
1.4 KiB
SCSS
109 lines
1.4 KiB
SCSS
.post {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
width: 80%;
|
|
height: 90%;
|
|
|
|
margin: 2% auto 5% auto;
|
|
|
|
overflow-y: auto;
|
|
|
|
background-color: $white;
|
|
|
|
cursor: initial;
|
|
|
|
&__actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
width: 100%;
|
|
|
|
padding: 20px 50px 0;
|
|
gap: 20px;
|
|
}
|
|
|
|
&__header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 20px 0 10px 0;
|
|
width: 75%;
|
|
}
|
|
|
|
&__title {
|
|
&--read {
|
|
color: $gainsboro;
|
|
}
|
|
}
|
|
|
|
&__link {
|
|
display: inline-flex;
|
|
padding: 0 15px;
|
|
|
|
& img {
|
|
width: 30px;
|
|
}
|
|
}
|
|
|
|
&__date {
|
|
font-size: small;
|
|
}
|
|
|
|
&__author {
|
|
font-size: small;
|
|
}
|
|
|
|
&__rule, &__category {
|
|
background-color: $orange !important;
|
|
|
|
& a {
|
|
color: $black;
|
|
}
|
|
}
|
|
|
|
&__body {
|
|
display:flex;
|
|
flex-direction: column;
|
|
|
|
padding: 10px 0 30px 0;
|
|
width: 75%;
|
|
|
|
& p {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
& h1, h2, h3 {
|
|
margin: 20px 0 5px 0;
|
|
}
|
|
|
|
& img, video {
|
|
padding: 10px 0;
|
|
|
|
width: max-content;
|
|
max-width: 100%;
|
|
}
|
|
|
|
& ul, ol {
|
|
list-style-position: inside;
|
|
}
|
|
}
|
|
|
|
&__close-button {
|
|
background-color: $blue;
|
|
color: $white;
|
|
|
|
&:hover {
|
|
background-color: lighten($blue, +1%);
|
|
}
|
|
}
|
|
|
|
&__meta-info {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
margin: 15px 0;
|
|
gap: 5px;
|
|
}
|
|
}
|