/* * Alex-Presse theme. Layout and colours inspired by nachrichten.at (Oberösterreichische * Nachrichten); only the look is borrowed — no name, logo, wordmark, icons or images of theirs. * Built only from Presserl's public styling API: tokens,
and the stable * classes listed in the upstream starter (presserl deploy/theme/custom.css). * * Fonts (SIL Open Font License, see fonts/OFL-*.txt), self-hosted because the reader's CSP is * default-src 'self': Lato 400/700 and Merriweather 700/900, latin + latin-ext woff2 from * @fontsource/lato 5.3.0 and @fontsource/merriweather 5.3.0. * * Tokens (contrast against the paper, checked by script): * * light ratio dark ratio * paper #f9fafc #0f1a24 * ink #152735 14.6:1 #e6ebf0 14.7:1 * muted #525252 7.5:1 #aab4bd 8.4:1 * accent (links) #2a4b64 8.8:1 #8fb6d6 8.2:1 * rule #d0d4d7 #2a3a48 * kicker red #cb2036 5.3:1 #ff5268 5.6:1 * * Masthead bar #152735 (dark #0b141c): name #fff 15.3:1 (18.6:1), tools and issue line #d0d9e2 * 10.7:1 (13.0:1). Section strip #fff (dark #13212d): links 9.2:1 (7.7:1). * * Colours are set for the screen only, so print keeps Presserl's black on white. Section colours * keep the default palette. */ /* --------------------------------------------------------------------------------------------- * Fonts * ------------------------------------------------------------------------------------------- */ @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lato-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lato-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/lato-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/lato-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Merriweather"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/merriweather-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Merriweather"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/merriweather-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Merriweather"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/merriweather-latin-900-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Merriweather"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/merriweather-latin-ext-900-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --------------------------------------------------------------------------------------------- * Tokens: fonts everywhere, colours on screen only * ------------------------------------------------------------------------------------------- */ :root { --presserl-font-body: "Lato", "Arial", sans-serif; --presserl-font-headline: "Merriweather", "Georgia", serif; } @media screen { :root { --presserl-color-paper: #f9fafc; --presserl-color-ink: #152735; --presserl-color-muted: #525252; --presserl-color-accent: #2a4b64; --presserl-color-rule: #d0d4d7; --alexpresse-bar: #152735; --alexpresse-bar-text: #d0d9e2; --alexpresse-strip: #fff; --alexpresse-strip-rule: #41739a; --alexpresse-kicker: #cb2036; } } @media screen and (prefers-color-scheme: dark) { :root { --presserl-color-paper: #0f1a24; --presserl-color-ink: #e6ebf0; --presserl-color-muted: #aab4bd; --presserl-color-accent: #8fb6d6; --presserl-color-rule: #2a3a48; --alexpresse-bar: #0b141c; --alexpresse-strip: #13212d; --alexpresse-strip-rule: #41739a; --alexpresse-kicker: #ff5268; } } /* --------------------------------------------------------------------------------------------- * Screen layout: navy masthead bar and white section strip across the full width. The print * views keep Presserl's paper preview. * ------------------------------------------------------------------------------------------- */ @media screen { [data-view]:not([data-view^="print-"]) .masthead { margin-bottom: 0; padding: 0.5rem 0 1rem; border-bottom: none; text-align: left; color: var(--alexpresse-bar-text); background: var(--alexpresse-bar); /* the bar reaches the window edges although the page has a maximum width */ box-shadow: 0 0 0 100vmax var(--alexpresse-bar); clip-path: inset(0 -100vmax); } [data-view]:not([data-view^="print-"]) .masthead__tools, [data-view]:not([data-view^="print-"]) .masthead__subtitle, [data-view]:not([data-view^="print-"]) .masthead__issue { color: var(--alexpresse-bar-text); } [data-view]:not([data-view^="print-"]) .masthead a { color: #fff; } [data-view]:not([data-view^="print-"]) .masthead__name { font-weight: 900; letter-spacing: -0.01em; color: #fff; } [data-view]:not([data-view^="print-"]) .text-size-switch button { border-color: var(--alexpresse-bar-text); color: #fff; } [data-view]:not([data-view^="print-"]) .text-size-switch button[aria-pressed="true"] { border-color: #fff; background: #fff; color: #152735; } .section-bar { border-bottom: 3px solid var(--alexpresse-strip-rule); background: var(--alexpresse-strip); box-shadow: 0 0 0 100vmax var(--alexpresse-strip); clip-path: inset(0 -100vmax); } .section-bar ul { justify-content: flex-start; } [data-view]:not([data-view^="print-"]) .kicker { color: var(--alexpresse-kicker); } .headline { font-weight: 900; } .lead-image__caption { font-size: 0.8rem; } } @media screen and (prefers-color-scheme: dark) { [data-view]:not([data-view^="print-"]) .masthead { border-bottom: 1px solid var(--presserl-color-rule); } }