fix spacing with video (#40)

This commit is contained in:
Lucy
2024-01-22 12:15:49 -05:00
committed by GitHub
parent 689b4ea233
commit 9b7bb51c25
3 changed files with 21 additions and 14 deletions

View File

@@ -3,13 +3,12 @@
{% include "svgs/start9-brand.svg" %} {% include "svgs/start9-brand.svg" %}
<span>sovereign computing</span> <span>sovereign computing</span>
</div> </div>
</section> <div class="video-container">
<div class="video-container"> <div class="video-wrapper">
<div class="video-wrapper"> <iframe src="https://www.youtube.com/embed/52XMf_NabFA?si=aIlLu0puOOY2_r0b" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/52XMf_NabFA?si=aIlLu0puOOY2_r0b" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> </div>
</div> </div>
</div> <div class="ratings">
<div class="ratings"> <div id= "ap-widget-2" class="ap-widget--mini" data-options='{"prod_code": "startos", "theme": "dark", "template_id": "mini", "text_color": "#F5F5F5" , "bg_color": "transparent" }'></div>
<div id= "ap-widget-2" class="ap-widget--mini" data-options='{"prod_code": "startos", "theme": "dark", "template_id": "mini", "text_color": "#F5F5F5" , "bg_color": "transparent" }'></div> </div>
</div> </section>

View File

@@ -8,7 +8,7 @@ gsap.to("header", {
scrollTrigger: { scrollTrigger: {
trigger: "#hero", trigger: "#hero",
scrub: true, scrub: true,
start: "center top", // "triggerElement page" start: "top top", // "triggerElement page"
end: "bottom top", // "triggerElement page" end: "bottom top", // "triggerElement page"
}, },
}); });
@@ -20,7 +20,7 @@ gsap.to(".header__logo", {
scrollTrigger: { scrollTrigger: {
trigger: "#hero", trigger: "#hero",
scrub: true, scrub: true,
start: "center top", // "triggerElement page" start: "top top", // "triggerElement page"
end: "bottom top", // "triggerElement page" end: "bottom top", // "triggerElement page"
}, },
}); });

View File

@@ -115,6 +115,8 @@ nav {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding-bottom: 4rem;
svg { svg {
width: 20rem; width: 20rem;
margin-top: 0.6rem; margin-top: 0.6rem;
@@ -182,7 +184,8 @@ nav {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100vh; height: 100vh;
margin-bottom: calc(-1 * (50vh - 4.5rem - (min(32.385rem, 58.3vw) / 2))); padding-top: 15rem;
margin-bottom: 4rem;
} }
h1 { h1 {
@@ -408,7 +411,7 @@ section#reviews {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding-top: 2rem; padding-top: 4rem;
&-box { &-box {
align-self: end; align-self: end;
@@ -419,6 +422,10 @@ section#reviews {
width: auto; width: auto;
} }
.ap-widget--mini {
padding-top: 0;
}
.ap-widget__logo--mini { .ap-widget__logo--mini {
display: none; display: none;
} }
@@ -457,7 +464,8 @@ section#reviews {
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
#hero { #hero {
margin-bottom: calc(-1 * (21vh - 4.5rem - (min(32.385rem, 58.3vw) / 2))); margin-bottom: -20rem;
padding-top: 0;
} }
.line svg { .line svg {