89 lines
1.5 KiB
CSS
89 lines
1.5 KiB
CSS
@media (min-width: 1180px) {
|
|
#servicesGrid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
#servicesGrid {
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.hero {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.layout {
|
|
padding: 24px 14px 60px;
|
|
}
|
|
.panel {
|
|
padding: 16px;
|
|
}
|
|
.grid {
|
|
gap: 10px;
|
|
}
|
|
.card {
|
|
padding: 12px;
|
|
}
|
|
.hero-stats {
|
|
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.release-versions {
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
.release-versions .align-right {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.topbar {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 10px;
|
|
padding: 12px 16px;
|
|
}
|
|
.brand {
|
|
justify-content: flex-start;
|
|
}
|
|
.top-actions {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
gap: 8px;
|
|
}
|
|
.top-actions .ghost {
|
|
padding: 8px 10px;
|
|
}
|
|
.top-indicators {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
.top-indicators .chip-label {
|
|
grid-column: 1 / -1;
|
|
margin-right: 0;
|
|
font-size: 0.8rem;
|
|
}
|
|
.top-indicators .status-chip,
|
|
.top-indicators .hint {
|
|
width: auto;
|
|
justify-self: flex-start;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.hero {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.hero-stats {
|
|
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
}
|
|
}
|