/* Max Frequency — Production CSS */ /* ============================================================ Fonts ============================================================ */ @font-face { font-family: 'Johto Mono'; src: url('/fonts/johto-mono-v2.509/WebFonts/JohtoMonoWeb-Regular.woff2') format('woff2'), url('/fonts/johto-mono-v2.509/WebFonts/JohtoMonoWeb-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } /* ============================================================ CSS Custom Properties — Light Mode (default) ============================================================ */ :root { --bg: #e1dedf; --bg-secondary: #d0d0d0; --text: #242327; --text-secondary: #42474a; --text-muted: #6b6b6b; --link: #6c5cb2; --link-hover: #8177c0; --accent: #6c5cb2; --border: #bbb; --border-light: #ccc; --code-bg: #d0cece; --tag-bg: #ccc8c8; --tag-text: #42474a; --callout-bg: rgba(0, 0, 0, 0.04); --callout-title-bg: rgba(0, 0, 0, 0.06); --highlight: hsla(251, 48%, 51%, 0.25); } /* ============================================================ Dark Mode ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1e1e1e; --bg-secondary: #262626; --text: #d2d4d4; --text-secondary: #ababab; --text-muted: #807e7e; --link: #38c6c0; --link-hover: #2a9998; --accent: #463a8d; --border: #444; --border-light: #3a3a3a; --code-bg: #2a2a2a; --tag-bg: #333; --tag-text: #ababab; --callout-bg: rgba(255, 255, 255, 0.04); --callout-title-bg: rgba(255, 255, 255, 0.06); --highlight: hsla(251, 48%, 51%, 0.5); } } [data-theme="dark"] { --bg: #1e1e1e; --bg-secondary: #262626; --text: #d2d4d4; --text-secondary: #ababab; --text-muted: #807e7e; --link: #38c6c0; --link-hover: #2a9998; --accent: #463a8d; --border: #444; --border-light: #3a3a3a; --code-bg: #2a2a2a; --tag-bg: #333; --tag-text: #ababab; --callout-bg: rgba(255, 255, 255, 0.04); --callout-title-bg: rgba(255, 255, 255, 0.06); --highlight: hsla(251, 48%, 51%, 0.5); } /* ============================================================ Reset & Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* Smooth theme transitions — only enabled after page load to prevent every element from animating its colors in on navigation. The element gets a "transitions-ready" class once the page has settled (added by an inline script). */ .transitions-ready *, .transitions-ready *::before, .transitions-ready *::after { transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; } body { margin: 0; padding: 0; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 1.05rem; line-height: 1.6; color: var(--text); background: var(--bg); } /* ============================================================ Site Layout — Sidebar + Content ============================================================ */ .site-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr) 220px; min-height: 100vh; max-width: 1220px; margin: 0 auto; } /* Right sidebar always occupies its grid column to prevent layout shift. Content fades in once "Previously On" data has loaded. */ /* --- Sidebar --- */ .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 1.5rem; border-right: 1px solid var(--border); background: var(--bg); display: flex; flex-direction: column; } .sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .sidebar .site-name { font-weight: 700; color: var(--text); text-decoration: none; font-size: 1.1rem; display: block; line-height: 1.3; } .sidebar .site-name:hover { color: var(--link); } .site-logo { color: var(--link); } .sidebar-nav { list-style: none; padding: 0; margin: 0 0 1.5rem 0; } .sidebar-nav li { padding: 0; } .sidebar-nav a { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0; color: var(--text-secondary); text-decoration: none; font-size: 0.95rem; } .sidebar-nav a svg { flex-shrink: 0; width: 16px; height: 16px; } .sidebar-nav a:hover { color: var(--text); } .sidebar-footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border); } .sidebar-copyright { font-size: 0.8rem; color: var(--text-muted); margin: 0.75rem 0 0; } .sidebar-links { font-size: 0.8rem; margin: 0.25rem 0 0; } .sidebar-links a { color: var(--text-muted); text-decoration: none; } .sidebar-links a:hover { color: var(--text); text-decoration: underline; } .sidebar-emoji-links { font-size: 1rem; margin: 0.5rem 0 0; letter-spacing: 0.05em; } .sidebar-emoji-links a { text-decoration: none; } .sidebar-emoji-links a:hover { opacity: 0.7; } .emoji-dot { color: var(--text-muted); font-size: 0.7rem; margin: 0 0.1rem; } /* --- Theme toggle (icon-only) --- */ .theme-toggle { display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.25rem; } .theme-toggle:hover { color: var(--text); } .theme-toggle svg { display: block; } /* --- Content area --- */ .content-wrapper { max-width: 780px; padding: 2rem 2.5rem; } /* --- Mobile header + menu toggle (hidden on desktop) --- */ .mobile-header { display: none; } .menu-toggle { display: none; } /* --- Right Sidebar ("Previously On") --- */ .sidebar-right { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 1.5rem 1rem; border-left: 1px solid var(--border); font-size: 0.85rem; display: flex; flex-direction: column; text-align: right; transition: opacity 0.3s ease; } .transitions-ready .sidebar-right { transition: opacity 0.3s ease, color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; } .sidebar-right.hidden { opacity: 0; } /* When "Previously On" data is cached, skip the fade — show immediately */ [data-prev-on-cached] .sidebar-right.hidden { opacity: 1; } .sidebar-right-heading { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.25rem; color: var(--text); } .sidebar-right-desc { color: var(--text-muted); font-size: 0.8rem; margin: 0 0 0.75rem; } .previously-on-list { list-style: none; padding: 0; margin: 0; } .previously-on-item { padding: 0.35rem 0; border-bottom: 1px solid var(--border-light); line-height: 1.35; } .previously-on-item:last-child { border-bottom: none; } .previously-on-item a { display: block; font-weight: 600; font-size: 0.82rem; text-decoration: none; color: var(--link); } .previously-on-item a:hover { text-decoration: underline; } .previously-on-year { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.1rem; } .previously-on-empty { color: var(--text-muted); font-style: italic; font-size: 0.82rem; line-height: 1.4; } .sidebar-right-footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border-light); } /* --- Mobile sidebar overlay (hidden on desktop) --- */ .sidebar-overlay { display: none; } /* --- Last.fm widget --- */ #lastfm-widget { margin-top: 0.75rem; min-height: 20px; } .lastfm-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.5rem; } .lastfm-flex { display: flex; align-items: center; gap: 0.6rem; } .lastfm-art { width: 50px; height: 50px; border-radius: 3px; object-fit: cover; flex-shrink: 0; } .lastfm-info { line-height: 1.3; min-width: 0; } .lastfm-title { font-size: 0.8rem; font-weight: 600; color: var(--text); margin: 0; } .lastfm-title a { color: inherit; text-decoration: none; } .lastfm-title a:hover { color: var(--link); text-decoration: underline; } .lastfm-artist { font-size: 0.78rem; color: var(--text-secondary); margin: 0; } .lastfm-album { font-size: 0.75rem; color: var(--text-muted); margin: 0; } .lastfm-idle { font-size: 0.8rem; color: var(--text-muted); margin: 0; } /* ============================================================ Typography ============================================================ */ h1, h2, h3, h4, h5, h6 { line-height: 1.25; margin-top: 1.5em; margin-bottom: 0.5em; color: var(--text); } h1 { font-size: 1.75rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.15rem; } a { color: var(--link); } a:hover { color: var(--link-hover); } mark { background: var(--highlight); padding: 0.1em 0.2em; border-radius: 2px; } /* ============================================================ Home Feed ============================================================ */ .home-feed { max-width: 720px; } .feed-post { margin-bottom: 0; } .feed-post-header { margin-bottom: 1rem; } .feed-post-meta { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; } .feed-post-meta time { color: var(--text-muted); font-size: 0.9rem; } .feed-post-header h2 { margin: 0; font-size: 1.5rem; line-height: 1.3; } .feed-post-header h2 a { color: var(--text); text-decoration: none; } .feed-post-header h2 a:hover { color: var(--link); } .feed-post-footer { margin-top: 1rem; } .feed-permalink { font-size: 0.85rem; color: var(--text-muted); text-decoration: none; } .feed-permalink:hover { color: var(--link); } .feed-divider { margin: 2.5rem 0; border: none; border-top: 3px solid var(--border); } .feed-more { text-align: center; margin: 2.5rem 0 1rem; font-size: 1rem; } .feed-more a { color: var(--link); text-decoration: none; font-weight: 600; } .feed-more a:hover { color: var(--link-hover); } /* ============================================================ 404 Error Page ============================================================ */ .error-page { text-align: center; padding: 3rem 1rem; } .error-page img { max-width: 480px; border-radius: 8px; margin-bottom: 1.5rem; } .error-page h1 { font-size: 3rem; margin-bottom: 0.5rem; } .error-page p { font-size: 1.1rem; color: var(--text-secondary); } .error-page a { color: var(--link); font-weight: 600; } .error-page a:hover { color: var(--link-hover); } /* ============================================================ Post Header ============================================================ */ .post-header { margin-bottom: 2rem; } .post-header h1 { margin-bottom: 0.25rem; } .post-header time { color: var(--text-muted); font-size: 0.9rem; } .post-tags { margin-top: 0.5rem; } .tag { display: inline-block; font-size: 0.8rem; color: var(--tag-text); background: var(--tag-bg); padding: 0.15em 0.5em; border-radius: 3px; margin-right: 0.25rem; } /* ============================================================ Content ============================================================ */ img { max-width: 100%; height: auto; border-radius: 4px; } blockquote { margin: 1rem 0; padding: 0.5rem 1rem; border-left: 3px solid var(--border); color: var(--text-secondary); } blockquote blockquote { margin-top: 0.5rem; } pre { background: var(--code-bg); padding: 1rem; overflow-x: auto; border-radius: 4px; font-size: 0.9rem; } code { font-family: 'Johto Mono', "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; } :not(pre) > code { background: var(--code-bg); padding: 0.15em 0.35em; border-radius: 3px; } table { border-collapse: collapse; width: 100%; margin: 1rem 0; } th, td { border: 1px solid var(--border); padding: 0.5rem; text-align: left; } th { background: var(--code-bg); } hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; } /* Task lists (GFM) */ .contains-task-list { list-style: none; padding-left: 0; } .task-list-item { padding-left: 1.5em; position: relative; } .task-list-item input[type="checkbox"] { position: absolute; left: 0; top: 0.3em; } /* Audio */ audio { display: block; width: 100%; margin: 1rem 0; } /* iframes (YouTube, Buttondown, etc.) */ .iframe-container { position: relative; width: 100%; padding-bottom: 56.25%; margin: 1rem 0; } .iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-radius: 4px; } /* Standalone iframes (Buttondown, etc.) */ iframe:not(.iframe-container iframe) { max-width: 100%; } /* ============================================================ Footer (no longer needed — info is in the sidebar) ============================================================ */ /* ============================================================ Callouts — Uses --callout-color (RGB triplet) for theming ============================================================ */ .callout { --callout-color: 125, 125, 125; /* default grey */ margin: 1rem 0; padding: 0; border-left: 4px solid rgb(var(--callout-color)); border-radius: 4px; background: rgba(var(--callout-color), 0.1); overflow: hidden; } .callout-title { display: flex; align-items: center; gap: 0.35rem; font-weight: 600; padding: 0.5rem 1rem; background: rgba(var(--callout-color), 0.08); color: rgb(var(--callout-color)); } .callout-icon { display: inline-flex; flex-shrink: 0; color: rgb(var(--callout-color)); } .callout-icon svg { width: 18px; height: 18px; } .callout-fold { display: inline-flex; margin-left: auto; transition: transform 0.15s; color: rgb(var(--callout-color)); } .transitions-ready .callout-fold { transition: transform 0.15s, color 0.25s ease; } .callout-fold svg { width: 18px; height: 18px; } .callout-content { padding: 0.25rem 1rem 0.5rem; } .callout-content > :first-child { margin-top: 0.25rem; } .callout-content > :last-child { margin-bottom: 0.25rem; } /* Nested callouts */ .callout .callout { margin: 0.5rem 0; } /* Collapsible callouts —
/ */ details.callout > summary { cursor: pointer; list-style: none; } details.callout > summary::-webkit-details-marker { display: none; } /* Rotate fold chevron when open */ details.callout:not([open]) > summary .callout-fold { transform: rotate(-90deg); } /* --- Callout type colors via data-callout attribute --- Colors are RGB triplets used with rgb(var(--callout-color)). Standard types follow Obsidian defaults; custom types match publish.css. */ /* Standard types */ .callout[data-callout="info"] { --callout-color: 68, 138, 255; } .callout[data-callout="tip"] { --callout-color: 0, 191, 165; } .callout[data-callout="success"] { --callout-color: 0, 200, 83; } .callout[data-callout="warning"] { --callout-color: 255, 145, 0; } .callout[data-callout="danger"] { --callout-color: 255, 23, 68; } .callout[data-callout="failure"] { --callout-color: 255, 82, 82; } .callout[data-callout="bug"] { --callout-color: 255, 23, 68; } .callout[data-callout="question"] { --callout-color: 255, 171, 0; } .callout[data-callout="quote"] { --callout-color: 158, 158, 158; } .callout[data-callout="example"] { --callout-color: 124, 77, 255; } .callout[data-callout="abstract"] { --callout-color: 0, 184, 212; } /* Custom site types — base colors (both themes) from publish.css */ .callout[data-callout="todo"] { --callout-color: 0, 172, 110; } .callout[data-callout="then"] { --callout-color: 2, 122, 255; } .callout[data-callout="scs"] { --callout-color: 222, 59, 63; } .callout[data-callout="kiefer"] { --callout-color: 226, 117, 134; } .callout[data-callout="ps"] { --callout-color: 35, 112, 170; } .callout[data-callout="xbox"] { --callout-color: 17, 123, 17; } .callout[data-callout="patreon"] { --callout-color: 252, 102, 77; } .callout[data-callout="habits"] { --callout-color: 255, 156, 0; } .callout[data-callout="time"] { --callout-color: 134, 101, 180; } /* Custom site types — light-mode overrides (default = light) */ .callout[data-callout="game"] { --callout-color: 36, 35, 39; } .callout[data-callout="art"] { --callout-color: 36, 35, 39; } .callout[data-callout="log"] { --callout-color: 224, 119, 0; } .callout[data-callout="email"] { --callout-color: 3, 93, 173; } .callout[data-callout="status"] { --callout-color: 224, 119, 0; } .callout[data-callout="clap"] { --callout-color: 78, 32, 153; } .callout[data-callout="quote"] { --callout-color: 66, 71, 74; } /* Custom site types — dark-mode overrides (explicit toggle) */ [data-theme="dark"] .callout[data-callout="game"] { --callout-color: 250, 250, 250; } [data-theme="dark"] .callout[data-callout="art"] { --callout-color: 250, 250, 250; } [data-theme="dark"] .callout[data-callout="log"] { --callout-color: 224, 119, 0; } [data-theme="dark"] .callout[data-callout="email"] { --callout-color: 69, 175, 255; } [data-theme="dark"] .callout[data-callout="status"] { --callout-color: 247, 172, 66; } [data-theme="dark"] .callout[data-callout="clap"] { --callout-color: 243, 232, 40; } [data-theme="dark"] .callout[data-callout="quote"] { --callout-color: 255, 250, 201; } /* Custom site types — dark-mode overrides (system preference) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .callout[data-callout="game"] { --callout-color: 250, 250, 250; } :root:not([data-theme="light"]) .callout[data-callout="art"] { --callout-color: 250, 250, 250; } :root:not([data-theme="light"]) .callout[data-callout="log"] { --callout-color: 224, 119, 0; } :root:not([data-theme="light"]) .callout[data-callout="email"] { --callout-color: 69, 175, 255; } :root:not([data-theme="light"]) .callout[data-callout="status"] { --callout-color: 247, 172, 66; } :root:not([data-theme="light"]) .callout[data-callout="clap"] { --callout-color: 243, 232, 40; } :root:not([data-theme="light"]) .callout[data-callout="quote"] { --callout-color: 255, 250, 201; } } /* ============================================================ Footnotes ============================================================ */ .footnotes, [data-footnotes] { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.9rem; color: var(--text-secondary); } /* Screen-reader only heading (generated by remark-gfm) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ============================================================ Littlefoot Popover Footnotes — Theme Overrides ============================================================ */ .littlefoot { --popover-background-color: var(--bg-secondary); --popover-text-color: var(--text); --popover-border: 1px solid var(--border); --popover-border-radius: 6px; --popover-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); --popover-scroll-indicator-color: var(--text-muted); } /* Style the button as an inline superscript number */ .littlefoot__button { background: none; border: none; border-radius: 0; color: var(--link); cursor: pointer; font-size: 0.75em; font-weight: 600; vertical-align: super; line-height: 1; padding: 0 0.1em; margin: 0; height: auto; text-decoration: none; } .littlefoot__button:hover, .littlefoot__button.is-active { background: none; color: var(--link-hover); } .littlefoot__content { font-family: inherit; font-size: 0.9rem; line-height: 1.6; } /* Style the back-reference arrows in the bottom footnotes list */ .data-footnote-backref { text-decoration: none; margin-left: 0.25em; color: var(--link); font-size: 0.85em; } .data-footnote-backref:hover { color: var(--link-hover); } /* ============================================================ Image Grid ============================================================ */ .img-grid p:has(> img + img) { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0.5rem; margin: 1rem 0; } .img-grid p:has(> img + img) > img { width: 100%; height: 100%; object-fit: cover; } /* ============================================================ Image Zoom ============================================================ */ .img-zoom img { cursor: zoom-in; } .img-zoom-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; cursor: zoom-out; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .img-zoom-overlay.active { opacity: 1; pointer-events: auto; } .img-zoom-overlay img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 4px; cursor: zoom-out; } /* ============================================================ Index Pages (Archive, Tag pages) ============================================================ */ .index-page h1 { margin-bottom: 0.75rem; } /* --- Archive Search --- */ .archive-search { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; } .archive-search-input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-secondary); color: var(--text); font-size: 0.95rem; font-family: inherit; } .archive-search-input::placeholder { color: var(--text-muted); } .archive-search-input:focus { outline: none; border-color: var(--link); } .archive-search-btn { padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-secondary); color: var(--text); font-size: 0.95rem; font-family: inherit; cursor: pointer; } .archive-search-btn:hover { background: var(--border-light); } .index-desc { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1.5rem; } /* --- Post Listings --- */ .post-list { list-style: none; padding: 0; margin: 0; } .post-list-item { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid var(--border-light); } .post-list-item:last-child { border-bottom: none; } .post-list-item a { font-weight: 600; font-size: 0.9rem; } .post-list-item time, .hub-meta { color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; text-align: right; } .post-list-desc { grid-column: 1 / -1; color: var(--text-secondary); font-size: 0.9rem; margin: 0.15rem 0 0; } /* --- Archive Year Headings --- */ .archive-year-heading { margin-top: 2.5rem; margin-bottom: 0.25rem; } .archive-year-heading a { color: var(--text); text-decoration: none; } .archive-year-heading a:hover { text-decoration: underline; } /* --- Archive Month Headings --- */ .archive-month-heading { margin-top: 1.25rem; margin-bottom: 0.25rem; font-size: 1.1rem; font-weight: 600; color: var(--text-secondary); } /* --- Tag Links (in post headers and on index pages) --- */ a.tag { text-decoration: none; color: var(--tag-text); } a.tag:hover { text-decoration: underline; color: var(--text); } /* --- Tag Cloud (tags index page) --- */ .tag-cloud { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .tag-cloud li { display: inline-flex; align-items: baseline; gap: 0.2rem; } .tag-count { font-size: 0.8rem; color: var(--text-muted); } /* --- Child Tags (on tag pages with sub-tags) --- */ .child-tags { margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; } .child-tags strong { margin-right: 0.15rem; } /* ============================================================ Game Library Platform Pages ============================================================ */ .game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 1rem; margin-top: 1rem; } .game-card { border: 1px solid var(--border-light); border-radius: 6px; overflow: hidden; background: var(--bg-secondary); } .game-card:hover { border-color: var(--border); } .game-card a { text-decoration: none; color: inherit; } .game-art { width: 100%; aspect-ratio: 71 / 100; object-fit: contain; background: var(--code-bg); display: block; border-radius: 0; } .game-art-placeholder { width: 100%; aspect-ratio: 71 / 100; background: var(--code-bg); } /* Per-platform box art aspect ratios */ /* Landscape — NES, SNES, N64, 3DO, Apple II */ .game-card[data-platform="NES"] .game-art, .game-card[data-platform="NES"] .game-art-placeholder, .game-card[data-platform="SNES"] .game-art, .game-card[data-platform="SNES"] .game-art-placeholder, .game-card[data-platform="N64"] .game-art, .game-card[data-platform="N64"] .game-art-placeholder, .game-card[data-platform="3DO"] .game-art, .game-card[data-platform="3DO"] .game-art-placeholder, .game-card[data-platform="Apple-II"] .game-art, .game-card[data-platform="Apple-II"] .game-art-placeholder { aspect-ratio: 137 / 100; } /* Landscape DVD-size — GameCube, Wii, Wii U */ .game-card[data-platform="GameCube"] .game-art, .game-card[data-platform="GameCube"] .game-art-placeholder, .game-card[data-platform="Wii"] .game-art, .game-card[data-platform="Wii"] .game-art-placeholder, .game-card[data-platform="Wii-U"] .game-art, .game-card[data-platform="Wii-U"] .game-art-placeholder { aspect-ratio: 135 / 100; } /* Near-square — Game Boy, Game Boy Color, Game Boy Advance */ .game-card[data-platform="Game-Boy"] .game-art, .game-card[data-platform="Game-Boy"] .game-art-placeholder, .game-card[data-platform="Game-Boy-Color"] .game-art, .game-card[data-platform="Game-Boy-Color"] .game-art-placeholder, .game-card[data-platform="Game-Boy-Advance"] .game-art, .game-card[data-platform="Game-Boy-Advance"] .game-art-placeholder { aspect-ratio: 100 / 100; } /* Portrait DS clamshell — Nintendo DS, Nintendo 3DS */ .game-card[data-platform="Nintendo-DS"] .game-art, .game-card[data-platform="Nintendo-DS"] .game-art-placeholder, .game-card[data-platform="Nintendo-3DS"] .game-art, .game-card[data-platform="Nintendo-3DS"] .game-art-placeholder { aspect-ratio: 89 / 100; } /* Standard portrait cases (PS1–PS5, PSP, Vita, Xbox, 360, Switch) use the default 71/100 — no override needed */ .game-info { padding: 0.5rem; } .game-title { font-weight: 600; font-size: 0.9rem; display: block; line-height: 1.3; } .game-meta { font-size: 0.8rem; color: var(--text-muted); margin: 0.2rem 0; } .game-badges { display: flex; gap: 0.25rem; margin-top: 0.3rem; } .game-badge { font-size: 0.7rem; padding: 0.1em 0.4em; border-radius: 3px; font-weight: 600; } .game-badge.played { background: rgba(68, 138, 255, 0.12); color: #448aff; } .game-badge.beaten { background: rgba(0, 200, 83, 0.12); color: #00c853; } /* ============================================================ Responsive — Mobile sidebar + layout ============================================================ */ @media (max-width: 768px) { /* --- Right sidebar: reflow below content --- */ .sidebar-right { position: static; height: auto; border-left: none; border-top: 1px solid var(--border); padding: 1.5rem 1rem; } /* On mobile the sidebar flows below content — hide completely until loaded to avoid a blank gap at the bottom of the page. */ .sidebar-right.hidden { display: none; } .site-layout { grid-template-columns: 1fr; } /* --- Fixed mobile header bar --- */ .mobile-header { display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; z-index: 300; padding: 0.6rem 1rem; background: var(--bg); border-bottom: 1px solid var(--border); } .mobile-site-name { font-weight: 700; color: var(--text); text-decoration: none; font-size: 1.15rem; } .mobile-site-name:hover { color: var(--link); } .mobile-header-actions { display: flex; align-items: center; gap: 0.75rem; } /* Hide sidebar header on mobile — the mobile-header already shows the site name */ .sidebar-header { display: none; } /* --- Sidebar: slide down from below header --- */ .sidebar { position: fixed; top: 44px; left: 0; right: 0; width: 100%; height: auto; max-height: 80vh; overflow-y: auto; z-index: 200; transition: transform 0.3s ease, visibility 0.3s; transform: translateY(-100%); visibility: hidden; border-right: none; border-bottom: 1px solid var(--border); padding: 1.5rem; } .sidebar.open { transform: translateY(0); visibility: visible; } .transitions-ready .sidebar { transition: transform 0.3s ease, visibility 0.3s, color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; } .sidebar-nav a { justify-content: flex-end; } /* --- Overlay: below the header --- */ .sidebar-overlay { display: block; position: fixed; top: 44px; left: 0; right: 0; bottom: 0; z-index: 100; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s; } .transitions-ready .sidebar-overlay { transition: opacity 0.25s ease, visibility 0.25s, background-color 0.25s ease; } .sidebar-overlay.active { opacity: 1; visibility: visible; } /* --- Menu toggle button in header --- */ .menu-toggle { display: flex; align-items: center; gap: 0.35rem; position: static; background: none; border: none; font-size: 1.15rem; padding: 0.25rem 0; cursor: pointer; color: var(--text-secondary); } .menu-toggle:hover { color: var(--text); } /* --- Content: offset for fixed header --- */ .content-wrapper { padding: calc(44px + 1rem) 1rem 1rem; max-width: 100%; min-width: 0; overflow-x: hidden; } } @media (max-width: 600px) { body { font-size: 1rem; } h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.1rem; } .img-grid p:has(> img + img) { grid-template-columns: 1fr; } .post-list-item { flex-direction: column; gap: 0.15rem; } .post-list-item time { margin-left: 0; } .game-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.75rem; } }