/* * Django brand palette, ported from the old Jekyll theme at * _sass/color_schemes/django.scss */ /* * The light palette sits on :root, not on [data-md-color-scheme="default"]. * The theme only puts that attribute on once its JavaScript runs, so a * scheme-scoped rule leaves the header indigo on the first paint. */ :root { --django-green-dark: #0c4b33; --django-green-mid: #20aa76; --django-green-light: #44b78b; --django-green-pale: #e8f5f0; --django-cream: #f9f7f3; --md-primary-fg-color: var(--django-green-dark); --md-primary-fg-color--light: var(--django-green-mid); --md-primary-fg-color--dark: #072e1f; --md-primary-bg-color: #ffffff; --md-primary-bg-color--light: rgba(255, 255, 255, 0.7); --md-accent-fg-color: var(--django-green-mid); --md-accent-fg-color--transparent: rgba(32, 170, 118, 0.1); --md-typeset-a-color: var(--django-green-dark); --md-code-bg-color: var(--django-cream); } /* Dark scheme */ [data-md-color-scheme="slate"] { --md-primary-fg-color: var(--django-green-dark); --md-primary-fg-color--light: var(--django-green-light); --md-primary-fg-color--dark: #051f15; --md-primary-bg-color: #ffffff; --md-accent-fg-color: var(--django-green-light); --md-accent-fg-color--transparent: rgba(68, 183, 139, 0.1); --md-typeset-a-color: var(--django-green-light); } /* Headings use the dark Django green, as they did in the Jekyll theme. */ .md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 { color: var(--django-green-dark); } /* Dark green is unreadable on the dark background, so lighten it. */ [data-md-color-scheme="slate"] .md-typeset h1, [data-md-color-scheme="slate"] .md-typeset h2, [data-md-color-scheme="slate"] .md-typeset h3, [data-md-color-scheme="slate"] .md-typeset h4 { color: var(--django-green-light); } /* The Django logo is a wide SVG. Keep it from overflowing on small screens. */ .md-typeset picture img { max-width: min(160px, 100%); height: auto; } /* The list is long and mostly one-line entries. Tighten the leading so more of each category fits on screen. */ .md-typeset ul li { margin-bottom: 0.2rem; } /* Footer additions. These sit inside .md-footer, which has a dark background, so the text needs the footer foreground colors. */ .awesome-django-footer { padding: 1.2rem 0.8rem; color: var(--md-footer-fg-color--light); font-size: 0.7rem; line-height: 1.5; text-align: center; } .awesome-django-footer__title { margin: 0 0 0.3rem; color: var(--md-footer-fg-color); font-size: 1rem; font-weight: 700; line-height: 1.3; } .awesome-django-footer__lede { font-size: 0.72rem; } .awesome-django-footer a { color: var(--md-footer-fg-color); text-decoration: underline; } .awesome-django-footer a:hover { color: var(--md-accent-fg-color); } /* Capped to match the webring below it, so neither spans the whole footer. */ .awesome-django-newsletter { margin: 0.9rem auto 0; max-width: 34rem; } .awesome-django-newsletter iframe { width: 100%; height: 220px; border: 1px solid #ccc; } /* auto, not 0, for the horizontal margins. This rule outranks the single-class rules below it, so a 0 here would stop them centering themselves. Every paragraph shares the 34rem column with the signup form and the webring. */ .awesome-django-footer p { margin: 0.6rem auto; max-width: 34rem; } /* * The webring is a custom element with a shadow root. Its :host rule sets * display: block, so it grows to the full width of the footer. Outer document * rules beat :host rules, so constrain it here and keep it centered. */ .awesome-django-webring { margin: 1rem auto; max-width: 34rem; } .awesome-django-webring webring-css { display: block; margin: 0 auto; max-width: 100%; } /* Directory controls enhance the website; the README keeps its full TOC. */ .awesome-django-spacer, .awesome-django-group[hidden], .awesome-django-category[hidden], #directory-results [hidden], .awesome-django-nav-group > nav[hidden] { display: none !important; } .awesome-django-controls { display: grid; grid-template-columns: 3fr 2fr; gap: 0.5rem 1rem; padding: 0.8rem; margin: 1rem 0; border: 1px solid var(--md-default-fg-color--lighter); border-radius: 0.3rem; background: var(--md-default-bg-color); } .awesome-django-controls label { display: block; margin-bottom: 0.3rem; font-size: 0.7rem; font-weight: 700; } .awesome-django-filter, .awesome-django-jump { min-width: 0; } .awesome-django-filter__input { display: flex; gap: 0.4rem; } .awesome-django-controls input, .awesome-django-controls select, .awesome-django-controls button { min-height: 2.2rem; border: 1px solid var(--md-default-fg-color--light); border-radius: 0.2rem; padding: 0.4rem; font: inherit; font-size: 0.8rem; color: var(--md-default-fg-color); background: var(--md-default-bg-color); } .awesome-django-controls input, .awesome-django-controls select { width: 100%; min-width: 0; } .awesome-django-controls button, .awesome-django-nav-toggle { cursor: pointer; } .awesome-django-controls :focus-visible, .awesome-django-nav-toggle:focus-visible { outline: 2px solid var(--md-typeset-a-color); outline-offset: 2px; } .md-typeset .awesome-django-result-count { grid-column: 1 / -1; margin: 0; font-size: 0.7rem; } .awesome-django-nav-count { margin-left: auto; padding-left: 0.4rem; font-size: 0.6rem; font-variant-numeric: tabular-nums; color: var(--md-default-fg-color--light); } .awesome-django-nav-group { position: relative; } .awesome-django-nav-group > a { padding-right: 1.6rem; } .awesome-django-nav-toggle { position: absolute; top: 0; right: 0; width: 1.6rem; height: 1.6rem; color: var(--md-default-fg-color); } .awesome-django-nav-toggle[aria-expanded="false"] { transform: rotate(-90deg); } #directory-results h2, #directory-results h3 { scroll-margin-top: 7rem; } @media (max-width: 76.234375em) { .awesome-django-controls { position: sticky; top: 2.8rem; z-index: 2; grid-template-columns: 1fr; } #directory-results h2, #directory-results h3 { scroll-margin-top: calc(var(--directory-controls-height, 14rem) + 4rem); } }