Rumperuu/Omphaloskepsis-2
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

refactor: item tile headers

Browse source
This commit is contained in:
Ben Goldsworthy 2025-04-09 10:15:56 +02:00
parent d81c72a9dd
commit 0ed6a77690
No known key found for this signature in database
5 changed files with 72 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

76
assets/css/components/_item-tile.scss
View file

@ -5,6 +5,10 @@
&:hover {
border-color: $dark;
& .item-tile__title-wrapper {
opacity: 1;
}
}
}
@ -13,47 +17,34 @@
}
.item-tile {
display: grid;
min-block-size: 180px;
grid-template-columns: 5% auto 5%;
grid-template-rows: 2.5% auto 2.5%;
grid-template-areas:
". . ."
". tile-details ."
". . .";
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-position: center;
word-break: break-word;
background-size: cover;
block-size: 15em;
border: 2px solid $dark;
align-content: center;
position: relative;
@media (prefers-reduced-data: reduce) {
background: none !important;
}
&__header {
text-align: center;
&__series {
margin-block: 0 1em;
margin-inline: auto;
font-size: 1.2em;
top: 0;
}
&__title-wrapper {
display: flex;
flex-direction: column;
background-color: $dark;
opacity: 0.9;
display: grid;
grid-area: tile-details;
grid-template-columns: 5px auto 5px;
grid-template-rows: 0 1.8em auto auto;
grid-template-areas:
". . ."
". banner ."
". tile-title ."
". tile-subtitle .";
}
&--heading {
font-size: 3em;
& .item-tile__header,
& .item-tile__redacted {
opacity: 1;
grid-template-rows: auto;
grid-template-areas: ". tile-title .";
}
text-align: center;
margin: auto;
width: 80%;
margin-block: auto;
}
&--ohwhatohjeez {
@ -68,6 +59,15 @@
border: 2px solid $omphaloskepsis;
}
&--heading {
text-align: center;
background-color: $dark;
& .item-tile__header {
font-size: 3em;
}
}
&__banner {
padding-inline: 0.75em;
grid-area: banner;
@ -83,6 +83,14 @@
background-color: #ebebeb;
}
& hgroup {
padding: 1em 0.5em;
& > * {
margin: 0.25lh;
}
}
&__title,
&__subtitle {
color: $light;