From e8a76497b2cc947380056d98bd1ee3978e7a4abb Mon Sep 17 00:00:00 2001 From: Madelena Mak Date: Sat, 23 Nov 2024 19:42:35 +0000 Subject: [PATCH 01/20] Cleaned up hero section with less distracting badges --- sass/homeassistant/_overrides.scss | 43 ++++---- sass/homeassistant/homepage/_hero_unit.scss | 96 +++++++++++++++--- source/_includes/custom/welcome.html | 39 ++++--- source/_includes/site/hero_unit.html | 2 +- source/images/frontpage/hero-github-logo.svg | 23 +++++ .../hero-socialproof-arstechnica.svg | 33 ++++++ .../frontpage/hero-socialproof-theverge.svg | 10 ++ source/images/frontpage/hero-trophy.svg | 6 ++ .../{ => frontpage}/hero_screenshot.png | Bin 9 files changed, 199 insertions(+), 53 deletions(-) create mode 100644 source/images/frontpage/hero-github-logo.svg create mode 100644 source/images/frontpage/hero-socialproof-arstechnica.svg create mode 100644 source/images/frontpage/hero-socialproof-theverge.svg create mode 100644 source/images/frontpage/hero-trophy.svg rename source/images/{ => frontpage}/hero_screenshot.png (100%) diff --git a/sass/homeassistant/_overrides.scss b/sass/homeassistant/_overrides.scss index 609776c748a5..ce750b5934e8 100644 --- a/sass/homeassistant/_overrides.scss +++ b/sass/homeassistant/_overrides.scss @@ -517,7 +517,7 @@ a.material-card:hover { .img { background-color: $grayLighter; width: calc(100%-8px); - aspect-ratio: 120/63; + // aspect-ratio: 120/63; background-size: cover; background-position: center; border-radius: 8px; @@ -659,14 +659,16 @@ a.material-card:hover { } .highlight-blog-post { - font-size: 2rem; + font-family: $heading-font; + font-size: 1.5rem; + font-weight: 700; line-height: 1.15; - padding: 15px; + padding: 24px; display: block; text-decoration: none; color: white; transition: background-color 0.5s; - background-color: #038fc7; + background-color: $primary-color; &.large { font-size: 2.25rem; @@ -726,15 +728,16 @@ a.material-card:hover { .picture-promo { display: block; - padding-top: 30%; + padding-top: 33%; background-size: cover; background-position: center; text-decoration: none; border: none; .caption { - padding: 8px 12px 12px; - background-color: rgba(0, 0, 0, 0.54); + padding: 48px 24px 24px 24px; + background: rgb(0,0,0); + background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); color: white; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; @@ -743,16 +746,19 @@ a.material-card:hover { align-items: center; .title { - font-size: 20px; - font-weight: 400; - line-height: 1.2em; + font-family: $heading-font; + font-size: 1.5rem; + font-weight: 700; + line-height: normal; } .subtitle { - margin-top: 4px; - line-height: 1.4em; - font-size: 12px; + margin-top: 8px; + line-height: 1.5rem; + font-size: 1rem; font-weight: initial; + text-shadow: 0px 4px 16px rgba(0, 0, 0, 0.33); + opacity: .8; } svg { @@ -913,17 +919,6 @@ dt:hover a.title-link { } } -.hero-buttons { - margin-bottom: 0; -} - -.hero-buttons a { - margin: 0 30px 10px 0; - - &:last-child { - margin: 0; - } -} // Article formatting diff --git a/sass/homeassistant/homepage/_hero_unit.scss b/sass/homeassistant/homepage/_hero_unit.scss index e288652a7c6d..277775a05d22 100644 --- a/sass/homeassistant/homepage/_hero_unit.scss +++ b/sass/homeassistant/homepage/_hero_unit.scss @@ -7,7 +7,7 @@ background: linear-gradient(0deg, hsl(195, 89%, 52%) 0%, hsla(195, 89%, 52%, 0.8) 100%); padding-bottom: 0; margin-top: -88px; - margin-bottom: 24px; + margin-bottom: 48px; padding-top: 88px; overflow: hidden; border-bottom: 1px solid rgba(0, 0, 0, 0.1); @@ -24,14 +24,20 @@ } h1 { - font-size: 6em; - line-height: .8; - background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, hsl(174.86, 100%, 75%) 100%); + font-size: 8rem; + font-style: normal; + font-weight: 800; + line-height: 1; + letter-spacing: -2.56px; + background: linear-gradient(125deg, #FFF 29.3%, #80FFF4 89.99%); background-clip: text; - color: transparent; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; .line2 { line-height: 1.25; + margin-top: -1.75rem; + display: block; } } @@ -40,30 +46,92 @@ color: $grayLighter; font-size: .65em; } - .lead { - font-size: 1.25rem; + &.lead { + font-size: 1.5rem !important; margin-bottom: 24px; + line-height: 2.25rem !important; } } .hero-buttons a { - font-family: $heading-font; font-size: 1.1rem; color: white; - text-transform: uppercase; white-space: nowrap; display: inline-block; font-weight: 600; - padding: 8px 24px 8px 0; - margin: 0 4px 0 0; + padding: 8px 0 8px 0; + margin: 0 4px 0 24px; border-radius: 32px; &.primary { + font-family: $heading-font; background-color: $link-color; - font-size: 2rem; + text-transform: uppercase; + font-size: 1.5rem; font-weight: 700; - padding: 8px 20px 8px 28px; - margin-bottom: 16px; + padding: 8px 16px 8px 24px; + margin: 0 0 16px 0; + } + } + + .hero-socialproof { + display: flex; + padding-top: 16px; + align-items: center; + gap: 32px; + + a { + opacity: 0.75; + transition: .5s opacity; + + &:hover { + opacity: 1; + } + } + + } + + .hero-github-top-project { + display: flex; + padding: 12px 16px 12px 12px; + align-items: center; + gap: 10px; + border-radius: 12px; + border: 1px solid #F2F4F9; + width: 330px; + + p { + color: #FFF; + font-size: 1rem; + font-weight: 400; + line-height: 1.25rem; + margin: 0; + + strong { + font-weight: 600; + } + } + } + + .hero-socialproof-asseenon { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 4px; + + p { + margin: 8px 0 0 0; + align-self: stretch; + font-size: .875rem; + font-weight: 700; + opacity: .75; + } + + .logos { + display: flex; + align-items: center; + gap: 32px; } } diff --git a/source/_includes/custom/welcome.html b/source/_includes/custom/welcome.html index b6e3a3ebe086..7b84ad1aa1ff 100644 --- a/source/_includes/custom/welcome.html +++ b/source/_includes/custom/welcome.html @@ -1,6 +1,6 @@

Awaken
your home

- {{ site.description }} + Open source home automation that puts local control and privacy first. Powered by a worldwide community of tinkerers and DIY enthusiasts.

{%- assign tot = 0 -%} @@ -15,19 +15,30 @@

Awaken
your home

{%- endfor -%}

- Get started
+ Get started View live demos Browse {{ tot | minus: 1 | divided_by: 100 | round | times: 100 }}+ integrations

- - GitHub's top open source project by contributors in 2024 - GitHub's top open source project by contributors in 2024 - \ No newline at end of file + +
+ +
+ GitHub logo + Top open source project trophy +

Top open source project by contributors in 2024

+
+ + +
+

As seen on

+
+ + The Verge + + + ArsTechnica + +
+
+
+ diff --git a/source/_includes/site/hero_unit.html b/source/_includes/site/hero_unit.html index 02b3eea513ca..7469b6df44bf 100644 --- a/source/_includes/site/hero_unit.html +++ b/source/_includes/site/hero_unit.html @@ -10,7 +10,7 @@ - Home Assistant screenshot + Home Assistant screenshot diff --git a/source/images/frontpage/hero-github-logo.svg b/source/images/frontpage/hero-github-logo.svg new file mode 100644 index 000000000000..95fa42367a32 --- /dev/null +++ b/source/images/frontpage/hero-github-logo.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/source/images/frontpage/hero-socialproof-arstechnica.svg b/source/images/frontpage/hero-socialproof-arstechnica.svg new file mode 100644 index 000000000000..678f4d789ba1 --- /dev/null +++ b/source/images/frontpage/hero-socialproof-arstechnica.svg @@ -0,0 +1,33 @@ + + + + + + + + diff --git a/source/images/frontpage/hero-socialproof-theverge.svg b/source/images/frontpage/hero-socialproof-theverge.svg new file mode 100644 index 000000000000..e9f13916bb2b --- /dev/null +++ b/source/images/frontpage/hero-socialproof-theverge.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/source/images/frontpage/hero-trophy.svg b/source/images/frontpage/hero-trophy.svg new file mode 100644 index 000000000000..95e833e7b3f7 --- /dev/null +++ b/source/images/frontpage/hero-trophy.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/source/images/hero_screenshot.png b/source/images/frontpage/hero_screenshot.png similarity index 100% rename from source/images/hero_screenshot.png rename to source/images/frontpage/hero_screenshot.png From 28071777b540463f6b6b1b064cd16b70f2db5b02 Mon Sep 17 00:00:00 2001 From: Madelena Mak Date: Sat, 23 Nov 2024 19:55:46 +0000 Subject: [PATCH 02/20] Fix top boxes styling --- sass/homeassistant/_overrides.scss | 32 +++++++++++++++++--------- source/index.html | 36 +++++++----------------------- 2 files changed, 30 insertions(+), 38 deletions(-) diff --git a/sass/homeassistant/_overrides.scss b/sass/homeassistant/_overrides.scss index ce750b5934e8..778906baa8e2 100644 --- a/sass/homeassistant/_overrides.scss +++ b/sass/homeassistant/_overrides.scss @@ -444,12 +444,16 @@ header .breadcrumbs { h1 { font-family: $heading-font; -webkit-font-smoothing: antialiased; - font-size: 1.33rem; + font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.012em; line-height: 40px; color: #212121; margin: -8px 0 0; + + iconify-icon { + margin-right: 8px; + } } &.text { @@ -659,20 +663,28 @@ a.material-card:hover { } .highlight-blog-post { - font-family: $heading-font; - font-size: 1.5rem; - font-weight: 700; - line-height: 1.15; padding: 24px; - display: block; text-decoration: none; color: white; - transition: background-color 0.5s; + transition: background-color 0.5s, box-shadow 0.5s; background-color: $primary-color; + display: flex; + padding: 20px 12px 20px 24px; + align-items: center; + gap: 10px; + align-self: stretch; + + p { + font-size: 1rem; + margin: 10px 0 0 0; - &.large { - font-size: 2.25rem; - line-height: 1.33333; + &.lead { + font-family: $heading-font; + font-size: 1.5rem; + font-weight: 700; + line-height: 1.15; + margin-top: 0; + } } &:hover { diff --git a/source/index.html b/source/index.html index db39f95886ef..fd59926ebf65 100644 --- a/source/index.html +++ b/source/index.html @@ -41,7 +41,7 @@

{% icon "mdi:people-group-outline" %} Join The Community

class="material-card highlight-blog-post" href="/blog/2016/01/19/perfect-home-automation/" > - Read our founder's vision for the perfect home automation +

Read our founder's vision for the perfect home automation

@@ -70,12 +70,12 @@

{% icon "simple-icons:googleassistant" %} Ok Google, turn off the AC

- - We are a non-profit and can't be sold or acquired - + +
+

We are a non-profit and can't be sold or acquired.

+

Home Assistant is a project by the Open Home Foundation.

+
+ {% icon "simple-icons:googleassistant" %} Ok Google, turn off the AC -
+
{% icon "simple-icons:googleassistant" %} Ok Google, turn off the AC hardware. Now supporting wake words.
- - - @@ -161,11 +156,6 @@

{% icon "simple-icons:googleassistant" %} Ok Google, turn off the AC

{{page.description}}
- - - {% endif %} {% endfor %} @@ -196,11 +186,6 @@

{% icon "simple-icons:googleassistant" %} Ok Google, turn off the AC

Use NFC to bring music to your life or automate the mundane. - - - @@ -218,11 +203,6 @@

{% icon "simple-icons:googleassistant" %} Ok Google, turn off the AC

Look sharp in blue, black or gray. Wearing a HA t-shirt is okay. - - - From 15f7e95927fc79b299610d4b2dec6c247d6783b8 Mon Sep 17 00:00:00 2001 From: Madelena Mak Date: Sat, 23 Nov 2024 21:23:30 +0000 Subject: [PATCH 03/20] Fixed all the top box images and consolidated HA Cloud box --- sass/homeassistant/_overrides.scss | 81 +++++++ sass/homeassistant/homepage/_hero_unit.scss | 1 + source/_includes/site/hero_unit.html | 2 +- source/connectzbt1/index.html | 2 +- source/green/index.html | 2 +- .../frontpage/feature-githubnnumberone.jpg | Bin 0 -> 62362 bytes source/images/frontpage/feature-sotoh2024.jpg | Bin 0 -> 65045 bytes source/images/frontpage/feature-voice.jpg | Bin 0 -> 46602 bytes source/images/frontpage/feature-zbt1.jpg | Bin 0 -> 25305 bytes source/images/frontpage/green-frontpage.jpg | Bin 0 -> 31088 bytes source/images/frontpage/yellow-frontpage.jpg | Bin 60337 -> 37529 bytes source/index.html | 199 ++++++++++-------- 12 files changed, 192 insertions(+), 95 deletions(-) create mode 100644 source/images/frontpage/feature-githubnnumberone.jpg create mode 100644 source/images/frontpage/feature-sotoh2024.jpg create mode 100644 source/images/frontpage/feature-voice.jpg create mode 100644 source/images/frontpage/feature-zbt1.jpg create mode 100644 source/images/frontpage/green-frontpage.jpg diff --git a/sass/homeassistant/_overrides.scss b/sass/homeassistant/_overrides.scss index 778906baa8e2..5dcf533e4a75 100644 --- a/sass/homeassistant/_overrides.scss +++ b/sass/homeassistant/_overrides.scss @@ -458,6 +458,7 @@ header .breadcrumbs { &.text { padding: 24px; + font-size: 1rem; h1 { padding: 0px 0px 12px; @@ -696,6 +697,71 @@ a.material-card:hover { } } + .highlight-detail-post { + padding: 24px; + text-decoration: none; + color: white; + transition: background-color 0.5s, box-shadow 0.5s; + background-color: #006895; + box-shadow: inset 0 0 64px #038fc7; + font-size: 1.5rem; + + .caption { + padding-bottom: 24px; + + p { + font-family: $heading-font; + font-size: 1.25rem; + font-weight: 600; + margin: 0; + line-height: 1.2; + + strong { + font-size: 1.75rem; + font-weight: 800; + } + } + } + + .detail-feature { + display: flex; + align-items: flex-start; + gap: 16px; + align-self: stretch; + + p { + font-size: 0.875rem; + + &.lead { + font-size: 1rem; + margin-bottom: 4px; + font-weight: 500; + } + } + + iconify-icon { + padding: 8px; + border-radius: 50%; + background: rgba(0, 0, 0, 0.15); + color: white; + } + + } + animation-name: box-shadow-color; + animation-duration: 5s; + animation-iteration-count: infinite; + animation-direction: alternate; + + @keyframes box-shadow-color { + from { + box-shadow: inset 0 0 64px hsl(197, 97%, 40%); + } + to { + box-shadow: inset 0 0 64px hsl(159, 100%, 35%); + } + } + } + .events { padding: 16px; @@ -780,6 +846,21 @@ a.material-card:hover { min-width: 32px; } } + + &.picture-top { + padding-top: 0; + padding-bottom: 33%; + + .caption { + padding: 24px 24px 48px 24px; + background: rgb(0,0,0); + background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); + border-top-left-radius: 16px; + border-top-right-radius: 16px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + } } .supported-brands { diff --git a/sass/homeassistant/homepage/_hero_unit.scss b/sass/homeassistant/homepage/_hero_unit.scss index 277775a05d22..56f9d3a2f295 100644 --- a/sass/homeassistant/homepage/_hero_unit.scss +++ b/sass/homeassistant/homepage/_hero_unit.scss @@ -153,6 +153,7 @@ // animation-duration: 3s; // animation-iteration-count: infinite; // animation-direction: alternate; + // transform: rotateY(342deg) skewY(4deg); @media only screen and (max-height: 840px) { border-bottom: 0; diff --git a/source/_includes/site/hero_unit.html b/source/_includes/site/hero_unit.html index 7469b6df44bf..6d22affb549d 100644 --- a/source/_includes/site/hero_unit.html +++ b/source/_includes/site/hero_unit.html @@ -4,7 +4,7 @@
{% include custom/welcome.html %}
-
+
diff --git a/source/connectzbt1/index.html b/source/connectzbt1/index.html index 9c25fe8bdd87..af16f7612dbf 100644 --- a/source/connectzbt1/index.html +++ b/source/connectzbt1/index.html @@ -8,7 +8,7 @@ og_image: /images/connectzbt1/connectzbt1-cover.jpg hero_image: /images/connectzbt1/connectzbt1_horizontal.png frontpage: true -frontpage_image: /images/connectzbt1/connectzbt1-cover.jpg +frontpage_image: /images/frontpage/feature-zbt1.jpg ---