-
-
+
+
-
+
-
+
- ), which strips their shadow-DOM
+ :host styling. The design system's own reset.css already normalizes
+ box-sizing/margin/padding, so preflight isn't needed here. */
+@layer theme, base, utilities;
+
+@import 'tailwindcss/theme.css' layer(theme);
+/* @screenly/edge-apps/styles goes in the `base` layer so Tailwind utilities
+ (declared after `base` above) always win the cascade, regardless of
+ selector specificity — unlayered CSS otherwise beats layered CSS. */
+@import '@screenly/edge-apps/styles' layer(base);
+@import 'tailwindcss/utilities.css' layer(utilities);
+
+
-
-
+
+
+
diff --git a/package.json b/package.json
index 945e4b7..d75be4f 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
"version": "1.0.0",
"devDependencies": {
"@playwright/test": "^1.58.0",
- "@screenly/edge-apps": "^1.0.0",
+ "@screenly/edge-apps": "^1.4.0",
"@types/bun": "^1.3.13",
"@types/jsdom": "^28.0.1",
"bun-types": "^1.3.13",
diff --git a/screenshots/1080x1920.webp b/screenshots/1080x1920.webp
index da7626d..e8f5ebd 100644
Binary files a/screenshots/1080x1920.webp and b/screenshots/1080x1920.webp differ
diff --git a/screenshots/1280x720.webp b/screenshots/1280x720.webp
index ff06757..2efaecb 100644
Binary files a/screenshots/1280x720.webp and b/screenshots/1280x720.webp differ
diff --git a/screenshots/1920x1080.webp b/screenshots/1920x1080.webp
index 5b4827c..8fa14c9 100644
Binary files a/screenshots/1920x1080.webp and b/screenshots/1920x1080.webp differ
diff --git a/screenshots/2160x3840.webp b/screenshots/2160x3840.webp
index 4039dc9..50c1549 100644
Binary files a/screenshots/2160x3840.webp and b/screenshots/2160x3840.webp differ
diff --git a/screenshots/2160x4096.webp b/screenshots/2160x4096.webp
index ea73596..50796be 100644
Binary files a/screenshots/2160x4096.webp and b/screenshots/2160x4096.webp differ
diff --git a/screenshots/3840x2160.webp b/screenshots/3840x2160.webp
index 26d1dfb..8817d55 100644
Binary files a/screenshots/3840x2160.webp and b/screenshots/3840x2160.webp differ
diff --git a/screenshots/4096x2160.webp b/screenshots/4096x2160.webp
index 7beb87c..f6c24b3 100644
Binary files a/screenshots/4096x2160.webp and b/screenshots/4096x2160.webp differ
diff --git a/screenshots/480x800.webp b/screenshots/480x800.webp
index 6a64bb8..2e5e937 100644
Binary files a/screenshots/480x800.webp and b/screenshots/480x800.webp differ
diff --git a/screenshots/720x1280.webp b/screenshots/720x1280.webp
index 4df9c95..5282dd3 100644
Binary files a/screenshots/720x1280.webp and b/screenshots/720x1280.webp differ
diff --git a/screenshots/800x480.webp b/screenshots/800x480.webp
index d91d4fc..9502360 100644
Binary files a/screenshots/800x480.webp and b/screenshots/800x480.webp differ
diff --git a/src/css/style.css b/src/css/style.css
index e8e83ff..1092a3d 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,221 +1,12 @@
-@import '@screenly/edge-apps/styles';
-
-:root {
- --card-bg:
- linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%),
- linear-gradient(
- 142deg,
- rgba(255, 255, 255, 0.08) 0%,
- rgba(255, 255, 255, 0.02) 100%
- );
- --card-border: rgba(255, 255, 255, 0.1);
- --card-radius: 1.667rem;
- --card-padding: 1.5rem;
- --card-gap: 1.25rem;
- --grid-gap: 1.25rem;
- --text-primary: #ffffff;
- --text-muted: rgba(255, 255, 255, 0.8);
-}
-
-* {
- box-sizing: border-box;
-}
-
-#feed-grid[hidden],
-#feed-error[hidden] {
- display: none;
-}
-
-body {
- margin: 0;
- padding: 0;
- overflow: hidden;
- color: var(--text-primary);
- font-family: 'Inter', system-ui, sans-serif;
- background: url('/static/images/bg.webp') no-repeat center center;
- background-size: cover;
-}
-
-body::before {
- content: '';
- position: fixed;
- inset: 0;
- z-index: var(--z-index-backdrop);
- pointer-events: none;
- background: rgba(0, 0, 0, 0.2);
- backdrop-filter: blur(3px);
-}
-
-auto-scaler {
- position: relative;
- z-index: var(--z-index-content);
-}
-
-#app {
- display: flex;
- flex-direction: column;
- width: 100%;
- height: 100%;
-}
-
-.header {
- border-radius: 1.042rem;
- padding-right: 1.25rem;
- background: rgba(0, 0, 0, 0.2);
- box-shadow:
- inset 0 0.052rem 0 rgba(255, 255, 255, 0.15),
- inset 0 -0.052rem 0 rgba(255, 255, 255, 0.05);
-}
-
-.feed-date {
- margin: 0;
- padding: 5.25rem 10rem 0;
- font-size: 2.344rem;
- font-weight: 400;
- line-height: 3.073rem;
- color: var(--text-primary);
- text-align: center;
- text-shadow: 0 0.104rem 0.313rem rgba(0, 0, 0, 0.25);
- white-space: nowrap;
-}
-
-.feed-grid {
- flex: 1;
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: var(--grid-gap);
- padding: 3.75rem 10rem 7.5rem;
- overflow: hidden;
-}
-
-.feed-card {
- display: flex;
- flex-direction: column;
- gap: var(--card-gap);
- padding: var(--card-padding);
- background: var(--card-bg);
- border: 0.75px solid var(--card-border);
- border-radius: var(--card-radius);
- backdrop-filter: blur(10px);
- overflow: hidden;
- box-shadow:
- inset 0 0.75px 0 rgba(255, 255, 255, 0.15),
- inset 0 -0.75px 0 rgba(255, 255, 255, 0.05);
-}
-
-.feed-card-meta {
- display: flex;
- flex-direction: column;
- gap: 0.375rem;
-}
-
-.feed-card-title {
- margin: 0;
- font-size: 1.458rem;
- font-weight: 700;
- line-height: 1.929rem;
- color: var(--text-primary);
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
-}
-
-.feed-card-date {
- margin-top: 0.5rem;
- font-size: 1.042rem;
- font-weight: 400;
- line-height: 1.563rem;
- color: var(--text-muted);
- white-space: nowrap;
-}
-
-.feed-card-source {
- font-size: 0.833rem;
- font-weight: 600;
- line-height: 1.25rem;
- color: var(--text-muted);
- letter-spacing: 0.08em;
- text-transform: uppercase;
-}
-
-.feed-card-excerpt {
- flex: 1;
- margin: 0;
- font-size: 1.042rem;
- font-weight: 500;
- line-height: 1.563rem;
- color: var(--text-primary);
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 4;
- overflow: hidden;
-}
-
-.feed-error {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- padding-bottom: 10%;
- font-size: 1.5rem;
- line-height: 3rem;
- color: var(--text-muted);
- text-align: center;
-}
-
-@media (orientation: portrait) {
- .header {
- padding: 0.938rem 1.25rem;
- border-radius: 1.25rem;
- font-size: 1.5rem;
- }
-
- .feed-date {
- padding: 10rem 2.5rem 0;
- font-size: 5.625rem;
- line-height: 7.375rem;
- white-space: normal;
- }
-
- .feed-grid {
- flex: unset;
- margin-top: auto;
- grid-template-columns: 1fr;
- grid-auto-rows: 1fr;
- align-content: start;
- padding: 3.75rem 2.5rem 7.5rem;
- }
-
- .feed-card {
- gap: 2.5rem;
- padding: 3.25rem;
- }
-
- .feed-card:nth-child(n + 4) {
- display: none;
- }
-
- .feed-card-title {
- font-size: 2rem;
- line-height: 2.625rem;
- -webkit-line-clamp: 2;
- }
-
- .feed-card-date {
- margin-top: 0.75rem;
- font-size: 1.5rem;
- line-height: 2rem;
- }
-
- .feed-card-source {
- font-size: 1.125rem;
- line-height: 1.5rem;
- }
-
- .feed-card-excerpt {
- font-size: 1.5rem;
- line-height: 2rem;
- -webkit-line-clamp: 3;
- }
-}
+/* Skip Tailwind's preflight: it resets `border` on every element (including
+ custom-element hosts like Unable to load RSS feed.
Retrying…