Content added Content deleted
MarbleNiter (talk | contribs) (Created page with ".page-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); grid-gap: 1em; } p { font-size: 0.9em; }") |
MarbleNiter (talk | contribs) mNo edit summary |
||
(31 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
.page-grid { |
/*.page-grid { |
||
display: grid; |
display: grid; |
||
grid-template-columns: repeat(auto-fit,minmax(360px,1fr)); |
|||
grid-gap: 1em 2em; |
|||
margin-bottom: 4em; |
|||
}*/ |
|||
⚫ | |||
⚫ | |||
} |
|||
h2, h3, h4 { |
|||
margin-top: 1em; |
|||
margin-bottom: 1em; |
|||
} |
|||
.related-nav-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); |
grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); |
||
grid- |
grid-auto-rows: minmax(80px, auto); |
||
grid-gap: 32px; |
|||
margin: 4em 0 0 0; |
|||
} |
} |
||
.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; |
|||
letter-spacing: 0.04em; |
|||
} |
|||
.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: #000000ab; |
|||
content: ""; |
|||
border-radius: 8px; |
|||
} |
} |
Latest revision as of 18:52, 25 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: 32px;
margin: 4em 0 0 0;
}
.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;
letter-spacing: 0.04em;
}
.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: #000000ab;
content: "";
border-radius: 8px;
}