Michael Schiemer
fc3d7e6357
- Add comprehensive health check system with multiple endpoints - Add Prometheus metrics endpoint - Add production logging configurations (5 strategies) - Add complete deployment documentation suite: * QUICKSTART.md - 30-minute deployment guide * DEPLOYMENT_CHECKLIST.md - Printable verification checklist * DEPLOYMENT_WORKFLOW.md - Complete deployment lifecycle * PRODUCTION_DEPLOYMENT.md - Comprehensive technical reference * production-logging.md - Logging configuration guide * ANSIBLE_DEPLOYMENT.md - Infrastructure as Code automation * README.md - Navigation hub * DEPLOYMENT_SUMMARY.md - Executive summary - Add deployment scripts and automation - Add DEPLOYMENT_PLAN.md - Concrete plan for immediate deployment - Update README with production-ready features All production infrastructure is now complete and ready for deployment.
136 lines
2.6 KiB
CSS
136 lines
2.6 KiB
CSS
/**
|
|
* Grid System - Admin Interface
|
|
*
|
|
* Flexible Grid-System für Content-Layouts.
|
|
*/
|
|
|
|
@layer admin-objects {
|
|
/**
|
|
* Basic Grid
|
|
*/
|
|
.admin-grid {
|
|
display: grid;
|
|
gap: var(--admin-spacing-md);
|
|
|
|
/* Default: 1 column (mobile) */
|
|
grid-template-columns: 1fr;
|
|
|
|
/* Tablet+: Auto-fit with min 250px columns */
|
|
@media (min-width: 768px) {
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Grid Variants
|
|
*/
|
|
.admin-grid--2-col {
|
|
@media (min-width: 768px) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
.admin-grid--3-col {
|
|
@media (min-width: 768px) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
.admin-grid--4-col {
|
|
@media (min-width: 768px) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Gap Variants
|
|
*/
|
|
.admin-grid--gap-sm {
|
|
gap: var(--admin-spacing-sm);
|
|
}
|
|
|
|
.admin-grid--gap-lg {
|
|
gap: var(--admin-spacing-lg);
|
|
}
|
|
|
|
.admin-grid--gap-xl {
|
|
gap: var(--admin-spacing-xl);
|
|
}
|
|
|
|
/**
|
|
* Sidebar Layout (2-column with sidebar)
|
|
*/
|
|
.admin-grid--sidebar {
|
|
@media (min-width: 1024px) {
|
|
grid-template-columns: 300px 1fr;
|
|
gap: var(--admin-spacing-xl);
|
|
}
|
|
}
|
|
|
|
.admin-grid--sidebar-right {
|
|
@media (min-width: 1024px) {
|
|
grid-template-columns: 1fr 300px;
|
|
gap: var(--admin-spacing-xl);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Stack
|
|
*
|
|
* Vertical spacing utility.
|
|
*/
|
|
.admin-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--admin-spacing-md);
|
|
}
|
|
|
|
.admin-stack--sm {
|
|
gap: var(--admin-spacing-sm);
|
|
}
|
|
|
|
.admin-stack--lg {
|
|
gap: var(--admin-spacing-lg);
|
|
}
|
|
|
|
.admin-stack--xl {
|
|
gap: var(--admin-spacing-xl);
|
|
}
|
|
|
|
/**
|
|
* Cluster
|
|
*
|
|
* Horizontal spacing utility with wrap.
|
|
*/
|
|
.admin-cluster {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--admin-spacing-md);
|
|
align-items: center;
|
|
}
|
|
|
|
.admin-cluster--sm {
|
|
gap: var(--admin-spacing-sm);
|
|
}
|
|
|
|
.admin-cluster--lg {
|
|
gap: var(--admin-spacing-lg);
|
|
}
|
|
|
|
.admin-cluster--justify-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.admin-cluster--justify-end {
|
|
justify-content: flex-end;
|
|
}
|
|
}
|