Skip to content

Commit d32d118

Browse files
stvncodestvncode
committed
Remove amap of lit and remove content showing without css at first
1 parent aa063ca commit d32d118

6 files changed

Lines changed: 456 additions & 212 deletions

File tree

‎src-11ty/_includes/base.html‎

Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,22 @@
1313
href="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/styles/webawesome.css"
1414
/>
1515
<script type="module" src="/src/utils/dark-mode.ts"></script>
16+
17+
<link rel="stylesheet" href="/src/styles/shoelace.css" />
18+
<link rel="stylesheet" href="/src/styles/theme.css" />
19+
<link rel="stylesheet" href="/src/styles/details-page.css" />
20+
<link
21+
rel="preload"
22+
href="/open-home-foundation.svg"
23+
as="image"
24+
type="image/svg+xml"
25+
/>
26+
<link rel="preload" href="/ohf_dark.svg" as="image" type="image/svg+xml" />
1627
<style>
17-
@import url('/src/styles/shoelace.css');
18-
@import url('/src/styles/theme.css');
1928
body {
2029
margin: 0;
2130
}
2231

23-
/* App Header Styles */
2432
.app-header {
2533
display: block;
2634
background: var(--app-bg-header);
@@ -51,13 +59,6 @@
5159
width: auto;
5260
}
5361

54-
@media (prefers-color-scheme: dark) {
55-
.app-header .logo {
56-
content: url('/ohf_dark.svg');
57-
height: 70px;
58-
}
59-
}
60-
6162
.app-header .title {
6263
font-size: 1.25rem;
6364
font-weight: 500;
@@ -140,17 +141,32 @@
140141
height: 28px;
141142
}
142143
}
144+
145+
details-page:not(:defined) {
146+
opacity: 0;
147+
}
148+
149+
details-page {
150+
opacity: 1;
151+
transition: opacity 0.1s;
152+
}
143153
</style>
144154
</head>
145155
<body class="wa-palette-shoelace wa-theme-shoelace">
146156
<div class="app-header">
147157
<header>
148158
<div class="logo-section" onclick="window.location.href = '/'">
149-
<img
150-
src="/open-home-foundation.svg"
151-
alt="Open Home Foundation"
152-
class="logo"
153-
/>
159+
<picture>
160+
<source
161+
srcset="/ohf_dark.svg"
162+
media="(prefers-color-scheme: dark)"
163+
/>
164+
<img
165+
src="/open-home-foundation.svg"
166+
alt="Open Home Foundation"
167+
class="logo"
168+
/>
169+
</picture>
154170
</div>
155171

156172
<nav class="nav-links">

‎src-11ty/home-assistant-connect-zwa-2/index.njk‎

Lines changed: 96 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -5,121 +5,133 @@ description: Home Assistant Connect ZWA-2 - 800 series Z-Wave Long Range adapter
55
permalink: /home-assistant-connect-zwa-2/index.html
66
---
77

8-
<script type="module" src="/src/components/details.ts"></script>
9-
<script type="module" src="/src/components/action-item.ts"></script>
10-
11-
<style>
12-
container: {
13-
display: block;
14-
}
15-
p[slot='subtitle'] {
16-
color: var(--wa-color-brand-50);
17-
font-size: 1.1rem;
18-
font-weight: 500;
19-
margin: 0 0 10px 0;
20-
}
21-
22-
p[slot='description'],
23-
p[slot='secondary-description'] {
24-
color: var(--app-text-secondary);
25-
line-height: 1.6;
26-
margin: 0;
27-
font-size: 1.05rem;
28-
}
29-
30-
p[slot='secondary-description'] {
31-
margin-top: 12px;
32-
}
33-
34-
h3 {
35-
margin: 0 0 6px 0;
36-
color: var(--app-text-primary);
37-
font-size: 1rem;
38-
font-weight: 600;
39-
}
40-
41-
action-item .experimental {
42-
color: #e78e21;
43-
}
44-
</style>
45-
46-
<div class="container">
47-
<details-page>
48-
<span slot="title">Home Assistant Connect ZWA-2</span>
49-
<p slot="subtitle">800 series Z-Wave Long Range adapter</p>
50-
<p slot="description">
8+
<div class="details-page">
9+
<div class="details-container">
10+
<a href="/" class="back-button">
11+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
12+
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
13+
</svg>
14+
Back to Home
15+
</a>
16+
17+
<div class="details-layout">
18+
<div class="details-hero">
19+
<h1 class="details-hero-title">Home Assistant Connect ZWA-2</h1>
20+
<p class="details-hero-subtitle">800 series Z-Wave Long Range adapter</p>
21+
<p class="details-hero-description">
5122
The ultimate way to connect Z-Wave devices to Home Assistant.
5223
</p>
53-
<p slot="secondary-description">
24+
<p class="details-hero-secondary-description">
5425
Features the latest Z-Wave 800 series chip with Long Range support,
5526
SmartStart, and enhanced security for your smart home.
5627
</p>
28+
</div>
5729

58-
<div slot="actions">
59-
<action-item
60-
href="/home-assistant-connect-zwa-2/install"
61-
icon="/svgs/install.svg"
62-
trailing-icon="/svgs/chevron-right.svg"
63-
>
30+
<div class="details-actions">
31+
<a href="/home-assistant-connect-zwa-2/install" class="action-item">
32+
<div class="action-icon">
33+
<div class="icon-mask" style="--icon-url: url('/svgs/install.svg')"></div>
34+
</div>
35+
<div class="action-content">
6436
<h3>Install original firmware</h3>
6537
<p>
6638
The original firmware that allows to connect the ZWA-2 directly to
6739
Home Assistant hub via USB cable.
6840
</p>
69-
</action-item>
41+
</div>
42+
<div class="action-trailing">
43+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="chevron-icon">
44+
<path fill="currentColor" d="M12.6 12L8 7.4L9.4 6l6 6l-6 6L8 16.6z"/>
45+
</svg>
46+
</div>
47+
</a>
7048

71-
<action-item
72-
href="/home-assistant-connect-zwa-2/install-portable"
73-
icon="/svgs/install.svg"
74-
trailing-icon="/svgs/chevron-right.svg"
75-
>
49+
<a href="/home-assistant-connect-zwa-2/install-portable" class="action-item">
50+
<div class="action-icon">
51+
<div class="icon-mask" style="--icon-url: url('/svgs/install.svg')"></div>
52+
</div>
53+
<div class="action-content">
7654
<h3>Install portable Z-Wave firmware</h3>
77-
<p style="color: var(--app-text-secondary);">
78-
<span style="color: #e78e21;">Experimental.</span> Place the ZWA-2
55+
<p>
56+
<span class="experimental">Experimental.</span> Place the ZWA-2
7957
in the most optimal position and connect it to Home Assistant via
8058
Wi-Fi.
8159
</p>
82-
</action-item>
60+
</div>
61+
<div class="action-trailing">
62+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="chevron-icon">
63+
<path fill="currentColor" d="M12.6 12L8 7.4L9.4 6l6 6l-6 6L8 16.6z"/>
64+
</svg>
65+
</div>
66+
</a>
8367

84-
<action-item
85-
href="/home-assistant-connect-zwa-2/use-poe"
86-
icon="/svgs/install.svg"
87-
trailing-icon="/svgs/chevron-right.svg"
88-
>
68+
<a href="/home-assistant-connect-zwa-2/use-poe" class="action-item">
69+
<div class="action-icon">
70+
<div class="icon-mask" style="--icon-url: url('/svgs/install.svg')"></div>
71+
</div>
72+
<div class="action-content">
8973
<h3>Use Portable Z-Wave with Power-over-Ethernet</h3>
90-
<p style="color: var(--app-text-secondary);">
91-
<span style="color: #e78e21;">Experimental.</span> Place the ZWA-2
74+
<p>
75+
<span class="experimental">Experimental.</span> Place the ZWA-2
9276
in the most optimal position and connect it to Home Assistant via
9377
Power-over-Ethernet.
9478
</p>
95-
</action-item>
79+
</div>
80+
<div class="action-trailing">
81+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="chevron-icon">
82+
<path fill="currentColor" d="M12.6 12L8 7.4L9.4 6l6 6l-6 6L8 16.6z"/>
83+
</svg>
84+
</div>
85+
</a>
9686

97-
<action-item
98-
href="https://support.nabucasa.com/hc/en-us/categories/28669861145885"
99-
icon="/svgs/doc.svg"
100-
>
87+
<a href="https://support.nabucasa.com/hc/en-us/categories/28669861145885" class="action-item" target="_blank">
88+
<div class="action-icon">
89+
<div class="icon-mask" style="--icon-url: url('/svgs/doc.svg')"></div>
90+
</div>
91+
<div class="action-content">
10192
<h3>Documentation</h3>
10293
<p>User documentation, troubleshooting, and resources</p>
103-
</action-item>
94+
</div>
95+
<div class="action-trailing">
96+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
97+
<path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
98+
</svg>
99+
</div>
100+
</a>
104101

105-
<action-item
106-
href="https://www.home-assistant.io/connect/zwa-2/"
107-
icon="/svgs/product.svg"
108-
>
102+
<a href="https://www.home-assistant.io/connect/zwa-2/" class="action-item" target="_blank">
103+
<div class="action-icon">
104+
<div class="icon-mask" style="--icon-url: url('/svgs/product.svg')"></div>
105+
</div>
106+
<div class="action-content">
109107
<h3>Product info</h3>
110108
<p>
111109
Learn more about the Connect ZWA-2 features, specifications, and
112110
where to buy
113111
</p>
114-
</action-item>
112+
</div>
113+
<div class="action-trailing">
114+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
115+
<path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
116+
</svg>
117+
</div>
118+
</a>
115119

116-
<action-item
117-
href="https://github.com/NabuCasa/zwave-firmware"
118-
icon="/svgs/github.svg"
119-
>
120+
<a href="https://github.com/NabuCasa/zwave-firmware" class="action-item" target="_blank">
121+
<div class="action-icon">
122+
<div class="icon-mask" style="--icon-url: url('/svgs/github.svg')"></div>
123+
</div>
124+
<div class="action-content">
120125
<h3>Source code</h3>
121126
<p>View the open-source Z-Wave firmware code</p>
122-
</action-item>
123-
</div>
124-
</details-page>
127+
</div>
128+
<div class="action-trailing">
129+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
130+
<path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
131+
</svg>
132+
</div>
133+
</a>
134+
</div>
135+
</div>
136+
</div>
125137
</div>

0 commit comments

Comments
 (0)