atri.dad/public/css/layout.css
Atridad Lahiji 57aba37be1
Some checks failed
Docker Deploy / build-and-push (push) Failing after 47s
No tailwind D:
2025-02-01 03:32:29 -06:00

87 lines
1.9 KiB
CSS
Vendored

/*
* Layout Container
* Equivalent to Tailwind's container class
* Provides a responsive wrapper with auto margins
*/
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 1rem;
}
/*
* Display Utilities
* Direct equivalents to Tailwind's display utilities:
* .block = block
* .flex = flex
*/
.block { display: block; }
.flex { display: flex; }
/*
* Height Utilities
* Matches Tailwind's height utilities:
* .h-full = h-full
* .min-h-screen = min-h-screen
*/
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
/*
* Flexbox Utilities
* Direct equivalents to Tailwind's flexbox utilities:
* .flex-row = flex-row
* .flex-col = flex-col
* .flex-wrap = flex-wrap
* .items-center = items-center
* .justify-center = justify-center
*/
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
/*
* Spacing Utilities
* Matches Tailwind's spacing scale:
* .gap-2 = gap-2 (0.5rem)
* .gap-3 = gap-3 (0.75rem)
* .gap-4 = gap-4 (1rem)
* .gap-6 = gap-6 (1.5rem)
* .mx-auto = mx-auto
* .mb-2 = mb-2
* .p-4 = p-4
*/
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-2 { margin-bottom: 0.5rem; }
.p-4 { padding: 1rem; }
/*
* Main Content Area
* Replaces Tailwind's min-h-[calc(100%-64px)]
* Ensures main content area fills available space minus header
*/
main {
min-height: calc(100% - 64px);
}
/*
* Responsive Breakpoints
* Matches Tailwind's sm: breakpoint (640px)
* .sm\:text-8xl = sm:text-8xl
* .sm\:text-[2rem] = sm:text-[2rem]
* .sm\:text-[1.5rem] = sm:text-[1.5rem]
* .sm\:gap-6 = sm:gap-6
*/
@media (min-width: 640px) {
.sm\:text-8xl { font-size: 6rem; }
.sm\:text-\[2rem\] { font-size: 2rem; }
.sm\:text-\[1\.5rem\] { font-size: 1.5rem; }
.sm\:gap-6 { gap: 1.5rem; }
}