Ltouroumov (talk | contribs) No edit summary |
Ltouroumov (talk | contribs) No edit summary |
||
(23 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
.section-grid { | .section-grid { | ||
display: grid; | display: grid; | ||
grid-auto-rows: auto; | grid-auto-rows: auto; | ||
gap: | gap: 0.75rem; | ||
} | } | ||
Line 27: | Line 25: | ||
} | } | ||
.section-grid .section-cell { | .section-grid .cell { | ||
display: flex; | |||
align-items: stretch; | |||
} | |||
.section-grid .cell .object { | |||
flex-grow: 1; | |||
} | |||
.object-wrapper { | |||
display: flex; | |||
justify-content: center; | |||
} | } | ||
.object { | .object { | ||
border: | border: 1px solid white; | ||
border-radius: 10px; | border-radius: 10px; | ||
padding: | padding: 0.5rem; | ||
max-width: 50rem; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: stretch; | |||
justify-content: start; | |||
} | } | ||
.object h2 { | .object h2 { | ||
margin-top: 0; | margin-top: 0; | ||
text-align: center; | |||
} | |||
.object .image { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: stretch; | |||
} | |||
.object .image img { | |||
width: 100%; | |||
aspect-ratio: 5/3; | |||
object-fit: cover; | |||
object-position: top center; | |||
} | |||
.object .scores { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
row-gap: 0.15rem; | |||
margin: 0.25rem 0; | |||
font-size: 0.75rem; | |||
} | |||
.object .scores .score { | |||
min-width: max-content; | |||
} | |||
.object .scores .score p { | |||
margin: 0; | |||
} | |||
.object .requirements { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
row-gap: 0.15rem; | |||
margin: 0.25rem 0; | |||
font-size: 0.75rem; | |||
} | |||
.object .requirements .requirement { | |||
min-width: max-content; | |||
} | |||
.object .requirements .requirement p { | |||
margin:0; | |||
} | |||
.object .text { | |||
overflow-x: hidden; | |||
} | |||
.index-grid { | |||
display: grid; | |||
grid-template-columns: repeat(3, 1fr); | |||
grid-auto-rows: auto; | |||
gap: 0.75rem; | |||
} | |||
.index-card { | |||
border: 1px solid white; | |||
border-radius: 10px; | |||
padding: 0.5rem; | |||
max-width: 50rem; | |||
} | |||
.index-card h2, .index-card h3 { | |||
margin: 0; | |||
} | } |
Latest revision as of 23:36, 5 December 2023
.section-grid { display: grid; grid-auto-rows: auto; gap: 0.75rem; } .section-grid.col-1 { grid-template-columns: 1fr; } .section-grid.col-2 { grid-template-columns: 1fr 1fr; } .section-grid.col-3 { grid-template-columns: 1fr 1fr 1fr; } .section-grid.col-4 { grid-template-columns: 1fr 1fr 1fr 1fr; } .section-grid.col-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } .section-grid .cell { display: flex; align-items: stretch; } .section-grid .cell .object { flex-grow: 1; } .object-wrapper { display: flex; justify-content: center; } .object { border: 1px solid white; border-radius: 10px; padding: 0.5rem; max-width: 50rem; display: flex; flex-direction: column; align-items: stretch; justify-content: start; } .object h2 { margin-top: 0; text-align: center; } .object .image { display: flex; flex-direction: column; align-items: stretch; } .object .image img { width: 100%; aspect-ratio: 5/3; object-fit: cover; object-position: top center; } .object .scores { display: flex; flex-direction: column; align-items: center; row-gap: 0.15rem; margin: 0.25rem 0; font-size: 0.75rem; } .object .scores .score { min-width: max-content; } .object .scores .score p { margin: 0; } .object .requirements { display: flex; flex-direction: column; align-items: center; row-gap: 0.15rem; margin: 0.25rem 0; font-size: 0.75rem; } .object .requirements .requirement { min-width: max-content; } .object .requirements .requirement p { margin:0; } .object .text { overflow-x: hidden; } .index-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 0.75rem; } .index-card { border: 1px solid white; border-radius: 10px; padding: 0.5rem; max-width: 50rem; } .index-card h2, .index-card h3 { margin: 0; }