Add events to Home Page (#22927)

* Add events to Home Page

* squoosh image

* Link to Blog

* Mobile Style

* Update image size
This commit is contained in:
Zack Barett 2022-05-30 22:08:59 -05:00 committed by GitHub
parent f7ea4c5118
commit 464ba46098
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 82 additions and 10 deletions

View File

@ -186,6 +186,47 @@ $primary-color: #049cdb;
background-color: lighten(#038fc7, 10%);
}
}
.events {
padding: 16px;
h3 {
margin-top: 8px;
}
.event {
display: flex;
flex-wrap: wrap-reverse;
align-items: center;
text-decoration: none;
color: inherit;
.caption {
padding: 0 12px;
max-width: 450px;
}
.title {
font-size: 20px;
font-weight: 400;
}
.secondary {
color: rgba(0, 0, 0, 0.54);
font-size: 14px;
font-weight: 500;
}
.subtitle {
font-size: 12px;
font-weight: initial;
}
img {
width: 200px;
height: 100%;
}
}
}
.picture-promo {
display: block;
@ -276,6 +317,19 @@ $primary-color: #049cdb;
}
}
@media screen and (max-width: 700px) {
.frontpage .events .event {
.caption {
padding-top: 4px;
}
img {
width: 100%;
}
}
}
// https://fortawesome.github.io/Font-Awesome/3.2.1/icons/
h1:hover a.title-link,

View File

@ -1,5 +1,6 @@
---
layout: landingpage
frontpage: false
title: "Home Assistant Blue!"
description: "Where style and performance meet privacy"
date: 2020-12-12

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

View File

@ -89,17 +89,34 @@ feedback: false
</a>
</div>
<div class="grid__item two-thirds lap-two-thirds palm-one-whole">
<a
class="material-card picture-promo"
href="/state-of-the-open-home/"
aria-label="Learn more about State of the Open Home"
style="
padding-top: 56%;
background: center/contain no-repeat url(/images/state-of-the-open-home/promo.png) #fff;
"
>
</a>
<div class="material-card events">
<h3>Upcoming Events</h3>
<a href="/blog/2022/05/29/matter-in-home-assistant-workshop-announcement/" class="event">
<div class="caption">
<div class="title">Matter in Home Assistant Workshop</div>
<div class="secondary">Wed June 15th - 12:00 PM PDT / 21:00 CET</div>
<p class="subtitle">We will be hosting our free Matter in Home Assistant workshop. The workshop will contain two
parts. In the first part we will talk about what Matter is and how it will work in Home Assistant. In the second
part we will
walk you through how to add experimental Matter support to your Home Assistant installation and integrate your
first Wi-Fi based Matter device.</p>
</div>
<img src="images/blog/2022-05-matter-in-home-assistant-workshop-announcement/social.png" />
</a>
<a href="https://www.youtube.com/watch?v=SEH-DxOsywg" class="event" target="_blank">
<div class="caption">
<div class="title">Let's get loud! - Audio in the Open Home</div>
<div class="secondary">Thu June 16th - 12:00 PM PDT / 21:00 CET</div>
<p class="subtitle">We've been working on some exciting open audio stuff for the smart home we would like to
share. Featuring Home Assistant, ESPHome, Raspiaudio and a special guest.
</p>
</div>
<img src="/images/events/lets-get-loud.jpg" />
</a>
</div>
<!-- Home Assistant Yellow -->
<a
class="material-card picture-promo"
href="https://www.crowdsupply.com/nabu-casa/home-assistant-yellow"