From a67bc8f29466511ce81b7f62cb491883646bd71d Mon Sep 17 00:00:00 2001 From: "N.A. Ferrell" <77352335+nafnlj@users.noreply.github.com> Date: Wed, 13 Sep 2023 22:44:28 -0400 Subject: [PATCH] Add files via upload --- index.css | 334 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 330 insertions(+), 4 deletions(-) diff --git a/index.css b/index.css index 7b4db34..c637124 100644 --- a/index.css +++ b/index.css @@ -1,11 +1,337 @@ :root { /** * Palette - * New Leaf Feeds Template - * Nicholas A. Ferrell (https://thenewleafjournal.com/author/naferrell, https://social.emucafe.org/naferrell) + * Gruvbox dark, medium + * Dawid Kurek (dawikur@gmail.com), morhetz (https://github.com/morhetz/gruvbox) */ + --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 */ /** - * Typography + * Typograph */ - --font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace + --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; +}