hhm-client/src/styles/_news.scss

167 lines
2.4 KiB
SCSS

.news-wrapper {
display: flex;
// align-items: center;
gap: 1.6rem;
}
.news-info {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
gap: 1.6rem;
}
.news-info-inner {
width: 100%;
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.news-title {
font-size: 2.4rem;
font-weight: 700;
@include raleway;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-status {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.6rem;
}
.news-status-left {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.6rem;
}
.news-link {
color: $main;
display: flex;
align-items: center;
font-size: 1.4rem;
gap: 0.8rem;
}
.news-text {
font-size: 1.4rem;
font-weight: 400;
color: $body;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-date {
color: $gray-dark;
font-weight: 400;
@include roboto;
font-size: 1.4rem;
}
.news-category {
display: inline-block;
color: $main;
text-transform: uppercase;
font-weight: 400;
font-size: 1.4rem;
@include roboto;
}
.news-scroll {
display: flex;
flex-direction: column;
gap: 2.4rem;
}
.news-scroll-wrapper {
display: flex;
flex-direction: column;
gap: 3.2rem;
}
.news-scroll-inner {
display: flex;
flex-direction: column;
gap: 2.4rem;
}
@media (max-width: 1024px) {
.news-title {
font-size: 2rem;
}
}
@media (max-width: 750px) {
.news-info-inner {
flex-direction: column-reverse;
}
.news-wrapper {
flex-direction: column;
}
.news-image {
width: 100%;
height: 20rem;
overflow: hidden;
object-fit: cover;
object-position: center;
img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}
span {
display: block !important;
height: 100%;
}
}
.news-title {
font-size: 1.6rem;
}
.news-text {
display: none;
}
.new-status {
order: 1;
}
.news-info {
align-items: start;
}
.news-link {
display: none;
}
}
@media (max-width: 500px) {
.news-info-inner {
gap: 0.8rem;
}
.news-category {
font-size: 1.2rem;
}
.news-title {
font-size: 1.4rem;
}
.news-date {
font-size: 1rem;
}
}