Skip to content

style: responsive hero image with dynamic border radius #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Silvaternia wants to merge 1 commit into
base: 2026
Choose a base branch
from
Open

style: responsive hero image with dynamic border radius #96

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 16 additions & 8 deletions src/components/index/IndexHero.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,27 @@
---
import Cta from "./Cta_S.astro"
import productImg from "../../assets/index/product.png"
import { Image } from "astro:assets";
import Cta from "./Cta_S.astro";
import productImg from "../../assets/index/product.png";
---

<header>
<div class="hero-card">
<div class="text-part">
<h1 class="tagline">Find your<br/>community.</h1>
<h2 class="subtagline">Stoat is the chat app for friends and communities that finally works the way you always wished it would.</h2>
<h1 class="tagline">Find your<br />community.</h1>
<h2 class="subtagline">
Stoat is the chat app for friends and communities that finally works the way you always wished it would.
</h2>
<div class="cta">
<Cta/>
<Cta />
</div>
</div>
<img src={productImg.src} alt="Stoat desktop client" width={productImg.width} height={productImg.height} />
<Image
src={productImg}
alt="Stoat desktop client"
fetchpriority={"high"}
widths={[430, 700, 1200, 1400]}
sizes={`(max-width: 480px) 430px, (max-width: 768px) 700px, (max-width: 1279px) 1200px, 1400px`}
/>
</div>
</header>
<style lang="scss">
Expand All @@ -23,7 +32,7 @@ import productImg from "../../assets/index/product.png"
}

.hero-card {
border-radius: 2rem;
border-radius: clamp(0.5rem, 2vw, 2rem);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
Expand All @@ -35,7 +44,6 @@ import productImg from "../../assets/index/product.png"
width: 100%;
height: auto;
display: block;
border-radius: .7rem;
}

.text-part {
Expand Down