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 09:17:06 +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;
background-color: rgba(0, 0, 0, 0.54);
color: white;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
display: flex;
justify-content: space-between;
align-items: center;
@ -542,26 +542,37 @@ a.material-card:hover {
margin-top: 24px;
}
.sponsored-by {
img {
border: 0;
border-radius: 0;
box-shadow: none;
margin: 15px;
max-width: 40%;
max-height: 80px;
}
}
.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 {
border: 0;
box-shadow: none;
margin: 15px;
max-width: 40%;
max-height: 70px;
margin: 24px;
width: calc(100% - 48px);
max-height: 128px;
border-radius: 0;
}
.material-card {
height: 100%;
align-content: center;
text-align: center;
margin: 0;
}
.square {
@ -572,6 +583,18 @@ a.material-card:hover {
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) {

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

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

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

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

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

@ -1,3 +1,7 @@
<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-header">
@ -17,6 +21,7 @@
<a class="button" href="/integrations">EXPLORE INTEGRATIONS</a>
</div>
</div>
<div class="card">
<div class="card-header">
<iconify-icon inline icon="mdi:robot-happy-outline"></iconify-icon>
@ -95,6 +100,7 @@
</a>
</div>
</div>
<div class="card">
<div class="card-header">
<iconify-icon inline icon="mdi:solar-power-variant"></iconify-icon>
@ -117,3 +123,6 @@
</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>
</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>
<h4>System status</h4>
<ul>
@ -47,6 +48,12 @@
</div>
<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>
<ul>
<li><a href="/privacy/">Privacy Notices</a></li>

86
source/index.html
View File

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