Remove arc colors (#17)

This commit is contained in:
Carter McBride 2024-08-05 14:28:59 -06:00 committed by GitHub
parent ab7d7144a0
commit 93326d6483
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 7 additions and 33 deletions

View file

@ -98,8 +98,8 @@
</script> </script>
</head> </head>
<body class="font-system bg-arc-background text-base m-4"> <body class="font-system text-base m-4">
<header class="text-2xl text-arc-title"> <header class="text-2xl">
<h1>📰 Carter's RSS Feeds</h1> <h1>📰 Carter's RSS Feeds</h1>
</header> </header>
<main class="grid gap-4 grid-cols-[repeat(auto-fill,_minmax(300px,_1fr))] mt-2"> <main class="grid gap-4 grid-cols-[repeat(auto-fill,_minmax(300px,_1fr))] mt-2">
@ -110,20 +110,20 @@
{% for feed in feeds %} {% for feed in feeds %}
<details class="group"> <details class="group">
<summary <summary
class="cursor-pointer p-2 rounded-xl mt-1 transition-colors group-has-[.has-recent]:border-2 group-has-[.has-recent]:border-arc-title hover:bg-arc-hover flex flex-row items-center"> class="cursor-pointer p-2 rounded-xl mt-1 transition-colors group-has-[.has-recent]:border-2 flex flex-row items-center">
{% if feed.hasRecent %} {% if feed.hasRecent %}
<div class="text-xl mr-2" aria-label="Feed has recent items">✳︎</div> <div class="text-xl mr-2" aria-label="Feed has recent items">✳︎</div>
{% endif %} {% endif %}
<div class="w-full"> <div class="w-full">
<div>{{ feed.title }}</div> <div>{{ feed.title }}</div>
<div class="text-sm whitespace-nowrap text-ellipsis w-11/12 overflow-hidden" <div class="text-sm whitespace-nowrap text-ellipsis w-11/12 overflow-hidden" title="{{feed.feed}}">({{
title="{{feed.feed}}">({{ feed.feed }})</div> feed.feed }})</div>
</div> </div>
</summary> </summary>
<ul class=" overflow-y-auto list-none ml-6"> <ul class=" overflow-y-auto list-none ml-6">
{% for item in feed.items %} {% for item in feed.items %}
<li <li
class="{% if item.isRecent %}has-recent {% endif %} flex flex-row items-center p-2 rounded-xl mt-1 transition-colors hover:bg-arc-hover"> class="{% if item.isRecent %}has-recent {% endif %} flex flex-row items-center p-2 rounded-xl mt-1 transition-colors">
{% if item.isRecent %} {% if item.isRecent %}
<div class="text-xl mr-2" aria-label="Item is recent">✳︎</div> <div class="text-xl mr-2" aria-label="Item is recent">✳︎</div>
{% endif %} {% endif %}

View file

@ -209,41 +209,15 @@ export default {
"'Noto Color Emoji'", "'Noto Color Emoji'",
], ],
}, },
colors: {
/*
* The Arc browser (can) expose its theme color to the pages beneath as
* CSS custom properties.
*/
arc: {
"background-simple": "var(--arc-background-simple-color, #FDF8EBFF)",
maxContrast: "var(--arc-palette-maxContrastColor, #6F540AFF)",
minContrast: "var(--arc-palette-minContrastColor, #FDF8EBFF)",
hover: "var(--arc-palette-hover, #E2DDCAFF)",
foregroundPrimary: "var(--arc-palette-foregroundPrimary, #EBB218FF)",
foregroundSecondary:
"var(--arc-palette-foregroundSecondary, #EBB218FF)",
foregroundTertiary:
"var(--arc-palette-foregroundTertiary, #FDF8EBFF)",
title: "var(--arc-palette-title, #211900FF)",
subtitle: "var(--arc-palette-subtitle, #C5BB96FF)",
background: "var(--arc-palette-background, #F1EEE5FF)",
backgroundExtra: "var(--arc-palette-backgroundExtra, #FEFDFCFF)",
cutout: "var(--arc-palette-cutoutColor, #FDF8EBFF)",
focus: "var(--arc-palette-focus, #B7A97CFF)",
},
},
}, },
}, },
plugins: [ plugins: [
plugin(({ addBase, theme }) => { plugin(({ addBase }) => {
addBase({ addBase({
a: { a: {
textDecoration: "underline", textDecoration: "underline",
transition: "color 0.2s", transition: "color 0.2s",
cursor: "pointer", cursor: "pointer",
"&:hover": {
color: theme("colors.arc.subtitle"),
},
}, },
}); });
}), }),