+
+
diff --git a/package.json b/package.json
index 07e46a9..e5e98e5 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,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",
"@types/qrcode": "^1.5.6",
diff --git a/screenshots/1080x1920.webp b/screenshots/1080x1920.webp
index b5fe460..50b45e1 100644
Binary files a/screenshots/1080x1920.webp and b/screenshots/1080x1920.webp differ
diff --git a/screenshots/1280x720.webp b/screenshots/1280x720.webp
index 9808785..4ed0dbb 100644
Binary files a/screenshots/1280x720.webp and b/screenshots/1280x720.webp differ
diff --git a/screenshots/2160x3840.webp b/screenshots/2160x3840.webp
index 43067fa..9e50b6a 100644
Binary files a/screenshots/2160x3840.webp and b/screenshots/2160x3840.webp differ
diff --git a/screenshots/2160x4096.webp b/screenshots/2160x4096.webp
index 17f76ff..0ac2f18 100644
Binary files a/screenshots/2160x4096.webp and b/screenshots/2160x4096.webp differ
diff --git a/screenshots/480x800.webp b/screenshots/480x800.webp
index 02fa92c..b0c7d93 100644
Binary files a/screenshots/480x800.webp and b/screenshots/480x800.webp differ
diff --git a/screenshots/720x1280.webp b/screenshots/720x1280.webp
index 5e8980a..60cfa89 100644
Binary files a/screenshots/720x1280.webp and b/screenshots/720x1280.webp differ
diff --git a/screenshots/800x480.webp b/screenshots/800x480.webp
index 4f76323..9a27c04 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 aa9fe13..bad74d2 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,251 +1,5 @@
-@import 'tailwindcss';
+@layer theme, base, utilities;
-/* Reset and base styles */
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-html {
- font-size: 14px;
-}
-
-body {
- font-family:
- -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
- Arial, sans-serif;
- height: 100vh;
- width: 100vw;
- overflow: hidden;
- background-color: var(--theme-color-background, #c9cdd0);
-}
-
-/* CSS Custom Properties */
-:root {
- --theme-color-primary: #972eff;
- --theme-color-tertiary: #ffffff;
- --theme-color-background: #c9cdd0;
-}
-
-/* Main container */
-.container {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100%;
- width: 100%;
- padding: 2rem;
-}
-
-/* QR section card */
-.qr-section {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- gap: 5rem;
- width: 100%;
- max-width: 90rem;
- height: 100%;
- max-height: 50rem;
- padding: 5rem;
- background: var(--theme-color-primary);
- border-radius: 3.5rem;
- color: var(--theme-color-tertiary);
- box-shadow:
- 0 2.5rem 5rem rgba(0, 0, 0, 0.25),
- 0 1rem 2rem rgba(0, 0, 0, 0.15);
- position: relative;
- overflow: hidden;
-}
-
-/* Subtle background pattern */
-.qr-section::before {
- content: '';
- position: absolute;
- top: -50%;
- right: -10%;
- width: 40rem;
- height: 40rem;
- background: radial-gradient(
- circle,
- rgba(255, 255, 255, 0.08) 0%,
- transparent 70%
- );
- border-radius: 50%;
- pointer-events: none;
-}
-
-/* Text content section */
-.text-content {
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: center;
- max-width: 45rem;
- position: relative;
- z-index: 1;
-}
-
-/* Headline (main message) */
-.qr-section h1 {
- font-size: 6rem;
- font-weight: 700;
- line-height: 1.15;
- margin: 0;
- letter-spacing: -0.02em;
- text-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
-}
-
-/* QR container wrapper */
-.qr-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 2rem;
- flex-shrink: 0;
- position: relative;
- z-index: 1;
-}
-
-/* QR code box */
-#qr-code {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 32rem;
- height: 32rem;
- padding: 2.5rem;
- background-color: white;
- border-radius: 2.5rem;
- box-shadow:
- 0 1.5rem 4rem rgba(0, 0, 0, 0.25),
- 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
-}
-
-#qr-code svg {
- width: 100%;
- height: 100%;
- display: block;
-}
-
-/* Call to action (instruction) */
-#cta {
- font-size: 1.75rem;
- line-height: 1.4;
- margin: 0;
- opacity: 0.95;
- font-weight: 500;
- letter-spacing: -0.01em;
- text-align: center;
-}
-
-/* Responsive adjustments */
-@media screen and (max-width: 1280px) and (orientation: landscape) {
- .qr-section {
- padding: 2.5rem;
- gap: 2.5rem;
- }
-
- .qr-section h1 {
- font-size: 4rem;
- }
-
- .qr-section p {
- font-size: 1.4rem;
- }
-
- #qr-code {
- width: 22rem;
- height: 22rem;
- }
-}
-
-@media screen and (max-width: 800px) and (orientation: landscape) {
- .qr-section {
- padding: 2rem;
- gap: 2rem;
- }
-
- .qr-section h1 {
- font-size: 2.75rem;
- }
-
- .qr-section p {
- font-size: 1.15rem;
- }
-
- #qr-code {
- width: 18rem;
- height: 18rem;
- padding: 1.5rem;
- }
-}
-
-@media screen and (orientation: portrait) {
- .qr-section {
- flex-direction: column;
- gap: 3rem;
- max-width: 50rem;
- }
-
- .text-content {
- text-align: center;
- max-width: 100%;
- }
-
- .qr-section h1 {
- font-size: 4.5rem;
- }
-
- .qr-section p {
- font-size: 1.6rem;
- }
-
- #qr-code {
- width: 28rem;
- height: 28rem;
- }
-}
-
-@media screen and (max-width: 720px) and (orientation: portrait) {
- .qr-section {
- padding: 2rem;
- gap: 2rem;
- }
-
- .qr-section h1 {
- font-size: 3.5rem;
- }
-
- .qr-section p {
- font-size: 1.4rem;
- }
-
- #qr-code {
- width: 22rem;
- height: 22rem;
- }
-}
-
-@media screen and (max-width: 480px) and (orientation: portrait) {
- .qr-section {
- padding: 1.5rem;
- gap: 1.5rem;
- }
-
- .qr-section h1 {
- font-size: 2.5rem;
- }
-
- .qr-section p {
- font-size: 1.15rem;
- }
-
- #qr-code {
- width: 18rem;
- height: 18rem;
- padding: 1rem;
- }
-}
+@import 'tailwindcss/theme.css' layer(theme);
+@import '@screenly/edge-apps/styles' layer(base);
+@import 'tailwindcss/utilities.css' layer(utilities);
+
-
-
-
+
+
+