/* The public pages, on top of Metro UI (vendor/metro/metro.css). Every class defined here starts with `os-`: Metro claims many short, common names (.page, .hint, .bar, .date, .panel), and a collision there changes a layout without any error. Metro's own classes — button, badge, skill-box, bg-*, fg-* — are used as Metro defines them. Metro's dark palette hangs off `html.dark-side`. The tokens below follow the same switch, so one class changes both. */ :root { --os-page-width: 1180px; --os-day: 104px; --os-product-column: 150px; --os-history-row: 76px; --os-tab-accent: #ce352c; } /* --- Theme tokens ----------------------------------------------------- */ :root, html:not(.dark-side) { --os-body: #f4f5f7; --os-surface: #ffffff; --os-surface-2: #ffffff; --os-frame: #eef0f3; --os-header: #ffffff; --os-footer: #e9ebef; --os-hero: #f7f9fc; --os-hero-glow-1: rgba(27, 161, 226, .16); --os-hero-glow-2: rgba(170, 0, 255, .08); --os-border: #e1e4e8; --os-border-strong: #d5d9df; --os-heading: #16181d; --os-text: #3c4048; --os-text-lead: #4a4f58; --os-text-body: #555b65; --os-muted: #6b717b; --os-subtle: #767c86; --os-dot: #b0b5bd; --os-accent: #0a6ebd; --os-hover: #eef0f3; --os-hover-text: #111318; --os-event: #f6f7f9; --os-event-border: #d5d9df; --os-gridline: #eceef1; --os-shadow: 0 1px 2px rgba(16, 24, 40, .06); --os-quiet-bg: #ffffff; --os-quiet-text: #1d1f24; --os-quiet-border: #c5cad2; } html.dark-side { --os-body: #17181b; --os-surface: #1e1f22; --os-surface-2: #232428; --os-frame: #0f1012; --os-header: #1e1f22; --os-footer: #111214; --os-hero: #17181b; --os-hero-glow-1: rgba(27, 161, 226, .22); --os-hero-glow-2: rgba(170, 0, 255, .16); --os-border: #2b2d30; --os-border-strong: #34363b; --os-heading: #ffffff; --os-text: #c0c4cc; --os-text-lead: #b6bac2; --os-text-body: #a9aeb7; --os-muted: #9da2ab; --os-subtle: #8b9099; --os-dot: #555555; --os-accent: #60c3ff; --os-hover: #2b2d30; --os-hover-text: #ffffff; --os-event: #2a2c30; --os-event-border: #3a3d42; --os-gridline: #26282c; --os-shadow: none; --os-quiet-bg: transparent; --os-quiet-text: #ffffff; --os-quiet-border: #5a5d63; } body { background: var(--os-body); color: var(--os-text); } /* Metro lays out as a centred flex column, which shrinks every direct child to its content: a header bar as wide as its links, and a page wider than a phone. The page's own blocks span the width instead. */ body > .os-site-bar, body > main, body > .os-site-footer { align-self: stretch; width: 100%; min-width: 0; } .os-page { box-sizing: border-box; width: 100%; max-width: var(--os-page-width); margin: 0 auto; padding-inline: 20px; } .os-narrow { max-width: 760px; } .os-skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; padding: 10px 16px; background: var(--os-accent); color: #fff; } .os-skip-link:focus { left: 0; } /* --- Header ------------------------------------------------------------ */ .os-site-bar { position: sticky; top: 0; z-index: 1000; background: var(--os-header); border-bottom: 1px solid var(--os-border); } .os-bar-inner { display: flex; align-items: center; gap: 8px; height: 56px; } .os-brand { display: flex; align-items: center; gap: 10px; margin-right: 24px; font-size: 17px; font-weight: 600; color: var(--os-heading); text-decoration: none; } .os-brand:hover { color: var(--os-heading); } .os-brand .brand-mark { width: 28px; height: 28px; border-radius: 50%; } .os-nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; } .os-nav a { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 4px; font-size: 14px; color: var(--os-text); text-decoration: none; } .os-nav a:hover { background: var(--os-hover); color: var(--os-hover-text); } .os-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: auto; padding: 0; border: 1px solid var(--os-border-strong); border-radius: 18px; background: var(--os-surface); color: var(--os-text); font-size: 17px; cursor: pointer; } .os-theme-toggle[hidden] { display: none; } .os-theme-toggle:hover { color: var(--os-heading); } .os-theme-toggle .mif-sunny, html.dark-side .os-theme-toggle .mif-moon-left { display: none; } html.dark-side .os-theme-toggle .mif-sunny { display: inline; } /* --- Hero -------------------------------------------------------------- */ .os-hero { padding-block: 64px 56px; border-bottom: 1px solid var(--os-border); background: radial-gradient(ellipse at 85% 10%, var(--os-hero-glow-1), transparent 55%), radial-gradient(ellipse at 10% 100%, var(--os-hero-glow-2), transparent 50%), var(--os-hero); } .os-hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: center; } .os-tagline { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--os-accent); } .os-hero h1 { margin: 14px 0 18px; font-size: 44px; line-height: 1.12; font-weight: 300; color: var(--os-heading); } .os-hero h1 strong { font-weight: 600; } .os-lead { margin: 0 0 28px; font-size: 16px; line-height: 1.65; color: var(--os-text-lead); } .os-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } .os-hero-actions .button { font-weight: 600; } .os-hero-actions .icon { margin-right: 8px; } .button.os-button-quiet { background: var(--os-quiet-bg); color: var(--os-quiet-text); border: 1px solid var(--os-quiet-border); } .os-release-tiles { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .os-release-tile { display: flex; align-items: stretch; height: 76px; overflow: hidden; background: var(--os-surface-2); border: 1px solid var(--os-border-strong); border-radius: 6px; box-shadow: var(--os-shadow); } .os-tile-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 76px; font-size: 30px; color: #fff; } .os-tile-text { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 12px 16px; min-width: 0; } .os-tile-name { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--os-muted); } .os-tile-version { font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--os-heading); } .os-tile-date { align-self: center; padding-right: 16px; font-size: 12px; color: var(--os-subtle); white-space: nowrap; } /* --- Sections ---------------------------------------------------------- */ .os-block { padding-block: 44px 8px; } .os-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; margin-bottom: 20px; } .os-section-head h2 { margin: 0; font-size: 26px; font-weight: 300; color: var(--os-heading); } .os-section-head h2 [class*="mif-"] { margin-right: 12px; font-size: 22px; color: var(--os-accent); vertical-align: -2px; } .os-sub { font-size: 13px; color: var(--os-subtle); } .os-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .os-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } /* --- Release cards: Metro's skill-box ------------------------------------ */ .os-release-card { display: flex; flex-direction: column; height: 100%; } .os-release-card .header { border-bottom: 0; } .os-release-card .header .avatar { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); color: #fff; font-size: 30px; } .os-release-card .header .title { margin: 0; font-size: 1.25rem; font-weight: 400; line-height: 1.3; color: inherit; } .os-release-card .header .subtitle { opacity: .9; } .os-release-card .content { display: flex; flex: 1; flex-direction: column; padding: 0; } .os-release-card .skills { margin: 0; padding: 0; } .os-release-card .skills li { display: flex; align-items: center; gap: 10px; padding: 11px 20px; } .os-release-card .skills li > [class*="mif-"] { color: var(--os-subtle); } .os-release-card .skills .badge { position: static; flex-shrink: 0; margin: 0; } .os-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: auto 0 0; padding: 14px 20px 18px; border-top: 1px solid var(--os-border); } .os-card-actions .icon { margin-right: 8px; } .os-link { font-size: 14px; color: var(--os-accent); text-decoration: none; } .os-link:hover { text-decoration: underline; } /* --- Release history ---------------------------------------------------- */ /* A grid laid out by the server: a column per day after the product column, one row per product, and at most one block in any cell. The page never scrolls sideways; this frame does. */ .os-history { background: var(--os-surface); border: 1px solid var(--os-border); border-radius: 6px; box-shadow: var(--os-shadow); } /* Positioned, so a block's offsetLeft is measured from this frame (home.js). */ .os-history-scroll { position: relative; overflow-x: auto; padding: 14px 14px 8px; } .os-history-scroll:focus-visible { outline: 2px solid var(--os-accent); outline-offset: -2px; } .os-history-axis, .os-history-row { display: grid; grid-template-columns: var(--os-product-column) repeat(var(--days), var(--os-day)); width: max-content; } .os-history-axis { margin-bottom: 6px; } .os-history-axis span { padding-left: 4px; border-left: 1px solid var(--os-border-strong); font-size: 11px; color: var(--os-muted); white-space: nowrap; } .os-history-axis .os-history-corner { border-left: 0; } .os-history-row { grid-template-rows: var(--os-history-row); margin-bottom: 6px; background-image: repeating-linear-gradient(90deg, var(--os-gridline) 0 1px, transparent 1px var(--os-day)); background-position: var(--os-product-column) 0; } .os-history-product { position: sticky; left: 0; z-index: 1; grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; margin-right: 8px; padding: 8px 10px; border-radius: 4px; font-size: 13px; font-weight: 600; line-height: 1.2; text-transform: uppercase; /* Pinned while the days scroll beneath it: paint over the frame's padding on its left and its own margin on its right, or blocks show through both. */ box-shadow: -14px 0 0 var(--os-surface), 8px 0 0 var(--os-surface); } .os-history-product [class*="mif-"] { align-self: flex-end; font-size: 20px; } .os-event { grid-row: 1; display: flex; align-items: stretch; min-width: 0; margin: 0 3px; overflow: hidden; background: var(--os-event); border: 1px solid var(--os-event-border); border-radius: 4px; } .os-event-strip { flex-shrink: 0; width: 4px; } .os-event-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 0 8px; font-size: 11px; line-height: 1.3; color: var(--os-muted); white-space: nowrap; } .os-event-text strong { font-size: 15px; font-weight: 600; color: var(--os-heading); } /* --- Screenshots -------------------------------------------------------- */ .os-tab-list { display: flex; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--os-border); } html:not(.js-on) .os-tab-list { display: none; } .os-tab { margin-bottom: -1px; padding: 8px 16px; background: none; border: 0; border-bottom: 2px solid transparent; font: inherit; font-size: 14px; color: var(--os-text); cursor: pointer; } .os-tab:hover { color: var(--os-heading); } .os-tab[aria-selected="true"] { border-bottom-color: var(--os-tab-accent); color: var(--os-heading); } .os-panel-heading { margin: 0 0 12px; font-size: 18px; font-weight: 400; color: var(--os-heading); } html.js-on .os-panel-heading { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } html:not(.js-on) .os-tab-panel + .os-tab-panel { margin-top: 28px; } .os-shot { margin: 0; overflow: hidden; background: var(--os-surface); border: 1px solid var(--os-border); border-radius: 6px; box-shadow: var(--os-shadow); } .os-shot-frame { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--os-frame); } .os-shot-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; } .os-shot figcaption { padding: 12px 16px; font-size: 14px; color: var(--os-text); } /* --- Features ----------------------------------------------------------- */ .os-feature { display: flex; gap: 16px; height: 100%; box-sizing: border-box; padding: 18px; background: var(--os-surface); border: 1px solid var(--os-border); border-radius: 6px; box-shadow: var(--os-shadow); } .os-feature-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 64px; height: 64px; border-radius: 4px; font-size: 30px; color: #fff; } .os-feature h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--os-heading); } .os-feature p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--os-text-body); } .os-feature a, .os-faq-body a { color: var(--os-accent); } /* --- Questions ---------------------------------------------------------- */ .os-faq { display: grid; gap: 10px; } .os-faq-item { background: var(--os-surface); border: 1px solid var(--os-border); border-radius: 6px; box-shadow: var(--os-shadow); } .os-faq-item summary { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; list-style: none; cursor: pointer; font-weight: 600; color: var(--os-heading); } .os-faq-item summary::-webkit-details-marker { display: none; } .os-faq-item summary::after { content: "+"; font-size: 20px; font-weight: 400; line-height: 1; color: var(--os-accent); } .os-faq-item[open] summary::after { content: "\2212"; } .os-faq-body { padding: 0 18px 14px; font-size: 14px; line-height: 1.6; color: var(--os-text-body); } .os-faq-body p { margin: 0 0 8px; } /* --- Articles ------------------------------------------------------------ An article is Markdown and nothing else: its author writes words and names pictures, and every rule below decides how the result looks. So each element the renderer can emit has a rule here, whether or not a published article has used it yet — the first article with a table must not be the moment its appearance is discovered. Colours are the shared tokens, so both themes follow one switch. */ .os-feed-link { font-size: 14px; color: var(--os-accent); text-decoration: none; } .os-feed-link:hover { text-decoration: underline; } .os-article-none { color: var(--os-muted); } .os-article-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--os-surface); border: 1px solid var(--os-border); border-radius: 6px; box-shadow: var(--os-shadow); } .os-article-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--os-frame); } .os-article-cover img { display: block; width: 100%; height: 100%; object-fit: cover; } .os-article-card-body { padding: 14px 18px 18px; } .os-article-date { margin: 0 0 6px; font-size: 13px; color: var(--os-subtle); } .os-article-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; line-height: 1.35; } .os-article-card h3 a { color: var(--os-heading); text-decoration: none; } .os-article-card h3 a:hover { color: var(--os-accent); } .os-article-summary { margin: 0; font-size: 14px; line-height: 1.55; color: var(--os-text-body); } /* The article itself. Narrower than the page: a line of prose longer than about eighty characters is measurably harder to read, and the rest of the site is grids rather than prose, so nothing else needed the limit. */ .os-article { max-width: 760px; } .os-article-back { margin: 0 0 20px; font-size: 14px; } .os-article-back a { color: var(--os-accent); text-decoration: none; } .os-article-head { padding-bottom: 20px; border-bottom: 1px solid var(--os-border); } .os-article-head h1 { margin: 0 0 10px; font-size: 34px; font-weight: 300; line-height: 1.2; color: var(--os-heading); } .os-article-meta { margin: 0 0 14px; font-size: 14px; color: var(--os-subtle); } .os-article-lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--os-text-lead); } .os-article-body { font-size: 16px; line-height: 1.7; color: var(--os-text-body); } .os-article-body h1, .os-article-body h2, .os-article-body h3, .os-article-body h4, .os-article-body h5, .os-article-body h6 { margin: 32px 0 12px; font-weight: 600; line-height: 1.3; color: var(--os-heading); } .os-article-body h1 { font-size: 27px; font-weight: 300; } .os-article-body h2 { font-size: 23px; font-weight: 300; } .os-article-body h3 { font-size: 19px; } .os-article-body h4, .os-article-body h5, .os-article-body h6 { font-size: 16px; } .os-article-body p { margin: 0 0 16px; } .os-article-body a { color: var(--os-accent); } .os-article-body strong { color: var(--os-heading); } .os-article-body ul, .os-article-body ol { margin: 0 0 16px; padding-left: 24px; } .os-article-body li { margin-bottom: 6px; } .os-article-body li > ul, .os-article-body li > ol { margin: 6px 0 0; } .os-article-body blockquote { margin: 0 0 16px; padding: 4px 0 4px 18px; border-left: 3px solid var(--os-border-strong); color: var(--os-muted); } .os-article-body blockquote p:last-child { margin-bottom: 0; } .os-article-body hr { margin: 32px 0; border: 0; border-top: 1px solid var(--os-border); } .os-article-body code { padding: 1px 5px; font-size: .9em; border-radius: 3px; background: var(--os-event); border: 1px solid var(--os-event-border); color: var(--os-quiet-text); } .os-article-body pre { margin: 0 0 16px; padding: 14px 16px; overflow-x: auto; font-size: 14px; line-height: 1.55; border-radius: 6px; background: var(--os-event); border: 1px solid var(--os-event-border); } /* Inside a block the border and background belong to the block, not the span. */ .os-article-body pre code { padding: 0; background: none; border: 0; font-size: inherit; } .os-article-body img { display: block; max-width: 100%; height: auto; margin: 4px 0 20px; border: 1px solid var(--os-border); border-radius: 6px; background: var(--os-frame); } /* A video is a picture the author wrote `![what it shows](demo.mp4)` for, so it is framed like one. Controls rather than autoplay: several clips in a long article that all start themselves is a page that fights its reader. */ .os-article-video { display: block; width: 100%; height: auto; margin: 4px 0 20px; border: 1px solid var(--os-border); border-radius: 6px; background: var(--os-frame); } .os-article-body table { width: 100%; margin: 0 0 20px; border-collapse: collapse; font-size: 14px; } .os-article-body th, .os-article-body td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--os-border); } .os-article-body th { color: var(--os-heading); font-weight: 600; background: var(--os-event); } .os-article-body > *:last-child { margin-bottom: 0; } /* --- Messages (404, 500) ------------------------------------------------ */ .os-message { padding-block: 72px 48px; } .os-message h1 { font-size: 36px; font-weight: 300; color: var(--os-heading); } /* --- Footer ------------------------------------------------------------- */ .os-site-footer { margin-top: 48px; background: var(--os-footer); border-top: 1px solid var(--os-border); } .os-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; min-height: 72px; font-size: 14px; color: var(--os-subtle); } .os-footer-inner p { margin: 0; } .os-footer-inner a { color: var(--os-text); text-decoration: none; } .os-footer-inner a:hover { color: var(--os-heading); text-decoration: underline; } .os-dot { margin: 0 8px; color: var(--os-dot); } /* --- Narrower screens --------------------------------------------------- */ @media (max-width: 960px) { .os-hero-grid { grid-template-columns: 1fr; gap: 32px; } .os-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .os-nav { display: none; } .os-hero { padding-block: 40px 36px; } .os-hero h1 { font-size: 32px; } .os-grid-3, .os-grid-2 { grid-template-columns: 1fr; } .os-article-head h1 { font-size: 27px; } .os-article-body { font-size: 15px; } :root { --os-product-column: 110px; } .os-footer-inner { padding-block: 16px; } }