mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-24 17:57:14 +00:00
Add energy landingpage (#18689)
Co-authored-by: Franck Nijhof <git@frenck.dev> Co-authored-by: Paulus Schoutsen <balloob@gmail.com>
This commit is contained in:
Joakim Sørensen
Franck Nijhof
parent
43f0acc563
commit
5ddc45ccf1
@ -1,9 +1,9 @@
|
|||||||
$blue__deep_color: #161d61;
|
$landingpage__deep_color: #161d61;
|
||||||
$blue__light_color: #18abfd;
|
$landingpage__light_color: #18abfd;
|
||||||
$ha__primary_color: #03a9f4;
|
$ha__primary_color: #03a9f4;
|
||||||
|
|
||||||
#blue {
|
#landingpage {
|
||||||
$blue__hero_height: 670px;
|
$landingpage__hero_height: 670px;
|
||||||
font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
.site-header {
|
.site-header {
|
||||||
.grid-wrapper {
|
.grid-wrapper {
|
||||||
@ -20,7 +20,7 @@ $ha__primary_color: #03a9f4;
|
|||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
.banner {
|
.banner {
|
||||||
height: $blue__hero_height;
|
height: $landingpage__hero_height;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
margin-top: -42px;
|
margin-top: -42px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -39,6 +39,15 @@ $ha__primary_color: #03a9f4;
|
|||||||
svg {
|
svg {
|
||||||
stroke: $ha__primary_color;
|
stroke: $ha__primary_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.wide {
|
||||||
|
position: relative;
|
||||||
|
width: 700px;
|
||||||
|
left: calc(50% - 700px / 2 - 0.5px);
|
||||||
|
font-size: 52px;
|
||||||
|
line-height: 52px;
|
||||||
|
bottom: 390px;
|
||||||
}
|
}
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -46,36 +55,194 @@ $ha__primary_color: #03a9f4;
|
|||||||
object-position: bottom;
|
object-position: bottom;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
height: $blue__hero_height;
|
height: $landingpage__hero_height;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 8px;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
position: absolute;
|
||||||
|
right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacer {
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-row-with-icon {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #0c0c0c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-icon {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 32px;
|
||||||
|
text-align: center;
|
||||||
|
background: #FFFFFF;
|
||||||
|
width: 242px;
|
||||||
|
height: 176px;
|
||||||
|
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
padding: 12px;
|
||||||
|
height: 56px;
|
||||||
|
width: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
box-shadow: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
width: 164px;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
text-align: center;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-content {
|
||||||
|
background-color: #FAFAFA;
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
justify-items: center;
|
||||||
|
padding: 64px;
|
||||||
|
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 507px;
|
||||||
|
display: grid;
|
||||||
|
text-align: center;
|
||||||
|
place-items: center;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
box-shadow: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-inner {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 100%;
|
||||||
|
padding: 32px 128px;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
|
||||||
|
.section-inner-content {
|
||||||
|
align-self: center;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: 330px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
font-size: small;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 500px;
|
||||||
|
max-height: 400px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-inner:nth-child(even) {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-inner:nth-child(odd) {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-content:nth-child(even) {
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
.section-inner:nth-child(odd) {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-inner:nth-child(even) {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
|
||||||
.missing-piece {
|
.banner-overlay {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
|
||||||
width: 600px;
|
width: 600px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin: -36px auto 0;
|
margin: -36px auto 0;
|
||||||
|
|
||||||
.missing-piece-header {
|
&.with-box {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.banner-overlay-content {
|
||||||
|
width: 420px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-overlay-header {
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.missing-piece-content {
|
.banner-overlay-content {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 19px;
|
line-height: 19px;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
width: 420px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.missing-piece-overlay {
|
.banner-overlay {
|
||||||
width: 210px;
|
width: 210px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin: -50px -50px 0 0;
|
margin: -50px -50px 0 0;
|
||||||
@ -84,7 +251,7 @@ $ha__primary_color: #03a9f4;
|
|||||||
flex-flow: wrap;
|
flex-flow: wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.missing-piece-overlay-header {
|
.banner-overlay-header {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
@ -94,7 +261,7 @@ $ha__primary_color: #03a9f4;
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
.missing-piece-overlay-price {
|
.banner-overlay-price {
|
||||||
width: calc(100% - 6px);
|
width: calc(100% - 6px);
|
||||||
text-align: right;
|
text-align: right;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
@ -114,7 +281,7 @@ $ha__primary_color: #03a9f4;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.missing-piece-overlay-images {
|
.banner-overlay-images {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 47px 47px 47px;
|
grid-template-columns: 47px 47px 47px;
|
||||||
grid-template-rows: 47px 47px;
|
grid-template-rows: 47px 47px;
|
||||||
@ -144,25 +311,27 @@ $ha__primary_color: #03a9f4;
|
|||||||
width: 96px;
|
width: 96px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.missing-piece-overlay-button {
|
}
|
||||||
background-color: $ha__primary_color;
|
.banner-overlay-button {
|
||||||
margin-top: 12px;
|
background-color: $ha__primary_color;
|
||||||
border-radius: 4px;
|
margin-top: 12px;
|
||||||
width: 154px;
|
border-radius: 4px;
|
||||||
height: 46px;
|
width: 154px;
|
||||||
display: flex;
|
height: 46px;
|
||||||
cursor: pointer;
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
text-transform: capitalize;
|
||||||
|
|
||||||
div {
|
div {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
.missing-piece-disclaimer {
|
.banner-overlay-disclaimer {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
color: #0c0c0c;
|
color: #0c0c0c;
|
||||||
@ -230,7 +399,7 @@ $ha__primary_color: #03a9f4;
|
|||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
font-size: 68px;
|
font-size: 68px;
|
||||||
line-height: 80px;
|
line-height: 80px;
|
||||||
color: $blue__deep_color;
|
color: $landingpage__deep_color;
|
||||||
}
|
}
|
||||||
.vision-statement {
|
.vision-statement {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
@ -249,7 +418,7 @@ $ha__primary_color: #03a9f4;
|
|||||||
|
|
||||||
.vision-block-title {
|
.vision-block-title {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: $blue__deep_color;
|
color: $landingpage__deep_color;
|
||||||
letter-spacing: -2px;
|
letter-spacing: -2px;
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
line-height: 56px;
|
line-height: 56px;
|
||||||
@ -539,7 +708,7 @@ $ha__primary_color: #03a9f4;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.blue-buy-fab {
|
.fab {
|
||||||
background-color: $ha__primary_color;
|
background-color: $ha__primary_color;
|
||||||
border-radius: 62px;
|
border-radius: 62px;
|
||||||
bottom: 16px;
|
bottom: 16px;
|
||||||
@ -693,8 +862,8 @@ $ha__primary_color: #03a9f4;
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: $palm-end) {
|
@media only screen and (max-width: $palm-end) {
|
||||||
$blue__hero_height: 500px;
|
$landingpage__hero_height: 500px;
|
||||||
#blue {
|
#landingpage {
|
||||||
.site-header {
|
.site-header {
|
||||||
background-color: #ffffff66;
|
background-color: #ffffff66;
|
||||||
transition: background 0.5s;
|
transition: background 0.5s;
|
||||||
@ -714,9 +883,9 @@ $ha__primary_color: #03a9f4;
|
|||||||
}
|
}
|
||||||
.banner {
|
.banner {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
height: $blue__hero_height;
|
height: $landingpage__hero_height;
|
||||||
img {
|
img {
|
||||||
height: $blue__hero_height;
|
height: $landingpage__hero_height;
|
||||||
}
|
}
|
||||||
.title {
|
.title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -733,7 +902,45 @@ $ha__primary_color: #03a9f4;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wide {
|
||||||
|
line-height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.section-content {
|
||||||
|
width: 100%;
|
||||||
|
padding: 32px 4px;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-inner {
|
||||||
|
flex-direction: column-reverse !important;
|
||||||
|
padding: 32px 0;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-inner-content {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-row-with-icon {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.button-icon {
|
||||||
|
width: calc(100% - 8px);
|
||||||
|
margin: 2px 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
margin: 0 8px;
|
margin: 0 8px;
|
||||||
|
|
||||||
@ -742,41 +949,47 @@ $ha__primary_color: #03a9f4;
|
|||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.missing-piece {
|
.banner-overlay {
|
||||||
margin: -116px auto 0;
|
margin: -116px auto 0;
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
|
||||||
.missing-piece-header {
|
.energy-button-getting-started {
|
||||||
|
.banner-overlay-button {
|
||||||
|
margin: 8px;
|
||||||
|
position: unset;
|
||||||
|
width: calc(100% - 16px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-overlay-header {
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.missing-piece-content {
|
.banner-overlay-content {
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
}
|
|
||||||
|
|
||||||
.missing-piece-content {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.secondary {
|
.secondary {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.missing-piece-overlay {
|
.banner-overlay {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.missing-piece-overlay-images {
|
.banner-overlay-images {
|
||||||
margin-top: -42px;
|
margin-top: -42px;
|
||||||
margin-left: -8px;
|
margin-left: -8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.missing-piece-disclaimer {
|
.banner-overlay-disclaimer {
|
||||||
margin: 12px auto 12px;
|
margin: 12px auto 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -907,7 +1120,7 @@ $ha__primary_color: #03a9f4;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.blue-buy-fab {
|
.fab {
|
||||||
bottom: 12px;
|
bottom: 12px;
|
||||||
right: 12px;
|
right: 12px;
|
||||||
display: none;
|
display: none;
|
||||||
@ -945,7 +1158,7 @@ $ha__primary_color: #03a9f4;
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: $lap-end) {
|
@media only screen and (max-width: $lap-end) {
|
||||||
#blue {
|
#landingpage {
|
||||||
.page-content {
|
.page-content {
|
||||||
.content {
|
.content {
|
||||||
.bullet-points {
|
.bullet-points {
|
||||||
@ -120,6 +120,12 @@ $primary-color: #049cdb;
|
|||||||
margin: 0 8px;
|
margin: 0 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
.links {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.feedback {
|
.feedback {
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
@import 'oscailte/oscailte';
|
@import 'oscailte/oscailte';
|
||||||
@import 'custom/paulus';
|
@import 'custom/paulus';
|
||||||
@import 'custom/blue';
|
@import 'custom/landingpage';
|
||||||
@import 'custom/features';
|
@import 'custom/features';
|
||||||
@import 'custom/component_page';
|
@import 'custom/component_page';
|
||||||
@import 'custom/syntax';
|
@import 'custom/syntax';
|
||||||
|
|||||||
@ -102,14 +102,14 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<p>
|
<p>
|
||||||
Home Assistant allows you to get on top of your energy use with its
|
Home Assistant allows you to get on top of your energy use with its
|
||||||
home energy management feature. Gain new insights,
|
home energy management feature. Gain new insights,
|
||||||
optimize your solar panel production, plan energy usage and save money.
|
optimize your solar panel production, plan energy usage and save money.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<a
|
<a
|
||||||
class="button"
|
class="button"
|
||||||
href="/docs/energy/"
|
href="/home-energy-management/"
|
||||||
>
|
>
|
||||||
LEARN MORE
|
LEARN MORE
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
{% unless page.feedback == false %}
|
{% unless page.feedback == false or page.layout == "landingpage" %}
|
||||||
<div class="material-card text feedback" id="feedback_section">
|
<div class="material-card text feedback" id="feedback_section">
|
||||||
<h4><a href="#feedback_section" class="title-link"><b> Help us to improve our documentation</b></a></h4>
|
<h4><a href="#feedback_section" class="title-link"><b> Help us to improve our documentation</b></a></h4>
|
||||||
Suggest an edit to this page, or provide/view feedback for this page.
|
Suggest an edit to this page, or provide/view feedback for this page.
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
{% include site/head.html %}
|
{% include site/head.html %}
|
||||||
<body {% if page.body_id %} id="{{ page.body_id }}"{% endif %}>
|
<body {% if page.body_id %} id="{{ page.body_id }}"{% elsif page.layout == "landingpage" %} id="landingpage"{% endif %}>
|
||||||
<header class='site-header'>
|
<header class='site-header'>
|
||||||
{% include site/header.html %}
|
{% include site/header.html %}
|
||||||
</header>
|
</header>
|
||||||
@ -14,20 +14,20 @@
|
|||||||
<div class="grid grid-center">
|
<div class="grid grid-center">
|
||||||
{% if page.is_post and page.sidebar == false %}
|
{% if page.is_post and page.sidebar == false %}
|
||||||
<div class="grid__item four-fifths lap-one-whole palm-one-whole">
|
<div class="grid__item four-fifths lap-one-whole palm-one-whole">
|
||||||
{% elsif page.is_homepage %}
|
{% elsif page.is_homepage or page.layout == "landingpage" %}
|
||||||
<div class="grid__item one-whole">
|
<div class="grid__item one-whole">
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="grid__item two-thirds lap-one-whole palm-one-whole">
|
<div class="grid__item two-thirds lap-one-whole palm-one-whole">
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if page.is_homepage %}
|
{% if page.is_homepage or page.layout == "landingpage" %}
|
||||||
{{ content }}
|
{{ content }}
|
||||||
{% else %}
|
{% else %}
|
||||||
{{ content | output_modder }}
|
{{ content | output_modder }}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% unless page.sidebar == false %}
|
{% unless page.sidebar == false or page.layout == "landingpage" %}
|
||||||
<aside id="sidebar" class="grid__item one-third lap-one-whole palm-one-whole">
|
<aside id="sidebar" class="grid__item one-third lap-one-whole palm-one-whole">
|
||||||
{% include site/sidebar.html %}
|
{% include site/sidebar.html %}
|
||||||
</aside>
|
</aside>
|
||||||
|
|||||||
100
source/_layouts/landingpage.html
Normal file
100
source/_layouts/landingpage.html
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
---
|
||||||
|
layout: page
|
||||||
|
---
|
||||||
|
|
||||||
|
{% if page.og_image %}
|
||||||
|
<div class="banner">
|
||||||
|
<img src="{{ page.hero_image | default:page.og_image }}"></i>
|
||||||
|
{% if page.tagline %}
|
||||||
|
<div class="title {% if page.tagline_wide != false %}wide{% endif %}">
|
||||||
|
{{ page.tagline }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if page.content %}
|
||||||
|
<div class="content">{{ content }}</div>
|
||||||
|
<div class="spacer"></div><div class="spacer"></div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
|
||||||
|
{% if page.sections and page.button_row != false %}
|
||||||
|
<div class="button-row-with-icon">
|
||||||
|
{% for section in page.sections %}
|
||||||
|
<a href="#{{section.title | downcase | strip | replace: " ", "_"}}">
|
||||||
|
<div class="button-icon">
|
||||||
|
<div class="icon"><img src="{{section.image}}"></div>
|
||||||
|
<div class="text">{{section.title}}</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
<div class="spacer"></div><div class="spacer"></div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
|
||||||
|
{% if page.sections %}
|
||||||
|
{% for section in page.sections %}
|
||||||
|
<div class="section-content" id="{{section.title | downcase | strip | replace: " ", "_"}}">
|
||||||
|
<div class="header">
|
||||||
|
<img src="{{section.image}}">
|
||||||
|
<div class="title">{{section.title}}</div>
|
||||||
|
<div class="description">{{section.description}}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% for entry in section.entries %}
|
||||||
|
<div class="section-inner">
|
||||||
|
<div class="section-inner-content">
|
||||||
|
<img {% if entry.image_description %} alt="{{ entry.image_description }}" title="{{ entry.image_description }}" {% endif %} src="{{entry.image}}">
|
||||||
|
</div>
|
||||||
|
<div class="section-inner-content">
|
||||||
|
<div class="title">{{entry.title}}</div>
|
||||||
|
<div class="description">{{entry.description}}</div>
|
||||||
|
{% if entry.read_more %}
|
||||||
|
{% assign first_char = entry.read_more | slice: 0, 1 %}
|
||||||
|
<a class="button" href="{{entry.read_more}}" {% if first_char != "/" %}target="_blank"{% endif %}>READ MORE</a>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
if (document.documentElement.clientWidth < 480) {
|
||||||
|
document.querySelector(".page-content").addEventListener(
|
||||||
|
"scroll",
|
||||||
|
function (e) {
|
||||||
|
const header = document.querySelector(".site-header");
|
||||||
|
const fab = document.querySelector(".fab");
|
||||||
|
if (e.currentTarget.scrollTop > 180) {
|
||||||
|
header.style.backgroundColor = "#ffffff";
|
||||||
|
if (fab) {
|
||||||
|
fab.style.display = "flex";
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
header.style.backgroundColor = "#ffffff66";
|
||||||
|
if (fab) {
|
||||||
|
fab.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ passive: true, capture: true }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -3,7 +3,7 @@ layout: default
|
|||||||
---
|
---
|
||||||
|
|
||||||
<article class="page">
|
<article class="page">
|
||||||
{% if page.title and page.show_title != false %}
|
{% if page.title and page.show_title != false and page.layout != "landingpage" %}
|
||||||
<header>
|
<header>
|
||||||
<h1 class="title indent">
|
<h1 class="title indent">
|
||||||
{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title
|
{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title
|
||||||
|
|||||||
@ -7,6 +7,9 @@
|
|||||||
/get-blueprints https://community.home-assistant.io/c/blueprints-exchange/53
|
/get-blueprints https://community.home-assistant.io/c/blueprints-exchange/53
|
||||||
/latest-security-alert /blog/2021/01/23/security-disclosure2/
|
/latest-security-alert /blog/2021/01/23/security-disclosure2/
|
||||||
|
|
||||||
|
# Redirect for Energy
|
||||||
|
/energy /home-energy-management
|
||||||
|
|
||||||
# Older development pages
|
# Older development pages
|
||||||
/developers https://developers.home-assistant.io
|
/developers https://developers.home-assistant.io
|
||||||
/developers/add_new_platform https://developers.home-assistant.io/docs/creating_platform_index/
|
/developers/add_new_platform https://developers.home-assistant.io/docs/creating_platform_index/
|
||||||
|
|||||||
@ -1,17 +1,9 @@
|
|||||||
---
|
---
|
||||||
|
layout: landingpage
|
||||||
title: "Home Assistant Blue!"
|
title: "Home Assistant Blue!"
|
||||||
description: "Where style and performance meet privacy"
|
description: "Where style and performance meet privacy"
|
||||||
sidebar: false
|
date: 2020-12-12
|
||||||
is_homepage: true
|
tagline: >-
|
||||||
feedback: false
|
|
||||||
body_id: blue
|
|
||||||
show_title: false
|
|
||||||
og_image: /images/blue/blue_hero.jpg
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class="banner">
|
|
||||||
<img src="/images/blue/blue_hero.jpg" />
|
|
||||||
<div class="title">
|
|
||||||
Home Assistant
|
Home Assistant
|
||||||
<svg
|
<svg
|
||||||
width="212"
|
width="212"
|
||||||
@ -28,41 +20,42 @@ og_image: /images/blue/blue_hero.jpg
|
|||||||
/>
|
/>
|
||||||
<text x="40" y="78" stroke="white" fill="white">Blue</text>
|
<text x="40" y="78" stroke="white" fill="white">Blue</text>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
tagline_wide: false
|
||||||
</div>
|
og_image: /images/blue/blue_hero.jpg
|
||||||
|
---
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="material-card text missing-piece">
|
<div class="material-card text banner-overlay with-box">
|
||||||
<div>
|
<div>
|
||||||
<div class="missing-piece-header">The missing piece</div>
|
<div class="banner-overlay-header">The missing piece</div>
|
||||||
<div class="missing-piece-content">
|
<div class="banner-overlay-content">
|
||||||
We challenged ourselves: what would the perfect home automation hub look
|
We challenged ourselves: what would the perfect home automation hub look
|
||||||
like. Not just software, but also hardware and looks.
|
like. Not just software, but also hardware and looks.
|
||||||
</div>
|
</div>
|
||||||
<div class="missing-piece-content secondary">
|
<div class="banner-overlay-content secondary">
|
||||||
The result is the limited edition Home Assistant Blue bundle. Hardware
|
The result is the limited edition Home Assistant Blue bundle. Hardware
|
||||||
that is affordable and fast, packed in a gorgeous case and powered by
|
that is affordable and fast, packed in a gorgeous case and powered by
|
||||||
the most powerful home automation software on the planet: Home
|
the most powerful home automation software on the planet: Home
|
||||||
Assistant.
|
Assistant.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="material-card text missing-piece-overlay">
|
<div class="material-card text banner-overlay">
|
||||||
<div class="missing-piece-overlay-header">LIMITED EDITION</div>
|
<div class="banner-overlay-header">LIMITED EDITION</div>
|
||||||
<div class="missing-piece-overlay-price">
|
<div class="banner-overlay-price">
|
||||||
$140
|
$140
|
||||||
<div>*</div>
|
<div>*</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="missing-piece-overlay-images">
|
<div class="banner-overlay-images">
|
||||||
<div class="img-container"><img src="/images/blue/blue1.png" /></div>
|
<div class="img-container"><img src="/images/blue/blue1.png" /></div>
|
||||||
<div class="img-container"><img src="/images/blue/blue2.png" /></div>
|
<div class="img-container"><img src="/images/blue/blue2.png" /></div>
|
||||||
<div class="img-container"><img src="/images/blue/blue3.png" /></div>
|
<div class="img-container"><img src="/images/blue/blue3.png" /></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="missing-piece-overlay-button" onclick="showBuyDialog()">
|
<div class="banner-overlay-button" onclick="showBuyDialog()">
|
||||||
<div>BUY NOW</div>
|
<div>BUY NOW</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="missing-piece-disclaimer">
|
<div class="banner-overlay-disclaimer">
|
||||||
* Price does not include taxes and import fees
|
* Price does not include taxes and import fees
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -731,7 +724,7 @@ Nope! We are committed to keep supporting all platforms that are currently avail
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="blue-buy-fab" onclick="showBuyDialog()" title="buy blue">
|
<div class="fab" onclick="showBuyDialog()" title="buy blue">
|
||||||
<svg style="width: 32px; height: 32px" viewBox="0 0 32 32">
|
<svg style="width: 32px; height: 32px" viewBox="0 0 32 32">
|
||||||
<path
|
<path
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
@ -742,7 +735,7 @@ Nope! We are committed to keep supporting all platforms that are currently avail
|
|||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
const buyDialog = document.getElementById("buy-dialog");
|
const buyDialog = document.getElementById("buy-dialog");
|
||||||
const buyFab = document.querySelector(".blue-buy-fab");
|
const buyFab = document.querySelector(".fab");
|
||||||
|
|
||||||
function showBuyDialog() {
|
function showBuyDialog() {
|
||||||
buyDialog.style.display = "flex";
|
buyDialog.style.display = "flex";
|
||||||
@ -759,23 +752,5 @@ Nope! We are committed to keep supporting all platforms that are currently avail
|
|||||||
closeDialog();
|
closeDialog();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
if (document.documentElement.clientWidth < 480) {
|
|
||||||
document.querySelector(".page-content").addEventListener(
|
|
||||||
"scroll",
|
|
||||||
function (e) {
|
|
||||||
const header = document.querySelector(".site-header");
|
|
||||||
const fab = document.querySelector(".blue-buy-fab");
|
|
||||||
if (e.currentTarget.scrollTop > 180) {
|
|
||||||
header.style.backgroundColor = "#ffffff";
|
|
||||||
fab.style.display = "flex";
|
|
||||||
} else {
|
|
||||||
header.style.backgroundColor = "#ffffff66";
|
|
||||||
fab.style.display = "none";
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ passive: true, capture: true }
|
|
||||||
);
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
75
source/home-energy-management/index.html
Normal file
75
source/home-energy-management/index.html
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
---
|
||||||
|
layout: landingpage
|
||||||
|
title: "Home Energy Management"
|
||||||
|
date: 2021-07-28
|
||||||
|
description: "Monitor your energy usage, transition to sustainable energy and save money"
|
||||||
|
hero_image: /images/energy/hero.jpg
|
||||||
|
og_image: /images/blog/2021-08-energy/social.png
|
||||||
|
tagline: The world is heating up. Together we can fix that.
|
||||||
|
sections:
|
||||||
|
- title: "Monitor usage"
|
||||||
|
description: "Monitor the energy usage, transition to sustainable energy and save money."
|
||||||
|
image: /images/energy/vector-graph.png
|
||||||
|
entries:
|
||||||
|
- title: "Know where it goes."
|
||||||
|
description: "Home Assistant shows at a glance how much you're consuming, producing and where this energy is going."
|
||||||
|
image: /images/energy/distribution.png
|
||||||
|
- title: "Keep an eye on your devices."
|
||||||
|
description: "Track the energy use of individual devices to see their impact on your energy consumption."
|
||||||
|
image: /images/energy/individual_devices.png
|
||||||
|
|
||||||
|
- title: "Track your costs"
|
||||||
|
description: "Home Assistant helps you keep track of the costs and compensation for your energy consumption and production."
|
||||||
|
image: /images/energy/vector-money.png
|
||||||
|
entries:
|
||||||
|
- title: "Consumption overview."
|
||||||
|
description: "Get an overview of your energy consumption."
|
||||||
|
image: /images/energy/cost.png
|
||||||
|
|
||||||
|
- title: "Use any hardware"
|
||||||
|
description: ""
|
||||||
|
image: /images/energy/vector-connect.png
|
||||||
|
entries:
|
||||||
|
- title: "Bring your own hardware"
|
||||||
|
description: "Home Assistant is vendor agnostic and there is no vendor lock-in: we work with any device or service that allows us to retrieve the data."
|
||||||
|
image: /images/blue/blue_hero.jpg
|
||||||
|
read_more: /integrations/#energy
|
||||||
|
- title: "SlimmeLezer"
|
||||||
|
description: >
|
||||||
|
We created SlimmeLezer, a device that connects to electricity meters with P1 ports and makes the data locally available in Home Assistant.
|
||||||
|
image: /images/docs/energy/slimmelezer.jpg
|
||||||
|
read_more: /docs/energy/electricity-grid/#connect-using-a-p1-port
|
||||||
|
- title: "Home Assistant Glow."
|
||||||
|
description: "We created Home Assistant Glow, a device that reads the consumption LED on your electricity meter and make it locally available in Home Assistant."
|
||||||
|
image: /images/docs/energy/home-assistant-glow.jpg
|
||||||
|
image_description: "Home Assistant Glow attached to an energy meter"
|
||||||
|
read_more: /docs/energy/electricity-grid/#reading-the-meter-via-a-pulse-counter
|
||||||
|
|
||||||
|
- title: "Supercharge your solar panels"
|
||||||
|
description: "Schedule power usage based on solar production predictions."
|
||||||
|
image: /images/energy/vector-sun.png
|
||||||
|
entries:
|
||||||
|
- title: "Time your usage."
|
||||||
|
description: "It’s cheaper to consume the energy you produce than to give it back to the grid. Home Assistant helps you turn on the power-hungry things when your usage needs a boost."
|
||||||
|
image: /images/blog/2021-08-energy/solar-production.png
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="material-card text banner-overlay">
|
||||||
|
<div>
|
||||||
|
<div class="banner-overlay-header">Home Energy Management</div>
|
||||||
|
<div class="banner-overlay-content">
|
||||||
|
With Home Assistant we want to do our part to help take on the climate crisis, and help you do the same. One part of fighting the climate crisis is making sure our homes are energy efficient and use low-carbon energy sources.
|
||||||
|
<br><br>
|
||||||
|
Home Assistant helps you to monitor your energy usage, transition to sustainable energy and save money.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="links">
|
||||||
|
<a href="/getting-started">
|
||||||
|
Get started
|
||||||
|
</a>
|
||||||
|
<a href="https://demo.home-assistant.io/#/energy" target="_blank">
|
||||||
|
View Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
BIN
source/images/energy/cost.png
Normal file
BIN
source/images/energy/cost.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
source/images/energy/distribution.png
Normal file
BIN
source/images/energy/distribution.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
source/images/energy/hero.jpg
Normal file
BIN
source/images/energy/hero.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
source/images/energy/individual_devices.png
Normal file
BIN
source/images/energy/individual_devices.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
source/images/energy/vector-connect.png
Normal file
BIN
source/images/energy/vector-connect.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 840 B |
BIN
source/images/energy/vector-graph.png
Normal file
BIN
source/images/energy/vector-graph.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 335 B |
BIN
source/images/energy/vector-money.png
Normal file
BIN
source/images/energy/vector-money.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 501 B |
BIN
source/images/energy/vector-sun.png
Normal file
BIN
source/images/energy/vector-sun.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 856 B |
@ -88,26 +88,30 @@ feedback: false
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid__item two-thirds lap-two-thirds palm-one-whole">
|
<div class="grid__item two-thirds lap-two-thirds palm-one-whole">
|
||||||
|
{% assign pages_by_date = site.pages | sort: "date" | reverse %}
|
||||||
<a
|
{% for page in pages_by_date %}
|
||||||
class="material-card picture-promo"
|
{% if page.layout == "landingpage" and page.frontpage != false %}
|
||||||
href="/blue"
|
<a
|
||||||
style="
|
class="material-card picture-promo"
|
||||||
background-image: url(/images/blue/blue_narrow.jpg);
|
href="{{page.url}}"
|
||||||
background-size: cover;
|
style="
|
||||||
background-color: #41bdf5;
|
background-image: url({{page.hero_image | default:page.og_image}});
|
||||||
"
|
background-size: cover;
|
||||||
>
|
background-color: #41bdf5;
|
||||||
<div class="caption">
|
"
|
||||||
<div class="title">
|
>
|
||||||
Home Assistant Blue!
|
<div class="caption">
|
||||||
<div class="subtitle">
|
<div class="title">
|
||||||
Where style and performance meet privacy
|
{{page.title}}
|
||||||
|
<div class="subtitle">
|
||||||
|
{{page.description}}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<svg viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" /></svg>
|
||||||
</div>
|
</div>
|
||||||
<svg viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" /></svg>
|
</a>
|
||||||
</div>
|
{% endif %}
|
||||||
</a>
|
{% endfor %}
|
||||||
|
|
||||||
<a
|
<a
|
||||||
class="material-card picture-promo"
|
class="material-card picture-promo"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user