74 lines
1.7 KiB
CSS
74 lines
1.7 KiB
CSS
article {
|
||
.article-hero {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
z-index: 1;
|
||
position: fixed;
|
||
top: 0;
|
||
|
||
&.blurred-cover {
|
||
filter: blur(4px);
|
||
/* ou ce que vous souhaitez */
|
||
}
|
||
|
||
.image-attribution {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
transform-origin: bottom right;
|
||
transform: rotate(-90deg) translateX(100%);
|
||
|
||
font-size: 0.75rem;
|
||
color: #bbb;
|
||
background: rgba(0, 0, 0, 0.75);
|
||
padding: 0.4rem 0.6rem;
|
||
border-radius: 6px 6px 0 0;
|
||
pointer-events: none;
|
||
z-index: 7;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.article-content,
|
||
aside {
|
||
position: relative;
|
||
z-index: 2;
|
||
max-width: 80ch;
|
||
margin: 2rem auto;
|
||
padding: 2rem;
|
||
background: rgba(30, 30, 30, 1);
|
||
border-radius: 12px;
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
|
||
inset 0 1px 2px rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
}
|
||
|
||
#article-backdrop {
|
||
position: absolute;
|
||
top: 0;
|
||
overflow: hidden;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: auto;
|
||
bottom: 0;
|
||
/* suffisamment grand pour dépasser l’article */
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
|
||
background: linear-gradient(to bottom,
|
||
rgba(0, 0, 0, 0) 0%,
|
||
rgba(0, 0, 0, 0) 100vh,
|
||
rgba(0, 0, 0, 0.4) 113vh,
|
||
rgba(0, 0, 0, 0.8) 125vh);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
article .article-content {
|
||
padding: 2rem 0;
|
||
}
|
||
} |