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-16 13:56:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix-green-landing-page (#33541)

Browse Source 
Co-authored-by: Franck Nijhof <git@frenck.dev>
Co-authored-by: Franck Nijhof <frenck@frenck.nl>
This commit is contained in:
Madelena Mak 2024-07-05 11:34:47 -04:00 committed by GitHub
parent 4e039ebaa4
commit 4fadb43ff5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 84 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
source/_layouts/default.html
View File

@ -1,45 +1,45 @@
{% include site/head.html %} {% include site/head.html %}
<body {% if page.body_id %} id="{{ page.body_id }}"{% elsif page.layout == "landingpage" %} id="landingpage"{% endif %}> <body {% if page.body_id %} id="{{ page.body_id }}"{% elsif page.layout == "landingpage" %} id="landingpage"{% endif %}>
<header class='site-header {% if page.hero_unit %}dark{% endif %}'> <header class='site-header {% if page.dark_header %}dark{% endif %}'>
{% include site/header.html %} {% include site/header.html %}
</header> </header>
<div class="page-content"> <div class="page-content">
{% if page.hero_unit %} {% if page.hero_unit %}
{% include site/hero_unit.html %} {% include site/hero_unit.html %}
{% endif %} {% endif %}
<div class="grid-wrapper"> <div class="grid-wrapper">
<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 or page.layout == "landingpage" %} {% elsif page.is_homepage or page.layout == "landingpage" %}
<div class="grid__item one-whole"> <div class="grid__item one-whole">
{% else %}
<div class="grid__item two-thirds lap-one-whole palm-one-whole">
{% endif %}
{% if page.is_homepage or page.layout == "landingpage" %}
{{ content }}
{% else %} {% else %}
{{ content | output_modder }} <div class="grid__item two-thirds lap-one-whole palm-one-whole">
{% endif %} {% endif %}
{% if page.is_homepage or page.layout == "landingpage" %}
{{ content }}
{% else %}
{{ content | output_modder }}
{% endif %}
</div>
{% unless page.sidebar == false or page.layout == "landingpage" %}
<aside id="sidebar" class="grid__item one-third lap-one-whole palm-one-whole">
{% include site/sidebar.html %}
</aside>
{% endunless %}
</div> </div>
{% unless page.sidebar == false or page.layout == "landingpage" %}
<aside id="sidebar" class="grid__item one-third lap-one-whole palm-one-whole">
{% include site/sidebar.html %}
</aside>
{% endunless %}
</div> </div>
<footer>
{% include site/footer.html %}
</footer>
</div> </div>
<footer>
{% include site/footer.html %}
</footer>
</div>
{% include javascripts/scripts.html %} {% include javascripts/scripts.html %}
</body> </body>
</html> </html>

1
source/green/index.html
View File

@ -6,6 +6,7 @@ date: 2023-09-17
og_image: /images/blog/2023-09-ha10/green-intro.png og_image: /images/blog/2023-09-ha10/green-intro.png
frontpage: true frontpage: true
frontpage_image: /images/frontpage/green-frontpage.png frontpage_image: /images/frontpage/green-frontpage.png
dark_header: true
--- ---
<link rel="stylesheet" href="/green/styles.css" /> <link rel="stylesheet" href="/green/styles.css" />

87
source/green/styles.css
View File

@ -12,10 +12,24 @@ html {
} }
} }
#landingpage .site-header .grid-wrapper {
max-width: 1380px !important;
padding: 0 30px !important;
}
#landingpage footer .grid-wrapper {
max-width: 1380px;
padding: 0 30px;
}
#landingpage #buy-dialog { #landingpage #buy-dialog {
overflow-y: auto; overflow-y: auto;
} }
#landingpage #buy-dialog .distributors {
font-family: 'Instrument Sans', Figtree, sans-serif;
}
#landingpage .page-content { #landingpage .page-content {
height: auto; height: auto;
overflow-x: unset; overflow-x: unset;
@ -632,7 +646,7 @@ button,
padding-top: 35px; padding-top: 35px;
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: 42px; top: 64px;
} }
.margin-bottom-small { .margin-bottom-small {
@ -667,28 +681,32 @@ button,
transition: backdrop-filter 0.5s; transition: backdrop-filter 0.5s;
} }
.wrappernav.scrolled {
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
.wrappernav.wrappernavlocal { .wrappernav.wrappernavlocal {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
margin-bottom: -12em; margin-bottom: -12em;
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: 64px;
transition: top .1s, background-color .1s;
}
.wrappernav.scrolled {
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
background-color: rgba(255,255,255,.5);
top: 0;
} }
.navgrid { .navgrid {
width: 100%; width: 100%;
max-width: 1100px; max-width: 1380px;
min-height: 6em; min-height: 6em;
grid-column-gap: 0px; grid-column-gap: 0px;
grid-template-rows: auto; grid-template-rows: auto;
grid-template-columns: auto 2fr auto; grid-template-columns: auto 2fr auto;
align-items: center; align-items: center;
padding-left: 24px; padding-left: 30px;
padding-right: 24px; padding-right: 30px;
} }
.navbar { .navbar {
@ -725,7 +743,7 @@ button,
color: #c9c9c9; color: #c9c9c9;
background-color: #181818; background-color: #181818;
background-image: linear-gradient(360deg, #222, #2b2b2b); background-image: linear-gradient(360deg, #222, #2b2b2b);
font-family: Pretendard Regular, sans-serif; font-family: Figtree, sans-serif;
font-weight: 600; font-weight: 600;
transition-property: all; transition-property: all;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), box-shadow: inset 0 1px rgba(255, 255, 255, 0.1),
@ -773,8 +791,9 @@ button,
.nav-link.nav-local { .nav-link.nav-local {
text-transform: none; text-transform: none;
font-size: 16px; font-size: 14px;
font-weight: 400; font-family: 'Instrument Sans', Figtree, sans-serif;
font-weight: 500;
} }
.image-brand { .image-brand {
@ -1007,6 +1026,7 @@ button,
font-weight: 400; font-weight: 400;
line-height: 1.4; line-height: 1.4;
text-decoration: none; text-decoration: none;
letter-spacing: 0 !important;
} }
.heading-small { .heading-small {
@ -1017,6 +1037,11 @@ button,
font-weight: 400; font-weight: 400;
line-height: 1.4; line-height: 1.4;
text-decoration: none; text-decoration: none;
letter-spacing: 0 !important;
}
h4.heading-small {
margin-top: 0 !important;
} }
.text-white { .text-white {
@ -1130,7 +1155,7 @@ button,
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 14px 30px; padding: 14px 30px;
font-family: Pretendard, sans-serif; font-family: Figtree, sans-serif;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
text-decoration: none; text-decoration: none;
@ -1146,7 +1171,7 @@ button,
.topnav-button.black { .topnav-button.black {
color: #fff; color: #fff;
background-color: #222; background-color: #222;
font-family: Pretendard Regular, sans-serif; font-family: Figtree, sans-serif;
font-weight: 600; font-weight: 600;
} }
@ -1342,6 +1367,7 @@ button,
} }
.paragraph-m { .paragraph-m {
font-family: 'Instrument Sans', Figtree, sans-serif;
color: #1d2126; color: #1d2126;
letter-spacing: 0; letter-spacing: 0;
margin-top: 0 !important; margin-top: 0 !important;
@ -1349,6 +1375,7 @@ button,
font-size: 1.6em !important; font-size: 1.6em !important;
line-height: normal !important; line-height: normal !important;
font-weight: 400; font-weight: 400;
letter-spacing: 0 !important;
} }
.paragraph-m.text-white { .paragraph-m.text-white {
@ -1488,8 +1515,9 @@ button,
} }
.main-paragraph-w { .main-paragraph-w {
font-family: 'Instrument Sans', Figtree, sans-serif;
color: #1d2126; color: #1d2126;
letter-spacing: 0; letter-spacing: 0 !important;
margin-bottom: 0; margin-bottom: 0;
font-size: 1.4em; font-size: 1.4em;
font-weight: 400; font-weight: 400;
@ -1843,8 +1871,9 @@ button,
} }
.paragraph-small { .paragraph-small {
font-family: 'Instrument Sans', Figtree, sans-serif;
color: rgba(29, 33, 38, 0.75); color: rgba(29, 33, 38, 0.75);
letter-spacing: 0; letter-spacing: 0 !important;
margin-bottom: 0; margin-bottom: 0;
font-size: 1.1em !important; font-size: 1.1em !important;
font-weight: 400; font-weight: 400;
@ -1925,7 +1954,7 @@ button,
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
padding-left: 29px; padding-left: 29px;
font-family: Pretendard Bold, sans-serif; font-family: Figtree, sans-serif;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
} }
@ -2311,7 +2340,7 @@ button,
.topnav-button { .topnav-button {
width: auto; width: auto;
padding: 18px 40px; padding: 18px 40px;
font-family: Pretendard, sans-serif; font-family: Figtree, sans-serif;
font-weight: 400; font-weight: 400;
} }
@ -2823,6 +2852,7 @@ button,
.heading-small { .heading-small {
font-size: 14px; font-size: 14px;
line-height: 1.3; line-height: 1.3;
letter-spacing: 0;
} }
.stats-number.large { .stats-number.large {
@ -3640,27 +3670,6 @@ button,
} }
} }
@font-face {
font-family: "Pretendard Bold";
src: url("/green/fonts/Pretendard-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Pretendard Regular";
src: url("/green/fonts/Pretendard-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Pretendard";
src: url("/green/fonts/Pretendard-SemiBold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face { @font-face {
font-family: "Figtree"; font-family: "Figtree";
font-style: normal; font-style: normal;

24
source/index.html
View File

@ -2,6 +2,7 @@
show_title: false show_title: false
sidebar: false sidebar: false
hero_unit: true hero_unit: true
dark_header: true
is_homepage: true is_homepage: true
regenerate: true regenerate: true
feedback: false feedback: false
@ -315,24 +316,11 @@ feedback: false
src="/images/press/LinuxMagazine.png" src="/images/press/LinuxMagazine.png"
/></div></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"
><div class="material-card"><img alt="Ct logo" src="/images/press/ct.png" ><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>