Content added Content deleted
MarbleNiter (talk | contribs) (Flip Card Styling) |
MarbleNiter (talk | contribs) mNo edit summary |
||
| (30 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
. |
.page-grid { |
||
display: flex; |
|||
width: 160px; |
|||
flex-flow: column nowrap; |
|||
height: auto; |
|||
| ⚫ | |||
border: 1px solid #ffffff1a; |
|||
/* perspective: 400px; */ |
|||
} |
} |
||
. |
.intro-section { |
||
display: grid; |
|||
position: relative; |
|||
grid-template-columns: repeat(auto-fit, minmax(360px,1fr)); |
|||
width: 100%; |
|||
grid-gap: 2em; |
|||
height: 100%; |
|||
transition: transform 0.8s; |
|||
/* transform-style: preserve-3d; */ |
|||
} |
} |
||
.weapon-infobox { |
|||
.flip-card:hover .flip-card-inner { |
|||
display: grid; |
|||
/* transform: rotateY(180deg); */ |
|||
grid-auto-flow: row; |
|||
padding: 16px; |
|||
justify-content: center; |
|||
} |
} |
||
@media screen and (max-width: 640px) { |
|||
.flip-card-front, .flip-card-back { |
|||
.weapon-infobox { |
|||
position: absolute; |
|||
grid-row: 1 / span 1; |
|||
width: 100%; |
|||
} |
|||
height: 100%; |
|||
/* -webkit-backface-visibility: hidden; */ |
|||
/* backface-visibility: hidden; */ |
|||
} |
} |
||
.infobox-title{ |
|||
.flip-card-front { |
|||
color: #cff; |
|||
| ⚫ | |||
font-size: 1.25em; |
font-size: 1.25em; |
||
| ⚫ | |||
letter-spacing: 0.04em; |
|||
| ⚫ | |||
text-align: center; |
|||
margin-bottom: 8px; |
|||
} |
} |
||
. |
.weapon-image { |
||
display: grid; |
|||
| ⚫ | |||
justify-items: center; |
|||
padding: 16px; |
|||
} |
|||
.weapon-details { |
|||
display: grid; |
|||
grid-gap: 16px; |
|||
grid-template-columns: repeat(3, minmax(80px, 1fr)); |
|||
padding: 16px; |
|||
justify-items: center; |
|||
} |
|||
.section-item { |
|||
display: grid; |
|||
grid-auto-flow: row; |
|||
justify-items: center; |
|||
} |
|||
.info-label { |
|||
font-size: 0.8em; |
font-size: 0.8em; |
||
letter-spacing: 0.04em; |
|||
/* transform: rotateY(180deg); */ |
|||
| ⚫ | |||
} |
|||
.info-data { |
|||
font-size: 1em; |
|||
color: var(--color-base--emphasized); |
|||
} |
|||
p, li { |
|||
font-size: 0.9em; |
|||
} |
|||
.info-data img { |
|||
vertical-align: middle; |
|||
} |
|||
.behemoth-list { |
|||
display: flex; |
|||
flex-flow: row wrap; |
|||
justify-content: space-between; |
|||
padding: 16px 0; |
|||
font-size: 1.5vh; |
|||
text-align: center; |
|||
color: var(--color-base--subtle); |
|||
} |
|||
.behemoth-list-item { |
|||
display: flex; |
|||
flex-flow: column wrap; |
|||
} |
} |
||
Latest revision as of 10:23, 4 July 2024
.page-grid {
display: flex;
flex-flow: column nowrap;
}
.intro-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px,1fr));
grid-gap: 2em;
}
.weapon-infobox {
display: grid;
grid-auto-flow: row;
padding: 16px;
justify-content: center;
}
@media screen and (max-width: 640px) {
.weapon-infobox {
grid-row: 1 / span 1;
}
}
.infobox-title{
font-size: 1.25em;
font-weight: 300;
letter-spacing: 0.04em;
color: var(--color-base--emphasized);
text-align: center;
margin-bottom: 8px;
}
.weapon-image {
display: grid;
justify-items: center;
padding: 16px;
}
.weapon-details {
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(3, minmax(80px, 1fr));
padding: 16px;
justify-items: center;
}
.section-item {
display: grid;
grid-auto-flow: row;
justify-items: center;
}
.info-label {
font-size: 0.8em;
letter-spacing: 0.04em;
color: var(--color-base--subtle);
}
.info-data {
font-size: 1em;
color: var(--color-base--emphasized);
}
p, li {
font-size: 0.9em;
}
.info-data img {
vertical-align: middle;
}
.behemoth-list {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
padding: 16px 0;
font-size: 1.5vh;
text-align: center;
color: var(--color-base--subtle);
}
.behemoth-list-item {
display: flex;
flex-flow: column wrap;
}