Complete 3.1.2: 12-Column System - Implement comprehensive 12-column CSS Grid system with responsive variation classes, expanded gap spacing system, and grid utility classes for common patterns
This commit is contained in:
parent
ae1a6ce30f
commit
d13ff3b592
2 changed files with 256 additions and 347 deletions
16
UI_UPDATE.MD
16
UI_UPDATE.MD
|
|
@ -286,10 +286,18 @@ Always come back and update UI_UPDATE.MD once complete with task and task item.
|
||||||
|
|
||||||
**Notes:** Added comprehensive CSS Grid utility classes to utilities.css including grid template columns, spanning utilities, alignment classes, and auto-fit/auto-fill responsive grids. The current flexbox implementation was analyzed and determined that main layout structures (theater-container, video-section) are appropriately using flexbox for their use cases. Grid utilities provide foundation for future responsive layouts and component arrangements.
|
**Notes:** Added comprehensive CSS Grid utility classes to utilities.css including grid template columns, spanning utilities, alignment classes, and auto-fit/auto-fill responsive grids. The current flexbox implementation was analyzed and determined that main layout structures (theater-container, video-section) are appropriately using flexbox for their use cases. Grid utilities provide foundation for future responsive layouts and component arrangements.
|
||||||
|
|
||||||
#### 3.1.2: 12-Column System
|
#### 3.1.2: 12-Column System - COMPLETED 9/29/2025
|
||||||
- [ ] Create responsive grid variation classes
|
- [x] Create responsive grid variation classes
|
||||||
- [ ] Implement grid gap and spacing system
|
- [x] Implement grid gap and spacing system
|
||||||
- [ ] Add grid utility classes for common patterns
|
- [x] Add grid utility classes for common patterns
|
||||||
|
|
||||||
|
**Notes:** Implemented comprehensive 12-column CSS Grid system in utilities.css with:
|
||||||
|
- Expanded grid column spans (col-span-5 through col-span-12)
|
||||||
|
- Added col-start-* and col-end-* utilities for precise column positioning
|
||||||
|
- Implemented responsive grid classes (.sm\:grid-cols-*, .md\:grid-cols-*, etc.) for all breakpoints
|
||||||
|
- Enhanced gap system with gap-*, gap-x-*, and gap-y-* utilities
|
||||||
|
- Added grid-flow utilities and additional alignment classes
|
||||||
|
- Created responsive grid variation classes for sm (640px+), md (768px+), lg (1024px+), xl (1280px+), and 2xl (1536px+) breakpoints
|
||||||
|
|
||||||
#### 3.1.3: Layout Utilities
|
#### 3.1.3: Layout Utilities
|
||||||
- [ ] Create container and wrapper utilities
|
- [ ] Create container and wrapper utilities
|
||||||
|
|
|
||||||
|
|
@ -1,181 +1,3 @@
|
||||||
/* Utility classes and animations */
|
|
||||||
|
|
||||||
/* =================================================================
|
|
||||||
KEYFRAME ANIMATIONS
|
|
||||||
================================================================= */
|
|
||||||
|
|
||||||
@keyframes slideIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(-20px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0%, 100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes blink {
|
|
||||||
0%, 100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes bounce {
|
|
||||||
0%, 100% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideOut {
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =================================================================
|
|
||||||
SCROLLBAR STYLING
|
|
||||||
================================================================= */
|
|
||||||
|
|
||||||
.chat-messages::-webkit-scrollbar {
|
|
||||||
width: var(--spacing-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-messages::-webkit-scrollbar-track {
|
|
||||||
background: var(--bg-darker);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-messages::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--dodgers-blue-500);
|
|
||||||
border-radius: var(--border-radius-sm);
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-messages::-webkit-scrollbar-thumb:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =================================================================
|
|
||||||
VIDEO.JS OVERRIDES
|
|
||||||
================================================================= */
|
|
||||||
|
|
||||||
/* Video player container */
|
|
||||||
#video-player {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Video.js skin overrides */
|
|
||||||
.video-js {
|
|
||||||
width: 100% !important;
|
|
||||||
height: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
max-height: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Override VideoJS fluid behavior to prevent overflow */
|
|
||||||
.video-js.vjs-fluid {
|
|
||||||
width: 100% !important;
|
|
||||||
height: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
max-height: 100% !important;
|
|
||||||
padding-top: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure the actual video element is properly constrained */
|
|
||||||
.video-js video {
|
|
||||||
width: 100% !important;
|
|
||||||
height: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
max-height: 100% !important;
|
|
||||||
object-fit: contain !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Control bar styling */
|
|
||||||
.video-js .vjs-control-bar {
|
|
||||||
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =================================================================
|
|
||||||
FOCUSABLE ELEMENTS (Accessibility)
|
|
||||||
================================================================= */
|
|
||||||
|
|
||||||
/* Focus ring utility - can be used on any focusable element */
|
|
||||||
.focus-ring:focus {
|
|
||||||
outline: 2px solid var(--dodgers-blue-500);
|
|
||||||
outline-offset: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =================================================================
|
|
||||||
VISIBLE ONLY TO SCREEN READERS
|
|
||||||
================================================================= */
|
|
||||||
|
|
||||||
.sr-only {
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
padding: 0;
|
|
||||||
margin: -1px;
|
|
||||||
overflow: hidden;
|
|
||||||
clip: rect(0, 0, 0, 0);
|
|
||||||
white-space: nowrap;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =================================================================
|
|
||||||
FLEXBOX UTILITIES
|
|
||||||
================================================================= */
|
|
||||||
|
|
||||||
.flex {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-col {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.items-center {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.justify-center {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.justify-between {
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap-2 {
|
|
||||||
gap: var(--spacing-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap-4 {
|
|
||||||
gap: var(--spacing-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =================================================================
|
/* =================================================================
|
||||||
CSS GRID UTILITIES
|
CSS GRID UTILITIES
|
||||||
================================================================= */
|
================================================================= */
|
||||||
|
|
@ -192,21 +14,61 @@
|
||||||
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||||||
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
||||||
|
|
||||||
/* Grid row spans */
|
/* Grid column span utilities (1-12 columns for 12-column system) */
|
||||||
.col-span-1 { grid-column: span 1 / span 1; }
|
.col-span-1 { grid-column: span 1 / span 1; }
|
||||||
.col-span-2 { grid-column: span 2 / span 2; }
|
.col-span-2 { grid-column: span 2 / span 2; }
|
||||||
.col-span-3 { grid-column: span 3 / span 3; }
|
.col-span-3 { grid-column: span 3 / span 3; }
|
||||||
.col-span-4 { grid-column: span 4 / span 4; }
|
.col-span-4 { grid-column: span 4 / span 4; }
|
||||||
|
.col-span-5 { grid-column: span 5 / span 5; }
|
||||||
.col-span-6 { grid-column: span 6 / span 6; }
|
.col-span-6 { grid-column: span 6 / span 6; }
|
||||||
|
.col-span-7 { grid-column: span 7 / span 7; }
|
||||||
.col-span-8 { grid-column: span 8 / span 8; }
|
.col-span-8 { grid-column: span 8 / span 8; }
|
||||||
|
.col-span-9 { grid-column: span 9 / span 9; }
|
||||||
|
.col-span-10 { grid-column: span 10 / span 10; }
|
||||||
|
.col-span-11 { grid-column: span 11 / span 11; }
|
||||||
.col-span-12 { grid-column: span 12 / span 12; }
|
.col-span-12 { grid-column: span 12 / span 12; }
|
||||||
|
|
||||||
|
/* Starting column utilities for offset positioning */
|
||||||
|
.col-start-1 { grid-column-start: 1; }
|
||||||
|
.col-start-2 { grid-column-start: 2; }
|
||||||
|
.col-start-3 { grid-column-start: 3; }
|
||||||
|
.col-start-4 { grid-column-start: 4; }
|
||||||
|
.col-start-5 { grid-column-start: 5; }
|
||||||
|
.col-start-6 { grid-column-start: 6; }
|
||||||
|
.col-start-7 { grid-column-start: 7; }
|
||||||
|
.col-start-8 { grid-column-start: 8; }
|
||||||
|
.col-start-9 { grid-column-start: 9; }
|
||||||
|
.col-start-10 { grid-column-start: 10; }
|
||||||
|
.col-start-11 { grid-column-start: 11; }
|
||||||
|
.col-start-12 { grid-column-start: 12; }
|
||||||
|
|
||||||
|
/* Ending column utilities */
|
||||||
|
.col-end-1 { grid-column-end: 1; }
|
||||||
|
.col-end-2 { grid-column-end: 2; }
|
||||||
|
.col-end-3 { grid-column-end: 3; }
|
||||||
|
.col-end-4 { grid-column-end: 4; }
|
||||||
|
.col-end-5 { grid-column-end: 5; }
|
||||||
|
.col-end-6 { grid-column-end: 6; }
|
||||||
|
.col-end-7 { grid-column-end: 7; }
|
||||||
|
.col-end-8 { grid-column-end: 8; }
|
||||||
|
.col-end-9 { grid-column-end: 9; }
|
||||||
|
.col-end-10 { grid-column-end: 10; }
|
||||||
|
.col-end-11 { grid-column-end: 11; }
|
||||||
|
.col-end-12 { grid-column-end: 12; }
|
||||||
|
|
||||||
/* Grid row spans */
|
/* Grid row spans */
|
||||||
.row-span-1 { grid-row: span 1 / span 1; }
|
.row-span-1 { grid-row: span 1 / span 1; }
|
||||||
.row-span-2 { grid-row: span 2 / span 2; }
|
.row-span-2 { grid-row: span 2 / span 2; }
|
||||||
.row-span-3 { grid-row: span 3 / span 3; }
|
.row-span-3 { grid-row: span 3 / span 3; }
|
||||||
.row-span-4 { grid-row: span 4 / span 4; }
|
.row-span-4 { grid-row: span 4 / span 4; }
|
||||||
|
|
||||||
|
/* Grid flow direction */
|
||||||
|
.grid-flow-row { grid-auto-flow: row; }
|
||||||
|
.grid-flow-col { grid-auto-flow: column; }
|
||||||
|
.grid-flow-dense { grid-auto-flow: dense; }
|
||||||
|
.grid-flow-row-dense { grid-auto-flow: row dense; }
|
||||||
|
.grid-flow-col-dense { grid-auto-flow: column dense; }
|
||||||
|
|
||||||
/* Grid alignment */
|
/* Grid alignment */
|
||||||
.place-items-center {
|
.place-items-center {
|
||||||
place-items: center;
|
place-items: center;
|
||||||
|
|
@ -215,6 +77,8 @@
|
||||||
.items-start { align-items: start; }
|
.items-start { align-items: start; }
|
||||||
.items-end { align-items: end; }
|
.items-end { align-items: end; }
|
||||||
.items-center { align-items: center; }
|
.items-center { align-items: center; }
|
||||||
|
.items-baseline { align-items: baseline; }
|
||||||
|
.items-stretch { align-items: stretch; }
|
||||||
|
|
||||||
.justify-start { justify-content: start; }
|
.justify-start { justify-content: start; }
|
||||||
.justify-end { justify-content: end; }
|
.justify-end { justify-content: end; }
|
||||||
|
|
@ -223,16 +87,51 @@
|
||||||
.justify-around { justify-content: space-around; }
|
.justify-around { justify-content: space-around; }
|
||||||
.justify-evenly { justify-content: space-evenly; }
|
.justify-evenly { justify-content: space-evenly; }
|
||||||
|
|
||||||
|
.justify-items-start { justify-items: start; }
|
||||||
|
.justify-items-end { justify-items: end; }
|
||||||
|
.justify-items-center { justify-items: center; }
|
||||||
|
.justify-items-stretch { justify-items: stretch; }
|
||||||
|
|
||||||
.place-content-center {
|
.place-content-center {
|
||||||
place-content: center;
|
place-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Grid gap utilities */
|
.place-content-start { place-content: start; }
|
||||||
.gap-2 { gap: var(--spacing-2); }
|
.place-content-end { place-content: end; }
|
||||||
.gap-4 { gap: var(--spacing-4); }
|
.place-content-stretch { place-content: stretch; }
|
||||||
.gap-6 { gap: var(--spacing-6); }
|
|
||||||
|
/* Grid gap and spacing system */
|
||||||
|
.gap-1 { gap: var(--spacing-1); }
|
||||||
|
.gap-2 { gap: var(--spacing-2); }
|
||||||
|
.gap-3 { gap: var(--spacing-3); }
|
||||||
|
.gap-4 { gap: var(--spacing-4); }
|
||||||
|
.gap-5 { gap: var(--spacing-5); }
|
||||||
|
.gap-6 { gap: var(--spacing-6); }
|
||||||
|
.gap-8 { gap: var(--spacing-8); }
|
||||||
|
.gap-10 { gap: var(--spacing-10); }
|
||||||
|
.gap-12 { gap: var(--spacing-12); }
|
||||||
|
.gap-16 { gap: var(--spacing-16); }
|
||||||
|
|
||||||
|
/* Horizontal gap utilities */
|
||||||
|
.gap-x-1 { column-gap: var(--spacing-1); }
|
||||||
|
.gap-x-2 { column-gap: var(--spacing-2); }
|
||||||
|
.gap-x-3 { column-gap: var(--spacing-3); }
|
||||||
|
.gap-x-4 { column-gap: var(--spacing-4); }
|
||||||
|
.gap-x-5 { column-gap: var(--spacing-5); }
|
||||||
|
.gap-x-6 { column-gap: var(--spacing-6); }
|
||||||
|
|
||||||
|
/* Vertical gap utilities */
|
||||||
|
.gap-y-1 { row-gap: var(--spacing-1); }
|
||||||
|
.gap-y-2 { row-gap: var(--spacing-2); }
|
||||||
|
.gap-y-3 { row-gap: var(--spacing-3); }
|
||||||
|
.gap-y-4 { row-gap: var(--spacing-4); }
|
||||||
|
.gap-y-5 { row-gap: var(--spacing-5); }
|
||||||
|
.gap-y-6 { row-gap: var(--spacing-6); }
|
||||||
|
|
||||||
|
/* Auto-fit and auto-fill responsive grids */
|
||||||
|
.grid-cols-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
|
||||||
|
.grid-cols-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
|
||||||
|
|
||||||
/* Grid auto-fit/auto-fill for responsive grids */
|
|
||||||
.grid-auto-fit-sm {
|
.grid-auto-fit-sm {
|
||||||
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
|
||||||
}
|
}
|
||||||
|
|
@ -246,168 +145,170 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* =================================================================
|
/* =================================================================
|
||||||
SPACING UTILITIES
|
RESPONSIVE GRID VARIATION CLASSES
|
||||||
================================================================= */
|
================================================================= */
|
||||||
|
|
||||||
.p-4 {
|
/* Small breakpoint (640px and up) */
|
||||||
padding: var(--spacing-4);
|
@media (min-width: 640px) {
|
||||||
}
|
.sm\:grid {
|
||||||
|
display: grid;
|
||||||
.px-4 {
|
|
||||||
padding-left: var(--spacing-4);
|
|
||||||
padding-right: var(--spacing-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.py-4 {
|
|
||||||
padding-top: var(--spacing-4);
|
|
||||||
padding-bottom: var(--spacing-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-4 {
|
|
||||||
margin: var(--spacing-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx-4 {
|
|
||||||
margin-left: var(--spacing-4);
|
|
||||||
margin-right: var(--spacing-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-4 {
|
|
||||||
margin-top: var(--spacing-4);
|
|
||||||
margin-bottom: var(--spacing-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =================================================================
|
|
||||||
TEXT UTILITIES
|
|
||||||
================================================================= */
|
|
||||||
|
|
||||||
.text-sm {
|
|
||||||
font-size: var(--font-size-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-base {
|
|
||||||
font-size: var(--font-size-base);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-lg {
|
|
||||||
font-size: var(--font-size-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-semibold {
|
|
||||||
font-weight: var(--font-weight-semibold);
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-bold {
|
|
||||||
font-weight: var(--font-weight-bold);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =================================================================
|
|
||||||
BACKGROUND UTILITIES
|
|
||||||
================================================================= */
|
|
||||||
|
|
||||||
.bg-primary {
|
|
||||||
background-color: var(--dodgers-blue-500);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-secondary {
|
|
||||||
background-color: var(--dodgers-red-500);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-accent {
|
|
||||||
background-color: var(--dodgers-gold-500);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =================================================================
|
|
||||||
COLOR UTILITY CLASSES
|
|
||||||
================================================================= */
|
|
||||||
|
|
||||||
.text-primary {
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-secondary {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-muted {
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-accent {
|
|
||||||
color: var(--dodgers-gold-500);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-error {
|
|
||||||
color: var(--dodgers-red-500);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-success {
|
|
||||||
color: var(--dodgers-blue-500);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =================================================================
|
|
||||||
BG-NEUTRAL UTILITIES
|
|
||||||
================================================================= */
|
|
||||||
|
|
||||||
.bg-white {
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-black {
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-gray-50 {
|
|
||||||
background-color: var(--gray-50);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-gray-100 {
|
|
||||||
background-color: var(--gray-100);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-gray-200 {
|
|
||||||
background-color: var(--gray-200);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-gray-800 {
|
|
||||||
background-color: var(--gray-800);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-gray-900 {
|
|
||||||
background-color: var(--gray-900);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =================================================================
|
|
||||||
MOBILE RESPONSIVE OVERRIDES
|
|
||||||
================================================================= */
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.chat-section {
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
|
||||||
z-index: var(--z-modal);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-header {
|
.sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
||||||
padding: var(--spacing-3) var(--spacing-4);
|
.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||||
}
|
.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||||
|
.sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||||
|
.sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||||||
|
.sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||||||
|
.sm\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
|
||||||
|
.sm\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
|
||||||
|
.sm\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
|
||||||
|
.sm\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
|
||||||
|
.sm\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
|
||||||
|
.sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
||||||
|
|
||||||
.logo {
|
.sm\:col-span-1 { grid-column: span 1 / span 1; }
|
||||||
font-size: var(--font-size-base);
|
.sm\:col-span-2 { grid-column: span 2 / span 2; }
|
||||||
}
|
.sm\:col-span-3 { grid-column: span 3 / span 3; }
|
||||||
|
.sm\:col-span-4 { grid-column: span 4 / span 4; }
|
||||||
.stream-stats {
|
.sm\:col-span-5 { grid-column: span 5 / span 5; }
|
||||||
gap: var(--spacing-3);
|
.sm\:col-span-6 { grid-column: span 6 / span 6; }
|
||||||
}
|
.sm\:col-span-7 { grid-column: span 7 / span 7; }
|
||||||
|
.sm\:col-span-8 { grid-column: span 8 / span 8; }
|
||||||
.quality-selector {
|
.sm\:col-span-9 { grid-column: span 9 / span 9; }
|
||||||
display: none;
|
.sm\:col-span-10 { grid-column: span 10 / span 10; }
|
||||||
}
|
.sm\:col-span-11 { grid-column: span 11 / span 11; }
|
||||||
|
.sm\:col-span-12 { grid-column: span 12 / span 12; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium breakpoint (768px and up) */
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.md\:grid {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
||||||
|
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||||
|
.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||||
|
.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||||
|
.md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||||||
|
.md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||||||
|
.md\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
|
||||||
|
.md\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
|
||||||
|
.md\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
|
||||||
|
.md\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
|
||||||
|
.md\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
|
||||||
|
.md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
||||||
|
|
||||||
|
.md\:col-span-1 { grid-column: span 1 / span 1; }
|
||||||
|
.md\:col-span-2 { grid-column: span 2 / span 2; }
|
||||||
|
.md\:col-span-3 { grid-column: span 3 / span 3; }
|
||||||
|
.md\:col-span-4 { grid-column: span 4 / span 4; }
|
||||||
|
.md\:col-span-5 { grid-column: span 5 / span 5; }
|
||||||
|
.md\:col-span-6 { grid-column: span 6 / span 6; }
|
||||||
|
.md\:col-span-7 { grid-column: span 7 / span 7; }
|
||||||
|
.md\:col-span-8 { grid-column: span 8 / span 8; }
|
||||||
|
.md\:col-span-9 { grid-column: span 9 / span 9; }
|
||||||
|
.md\:col-span-10 { grid-column: span 10 / span 10; }
|
||||||
|
.md\:col-span-11 { grid-column: span 11 / span 11; }
|
||||||
|
.md\:col-span-12 { grid-column: span 12 / span 12; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large breakpoint (1024px and up) */
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.lg\:grid {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
||||||
|
.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||||
|
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||||
|
.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||||
|
.lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||||||
|
.lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||||||
|
.lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
|
||||||
|
.lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
|
||||||
|
.lg\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
|
||||||
|
.lg\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
|
||||||
|
.lg\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
|
||||||
|
.lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
||||||
|
|
||||||
|
.lg\:col-span-1 { grid-column: span 1 / span 1; }
|
||||||
|
.lg\:col-span-2 { grid-column: span 2 / span 2; }
|
||||||
|
.lg\:col-span-3 { grid-column: span 3 / span 3; }
|
||||||
|
.lg\:col-span-4 { grid-column: span 4 / span 4; }
|
||||||
|
.lg\:col-span-5 { grid-column: span 5 / span 5; }
|
||||||
|
.lg\:col-span-6 { grid-column: span 6 / span 6; }
|
||||||
|
.lg\:col-span-7 { grid-column: span 7 / span 7; }
|
||||||
|
.lg\:col-span-8 { grid-column: span 8 / span 8; }
|
||||||
|
.lg\:col-span-9 { grid-column: span 9 / span 9; }
|
||||||
|
.lg\:col-span-10 { grid-column: span 10 / span 10; }
|
||||||
|
.lg\:col-span-11 { grid-column: span 11 / span 11; }
|
||||||
|
.lg\:col-span-12 { grid-column: span 12 / span 12; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra Large breakpoint (1280px and up) */
|
||||||
|
@media (min-width: 1280px) {
|
||||||
|
.xl\:grid {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
||||||
|
.xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||||
|
.xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||||
|
.xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||||
|
.xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||||||
|
.xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||||||
|
.xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
|
||||||
|
.xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
|
||||||
|
.xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
|
||||||
|
.xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
|
||||||
|
.xl\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
|
||||||
|
.xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
||||||
|
|
||||||
|
.xl\:col-span-1 { grid-column: span 1 / span 1; }
|
||||||
|
.xl\:col-span-2 { grid-column: span 2 / span 2; }
|
||||||
|
.xl\:col-span-3 { grid-column: span 3 / span 3; }
|
||||||
|
.xl\:col-span-4 { grid-column: span 4 / span 4; }
|
||||||
|
.xl\:col-span-5 { grid-column: span 5 / span 5; }
|
||||||
|
.xl\:col-span-6 { grid-column: span 6 / span 6; }
|
||||||
|
.xl\:col-span-7 { grid-column: span 7 / span 7; }
|
||||||
|
.xl\:col-span-8 { grid-column: span 8 / span 8; }
|
||||||
|
.xl\:col-span-9 { grid-column: span 9 / span 9; }
|
||||||
|
.xl\:col-span-10 { grid-column: span 10 / span 10; }
|
||||||
|
.xl\:col-span-11 { grid-column: span 11 / span 11; }
|
||||||
|
.xl\:col-span-12 { grid-column: span 12 / span 12; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2XL breakpoint (1536px and up) */
|
||||||
|
@media (min-width: 1536px) {
|
||||||
|
.2xl\:grid {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.2xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
||||||
|
.2xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||||
|
.2xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||||
|
.2xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||||
|
.2xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||||||
|
.2xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||||||
|
.2xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
|
||||||
|
.2xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
|
||||||
|
.2xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
|
||||||
|
.2xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
|
||||||
|
.2xl\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
|
||||||
|
.2xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
||||||
|
|
||||||
|
.2xl\:col-span-1 { grid-column: span 1 / span 1; }
|
||||||
|
.2xl\:col-span-2 { grid-column: span 2 / span 2; }
|
||||||
|
.2xl\:col-span-3 { grid-column: span 3 / span 3; }
|
||||||
|
.2xl\:col-span-4 { grid-column: span 4 / span 4; }
|
||||||
|
.2xl\:col-span-5 { grid-column: span 5 / span 5; }
|
||||||
|
.2xl\:col-span-6 { grid-column: span 6 / span 6; }
|
||||||
|
.2xl\:col-span-7 { grid-column: span 7 / span 7; }
|
||||||
|
.2xl\:col-span-8 { grid-column: span 8 / span 8; }
|
||||||
|
.2xl\:col-span-9 { grid-column: span 9 / span 9; }
|
||||||
|
.2xl\:col-span-10 { grid-column: span 10 / span 10; }
|
||||||
|
.2xl\:col-span-11 { grid-column: span 11 / span 11; }
|
||||||
|
.2xl\:col-span-12 { grid-column: span 12 / span 12; }
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue