jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-23 17:27:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Beautify frontpage (#33503)

Browse Source 
* Remove outdated content from the top

* Add merch and companion app links

* Align Get Started button better

* Fix caption radius

* Beautify press section

* Beautify sponsor section

* Fix feature Learn More button margins

* Reorganize Features section

* Revert content changes since it needs further discussion
This commit is contained in:
Madelena Mak 2024-07-02 14:52:45 -04:00 committed by GitHub
parent 1a5b7348e5
commit 41a3c8e8fd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 286 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
sass/homeassistant/_overrides.scss
View File

@ -493,8 +493,8 @@ a.material-card:hover {
padding: 8px 12px 12px; padding: 8px 12px 12px;
background-color: rgba(0, 0, 0, 0.54); background-color: rgba(0, 0, 0, 0.54);
color: white; color: white;
border-bottom-left-radius: 8px; border-bottom-left-radius: 16px;
border-bottom-right-radius: 8px; border-bottom-right-radius: 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -542,26 +542,37 @@ a.material-card:hover {
margin-top: 24px; margin-top: 24px;
} }
.sponsored-by {
img {
border: 0;
border-radius: 0;
box-shadow: none;
margin: 15px;
max-width: 40%;
max-height: 80px;
}
}
.seen-press { .seen-press {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
column-gap: 24px;
row-gap: 24px;
margin: 48px 0;
h2 {
grid-column: 1/-1;
margin: 0;
text-align: center;
}
a {
aspect-ratio: 1;
}
img { img {
border: 0; border: 0;
box-shadow: none; box-shadow: none;
margin: 15px; margin: 24px;
max-width: 40%; width: calc(100% - 48px);
max-height: 70px; max-height: 128px;
border-radius: 0;
}
.material-card {
height: 100%;
align-content: center;
text-align: center;
margin: 0;
} }
.square { .square {
@ -572,6 +583,18 @@ a.material-card:hover {
border-radius: 50%; border-radius: 50%;
} }
} }
.sponsored-by {
text-align: center;
img {
border: 0;
border-radius: 0;
box-shadow: none;
margin: 24px;
max-height: 160px;
}
}
} }
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {

4
sass/homeassistant/homepage/_features.scss
View File

@ -26,11 +26,11 @@
} }
.card-content { .card-content {
padding-left: 24px; padding-bottom: 24px;
p:last-of-type, p:last-of-type,
ul { ul {
margin-bottom: 12px; margin-bottom: 32px;
} }
} }
} }

2
sass/homeassistant/homepage/_hero_unit.scss
View File

@ -62,7 +62,7 @@
background-color: $link-color; background-color: $link-color;
font-size: 2rem; font-size: 2rem;
font-weight: 700; font-weight: 700;
padding: 8px 24px; padding: 8px 20px 8px 28px;
margin-bottom: 16px; margin-bottom: 16px;
} }
} }

13
source/_includes/custom/features.html
View File

@ -1,4 +1,8 @@
<div class="feature-cards"> <section class="grid features">
<div class="grid__item one-whole">
<h2 class="sub-title">Features</h2>
<div class="feature-cards">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<iconify-icon inline icon="mdi:lightbulb-variant-outline"></iconify-icon> <iconify-icon inline icon="mdi:lightbulb-variant-outline"></iconify-icon>
@ -17,6 +21,7 @@
<a class="button" href="/integrations">EXPLORE INTEGRATIONS</a> <a class="button" href="/integrations">EXPLORE INTEGRATIONS</a>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<iconify-icon inline icon="mdi:robot-happy-outline"></iconify-icon> <iconify-icon inline icon="mdi:robot-happy-outline"></iconify-icon>
@ -95,6 +100,7 @@
</a> </a>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<iconify-icon inline icon="mdi:solar-power-variant"></iconify-icon> <iconify-icon inline icon="mdi:solar-power-variant"></iconify-icon>
@ -116,4 +122,7 @@
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</div>
</section>

7
source/_includes/site/footer.html
View File

@ -33,6 +33,7 @@
<a class="external-link" href="https://community.home-assistant.io">Community Forum <iconify-icon inline icon="tabler:external-link"></iconify-icon></a> <a class="external-link" href="https://community.home-assistant.io">Community Forum <iconify-icon inline icon="tabler:external-link"></iconify-icon></a>
</li> </li>
<li><a href="/help/reporting_issues/">Reporting issues</a></li> <li><a href="/help/reporting_issues/">Reporting issues</a></li>
<li><a href="https://home-assistant-store.creator-spring.com/">Community Merch Store</a></li>
</ul> </ul>
<h4>System status</h4> <h4>System status</h4>
<ul> <ul>
@ -47,6 +48,12 @@
</div> </div>
<div class="grid__item one-quarter lap-one-half palm-one-whole"> <div class="grid__item one-quarter lap-one-half palm-one-whole">
<h4>Companion apps</h4>
<ul>
<li><a class="external-link" href="https://apps.apple.com/us/app/home-assistant/id1099568401">iOS and Apple devices</a></li>
<li><a class="external-link" href="https://play.google.com/store/apps/details?id=io.homeassistant.companion.android">Android and Wear OS</a></li>
<li><a class="external-link" href="https://companion.home-assistant.io/">...and more!</a></li>
</ul>
<h4>Governance</h4> <h4>Governance</h4>
<ul> <ul>
<li><a href="/privacy/">Privacy Notices</a></li> <li><a href="/privacy/">Privacy Notices</a></li>

86
source/index.html
View File

@ -7,10 +7,10 @@ regenerate: true
feedback: false feedback: false
--- ---
{% assign recent_release_post = site.categories['Core'].first %}
<div class="frontpage"> <div class="frontpage">
<div class="grid"> <div class="grid">
<!-- Left sidebar begins -->
<div class="grid__item one-third lap-one-third palm-one-whole"> <div class="grid__item one-third lap-one-third palm-one-whole">
<div class="recent-posts material-card text"> <div class="recent-posts material-card text">
@ -91,6 +91,9 @@ feedback: false
</div> </div>
</a> </a>
</div> </div>
<!-- Left sidebar ends -->
<!-- Right content begins -->
<div class="grid__item two-thirds lap-two-thirds palm-one-whole"> <div class="grid__item two-thirds lap-two-thirds palm-one-whole">
<!-- State of the Open Home --> <!-- State of the Open Home -->
<a <a
@ -214,117 +217,126 @@ feedback: false
</div> </div>
</a> </a>
</div> </div>
<!-- Right content ends -->
<div class="sub-title">Features</div>
<!-- Features section -->
{% include custom/features.html %} {% include custom/features.html %}
<div class="grid sponsors-and-press">
<div class="sponsored-by grid__item one-half lap-one-half palm-one-whole">
<div class="material-card text">
<h1>Home Assistant is sponsored by</h1>
<a href="https://www.nabucasa.com"
><img alt="Nabu Casa logo" src="/images/sponsors/nabu_casa.svg" <!-- Press section -->
/></a> <section class="grid sponsors-and-press">
</div> <div class="seen-press grid__item one-whole">
</div> <h2>Home Assistant in the press</h2>
<div class="seen-press grid__item one-half lap-one-half palm-one-whole">
<div class="material-card text">
<h1>Home Assistant in the press</h1>
<a <a
href="https://www.theverge.com/2021/9/16/22678088/home-assistant-amber-smart-home-hub-specs-release-date-price" href="https://www.theverge.com/2021/9/16/22678088/home-assistant-amber-smart-home-hub-specs-release-date-price"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
><img alt="The Verge logo" src="/images/press/theverge.svg" ><div class="material-card"><img alt="The Verge logo" src="/images/press/theverge.svg"
/></a> /></div></a>
<a <a
href="https://arstechnica.com/information-technology/2021/03/how-to-achieve-smart-home-nirvana-or-home-automation-without-subscription/" href="https://arstechnica.com/information-technology/2021/03/how-to-achieve-smart-home-nirvana-or-home-automation-without-subscription/"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
><img ><div class="material-card"><img
alt="ArsTechnica.com logo" alt="ArsTechnica.com logo"
src="/images/press/arstechnica.svg" src="/images/press/arstechnica.svg"
/></a> /></div></a>
<a <a
href="https://tweakers.net/reviews/8704/paulus-schoutsen-home-assistant-concurreert-met-alles-wat-via-de-cloud-gaat.html" href="https://tweakers.net/reviews/8704/paulus-schoutsen-home-assistant-concurreert-met-alles-wat-via-de-cloud-gaat.html"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
><img alt="Tweakers.net logo" src="/images/press/tweakers.png" ><div class="material-card"><img alt="Tweakers.net logo" src="/images/press/tweakers.png"
/></a> /></div></a>
<a <a
href="https://www.youtube.com/watch?v=x7pSkVarixU" href="https://www.youtube.com/watch?v=x7pSkVarixU"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
><img ><div class="material-card"><img
alt="Linus Tech Tips logo" alt="Linus Tech Tips logo"
class="square" class="square"
src="/images/press/ltt.svg" src="/images/press/ltt.svg"
/></a> /></div></a>
<a <a
href="https://www.troyhunt.com/iot-unravelled-part-1-its-a-mess-but-then-theres-home-assistant/" href="https://www.troyhunt.com/iot-unravelled-part-1-its-a-mess-but-then-theres-home-assistant/"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
><img ><div class="material-card"><img
class="square round" class="square round"
alt="Troy Hunt logo" alt="Troy Hunt logo"
src="/images/press/troyhunt.jpg" src="/images/press/troyhunt.jpg"
/></a> /></div></a>
<a <a
href="https://www.tomshardware.com/news/raspberry-pi-home-assistant-amber" href="https://www.tomshardware.com/news/raspberry-pi-home-assistant-amber"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
><img ><div class="material-card"><img
alt="Tom's Hardware logo" alt="Tom's Hardware logo"
src="/images/press/tomshardware.svg" src="/images/press/tomshardware.svg"
/></a> /></div></a>
<a <a
href="https://www.producthunt.com/posts/home-assistant" href="https://www.producthunt.com/posts/home-assistant"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
><img ><div class="material-card"><img
alt="ProductHunt.com logo" alt="ProductHunt.com logo"
src="/images/press/producthunt.com.png" src="/images/press/producthunt.com.png"
/></a> /></div></a>
<a <a
href="https://www.linux.com/news/home-assistant-python-approach-home-automation-video" href="https://www.linux.com/news/home-assistant-python-approach-home-automation-video"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
><img alt="Linux.com logo" src="/images/press/linux.com.png" ><div class="material-card"><img alt="Linux.com logo" src="/images/press/linux.com.png"
/></a> /></div></a>
<a <a
href="https://opensource.com/article/17/7/home-automation-primer" href="https://opensource.com/article/17/7/home-automation-primer"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
><img ><div class="material-card"><img
alt="OpenSource.com logo" alt="OpenSource.com logo"
src="/images/press/opensource.com.svg" src="/images/press/opensource.com.svg"
/></a> /></div></a>
<a <a
href="http://www.linux-magazine.com/Issues/2017/203/Home-Assistant" href="http://www.linux-magazine.com/Issues/2017/203/Home-Assistant"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
><img ><div class="material-card"><img
alt="Linux Magazine logo" alt="Linux Magazine logo"
src="/images/press/LinuxMagazine.png" src="/images/press/LinuxMagazine.png"
/></a> /></div></a>
<a <a
href="https://www.heise.de/select/ct/2017/26/1513910625909214" href="https://www.heise.de/select/ct/2017/26/1513910625909214"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
><img alt="Ct logo" src="/images/press/ct.png" ><div class="material-card"><img alt="Ct logo" src="/images/press/ct.png"
/></div></a>
</div>
</section>
<!-- Sponsor section -->
<section class="sponsor">
<div class="sponsored-by grid__item one-whole">
<h2>The Home Assistant project is sponsored by</h2>
<div class="material-card text">
<a href="https://www.nabucasa.com"
><img alt="Nabu Casa logo" src="/images/sponsors/nabu_casa.svg"
/></a> /></a>
</div> </div>
</div> </div>
</div> </section>
</div> </div>
</div> </div>