95 lines
1.3 KiB
SCSS
95 lines
1.3 KiB
SCSS
#intro {
|
|
.section {
|
|
flex: 1 1 100%;
|
|
width: 100%;
|
|
|
|
.left-right-split {
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
display: flex;
|
|
gap: 20px;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.feed {
|
|
margin-top: -4px;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
display: flex;
|
|
gap: 8px;
|
|
|
|
.icon {
|
|
vertical-align: top;
|
|
width: calc(var(--font-size-link) * 1.5);
|
|
height: calc(var(--font-size-link) * 1.5);
|
|
}
|
|
|
|
.link {
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#articles {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 80px;
|
|
|
|
article {
|
|
display: flex;
|
|
gap: 20px 80px;
|
|
|
|
@media screen and (max-width: 960px) {
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
|
|
.banner.banner {
|
|
width: 100%;
|
|
max-width: 540px;
|
|
}
|
|
}
|
|
|
|
.details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
|
|
.headline a {
|
|
text-decoration: none;
|
|
color: var(--color-navy);
|
|
}
|
|
|
|
.publication {
|
|
font-weight: 800;
|
|
}
|
|
|
|
.summary {
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
text-align: justify;
|
|
hyphens: auto;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
}
|
|
}
|
|
|
|
.banner {
|
|
width: 400px;
|
|
flex: 0 0 auto;
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|