/* ========================================================================== layout.css — Container, header/footer layout, grid/flex, mobile nav hooks ========================================================================== Breakpoints used: - Mobile: < 768px - Tablet: 768px – 1023px - Desktop: ≥ 1024px ========================================================================== */ /* -------------------------------------------------------------------------- 1. Container -------------------------------------------------------------------------- */ .container { width: 100%; max-width: 1100px; /* Tweak this to widen/narrow the content column */ margin-inline: auto; padding-inline: var(--space-4); } @media (min-width: 768px) { .container { padding-inline: var(--space-6); } } @media (min-width: 1024px) { .container { padding-inline: var(--space-8); } } /* -------------------------------------------------------------------------- 2. Site Header — sticky with theme-aware transitions -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: 0 1px 4px var(--color-shadow); /* Smooth transitions on theme change */ transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); } .header-inner { display: flex; align-items: center; gap: var(--space-4); height: 60px; } /* Site title / logo */ .site-title { font-size: var(--text-xl); font-weight: 800; color: var(--color-text); text-decoration: none; letter-spacing: -0.02em; white-space: nowrap; flex-shrink: 0; } .site-title:hover { color: var(--color-primary); } /* -------------------------------------------------------------------------- 3. Main Navigation -------------------------------------------------------------------------- */ .main-nav { margin-left: auto; /* Push nav to the right */ } .nav-list { display: flex; align-items: center; gap: var(--space-2); } /* Header actions (theme toggle + hamburger) */ .header-actions { display: flex; align-items: center; gap: var(--space-2); } /* -------------------------------------------------------------------------- 4. Mobile Nav — hamburger & overlay -------------------------------------------------------------------------- The hamburger button is hidden on desktop. On mobile, clicking it adds .nav-open to the . When .nav-open: - .main-nav drops down as a full-width panel below the header - .hamburger shows a "close" state via CSS -------------------------------------------------------------------------- */ /* Hamburger: visible only on mobile */ .hamburger { display: none; } @media (max-width: 767px) { .hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; } /* Mobile nav panel — hidden by default */ .main-nav { display: none; position: absolute; top: 60px; /* Header height */ left: 0; right: 0; background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: var(--space-4); box-shadow: 0 4px 8px var(--color-shadow); margin-left: 0; } /* Show nav when .nav-open is on the body */ body.nav-open .main-nav { display: block; } .nav-list { flex-direction: column; align-items: flex-start; gap: var(--space-1); } .nav-list li { width: 100%; } /* Hamburger → "X" when open */ body.nav-open .hamburger .hamburger-line:nth-child(1) { transform: translateY(9px) rotate(45deg); } body.nav-open .hamburger .hamburger-line:nth-child(2) { opacity: 0; } body.nav-open .hamburger .hamburger-line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } } /* -------------------------------------------------------------------------- 5. Main content area -------------------------------------------------------------------------- */ main.container { padding-top: var(--space-8); padding-bottom: var(--space-12); min-height: calc(100vh - 60px - 80px); /* viewport - header - footer */ } /* -------------------------------------------------------------------------- 6. Site Footer — theme-aware transitions -------------------------------------------------------------------------- */ .site-footer { background-color: var(--color-bg-alt); border-top: 1px solid var(--color-border); padding-block: var(--space-6); /* Smooth transitions on theme change */ transition: background-color var(--transition-base), border-color var(--transition-base); } .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); } .footer-copy { color: var(--color-text-muted); font-size: var(--text-sm); } .footer-nav { display: flex; gap: var(--space-4); } .footer-nav a { font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; } .footer-nav a:hover { color: var(--color-primary); } /* -------------------------------------------------------------------------- 7. Grid helpers -------------------------------------------------------------------------- */ /* 1-col on mobile → 2-col on tablet → 3-col on desktop */ .posts-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 600px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .posts-grid { grid-template-columns: repeat(3, 1fr); } } /* Posts list: single column, stacked cards */ .posts-list { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-6); }