Show demo only at 760+px (#33529)

This commit is contained in:
Paulus Schoutsen 2024-07-03 06:35:22 +02:00 committed by GitHub
parent 41a3c8e8fd
commit 11bcae430c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 14 additions and 10 deletions

View File

@ -8,7 +8,7 @@
padding-bottom: 0; padding-bottom: 0;
margin-top: -88px; margin-top: -88px;
margin-bottom: 24px; margin-bottom: 24px;
padding-top: 88px; padding-top: 88px;
overflow: hidden; overflow: hidden;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
max-height: 1080px; max-height: 1080px;
@ -84,7 +84,7 @@
// animation-duration: 3s; // animation-duration: 3s;
// animation-iteration-count: infinite; // animation-iteration-count: infinite;
// animation-direction: alternate; // animation-direction: alternate;
@media only screen and (max-height: 720px) { @media only screen and (max-height: 720px) {
border-bottom: 0; border-bottom: 0;
margin-bottom: -8px; margin-bottom: -8px;
@ -114,7 +114,7 @@
.lead { .lead {
font-size: 1.15rem; font-size: 1.15rem;
} }
.hero-buttons a { .hero-buttons a {
&.primary { &.primary {
font-size: 1.25rem; font-size: 1.25rem;
@ -123,15 +123,19 @@
} }
} }
@media only screen and (max-width: $palm-end) { @media only screen and (max-width: 760px) {
.hero { .hero {
.flex {
flex-direction: column;
}
#HAdemo { #HAdemo {
display: none; display: none;
} }
#HAdemoScreenshot { #HAdemoScreenshot {
display: block; display: block;
} }
} }
} }

View File

@ -1,10 +1,10 @@
<div class="hero"> <div class="hero">
<div class="grid-wrapper"> <div class="grid-wrapper">
<div class="grid flex"> <div class="grid flex">
<div class="grid__item flex__item three-fifths lap-one-half palm-one-whole"> <div class="grid__item flex__item three-fifths lap-one-whole palm-one-whole">
{% include custom/welcome.html %} {% include custom/welcome.html %}
</div> </div>
<div class="grid__item flex__item two-fifths lap-one-half palm-one-whole"> <div class="grid__item flex__item two-fifths lap-one-whole palm-one-whole">
<iframe id="HAdemo" title="Home Assistant Demo" <iframe id="HAdemo" title="Home Assistant Demo"
src="https://demo.home-assistant.io/?frontpage"> src="https://demo.home-assistant.io/?frontpage">
</iframe> </iframe>

View File

@ -326,7 +326,7 @@ feedback: false
<!-- Sponsor section --> <!-- Sponsor section -->
<section class="sponsor"> <section class="sponsor">
<div class="sponsored-by grid__item one-whole"> <div class="sponsored-by grid__item one-whole">
<h2>The Home Assistant project is sponsored by</h2> <h2>The Home Assistant project is sponsored by</h2>