universal layout CSS everywhere

/* Federated Wiki theme -------------------- - Mobile: horizontal page carousel (fixed jump) - Favicons small in content - Top nav visible (sticky/safe-area) - FIX: vertical scroll works inside page cards on mobile (only when needed) */ @import url("https://viki.wiki/assets/djr/OutputSans-Regular-Testing.otf"); /* ========== Base ========== */ :root{ --font-base:12px; --font-small:10px; --font-title:1.6rem; --font-heading:1.2rem; --font-subheading:1rem; --font-sans:"OutputSans-Regular","Inter",system-ui,sans-serif; --font-serif-title:"Crimson Pro","Lora",serif; --font-serif-heading:"Lora",serif; --font-sans-display:"Outfit","Inter",sans-serif; --font-mono:"Inconsolata",monospace; --window-border:#000; --desktop-background:#cfcfcf; --window-highlight:#fff; --app-nav-height:44px; } *{box-sizing:border-box;margin:0;padding:0} html,body{width:100%;height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%} body{background:#0e0e0e;color:#f5f5f5;font-family:var(--font-sans);font-size:var(--font-base);line-height:1.6;overflow:hidden} /* ===== Sticky site/app nav (not cut off) ===== */ body > nav, body > header.site, body > header.app, body > header.navbar, body > .site-nav, body > .navbar, #nav,#navbar{ position:sticky;top:max(env(safe-area-inset-top),0px); z-index:2000;background:#161616;min-height:var(--app-nav-height); padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right); } /* ===== Desktop layout ===== */ .main{ display:flex;flex-direction:row;gap:24px; padding:16px 12px 8px; height:calc(100dvh - var(--app-nav-height)); overflow-x:auto;overflow-y:hidden;align-items:flex-start; -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-gutter:stable both-edges; } .main .page{flex:0 0 auto} .page{ position:relative;display:flex;flex-direction:column; width:600px;max-width:600px;height:calc(100dvh - var(--app-nav-height) - 24px); background:#161616;border:1px solid #3a3a3a;border-radius:0;overflow:hidden;isolation:isolate; } .page::before{content:none} .page::after{ content:"";position:absolute;top:16px;bottom:16px;right:10px;width:14px; background:radial-gradient(circle at 7px 7px,#f0f0f0 0 3px,transparent 3px) 0 0/14px 28px repeat-y; opacity:.35;pointer-events:none; } .paper{ flex:1 1 auto;width:100%;padding:32px 40px 28px; overflow:auto;box-sizing:border-box;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; } .paper img,.paper svg,.paper video,.paper iframe{max-width:100%;height:auto;display:block;margin:auto} .paper iframe{width:100%} .page .item{width:100%} .page>footer{flex-shrink:0;width:100%;padding:12px 40px;box-sizing:border-box;background:var(--desktop-background);border-top:2px solid var(--window-border);color:#000} /* Typography */ .story{column-count:1;column-gap:0;max-width:70ch;margin:0 auto} .story h1,.story h2,.story h3,.story h4{column-span:all} .story h1{font-family:var(--font-serif-title);font-size:var(--font-title);font-weight:700} .story h2,.story h3{font-family:var(--font-serif-heading);font-weight:600;font-size:var(--font-heading)} .story h4{font-family:var(--font-sans-display);font-size:var(--font-subheading);font-weight:600} .story p,.story li{orphans:3;widows:3;line-height:1.5} .story code{background:#1f1f1f;border:1px solid #3a3a3a;font-family:var(--font-mono);font-size:var(--font-small);padding:.1em .3em} /* Outside footer */ footer{background:var(--desktop-background);border-top:2px solid var(--window-border);color:#000;padding:12px 16px} .factory,.factory-panel,.panel.factory{max-width:320px;width:100%} /* Links tappable; decorations never eat taps */ .page *::before,.page *::after{pointer-events:none} a{position:relative;z-index:5;pointer-events:auto;-webkit-tap-highlight-color:rgba(255,255,255,.25);touch-action:manipulation;cursor:pointer} /* ===== Favicons in content (Recent Changes, external sites) ===== */ .paper img[src*="favicon" i], .paper img[src$=".ico" i], .paper img[src*="/apple-touch-icon" i], .item img[src*="favicon" i], .item img[src$=".ico" i], .story img[src*="favicon" i]{ width:18px !important;height:18px !important;max-width:none !important; display:inline-block !important;margin:0 .35rem 0 0 !important; vertical-align:text-bottom !important;object-fit:contain !important; image-rendering:-webkit-optimize-contrast; } /* ========== Mobile (HORIZONTAL, sticky header, vertical scroll enabled in cards) ========== */ @media (max-width:700px),(hover:none) and (pointer:coarse){ input,select,textarea,button{font-size:16px !important} /* prevent iOS zoom */ html,body{height:100svh !important;overflow:hidden !important} .page::after{display:none !important} .main{ display:flex !important;flex-direction:row !important; gap:12px !important;padding:8px !important;margin:0 !important; width:100% !important;max-width:100% !important; height:calc(100svh - var(--app-nav-height)) !important; overflow-x:auto !important;overflow-y:hidden !important; -webkit-overflow-scrolling:touch !important;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scroll-padding-left:8px;scroll-behavior:auto !important; } .main .page{ display:grid !important;grid-template-rows:auto 1fr; width:calc(100vw - 24px) !important;max-width:none !important; height:100% !important;max-height:100% !important; margin:0 !important;border-radius:0 !important;overflow:hidden !important; scroll-snap-align:start !important;scroll-snap-stop:always !important; } .main .page>footer{display:none !important} .main .page>header, .main .page .header{ position:sticky !important;top:0 !important;z-index:3 !important;background:#161616; } /* CONTENT: fits the 1fr row, scrolls vertically when needed */ .paper{ min-height:0 !important; height:100% !important; max-height:100% !important; padding:12px 16px 8px !important; overflow-y:auto !important; /* <-- RE-ENABLED */ overflow-x:hidden !important; -webkit-overflow-scrolling:touch !important; /* smooth, native momentum */ overscroll-behavior-y:contain !important; /* no page bounce */ scrollbar-gutter:stable both-edges; touch-action:auto !important; /* allow vertical panning */ } /* Media & tables safe */ .paper img,.paper svg,.paper video,.paper canvas,.paper iframe{ width:auto !important;max-width:100% !important;height:auto !important;display:block !important;margin:auto !important } .paper table{display:block !important;width:100% !important;max-width:100% !important;overflow-x:auto !important;-webkit-overflow-scrolling:touch !important} .paper pre{white-space:pre-wrap !important;word-break:break-word !important;overflow-x:auto !important;max-width:100% !important} .paper code{white-space:pre-wrap !important;word-break:break-word !important} .paper [style*="width:"]{width:100% !important;max-width:100% !important} }