diff --git a/index.css b/index.css index c637124..7b4db34 100644 --- a/index.css +++ b/index.css @@ -1,337 +1,11 @@ :root { /** * Palette - * Gruvbox dark, medium - * Dawid Kurek (dawikur@gmail.com), morhetz (https://github.com/morhetz/gruvbox) + * New Leaf Feeds Template + * Nicholas A. Ferrell (https://thenewleafjournal.com/author/naferrell, https://social.emucafe.org/naferrell) */ - --base00: #282828; /* ---- */ - --base01: #3c3836; /* --- */ - --base02: #504945; /* -- */ - --base03: #665c54; /* - */ - --base04: #bdae93; /* + */ - --base05: #d5c4a1; /* ++ */ - --base06: #ebdbb2; /* +++ */ - --base07: #fbf1c7; /* ++++ */ - --base08: #fb4934; /* red */ - --base09: #fe8019; /* orange */ - --base0A: #fabd2f; /* yellow */ - --base0B: #b8bb26; /* green */ - --base0C: #8ec07c; /* aqua/cyan */ - --base0D: #83a598; /* blue */ - --base0E: #d3869b; /* purple */ - --base0F: #d65d0e; /* brown */ /** - * Typograph + * Typography */ - --font-family-default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, - "Helvetica Neue", sans-serif; - --font-size-L: 3.6rem; - --font-size-m: 2.2rem; - --font-size-s: 1.8rem; - --font-size-scaler: 62.5%; /* 1rem = 10px */ - --line-height-body: 1.4; - --line-height-heading: 1.2; - - /** - * Components - */ - --body-color: var(--base04); - --body-bg: var(--base00); - --body-padding: 32px 24px; - --body-stack-gap: 32px; - - --accordion-content-hover-rail-color: var(--base04); - --accordion-content-rail-color: var(--base03); - --accordion-marker-color: var(--article-title-color); - --accordion-marker-expanded-color: var(--base03); - --accordion-marker-hover-color: var(--accordion-marker-color); - --accordion-marker-expanded-hover-color: var(--accordion-marker-color); - --accordion-rail-indent: 7px; - - --article-image-border-color: var(--base03); - --article-image-radius: 6px; - --article-image-shadow: none; - --article-reading-time-color: var(--base04); - --article-stack-gap: 16px; - --article-summary-color: var(--base05); - --article-summary-hover-color: var(--base07); - --article-title-color: var(--base0E); - --article-title-expanded-color: var(--base0E); - - --card-bg: var(--base01); - --card-border-color: var(--base03); - --card-padding: 16px; - --card-radius: 8px; - --card-shadow: none; - --card-stack-gap: 24px; - - --daily-heading-color: var(--base03); - --daily-heading-hover-color: var(--base04); - - --footer-color: var(--base03); - --footer-link-hover-color: var(--base04); - - --source-link-color: var(--base04); - --source-link-hover-color: var(--base07); - --source-name-color: var(--base0A); - --source-name-hover-color: var(--base07); -} - -/** - * Internals below - * - * If you can't create a specific look and feel with the configuration above, - * you might have reached the customization limit of the template. - * - * Options: - * 1. File an issue with the template. - * 2. Target specific elements and write your own CSS. A future change in HTML may break your style. - * 3. (Coming soon...) Write your own template with Template Extensibility API. - */ - -/** RESETS */ - -* { - box-sizing: border-box; -} - -*:focus:not(:focus-visible) { - outline: none; -} - -/** GENERIC */ -html { - font-size: var(--font-size-scaler); -} - -body { - background-color: var(--body-bg); - font-family: var(--font-family-default); - line-height: var(--line-height-body); - color: var(--body-color); - margin: 0; - gap: var(--body-stack-gap); - padding: var(--body-padding); - display: grid; -} - -/** COMPONENTS */ -.article-expander { - padding: 4px 0; -} - -.article-expander__title { - color: var(--article-title-color); - font-size: var(--font-size-m); - line-height: var(--line-height-heading); - font-weight: 600; - user-select: none; - display: -webkit-box; - cursor: pointer; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - overflow: hidden; -} -.article-expander[open] .article-expander__title { - display: block; - color: var(--article-title-expanded-color); -} -.article-expander__title::before { - content: "•"; - color: var(--accordion-marker-color); - display: inline-flex; - justify-content: center; - width: 16px; - font-weight: 700; - margin-right: 6px; - font-family: monospace; -} -.article-expander__title::-webkit-details-marker { - display: none; /* remove triangle from Safair */ -} -.article-expander[open] .article-expander__title::before { - color: var(--accordion-marker-expanded-color); -} -.article-expander .article-expander__title:hover::before { - content: "+"; - color: var(--accordion-marker-hover-color); -} -.article-expander[open] .article-expander__title:hover::before { - content: "-"; - color: var(--accordion-marker-expanded-hover-color); -} - -.article-image { - display: none; - border-radius: var(--article-image-radius); - border: 1px solid var(--article-image-border-color); - box-shadow: var(--article-image-shadow); -} -.article-expander[open] .article-image { - display: block; -} - -.article-summary-link { - color: var(--article-summary-color); - font-size: var(--font-size-m); - text-decoration: none; -} - -.article-summary-link:hover { - color: var(--article-summary-hover-color); - --accordion-content-rail-color: var(--accordion-content-hover-rail-color); -} - -.article-summary-box-outer { - display: block; - padding: 6px var(--accordion-rail-indent) var(--article-stack-gap) var(--accordion-rail-indent); -} - -.article-summary-box-inner { - padding-left: 14px; - border-left: 1px solid var(--accordion-content-rail-color); - font-size: var(--font-size-s); - overflow-wrap: anywhere; - word-break: break-word; /* same as above, for Safari compatitiliby */ -} - -.article-reading-time { - font-weight: 400; - color: var(--article-reading-time-color); - font-size: var(--font-size-s); - white-space: nowrap; -} - -.card { - border-radius: var(--card-radius); - box-shadow: var(--card-shadow); - background: var(--card-border-color); - border: 1px solid var(--card-border-color); - overflow: hidden; -} - -.card__section { - display: grid; - padding: var(--card-padding); - background: var(--card-bg); -} - -.daily-heading { - display: grid; - font-size: var(--font-size-L); - font-weight: 700; - margin: 0 0 4px 0; -} - -.daily-heading-toggle { - font: inherit; - display: flex; - align-items: baseline; - flex-wrap: wrap; - gap: 16px; - border: none; - background: none; - padding: 0 var(--card-padding); - text-align: start; - cursor: pointer; - color: var(--daily-heading-color); - text-transform: uppercase; -} -.daily-heading-toggle:hover { - color: var(--daily-heading-hover-color); -} -.daily-heading-toggle__date { - font-size: var(--font-size-m); -} - -footer { - color: var(--footer-color); - font-size: var(--font-size-s); - display: flex; - padding: 0 16px; - justify-content: space-between; -} - -.footer-link { - color: var(--footer-link-text); - text-decoration: none; -} - -.footer-link:hover { - color: var(--footer-link-hover-color); - text-decoration: underline; -} - -.media-object { - display: grid; - gap: 16px; -} -.media-object__media { - aspect-ratio: 16/9; - object-fit: cover; - width: 100%; -} - -@media screen and (min-width: 40rem) { - .media-object { - grid-template: "text media" auto / 1fr auto; - } - .media-object__text { - grid-area: text; - } - .media-object__media { - height: 100px; - width: auto; - grid-area: media; - margin-bottom: var(--article-stack-gap); - } -} - -.sources { - list-style: none; - margin: 0; - padding: 0; - display: grid; - gap: 1px; -} - -.source-heading { - display: flex; - gap: 16px; - flex-wrap: wrap; - font-size: var(--font-size-s); - margin: 0 0 8px 0; - padding-right: var(--accordion-rail-indent); -} -.source-heading__name { - font: inherit; - font-size: var(--font-size-s); - font-weight: 400; - text-align: start; - border: none; - background: none; - padding: 0; - cursor: pointer; - color: var(--source-name-color); - flex-grow: 1; -} -.source-heading__name:hover { - color: var(--source-name-hover-color); -} -.source-heading__link { - color: var(--source-link-color); - font-weight: 400; - text-decoration: none; -} -.source-heading__link:hover { - color: var(--source-link-hover-color); - text-decoration: underline; -} - -.z-stack { - display: grid; -} -.z-stack__layer { - grid-area: 1/1/-1/-1; -} + --font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace