etoiledebethleem/website
3
1
Fork 0
Code Issues 6 Pull requests Projects 1 Releases Packages Activity Actions

feat(landing): trailer and articles section

Browse source
This commit is contained in:
Matthieu Bessat 2024-02-26 13:01:42 +01:00
parent 70a8884495
commit d5d67f7069
22 changed files with 942 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

112
assets/sass/article.scss
View file

@ -10,59 +10,88 @@
}
}
.article {
.article-card {
display: flex;
background-color: rgba(0, 0, 0, 0.2);
margin-bottom: 1rem;
.article__image {
display: block;
margin-right: 0rem;
overflow: hidden;
height: 210px;
width: 300px;
flex-grow: 0;
flex-shrink: 0;
img {
height: 100%;
width: 100%;
object-fit: cover;
transition: all 1s ease-in-out;
}
img:hover {
transform: scale(1.2);
}
}
.article__title {
color: white;
margin-bottom: 0.5rem;
margin-top: 1.5rem;
font-size: 1.5rem;
a {
color: white;
text-decoration: none;
}
}
.article__meta {
margin-bottom: 0.2rem;
opacity: 0.8;
}
.article__bottom {
display: flex;
justify-content: end;
}
.article__content {
padding: 0rem 2rem;
padding-bottom: 0.2rem;
}
.article__readmore.link {
padding: 1rem;
}
}
.prominent-article {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
.article__background {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-size: cover;
z-index: 0;
transition: all 0.2s ease-in-out;
.article__image {
height: 100% !important;
min-height: 100% !important;
width: 500px;
margin-right: 0rem;
}
.article__background-overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(1, 1, 1, 0.5);
z-index: 1;
}
.article__content {
position: relative;
z-index: 2;
color: white;
padding: 2rem 0;
padding: 2rem;
width: 100%;
.article__title {
color: white;
a {
color: white;
text-decoration: none;
}
}
.article__summary {
margin-bottom: 1.5rem;
}
.article__meta {
margin-bottom: 1rem;
opacity: 0.8;
}
.article__bottom {
display: flex;
justify-content: end;
.article__summary {
padding-bottom: 1rem;
}
.article__readmore {
border: 1px solid white;
}
}
@ -81,3 +110,20 @@
.right-floating-image {
float: right;
}
@media (max-width: $sm-breakpoint) {
.prominent-article {
.article__title {
margin-top: 1rem;
}
}
.article-card {
display: block;
.article__image {
width: 100%;
}
}
}