Product pages: add link to documentation (#26859)

This commit is contained in:
c0ffeeca7 2023-04-04 13:42:38 +02:00 committed by GitHub
parent b94d61c3bb
commit 6d98cac0fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 127 additions and 5 deletions

View File

@ -26,6 +26,48 @@ frontpage_image: /images/skyconnect/skyconnect-cover.png
max-width: 750px;
margin: 100px auto;
}
.material-card .documentation-card svg {
height: 42px;
max-width: 42px;
min-width: 42px;
align-self: center;
}
.material-card .documentation-card {
text-decoration: none !important;
color: black !important;
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 8px 0;
}
.material-card .documentation-card .content-container {
display: flex;
}
.material-card .documentation-card .content-container div:first-of-type {
margin-right: 24px;
}
.material-card .documentation-card .content-container div:first-of-type img, .material-card .documentation-card .content-container div:first-of-type svg {
max-width: 170px;
max-height: 170px;
min-width: 170px;
min-height: 170px;
padding: 32px;
border-radius: 3px;
box-shadow: rgba(0,0,0,0.06) 0 0 10px;
vertical-align: middle;
border: 5px solid #fff;
}
.material-card .documentation-card div {
display: flex;
align-items: center;
}
</style>
<div class="content">
@ -175,6 +217,25 @@ frontpage_image: /images/skyconnect/skyconnect-cover.png
<div style="margin-top: 24px; text-align: center; font-size: .8rem;">
1: Relies on the experimental EmberZNet support in Zigbee2MQTT.
</div>
<div class="material-card text spaced-card" style="margin-top: 72px;">
<a href="https://skyconnect.home-assistant.io/" target="_blank"
class="documentation-card">
<div class="content-container">
<div>
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6H6m0 2h7v5h5v11H6V4m2 8v2h8v-2H8m0 4v2h5v-2H8Z"
/>
</svg>
</div>
<div>
<h1>View documentation</h1>
</div>
</div>
{% include assets/chevron_right.html %}
</a>
</div>
<div id="buy-dialog" class="dialog">
<div class="material-card text dialog-content">

View File

@ -60,6 +60,47 @@ frontpage_image: /images/frontpage/yellow-frontpage.jpg
flex-direction: column;
}
}
.material-card .documentation-card svg {
height: 42px;
max-width: 42px;
min-width: 42px;
align-self: center;
}
.material-card .documentation-card {
text-decoration: none !important;
color: black !important;
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 8px 0;
}
.material-card .documentation-card .content-container {
display: flex;
}
.material-card .documentation-card .content-container div:first-of-type {
margin-right: 24px;
}
.material-card .documentation-card .content-container div:first-of-type img, .material-card .documentation-card .content-container div:first-of-type svg {
max-width: 170px;
max-height: 170px;
min-width: 170px;
min-height: 170px;
padding: 32px;
border-radius: 3px;
box-shadow: rgba(0,0,0,0.06) 0 0 10px;
vertical-align: middle;
border: 5px solid #fff;
}
.material-card .documentation-card div {
display: flex;
align-items: center;
}
</style>
@ -122,7 +163,7 @@ frontpage_image: /images/frontpage/yellow-frontpage.jpg
</div>
<div class="material-card spaced-card">
<img src="/images/yellow/home-assistant-yellow-exploded-and-labeled.png">
<a href="https://yellow.home-assistant.io/yellow-v1.2-standard/" target="_blank"><img src="/images/yellow/home-assistant-yellow-exploded-and-labeled.png"></a>
</div>
<div class="material-card text spaced-card">
@ -150,7 +191,7 @@ frontpage_image: /images/frontpage/yellow-frontpage.jpg
<div class="yellow-variant">
<div><img src="/images/yellow/yellow-2d.jpg" alt="2D overview of the content of the Home Assistant Yellow Kit"></div>
<div>
<b>Yellow Kit with Power Supply</b><br>
<b>Yellow Kit with power supply</b><br>
<a href="https://yellow.home-assistant.io/power-supply/">Some assembly required!</a> This kit includes everything in the flagship version except the Raspberry Pi Compute Module 4.
<br><br>
This option allows you to pick the compute module with the memory and eMMC storage to fit your needs. You will need to install Home Assistant on the compute module you provide. Custom enclosure, custom heat sink, and Ethernet cable included. This version comes with a power supply, but does not support Power-over-Ethernet.
@ -160,14 +201,14 @@ frontpage_image: /images/frontpage/yellow-frontpage.jpg
<div class="material-card text spaced-card">
<h1>Open Hardware</h1>
<h1>Open hardware</h1>
<p>
We spend a lot of time and resources on getting our products to work great. We want to make it possible for other people to study our work and be able to learn how to make great products for the smart home, so we've released the schematics of Yellow as open-source.
<a href="https://yellow.home-assistant.io/yellow-v1.2-standard/">Explore the board</a> and <a href="https://github.com/NabuCasa/yellow/">view the source.</a>
</p>
</div>
<div class="sub-title">Features & Specifications</div>
<div class="sub-title">Features & specifications</div>
<div class="flex">
<ul>
<li>
@ -258,6 +299,26 @@ frontpage_image: /images/frontpage/yellow-frontpage.jpg
</ul>
</div>
<div class="material-card text spaced-card">
<a href="https://yellow.home-assistant.io/" target="_blank"
class="documentation-card">
<div class="content-container">
<div>
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6H6m0 2h7v5h5v11H6V4m2 8v2h8v-2H8m0 4v2h5v-2H8Z"
/>
</svg>
</div>
<div>
<h1>View documentation</h1>
</div>
</div>
{% include assets/chevron_right.html %}
</a>
</div>
<div id="buy-dialog" class="dialog">
<div class="material-card text dialog-content">
<div class="close-container"></div>
@ -347,4 +408,4 @@ frontpage_image: /images/frontpage/yellow-frontpage.jpg
if (document.location.search === "?order") {
showBuyDialog();
}
</script>
</script>