diff --git a/index.html b/index.html index eea4ae2..f5af513 100644 --- a/index.html +++ b/index.html @@ -6,21 +6,51 @@ Simple Message App - + -
- -
- Announcement -

-
+
+ +
+ Announcement +

+
-
-
+
+
diff --git a/package.json b/package.json index 3d9e81d..964b496 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "prettier": "./.prettierrc.json", "devDependencies": { "@playwright/test": "^1.60.0", - "@screenly/edge-apps": "^1.2.1", + "@screenly/edge-apps": "^1.3.0", "@types/bun": "^1.3.14", "@types/jsdom": "^28.0.3", "bun-types": "^1.3.14", diff --git a/screenshots/1080x1920.webp b/screenshots/1080x1920.webp index 0b2b3ae..12d84e6 100644 Binary files a/screenshots/1080x1920.webp and b/screenshots/1080x1920.webp differ diff --git a/screenshots/1280x720.webp b/screenshots/1280x720.webp index 58991b3..bfbbba2 100644 Binary files a/screenshots/1280x720.webp and b/screenshots/1280x720.webp differ diff --git a/screenshots/1920x1080.webp b/screenshots/1920x1080.webp index a71c92c..713ea23 100644 Binary files a/screenshots/1920x1080.webp and b/screenshots/1920x1080.webp differ diff --git a/screenshots/2160x3840.webp b/screenshots/2160x3840.webp index f03a7de..07c5ee4 100644 Binary files a/screenshots/2160x3840.webp and b/screenshots/2160x3840.webp differ diff --git a/screenshots/2160x4096.webp b/screenshots/2160x4096.webp index b31b97c..b910b9b 100644 Binary files a/screenshots/2160x4096.webp and b/screenshots/2160x4096.webp differ diff --git a/screenshots/3840x2160.webp b/screenshots/3840x2160.webp index bbf110c..6ea2f99 100644 Binary files a/screenshots/3840x2160.webp and b/screenshots/3840x2160.webp differ diff --git a/screenshots/4096x2160.webp b/screenshots/4096x2160.webp index 1675f99..a0af7e6 100644 Binary files a/screenshots/4096x2160.webp and b/screenshots/4096x2160.webp differ diff --git a/screenshots/480x800.webp b/screenshots/480x800.webp index 4a46108..1fb796a 100644 Binary files a/screenshots/480x800.webp and b/screenshots/480x800.webp differ diff --git a/screenshots/720x1280.webp b/screenshots/720x1280.webp index d2ca506..5741bda 100644 Binary files a/screenshots/720x1280.webp and b/screenshots/720x1280.webp differ diff --git a/screenshots/800x480.webp b/screenshots/800x480.webp index 337949e..0b5b907 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 796aa0c..ea94d3b 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,186 +1,10 @@ -@import '@screenly/edge-apps/styles'; - -* { - box-sizing: border-box; -} - -body { - margin: 0; - padding: 0; - overflow: hidden; - font-family: 'Inter', system-ui, sans-serif; - background: url('/static/images/bg.webp') no-repeat center center; - background-size: cover; - background-color: #171e24; -} - -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(7px); -} - -auto-scaler { - position: relative; - z-index: var(--z-index-content); -} - -#app { - position: relative; - width: 100%; - height: 100%; - color: white; -} - -app-header { - position: absolute; - left: 1.3125em; - top: 1.5625em; - width: calc(100% - 2.625em); -} - -#left-content { - position: absolute; - left: calc(8.33% + 8.25em); - top: 15.5em; - width: 32.25em; - display: flex; - flex-direction: column; - gap: 1em; -} - -#announcement-label { - font-weight: 300; - font-size: 1.44em; - line-height: normal; - letter-spacing: -0.0182em; - color: rgba(255, 255, 255, 0.9); -} - -#message-header { - margin: 0; - font-size: 4em; - font-weight: 400; - line-height: normal; - color: white; - white-space: pre-wrap; - overflow-wrap: break-word; -} - -#date-badge { - display: inline-flex; - align-items: center; - height: 2.031em; - width: fit-content; - padding: 0.417em 0.781em; - border: 0.0875em solid rgba(255, 255, 255, 0.06); - border-radius: 0.885em; - background: linear-gradient( - 167deg, - rgba(255, 255, 255, 0.06) 0%, - rgba(255, 255, 255, 0.01) 100% - ); - box-shadow: - 0 0.677em 2.083em rgba(0, 0, 0, 0.15), - inset 0 0.0875em 0 rgba(255, 255, 255, 0.1), - inset 0 -0.0875em 0 rgba(255, 255, 255, 0.03); - font-size: 1.2em; - font-weight: 300; - line-height: normal; - color: rgba(255, 255, 255, 0.95); - letter-spacing: -0.01em; -} - -#message-body-card { - position: absolute; - left: calc(50% + 3.5em); - top: 12.0625em; - width: 37.8125em; - height: 47.9375em; - border: 0.047em solid rgba(255, 255, 255, 0.1); - border-radius: 1.5em; - padding: 2em; - overflow: hidden; - background: - linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), - linear-gradient( - 128deg, - rgba(255, 255, 255, 0.08) 0%, - rgba(255, 255, 255, 0.02) 100% - ); - box-shadow: - inset 0 0.047em 0 rgba(255, 255, 255, 0.15), - inset 0 -0.047em 0 rgba(255, 255, 255, 0.05); -} - -#message-body { - font-size: 1.875em; - font-weight: 300; - line-height: 1.333; - color: white; - white-space: pre-wrap; - overflow-wrap: break-word; -} - -@media (orientation: portrait) { - #app { - display: flex; - flex-direction: column; - padding: 1.25em; - padding-top: 1.25em; - } - - app-header { - position: static; - width: 100%; - } - - #left-content { - position: static; - width: 100%; - margin-top: 15em; - gap: 1em; - } - - #announcement-label { - font-size: 3.5em; - font-weight: 500; - line-height: 1.25; - letter-spacing: normal; - padding-left: 0; - } - - #message-header { - font-size: 7em; - font-weight: 400; - line-height: 1.179; - } - - #date-badge { - font-size: 2.8125em; - font-weight: 400; - line-height: 1.311; - padding: 0.5em 1em; - border-radius: 1.05em; - margin-top: 0.5em; - } - - #message-body-card { - position: static; - width: 100%; - margin-top: 10em; - height: 45.75em; - border-radius: 1.5em; - padding: 2em; - } - - #message-body { - font-size: 2.375em; - font-weight: 300; - line-height: 1.25; - } -} +/* Tailwind CSS, skipping Preflight (resets border/margin/padding on every + element via a universal selector and breaks custom-element hosts like + ). @screenly/edge-apps/styles goes in the `base` layer so any + Tailwind utility classes added later always win the cascade, regardless + of selector specificity. */ +@layer theme, base, utilities; + +@import 'tailwindcss/theme.css' layer(theme); +@import '@screenly/edge-apps/styles' layer(base); +@import 'tailwindcss/utilities.css' layer(utilities);