/* omorgan.info — shared styles Fonts: Bungee (wordmark) + Orbit (nav/body), loaded via Google Fonts in each page's . */ :root { --ink: #000; --paper: #fff; --pad-x: 64px; --pad-y: 48px; --nav-size: 20px; --wordmark-size: 48px; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; background: var(--paper); color: var(--ink); font-family: "Orbit", monospace; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .page { position: relative; display: flex; flex-direction: column; /* No min-height:100vh — the page is a fixed-size block (700 wide, content-tall), so the vertical layout stays locked and does not stretch with window height. */ max-width: 700px; /* fixed design width */ margin: 0 auto; /* centre the whole page in the window */ padding: var(--pad-y) var(--pad-x); overflow: hidden; /* keep the bleeding portrait clipped to the page */ } /* --- Header / wordmark --- */ .wordmark { margin: 0; font-family: "Bungee", "Orbit", monospace; font-size: var(--wordmark-size); font-weight: 400; line-height: 1.1; letter-spacing: 0; text-transform: uppercase; } .wordmark a { color: inherit; text-decoration: none; } .divider { border: 0; border-top: 1px solid var(--ink); margin: 12px 0 40px; /* extend to the image's right edge: image left (300) + image width (380), measured from the content's left edge (--pad-x). */ width: calc(300px + 380px - var(--pad-x)); max-width: none; } /* --- Navigation (ASCII tree) --- */ .nav { position: relative; z-index: 2; /* stay above the portrait */ font-size: var(--nav-size); line-height: 1.9; max-width: 360px; } .nav ul { list-style: none; margin: 0; padding: 0; } .nav .group { margin-top: 4px; } /* group labels (online, about) are plain text, not links */ .nav .label { display: block; } /* child rows get the |— tree prefix */ .nav .child::before { content: "|\2014\00a0"; /* |— + nbsp */ white-space: pre; } .nav a { color: var(--ink); text-decoration: none; } .nav a:hover, .nav a:focus-visible { text-decoration: underline; text-underline-offset: 3px; } .nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .nav [aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; } /* --- Portrait --- */ .portrait { position: absolute; /* Sits flush above the footer rule, holding a fixed spot within the page. */ left: 300px; bottom: calc(100% - 40px); /* 40px = footer padding-top, so image bottom meets the rule */ width: 380px; /* fixed width */ height: 250px; /* fixed height */ object-fit: contain; /* keep both seasonal images undistorted within the fixed box */ object-position: bottom right; z-index: 1; pointer-events: none; user-select: none; /* soft fade into the paper on the left edge, mimicking the stippled look */ -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%); mask-image: linear-gradient(to right, transparent 0%, #000 30%); } /* --- Subpage content --- */ .content { position: relative; z-index: 2; max-width: 720px; font-size: var(--nav-size); line-height: 1.7; } .content h1 { font-family: "Bungee", "Orbit", monospace; font-weight: 400; font-size: 28px; text-transform: uppercase; margin: 0 0 20px; } .back { display: inline-block; margin-top: 40px; color: var(--ink); text-decoration: none; } .back:hover, .back:focus-visible { text-decoration: underline; text-underline-offset: 3px; } /* --- Footer --- */ .site-footer { position: relative; z-index: 2; /* keep footer text above the portrait */ margin-top: 72px; /* fixed gap above the footer (locks the vertical layout) */ padding-top: 40px; } /* same rule style as the divider under the banner, tighter gap to its text */ .site-footer .divider { margin: 0 0 16px; } .footer-text { margin: 0; font-size: 11px; /* about half the nav size */ line-height: 1.6; } /* Everything ≥481px is intentionally identical and fully fixed: no size changes as the window resizes, so dragging a desktop window never triggers a jump. Only genuine phones (≤480px) get a smaller, discrete layout below. */ /* --- Phones ≤480 --- */ @media (max-width: 480px) { :root { --pad-x: 28px; --pad-y: 36px; --wordmark-size: 30px; --nav-size: 18px; } .divider { width: auto; /* full content width on phones */ } .portrait { /* small thumbnail tucked into the bottom-right corner, clear of the nav */ left: auto; right: 0; bottom: calc(100% - 40px); width: 216px; /* smaller fixed size for phones */ height: 144px; opacity: 0.9; /* fade from bottom-left so it sits behind the nav without obscuring it */ -webkit-mask-image: linear-gradient(to top right, transparent 20%, #000 70%); mask-image: linear-gradient(to top right, transparent 20%, #000 70%); } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }