Main Page.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 193: | Line 193: | ||
.crw-article-grid { | .crw-article-grid { | ||
display: | display: grid; | ||
grid-template-columns: repeat(3, 1fr); | |||
gap: 16px; | |||
margin-bottom: 24px; | |||
} | } | ||
.crw-article-row { | .crw-article-row { | ||
display: | display: contents; | ||
} | } | ||
.crw-article-card { | .crw-article-card { | ||
display: | display: flex; | ||
flex-direction: column; | |||
border: 1px solid #d0dce8; | border: 1px solid #d0dce8; | ||
border-radius: 6px; | border-radius: 6px; | ||
| Line 214: | Line 212: | ||
color: #222222 !important; | color: #222222 !important; | ||
background: #ffffff; | background: #ffffff; | ||
box-shadow: 0 2px 6px rgba(0,64,128,0.07); | |||
transition: box-shadow 0.18s, transform 0.18s; | |||
} | } | ||
.crw-article-card:hover { | .crw-article-card:hover { | ||
border-color: #004080; | border-color: #004080; | ||
box-shadow: 0 | box-shadow: 0 6px 20px rgba(0,64,128,0.15); | ||
transform: translateY(-2px); | |||
} | } | ||
| Line 226: | Line 226: | ||
background: #e0ecf8; | background: #e0ecf8; | ||
overflow: hidden; | overflow: hidden; | ||
display: | display: flex; | ||
align-items: center; | |||
justify-content: center; | |||
font-size: 36px; | font-size: 36px; | ||
flex-shrink: 0; | |||
} | } | ||
| Line 235: | Line 236: | ||
width: 100%; | width: 100%; | ||
height: 130px; | height: 130px; | ||
object-fit: cover; | |||
display: block; | display: block; | ||
} | } | ||
| Line 240: | Line 242: | ||
.crw-article-info { | .crw-article-info { | ||
padding: 14px 14px 16px; | padding: 14px 14px 16px; | ||
display: flex; | |||
flex-direction: column; | |||
flex: 1; | |||
} | } | ||
| Line 456: | Line 461: | ||
display: inline-block; | display: inline-block; | ||
margin-left: 10px; | margin-left: 10px; | ||
} | |||
@media screen and (max-width: 900px) { | |||
.crw-article-grid { | |||
grid-template-columns: repeat(2, 1fr); | |||
} | |||
} | } | ||
| Line 496: | Line 507: | ||
} | } | ||
.crw-article-grid | .crw-article-grid { | ||
grid-template-columns: 1fr; | |||
} | } | ||
.crw-article-card { | .crw-article-card { | ||
margin-bottom: 12px; | margin-bottom: 12px; | ||
} | } | ||