/* * Landing page only. * * This file is linked from docs/overrides/landing.html rather than listed in * mkdocs.yml's extra_css, so the twenty-odd documentation pages never load it. * Instant navigation diffs between documents, so the link is added when * a reader arrives here and removed when they leave -- which is also why rules * below may safely reach outside the content area, to .md-header. A body class * could not do that: instant navigation does not touch . */ /* ---------------------------------------------------------------- header -- */ /* Marc Lou's first rule for a landing page: the brand is small and out of the way, because nobody arrives caring about it. The stock header already puts the logo and the name top left; the search box is what competes with the headline, and a reader who wants search is one click into the docs. */ .md-header__title .md-header__topic:first-child { font-size: 0.9rem; } .md-header .md-search { display: none; } @media screen and (min-width: 76.25em) { .md-header .md-search { display: block; } } /* ------------------------------------------------------------------ hero -- */ .cc-hero { display: grid; gap: 2.4rem; align-items: center; margin: 1.2rem 0 3.2rem; } @media screen and (min-width: 60em) { .cc-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3.2rem; } } /* The h1 is the promise, so it gets the size budget the site name used to spend. clamp() keeps it from wrapping to four lines on a phone. */ .md-typeset .cc-hero__copy h1 { margin: 0 0 0.8rem; font-size: clamp(1.7rem, 5.2vw, 2.6rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--md-default-fg-color); } .md-typeset .cc-hero__copy > p:first-of-type { font-size: 0.82rem; line-height: 1.65; color: var(--md-default-fg-color--light); } .cc-hero__copy .md-button { margin: 0.4rem 0.4rem 0 0; } /* The terminal sample is the proof, so it carries the visual weight of a screenshot without being one: real text, selectable, and it recolours with the palette instead of burning a light theme into a PNG. */ .md-typeset .cc-hero__demo > .highlight, .md-typeset .cc-hero__demo pre { margin: 0; } .md-typeset .cc-hero__demo > .highlight { border: 1px solid var(--md-default-fg-color--lightest); border-radius: 0.4rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } /* The transcript is real output, so its longest line is 93 characters and cannot be shortened without making it a fake. In the hero it has to be readable at a glance rather than scrolled to, so it soft-wraps -- which is what an 80-column terminal does with that line anyway. The source in index.md is untouched, so tests/docs_sync_test.py still checks the rule name against the installed package. Not `overflow: hidden` on the wrapper: an earlier version did that and silently cut the line off at the border. */ .md-typeset .cc-hero__demo pre > code { font-size: 0.65rem; white-space: pre-wrap; overflow-wrap: anywhere; } .md-typeset .cc-hero__demo > p { margin: 0.8rem 0 0; font-size: 0.72rem; color: var(--md-default-fg-color--light); } /* ------------------------------------------------------------ full bleed -- */ /* .cc-proof and .cc-community are tinted bands that span the whole window while their text stays in the content column. They do it with the pair below, and the units matter more than they look: margin-inline: calc(50% - 50vw) pull each edge out to the window padding-inline: calc(50vw - 50% + gutter) put the text back The percentages are load-bearing. `.md-content` is a flex item, so its min-content width is the widest thing inside it; a viewport-unit margin like `-100vw` counts towards that and stretched the column to 2754px on a 1440px viewport. The document itself did not scroll -- the width went into the column, which then rendered its own content off the right edge. A percentage margin resolves against the containing block and contributes nothing to intrinsic width, so the column stays viewport-sized. `overflow-x: clip` is the belt to that pair of braces: 100vw includes the classic scrollbar, so the bands can still end a few pixels wide of the viewport. `clip` rather than `hidden` because `hidden` would make .md-main a scroll container and break the sticky header and in-page anchors. */ .md-main { overflow-x: clip; } /* ---------------------------------------------------- social proof strip -- */ .cc-proof { margin: 0 calc(50% - 50vw) 3.2rem; padding: 2rem calc(50vw - 50% + 0.8rem); background: var(--md-code-bg-color); text-align: center; } .md-typeset .cc-proof > p { margin: 0 auto 1.6rem; max-width: 34rem; font-size: 0.72rem; color: var(--md-default-fg-color--light); } .cc-proof .logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1.2rem 0.8rem; max-width: 52rem; margin: 0 auto; } .cc-proof .logo-item { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .cc-proof .logo-item img { width: 44px; height: 44px; border-radius: 50%; filter: grayscale(1); opacity: 0.7; transition: filter 125ms, opacity 125ms; } .cc-proof .logo-item:hover img { filter: grayscale(0); opacity: 1; } .cc-proof .logo-item span { font-size: 0.6rem; line-height: 1.3; color: var(--md-default-fg-color--light); } /* ----------------------------------------------------------------- cards -- */ /* `.md-typeset ul:not([hidden])` in the theme sets `display: flow-root`, and that `:not()` counts as an attribute selector -- so a plain `.cc-cards > ul` loses the cascade and every card stacks full width. Matching the theme's shape wins on specificity instead of relying on load order. */ .md-typeset .cc-cards > ul:not([hidden]), .md-typeset .cc-pricing > ul:not([hidden]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.8rem; padding: 0; margin: 1.2rem 0 2rem; list-style: none; } .md-typeset .cc-cards > ul > li, .md-typeset .cc-pricing > ul > li { margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 0.4rem; transition: border-color 125ms, box-shadow 125ms; } .md-typeset .cc-cards > ul > li:hover, .md-typeset .cc-pricing > ul > li:hover { border-color: var(--cc-brand, #2c9ccd); box-shadow: 0 0 0 1px var(--cc-brand, #2c9ccd); } .md-typeset .cc-cards > ul > li > hr, .md-typeset .cc-pricing > ul > li > hr { margin: 0.6rem 0; border-color: var(--md-default-fg-color--lightest); } .md-typeset .cc-cards > ul > li > p, .md-typeset .cc-pricing > ul > li > p { font-size: 0.72rem; line-height: 1.6; } /* ---------------------------------------------------------- screenshots -- */ .md-typeset .cc-shot { margin: 1.6rem 0 2rem; text-align: center; } .md-typeset .cc-shot img { max-width: 100%; height: auto; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 0.4rem; } .md-typeset .cc-shot figcaption { margin-top: 0.6rem; font-size: 0.66rem; color: var(--md-default-fg-color--light); } /* The recording autoplays and cannot be paused, so a reader who has asked for reduced motion gets the last frame of it instead. */ .md-typeset .cc-shot .cc-still { display: none; } @media (prefers-reduced-motion: reduce) { .md-typeset .cc-shot .cc-motion { display: none; } .md-typeset .cc-shot .cc-still { display: inline-block; } } /* ------------------------------------------------------------- community -- */ .cc-community { margin: 3.2rem calc(50% - 50vw) 0; padding: 2rem calc(50vw - 50% + 0.8rem) 2.4rem; background: var(--md-code-bg-color); } .md-typeset .cc-community h2 { margin-top: 0; } /* ------------------------------------------------------------------ chrome -- */ /* The "edit this page" pencil belongs on a documentation page. Here it is the only control in the hero and it points at index.md, which is not what a first-time reader wants to do next. */ .cc-landing .md-content__button { display: none; }