Content added Content deleted
MarbleNiter (talk | contribs) mNo edit summary |
MarbleNiter (talk | contribs) mNo edit summary |
||
Line 33: | Line 33: | ||
.related-nav-foreground { |
.related-nav-foreground { |
||
position: absolute; |
position: absolute; |
||
top: |
top: 50%; |
||
left: 50%; |
|||
transform: translate(-50%,-50%); |
|||
bottom: auto; |
|||
left: 0; |
|||
text-align: center; |
text-align: center; |
||
font-weight: bold; |
font-weight: bold; |
||
Line 67: | Line 66: | ||
} |
} |
||
. |
.related-nav-background:after { |
||
position: absolute; |
position: absolute; |
||
top: 0; |
top: 0; |
Revision as of 08:13, 17 June 2024
.page-grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(360px,1fr));
grid-gap: 1em 2em;
margin-bottom: 4em;
}
p, li {
font-size: 0.9em;
}
h2, h3, h4 {
margin-top: 1em;
margin-bottom: 1em;
}
.related-nav-grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
grid-auto-rows: minmax(80px, auto);
grid-gap: 16px;
}
.related-nav-card {
position: relative;
min-width: 240px;
padding: 16px;
background: var(--color-surface-2);
border: 1px solid #ffffff1a;
border-radius: 8px;
}
.related-nav-foreground {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
font-weight: bold;
}
.related-nav-foreground a {
color: var(--color-base--emphasized);
text-decoration: none;
}
.related-nav-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 8px;
}
.related-nav-background picture,
.related-nav-background img {
width: 100%;
height: 100%;
border-radius: 8px;
}
.related-nav-background img {
object-fit: cover;
object-position: center;
}
.related-nav-background:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
background: linear-gradient(10deg, #000000cc, transparent);
content: "";
border-radius: 8px;
}