feedfetcher/page.css
File Type: text/plain
:root {
--bg: #0c1210;
--bg-raise: #141c18;
--panel: #101814;
--line: #2a4034;
--phosphor: #9dffb0;
--phosphor-dim: #6fbf86;
--amber: #ffb000;
--amber-hot: #ffcf70;
--text: #d7ffe0;
--muted: #7d9a88;
--shadow: rgba(0, 0, 0, 0.45);
--radius: 4px;
--glow: 0 0 16px rgba(157, 255, 176, 0.14);
}
* { box-sizing: border-box; }
button, input { font-family: inherit; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
margin: 0;
overflow-anchor: none;
min-height: 100vh;
color: var(--text);
background:
radial-gradient(ellipse at top, rgba(157, 255, 176, 0.1), transparent 46%),
linear-gradient(180deg, #101814 0%, var(--bg) 220px);
font-family: "Roboto Mono", "IBM Plex Mono", "Cascadia Mono", ui-monospace, monospace;
font-size: 16.5px;
line-height: 1.45;
}
body::before {
content: "";
pointer-events: none;
position: fixed;
z-index: 3;
inset: 0;
background: repeating-linear-gradient(
to bottom,
rgba(0, 0, 0, 0.16) 0,
rgba(0, 0, 0, 0.16) 1px,
transparent 1px,
transparent 3px
);
mix-blend-mode: multiply;
opacity: 0.5;
}
.wrap {
width: min(980px, calc(100% - 32px));
margin: 0 auto;
padding: 28px 0 64px;
position: relative;
}
.topbar {
position: sticky;
top: 0;
z-index: 4;
margin: 0 0 18px;
padding-bottom: 14px;
background: transparent;
pointer-events: none;
}
.topbar .masthead, .topbar .search { pointer-events: auto; }
.masthead {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: flex-end;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
box-shadow: 0 0 0 1px rgba(157, 255, 176, 0.1), var(--glow);
padding: 18px 20px 16px;
}
.kicker {
margin: 0 0 4px;
color: var(--amber);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
text-shadow: 0 0 8px rgba(255, 176, 0, 0.4);
}
h1 {
margin: 0;
font-size: 28px;
font-weight: 560;
letter-spacing: -0.03em;
color: var(--phosphor);
text-shadow: 0 0 8px rgba(157, 255, 176, 0.55), 0 0 22px rgba(157, 255, 176, 0.4);
}
.generated {
margin: 0;
color: var(--muted);
font-size: 13px;
text-align: right;
}
.search {
display: flex;
flex-wrap: wrap;
align-items: center;
position: relative;
gap: 12px;
margin: 8px 0 0;
padding: 10px 14px 12px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
box-shadow: 0 0 0 1px rgba(157, 255, 176, 0.08), var(--glow);
}
.search::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -9px;
height: 8px;
background: var(--bg);
}
.search label {
color: var(--amber);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.search input {
flex: 1;
min-width: 0;
border: none;
background: transparent;
color: var(--phosphor);
font-size: 16px;
caret-color: var(--amber);
}
.search input:focus { outline: none; }
.search input::placeholder { color: var(--muted); }
.search .filter-tools {
display: flex;
gap: 6px;
flex: 0 0 auto;
}
.search .count {
flex: 1 0 100%;
color: var(--muted);
font-size: 12px;
text-align: left;
}
.only-new {
display: block;
border: 1px solid var(--line);
border-radius: var(--radius);
background: transparent;
color: var(--muted);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 10px 3px;
cursor: pointer;
}
.to-top {
position: fixed;
z-index: 5;
right: 18px;
bottom: 18px;
border: 1px solid var(--amber);
border-radius: var(--radius);
background: rgba(12, 18, 16, 0.94);
box-shadow: 0 0 12px rgba(255, 176, 0, 0.28);
color: var(--amber);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 8px 12px 7px;
cursor: pointer;
opacity: 0;
pointer-events: none;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; }
.to-top:hover, .to-top:focus-visible { color: #1a1200; background: var(--amber); outline: none; }
.only-new:hover { color: var(--amber-hot); border-color: var(--amber); }
.only-new[aria-pressed="true"] {
color: #1a1200;
background: var(--amber);
border-color: var(--amber);
}
.channel.is-hidden, .item.is-hidden, .fresh:not(:has(.item:not(.is-hidden))),
.archive:not(:has(.item:not(.is-hidden))) { display: none; }
.no-matches {
margin: 0;
padding: 18px;
border: 1px dashed var(--line);
border-radius: var(--radius);
color: var(--muted);
text-align: center;
}
.no-matches.is-hidden { display: none; }
.site-footer {
margin: 28px 0 0;
color: var(--muted);
font-size: 12px;
text-align: center;
}
.site-footer a { color: var(--phosphor-dim); }
.site-footer a:hover { color: var(--amber); }
.channel {
margin: 0 0 18px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: rgba(16, 24, 20, 0.92);
box-shadow: 0 10px 28px var(--shadow), var(--glow);
overflow: hidden;
}
.channel-head {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-bottom: 1px solid var(--line);
background: linear-gradient(90deg, rgba(255, 176, 0, 0.08), transparent 55%);
}
.avatar, .avatar-fallback {
width: 72px;
height: 72px;
flex: 0 0 72px;
border-radius: 6px;
border: 1px solid var(--amber);
object-fit: cover;
background: #0a100d;
box-shadow: 0 0 0 3px rgba(255, 176, 0, 0.2), 0 0 14px rgba(255, 176, 0, 0.28);
}
.avatar-fallback {
display: grid;
place-items: center;
color: var(--amber);
font-size: 28px;
}
h2 {
margin: 0;
font-size: 22px;
font-weight: 620;
letter-spacing: -0.02em;
}
h2.category {
margin: 26px 0 12px;
padding-bottom: 6px;
border-bottom: 1px solid var(--line);
color: var(--amber);
font-size: 13px;
font-weight: 560;
letter-spacing: 0.14em;
text-transform: uppercase;
text-shadow: 0 0 8px rgba(255, 176, 0, 0.35);
}
h2.category.is-hidden, .group.is-hidden { display: none; }
.category-scroller { display: contents; }
.category-scroller .caret { display: none; }
.topbar { min-height: var(--topbar-height); }
.topbar.is-compact { margin-bottom: 10px; padding-bottom: 8px; }
.topbar.is-compact .masthead {
align-items: baseline;
gap: 8px 12px;
padding: 8px 12px;
}
.topbar.is-compact .kicker { display: none; }
.topbar.is-compact h1 { font-size: 18px; }
.topbar.is-compact .generated { font-size: 11px; }
.search.is-compact { gap: 8px; padding: 6px 10px 8px; }
.search.is-compact label { display: none; }
.search.is-compact .count { font-size: 11px; }
.search.is-compact .category-scroller {
display: block;
position: relative;
flex: 1 0 100%;
min-width: 0;
max-width: 100%;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--line);
}
.search.is-compact .categories {
flex: none;
width: 100%;
flex-wrap: nowrap;
overflow-x: auto;
gap: 5px;
margin-top: 0;
padding-top: 0;
border-top: none;
scrollbar-width: none;
}
.search.is-compact .categories::-webkit-scrollbar { display: none; }
.search.is-compact .categories button { white-space: nowrap; }
.search.is-compact .category-scroller::before,
.search.is-compact .category-scroller::after {
content: "";
position: absolute;
top: 8px;
bottom: 0;
width: 46px;
z-index: 1;
pointer-events: none;
opacity: 0;
}
.search.is-compact .category-scroller::before {
left: 0;
background: linear-gradient(to right, var(--panel) 0 14px, transparent);
}
.search.is-compact .category-scroller::after {
right: 0;
background: linear-gradient(to left, var(--panel) 0 14px, transparent);
}
.search.is-compact .category-scroller.can-left::before,
.search.is-compact .category-scroller.can-right::after { opacity: 1; }
.search.is-compact .category-scroller .caret {
display: block;
position: absolute;
top: calc(8px + (100% - 8px) / 2);
z-index: 2;
transform: translateY(-50%);
border: none;
background: transparent;
color: var(--amber);
font-size: 16px;
line-height: 1;
padding: 2px 4px;
cursor: pointer;
opacity: 0;
text-shadow: 0 0 6px var(--panel), 0 0 2px var(--panel);
pointer-events: none;
}
.search.is-compact .category-scroller .caret-left { left: 0; }
.search.is-compact .category-scroller .caret-right { right: 0; }
.search.is-compact .category-scroller.can-left .caret-left,
.search.is-compact .category-scroller.can-right .caret-right { opacity: 1; pointer-events: auto; }
.categories {
display: flex;
flex: 1 0 100%;
flex-wrap: wrap;
gap: 6px;
margin-top: 2px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
.categories button {
border: 1px solid var(--line);
border-radius: var(--radius);
background: transparent;
color: var(--phosphor-dim);
font-size: 12px;
letter-spacing: 0.03em;
padding: 4px 9px 3px;
cursor: pointer;
}
.categories button:hover { color: var(--amber-hot); border-color: var(--amber); }
.categories button[aria-pressed="true"] {
color: #1a1200;
background: var(--amber);
border-color: var(--amber);
}
h2 a {
color: var(--phosphor);
text-decoration: none;
text-shadow: 0 0 10px rgba(157, 255, 176, 0.38);
}
h2 a:hover { color: white; }
ul { list-style: none; margin: 0; padding: 6px; }
.archive {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px 10px;
padding-top: 2px;
}
.fresh + .archive { border-top: 1px solid var(--line); }
.item a {
display: grid;
grid-template-columns: 120px 1fr;
gap: 10px;
align-items: center;
padding: 5px 6px;
color: inherit;
text-decoration: none;
border: 1px solid transparent;
border-radius: var(--radius);
min-width: 0;
}
.fresh .item a {
grid-template-columns: 168px 1fr;
gap: 14px;
padding: 8px;
}
.item a:hover, .item a:focus-visible {
background: rgba(157, 255, 176, 0.06);
border-color: var(--line);
outline: none;
}
.thumb, .thumb-empty {
width: 120px;
height: 68px;
object-fit: cover;
background: #0a100d;
border: 1px solid #24362c;
border-radius: var(--radius);
}
.fresh .thumb, .fresh .thumb-empty { width: 168px; height: 94px; }
.item-body { min-width: 0; }
.item-title {
display: block;
color: var(--phosphor-dim);
font-size: 14px;
font-weight: 540;
line-height: 1.3;
}
.fresh .item-title {
color: var(--text);
font-size: 16.5px;
font-weight: 560;
}
.item a:hover .item-title { color: white; }
.item-meta {
display: flex;
gap: 8px;
align-items: center;
margin-top: 3px;
color: var(--muted);
font-size: 12px;
}
.fresh .item-meta { margin-top: 6px; font-size: 13px; }
.item.new { background: rgba(255, 176, 0, 0.045); }
.item.new .item-title {
color: var(--amber-hot);
text-shadow: 0 0 8px rgba(255, 176, 0, 0.35);
}
.item.new .thumb { border-color: rgba(255, 176, 0, 0.55); }
.item.today { background: rgba(255, 120, 0, 0.14); }
.item.today .item-title {
color: #ff9a3c;
font-size: 20px;
font-weight: 650;
text-shadow: 0 0 8px rgba(255, 154, 60, 0.6), 0 0 18px rgba(255, 140, 40, 0.42);
}
.item.today .thumb { border-color: #ff9a3c; }
.badge {
color: #1a1200;
background: var(--amber);
padding: 1px 6px 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
border-radius: 3px;
}
@media (max-width: 680px) {
.wrap { width: min(100% - 16px, 980px); padding-top: 12px; }
.topbar { margin-bottom: 10px; padding-bottom: 8px; }
.masthead {
flex-wrap: wrap;
align-items: baseline;
gap: 2px 12px;
padding: 8px 10px;
}
.kicker { display: none; }
h1 { font-size: 16px; white-space: nowrap; }
.generated { text-align: left; font-size: 11px; }
.search { gap: 8px; margin-top: 6px; padding: 6px 10px 8px; }
.search::before { top: -7px; height: 6px; }
.search .count { font-size: 11px; }
.search label { display: none; }
.search input { font-size: 15px; }
.category-scroller {
display: block;
position: relative;
flex: 1 0 100%;
min-width: 0;
max-width: 100%;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--line);
}
.categories {
flex: none;
width: 100%;
flex-wrap: nowrap;
overflow-x: auto;
gap: 5px;
margin-top: 0;
padding-top: 0;
border-top: none;
scrollbar-width: none;
}
.categories::-webkit-scrollbar { display: none; }
.categories button { padding: 3px 8px 2px; white-space: nowrap; }
.category-scroller::before, .category-scroller::after {
content: "";
position: absolute;
top: 8px;
bottom: 0;
width: 46px;
z-index: 1;
pointer-events: none;
opacity: 0;
}
.category-scroller::before {
left: 0;
background: linear-gradient(to right, var(--panel) 0 14px, transparent);
}
.category-scroller::after {
right: 0;
background: linear-gradient(to left, var(--panel) 0 14px, transparent);
}
.category-scroller.can-left::before, .category-scroller.can-right::after { opacity: 1; }
.category-scroller .caret {
display: block;
position: absolute;
top: calc(8px + (100% - 8px) / 2);
z-index: 2;
transform: translateY(-50%);
border: none;
background: transparent;
color: var(--amber);
font-size: 16px;
line-height: 1;
padding: 2px 4px;
cursor: pointer;
opacity: 0;
text-shadow: 0 0 6px var(--panel), 0 0 2px var(--panel);
pointer-events: none;
}
.category-scroller .caret-left { left: 0; }
.category-scroller .caret-right { right: 0; }
.category-scroller.can-left .caret-left, .category-scroller.can-right .caret-right { opacity: 1; pointer-events: auto; }
.archive { grid-template-columns: 1fr; }
.item a, .fresh .item a { grid-template-columns: 96px 1fr; gap: 8px; }
.thumb, .thumb-empty, .fresh .thumb, .fresh .thumb-empty { width: 96px; height: 54px; }
h2 { font-size: 18px; }
}