Some checks failed
Docker Deploy / build-and-push (push) Failing after 47s
87 lines
1.9 KiB
CSS
Vendored
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; }
|
|
}
|