Skip to content

feat: adopt Tailwind CSS utility classes for styling #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
nicomiguelino wants to merge 4 commits into
base: development
Choose a base branch
from
Draft

feat: adopt Tailwind CSS utility classes for styling #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
208d38c
feat: adopt Tailwind CSS utility classes for styling
nicomiguelino Jul 27, 2026
22e2a5f
fix: explicitly layer design-system import below Tailwind utilities
nicomiguelino Jul 27, 2026
1a7a83d
fix: restore #app as a flex column container in portrait mode
nicomiguelino Jul 27, 2026
a7be6eb
chore: ignore mock-data.yml and refresh screenshots
nicomiguelino Jul 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@ dist/
static/js/*.js
static/js/*.js.map
screenshots/*.png
mock-data.yml
37 changes: 24 additions & 13 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,31 +6,42 @@
<title>Clock - Screenly Edge App</title>
<script src="screenly.js?version=1"></script>
</head>
<body>
<body
class="text-white text-shadow bg-[url('/static/images/bg.webp')] bg-cover bg-center bg-no-repeat before:content-[''] before:fixed before:inset-0 before:z-[var(--z-index-backdrop)] before:pointer-events-none before:bg-black/20 before:backdrop-blur-[7px]"
Comment thread
nicomiguelino marked this conversation as resolved.
>
Comment thread
nicomiguelino marked this conversation as resolved.
<auto-scaler
reference-width="1920"
reference-height="1080"
orientation="auto"
class="relative z-[var(--z-index-content)]"
>
<div id="app">
<div id="app" class="w-full h-full portrait:flex portrait:flex-col">
<app-header class="header" show-date></app-header>
<main class="content">
<section class="current">
<div class="city" data-location>--</div>
<div class="time-wrapper">
<span class="time" data-time>--:--</span>
<span class="clock-period" data-period>--</span>
<main
class="mt-[160px] ml-[300px] portrait:m-0 portrait:flex portrait:flex-col portrait:justify-center portrait:items-start portrait:flex-1 portrait:h-full portrait:pl-[60px]"
>
<section class="flex flex-col portrait:ml-[60px]">
<div class="text-[32px] portrait:text-[40px]" data-location>--</div>
<div class="flex items-baseline gap-2">
<span
class="font-[Kelly_Slab,serif] text-[160px] font-normal leading-none tracking-[-5px] my-4 portrait:text-[180px]"
data-time
>--:--</span
>
<span class="text-[2.25rem] opacity-90" data-period>--</span>
</div>
<div class="status-row">
<span class="date" data-date>--</span>
<div class="temperature-wrapper">
<div
class="inline-flex items-center gap-4 px-5 py-2.5 rounded-2xl border border-white/[0.06] bg-[linear-gradient(135deg,rgba(255,255,255,0.06)_0%,rgba(255,255,255,0.01)_100%)] shadow-[0_13.438px_40.315px_0_rgba(0,0,0,0.15),0_1.68px_0_0_rgba(255,255,255,0.1)_inset,0_-1.68px_0_0_rgba(255,255,255,0.03)_inset] w-fit portrait:text-[24px]"
>
<span class="text-[1rem]" data-date>--</span>
<div class="temperature-wrapper flex items-center gap-1.5">
<img
src="static/images/icons/clear.svg"
alt="weather icon"
class="temperature-icon"
class="w-4 h-4"
data-weather-icon
/>
<span class="temperature" data-temperature>--°</span>
<span class="text-[1rem]" data-temperature>--°</span>
</div>
</div>
</section>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"dependencies": {},
"prettier": "./.prettierrc.json",
"devDependencies": {
"@screenly/edge-apps": "^1.2.1",
"@screenly/edge-apps": "^1.3.0",
Comment thread
nicomiguelino marked this conversation as resolved.
Comment thread
nicomiguelino marked this conversation as resolved.
"@playwright/test": "^1.60.0",
"@types/bun": "^1.3.14",
"@types/jsdom": "^28.0.3",
Expand Down
Binary file modified screenshots/1080x1920.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/1280x720.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/1920x1080.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/2160x3840.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/2160x4096.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/3840x2160.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/4096x2160.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/480x800.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/720x1280.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/800x480.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
164 changes: 12 additions & 152 deletions src/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
/* Import Screenly Design System */
@import '@screenly/edge-apps/styles';
/* Skip Tailwind's preflight: it resets `border` on every element (including
custom-element hosts like <app-header>), 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);

/* App-specific styles */

Expand All @@ -10,153 +20,3 @@
font-style: normal;
font-display: swap;
}

* {
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
overflow: hidden;
color: white;
font-family: 'Inter', system-ui, sans-serif;
background: url('/static/images/bg.webp') no-repeat center center;
background-size: cover;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

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);
}

.text-shadow {
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

auto-scaler {
position: relative;
z-index: var(--z-index-content);
}

#app {
width: 100%;
height: 100%;
}

.content {
margin-top: 160px;
margin-left: 300px;
}

.current {
display: flex;
flex-direction: column;
}

.city {
font-size: 32px;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.time-wrapper {
display: flex;
align-items: baseline;
gap: 0.5rem;
}

.time {
font-family: 'Kelly Slab', serif;
font-size: 160px;
font-weight: 400;
line-height: 1;
letter-spacing: -5px;
margin: 1rem 0;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.clock-period {
font-size: 2.25rem;
opacity: 0.9;
}

.status-row {
display: inline-flex;
align-items: center;
gap: 1rem;
padding: 0.625rem 1.25rem;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.06);
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0.01) 100%
);
box-shadow:
0 13.438px 40.315px 0 rgba(0, 0, 0, 0.15),
0 1.68px 0 0 rgba(255, 255, 255, 0.1) inset,
0 -1.68px 0 0 rgba(255, 255, 255, 0.03) inset;
width: fit-content;
}

.date {
font-size: 1rem;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.temperature-wrapper {
display: flex;
align-items: center;
gap: 0.375rem;
}

.temperature {
font-size: 1rem;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.temperature-icon {
width: 1rem;
height: 1rem;
}

@media (orientation: portrait) {
#app {
display: flex;
flex-direction: column;
height: 100%;
}

main.content {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
flex: 1;
height: 100%;
padding-left: 60px;
}

.current {
margin-left: 60px;
}

.city {
font-size: 40px;
}

.time {
font-size: 180px;
}

.status-row {
font-size: 24px;
}
}
Loading