5f27f8a16e
* Move the emoji * Convert to a grid layout * Ellipsize the feed urls * Add link to source on GitHub * Always be updating the relative time of the feed * Make "recent" within the last 8 hours * Sort the feeds alphabetically
79 lines
1.2 KiB
CSS
79 lines
1.2 KiB
CSS
:root {
|
|
--color-bg: oklch(97.1% 0.024 88.23);
|
|
--color-hover: oklch(94.48% 0.024 88.23);
|
|
--color-text: oklch(24.74% 0.024 88.23);
|
|
--color-new: oklch(94.48% 0.024 38.23);
|
|
}
|
|
|
|
body {
|
|
font-family: system-ui;
|
|
font-size: 18px;
|
|
background: var(--color-bg);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
main {
|
|
display: grid;
|
|
gap: 1em;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
}
|
|
|
|
section ul {
|
|
max-height: 250px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.inline-icon {
|
|
height: 1em;
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
summary {
|
|
cursor: pointer;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
summary,
|
|
details li {
|
|
padding: 0.5em;
|
|
border-radius: 12px;
|
|
margin-block-start: 4px;
|
|
transition: background cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s;
|
|
}
|
|
|
|
summary:hover,
|
|
details li:hover {
|
|
background: var(--color-hover)
|
|
}
|
|
|
|
details:has(li.has-recent) {
|
|
|
|
summary,
|
|
li.has-recent {
|
|
background: var(--color-new);
|
|
}
|
|
}
|
|
|
|
|
|
.errors li {
|
|
word-break: break-all;
|
|
}
|
|
|
|
.feed-url {
|
|
color: #aaa;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
text-overflow: ellipsis;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.article-timestamp,
|
|
.feed-url {
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
details ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
}
|