mirror of
https://github.com/nafnlj/nljfeeds.git
synced 2024-09-19 09:16:57 +00:00
Add files via upload
This commit is contained in:
N.A. Ferrell
GitHub
parent
8ad7eb07cb
commit
a67bc8f294
334
index.css
334
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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user