Template:Content/styles.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
| Line 1: | Line 1: | ||
.tile-row { | .tile-row { | ||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
gap: 2em; | |||
margin: 2em auto; | |||
max-width: 1200px; | |||
} | } | ||
.tile { | .tile { | ||
background: #fdfaf3; | |||
border: 1px solid #c8b68e; | |||
border-radius: 8px; | |||
padding: 1em; | |||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); | |||
width: 180px; | |||
text-align: center; | |||
text-decoration: none; | |||
transition: transform 0.2s, box-shadow 0.2s; | |||
cursor: pointer; | |||
} | } | ||
.tile:hover { | .tile:hover { | ||
transform: scale(1.03); | |||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |||
} | } | ||
.tile-image { | .tile-image { | ||
width: 100%; | |||
height: 150px; | |||
object-fit: contain; | |||
display: block; | |||
margin: 0 auto 0.8em auto; | |||
} | } | ||
.tile-label { | .tile-label { | ||
font-size: 1.05em; | |||
font-weight: 600; | |||
color: #222; | |||
display: block; | |||
line-height: 1.4; | |||
} | } | ||
@media (max-width: 800px) { | @media (max-width: 800px) { | ||
.tile { | |||
width: 45%; | |||
} | |||
} | } | ||
Revision as of 04:54, 26 July 2025
.tile-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2em;
margin: 2em auto;
max-width: 1200px;
}
.tile {
background: #fdfaf3;
border: 1px solid #c8b68e;
border-radius: 8px;
padding: 1em;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
width: 180px;
text-align: center;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
cursor: pointer;
}
.tile:hover {
transform: scale(1.03);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.tile-image {
width: 100%;
height: 150px;
object-fit: contain;
display: block;
margin: 0 auto 0.8em auto;
}
.tile-label {
font-size: 1.05em;
font-weight: 600;
color: #222;
display: block;
line-height: 1.4;
}
@media (max-width: 800px) {
.tile {
width: 45%;
}
}