Skip to content

Commit

Permalink
[DB] fix font styles (#1060)
Browse files Browse the repository at this point in the history
  • Loading branch information
@natemoo-re
natemoo-re authored Apr 9, 2024
1 parent c58bd9d commit 201b451
Show file tree
Hide file tree
Showing 4 changed files with 168 additions and 149 deletions.
32 changes: 17 additions & 15 deletions src/pages/db/_components/FooterCTA.astro
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
---
import { getImage } from "astro:assets"
import CodeBlock from "~/components/CodeBlock.astro"
import bg from "../_assets/footer-bg.png"
import { getImage } from "astro:assets";
import CodeBlock from "~/components/CodeBlock.astro";
import bg from "../_assets/footer-bg.png";
const background = await getImage({ src: bg, format: "webp", width: 1280 })
const background = await getImage({ src: bg, format: "webp", width: 1280 });
---

<section class="mx-auto mb-12 w-full max-w-screen-xl p-4 sm:p-8">
<div
class="overflow-hidden rounded-2xl border border-[#272831] bg-cover bg-center"
style={{ "background-image": `url(${background.src})` }}
>
<div class="landing-section min-h-[20rem] gap-8 px-4 py-8 sm:py-0 lg:min-h-[36rem] lg:p-24">
<h2 class="text-balance text-2xl font-bold heading sm:text-4xl">
Start building with <br /> Astro DB today
</h2>
<CodeBlock>astro add db</CodeBlock>
</div>
</div>
<div
class="overflow-hidden rounded-2xl border border-[#272831] bg-cover bg-center"
style={{ "background-image": `url(${background.src})` }}
>
<div
class="landing-section min-h-[20rem] gap-8 px-4 py-8 sm:py-0 lg:min-h-[36rem] lg:p-24"
>
<h2 class="text-balance text-2xl font-bold font-heading sm:text-4xl">
Start building with <br /> Astro DB today
</h2>
<CodeBlock>astro add db</CodeBlock>
</div>
</div>
</section>
118 changes: 64 additions & 54 deletions src/pages/db/_components/Hero.astro
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,76 @@
---
import PageTitleBlock from "~/components/PageTitleBlock.astro"
import CTA from "../_components/CTA.astro"
import HeroVideo from "./HeroVideo.astro"
import Pill from "./Pill.astro"
import PageTitleBlock from "~/components/PageTitleBlock.astro";
import CTA from "../_components/CTA.astro";
import HeroVideo from "./HeroVideo.astro";
import Pill from "./Pill.astro";
---

<section
class="align-center landing-section relative flex h-[calc(100dvh-5rem)] max-h-[48rem] content-center items-center overflow-hidden bg-[#6628C6] bg-cover bg-no-repeat px-4 py-16 md:px-8"
class="align-center landing-section relative flex h-[calc(100dvh-5rem)] max-h-[48rem] content-center items-center overflow-hidden bg-[#6628C6] bg-cover bg-no-repeat px-4 py-16 md:px-8"
>
<HeroVideo class="lg:w-full" />
<div
class="size-full from-67% pointer-events-none absolute inset-0 z-10 bg-gradient-to-b from-[transparent] to-[#080B14]/100 to-90%"
>
</div>
<HeroVideo class="lg:w-full" />
<div
class="size-full from-67% pointer-events-none absolute inset-0 z-10 bg-gradient-to-b from-[transparent] to-[#080B14]/100 to-90%"
>
</div>

<div class="z-20 m-auto flex flex-col">
<Pill class="mx-auto mb-4" title="Astro DB" subtitle="Early Preview" />
<PageTitleBlock
wide
lg
body="Astro DB is a fully managed SQL database that is fast, lightweight, and ridiculously easy-to-use."
>
<h1
slot="title"
class="text-balance mb-4 text-center text-3xl/[1.1] font-bold heading sm:max-w-[24ch] md:text-4xl/[1.1] lg:text-5xl/[1.1]"
>
The database platform for content-driven websites
</h1>
</PageTitleBlock>
<CTA class="mb-4 mt-8" />
<p class="text-white/60">No credit card required. Cancel anytime.</p>
</div>
<div class="z-20 m-auto flex flex-col">
<Pill class="mx-auto mb-4" title="Astro DB" subtitle="Early Preview" />
<PageTitleBlock
wide
lg
body="Astro DB is a fully managed SQL database that is fast, lightweight, and ridiculously easy-to-use."
>
<h1
slot="title"
class="text-balance mb-4 text-center text-3xl/[1.1] font-bold font-heading sm:max-w-[24ch] md:text-4xl/[1.1] lg:text-5xl/[1.1]"
>
The database platform for content-driven websites
</h1>
</PageTitleBlock>
<CTA class="mb-4 mt-8" />
<p class="text-white/60">No credit card required. Cancel anytime.</p>
</div>
</section>

<style>
section {
background: linear-gradient(180deg, #191429 0%, #683095 24.54%, #54318c 60.05%, #0d0f14 100%);
}
@property --rotate {
syntax: "<angle>";
initial-value: 132deg;
inherits: false;
}
section {
background: linear-gradient(
180deg,
#191429 0%,
#683095 24.54%,
#54318c 60.05%,
#0d0f14 100%
);
}
@property --rotate {
syntax: "<angle>";
initial-value: 132deg;
inherits: false;
}

.demo-video::before {
top: -1%;
left: -2%;
z-index: -1;
width: 104%;
content: "";
height: 102%;
position: absolute;
animation: spin 3s linear infinite;
background-image: linear-gradient(var(--rotate), rgba(255, 255, 255), rgba(0, 0, 0, 0));
}
.demo-video::before {
top: -1%;
left: -2%;
z-index: -1;
width: 104%;
content: "";
height: 102%;
position: absolute;
animation: spin 3s linear infinite;
background-image: linear-gradient(
var(--rotate),
rgba(255, 255, 255),
rgba(0, 0, 0, 0)
);
}

@keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
@keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
</style>
122 changes: 63 additions & 59 deletions src/pages/db/_components/Intro.astro
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,75 @@
---
import { Icon } from "astro-icon"
import IntroPoint from "./IntroPoint.astro"
import { Icon } from "astro-icon";
import IntroPoint from "./IntroPoint.astro";
---

<section class="xs:p-6 mx-auto w-full max-w-screen-xl space-y-8 p-4 sm:p-8">
<h2
class="my-4 max-w-screen-lg text-3xl font-light heading md:my-8 md:mt-24 md:text-4xl xl:text-[3.0rem] xl:leading-tight"
style="text-wrap: balance;"
>
<strong>Astro DB</strong> is a fully managed SQL database designed exclusively for Astro.
</h2>
<h2
class="my-4 max-w-screen-lg text-3xl font-light font-heading md:my-8 md:mt-24 md:text-4xl xl:text-[3.0rem] xl:leading-tight"
style="text-wrap: balance;"
>
<strong>Astro DB</strong> is a fully managed SQL database designed
exclusively for Astro.
</h2>

<dl class="grid grid-cols-1 gap-8 sm:grid-cols-2 md:gap-12 lg:grid-cols-3">
<IntroPoint bgGradient="bg-red-pink-gradient">
<Fragment slot="icon">
<div
class="size-10 landing-section rounded-full bg-gradient-to-bl from-[#D83333]/20 to-[#F041FF]/20 p-2"
>
<Icon class="text-2xl" name="libSQL-icon" size={32} />
</div>
</Fragment>
<Fragment slot="title">Powered by LibSQL</Fragment>
<Fragment slot="description">
LibSQL balanced lightweight efficiency with proven enterprise-grade performance.
</Fragment>
</IntroPoint>
<dl class="grid grid-cols-1 gap-8 sm:grid-cols-2 md:gap-12 lg:grid-cols-3">
<IntroPoint bgGradient="bg-red-pink-gradient">
<Fragment slot="icon">
<div
class="size-10 landing-section rounded-full bg-gradient-to-bl from-[#D83333]/20 to-[#F041FF]/20 p-2"
>
<Icon class="text-2xl" name="libSQL-icon" size={32} />
</div>
</Fragment>
<Fragment slot="title">Powered by LibSQL</Fragment>
<Fragment slot="description">
LibSQL balanced lightweight efficiency with proven enterprise-grade
performance.
</Fragment>
</IntroPoint>

<IntroPoint bgGradient="bg-blue-green-gradient">
<Fragment slot="icon">
<div
class="size-10 landing-section rounded-full bg-gradient-to-bl from-[#4AF2C8]/20 to-[#2F4CB3]/20 p-2"
>
<Icon class="text-2xl" name="ri:line-chart-line" size={32} />
</div>
</Fragment>
<Fragment slot="title">Scale with confidence</Fragment>
<Fragment slot="description">
Astro DB’s automatically scales up to meet demand and scales down to $0 when inactive.
</Fragment>
</IntroPoint>
<IntroPoint bgGradient="bg-blue-green-gradient">
<Fragment slot="icon">
<div
class="size-10 landing-section rounded-full bg-gradient-to-bl from-[#4AF2C8]/20 to-[#2F4CB3]/20 p-2"
>
<Icon class="text-2xl" name="ri:line-chart-line" size={32} />
</div>
</Fragment>
<Fragment slot="title">Scale with confidence</Fragment>
<Fragment slot="description">
Astro DB’s automatically scales up to meet demand and scales down to $0
when inactive.
</Fragment>
</IntroPoint>

<IntroPoint bgGradient="bg-orange-yellow-gradient">
<Fragment slot="icon">
<div
class="size-10 landing-section rounded-full bg-gradient-to-bl from-[#F8E42E]/20 to-[#FF7D54]/20 p-2"
>
<Icon class="text-2xl" name="ri:timer-flash-line" size={32} />
</div>
</Fragment>
<Fragment slot="title">Automatically configured</Fragment>
<Fragment slot="description">
Everything is setup for you, like a TypeScript ORM with full type-safety out of the box.
</Fragment>
</IntroPoint>
</dl>
<IntroPoint bgGradient="bg-orange-yellow-gradient">
<Fragment slot="icon">
<div
class="size-10 landing-section rounded-full bg-gradient-to-bl from-[#F8E42E]/20 to-[#FF7D54]/20 p-2"
>
<Icon class="text-2xl" name="ri:timer-flash-line" size={32} />
</div>
</Fragment>
<Fragment slot="title">Automatically configured</Fragment>
<Fragment slot="description">
Everything is setup for you, like a TypeScript ORM with full type-safety
out of the box.
</Fragment>
</IntroPoint>
</dl>
</section>

<style>
h2 {
font-variation-settings:
"wght" 290,
"wdth" 490 !important;
}
h2 {
font-variation-settings:
"wght" 290,
"wdth" 490 !important;
}

h2 strong {
font-variation-settings:
"wght" 475,
"wdth" 490;
}
h2 strong {
font-variation-settings:
"wght" 475,
"wdth" 490;
}
</style>
45 changes: 24 additions & 21 deletions src/pages/db/_components/SectionText.astro
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,31 @@
---
type Props = {
headingId?: string
isCentered?: boolean
}
headingId?: string;
isCentered?: boolean;
};
const { isCentered = false, headingId } = Astro.props
const { isCentered = false, headingId } = Astro.props;
---

<div class:list={["space-y-1", isCentered && "sm:landing-section"]}>
<h2
class:list={[
"text-balance body w-fit bg-red-pink-gradient bg-clip-text font-semibold uppercase tracking-widest text-transparent",
]}
>
<slot name="eyebrow" />
</h2>
<h3 id={headingId} class:list={["text-balance heading-3 max-w-3xl font-bold heading"]}>
<slot name="title" />
</h3>
{
Astro.slots.has("default") && (
<div class="body max-w-prose pl-0 pt-2 text-astro-gray-200 md:pr-16">
<slot />
</div>
)
}
<h2
class:list={[
"text-balance body w-fit bg-red-pink-gradient bg-clip-text font-semibold uppercase tracking-widest text-transparent",
]}
>
<slot name="eyebrow" />
</h2>
<h3
id={headingId}
class:list={["text-balance heading-3 max-w-3xl font-bold font-heading"]}
>
<slot name="title" />
</h3>
{
Astro.slots.has("default") && (
<div class="body max-w-prose pl-0 pt-2 text-astro-gray-200 md:pr-16">
<slot />
</div>
)
}
</div>

0 comments on commit 201b451

Please sign in to comment.