mirror of
https://github.com/tauri-apps/tauri-docs.git
synced 2026-01-31 00:35:16 +01:00
redo home
This commit is contained in:
Ayres Vitor
31
src/components/Hero.astro
Normal file
31
src/components/Hero.astro
Normal file
@@ -0,0 +1,31 @@
|
||||
---
|
||||
import { LinkButton } from '@astrojs/starlight/components';
|
||||
import { Image } from 'astro:assets';
|
||||
|
||||
const { tagline, getStarted, v1Docs } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="hero-bg">
|
||||
<div class="bg-logo"></div>
|
||||
<div class="bg-grad"></div>
|
||||
<div class="bg-grad-red"></div>
|
||||
</div>
|
||||
|
||||
<div class="lp-content">
|
||||
<div class="lp-header lp-hero">
|
||||
<div class="lp-header-content">
|
||||
<Image class="lp-tauri-logo light" src={import('@assets/logo_light.svg')} alt="Tauri Logo" />
|
||||
<Image class="lp-tauri-logo dark" src={import('@assets/logo.svg')} alt="Tauri Logo" />
|
||||
<p class="lp-tagline">
|
||||
{tagline}
|
||||
</p>
|
||||
<div class="actions">
|
||||
<LinkButton icon="right-arrow" href="/start/">{getStarted}</LinkButton>
|
||||
<LinkButton href="https://v1.tauri.app" variant="minimal" icon="external">
|
||||
{v1Docs}
|
||||
</LinkButton>
|
||||
</div>
|
||||
</div>
|
||||
<Image src={import('@assets/logo-outline.svg')} alt="Tauri outline logo" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -8,32 +8,20 @@ template: splash
|
||||
tableOfContents: false
|
||||
prev: false
|
||||
next: false
|
||||
hero:
|
||||
tagline: Create small, fast, secure, cross-platform applications
|
||||
image:
|
||||
file: ../../assets/logo-outline.svg
|
||||
actions:
|
||||
- text: Get Started
|
||||
link: /start/
|
||||
icon: right-arrow
|
||||
variant: primary
|
||||
- text: Tauri 1.0 Documentation
|
||||
link: https://v1.tauri.app
|
||||
icon: external
|
||||
variant: minimal
|
||||
---
|
||||
|
||||
import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components';
|
||||
import Cta from '@fragments/cta.mdx';
|
||||
import Hero from '@components/Hero.astro';
|
||||
import SponsorList from '@components/sponsors/SponsorList.astro';
|
||||
|
||||
<div class="hero-bg">
|
||||
<div class="bg-logo"></div>
|
||||
<div class="bg-grad"></div>
|
||||
<div class="bg-grad-red"></div>
|
||||
</div>
|
||||
<Hero
|
||||
tagline="Create small, fast, secure, cross-platform applications"
|
||||
getStarted="Get started"
|
||||
v1Docs="Tauri 1.0 Documentation"
|
||||
/>
|
||||
|
||||
<div class="lp-cta-card">
|
||||
<div>
|
||||
<Card title="Create a Project" icon="rocket">
|
||||
<Cta />
|
||||
</Card>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import url('./theme.scss');
|
||||
@import url('./overrides.scss');
|
||||
@import url('./lp.scss');
|
||||
|
||||
.content details {
|
||||
padding: 0 1rem;
|
||||
@@ -7,7 +8,7 @@
|
||||
|
||||
.content details[open] {
|
||||
background-color: var(--sl-color-gray-6);
|
||||
padding-bottom: rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.content summary {
|
||||
@@ -33,179 +34,11 @@
|
||||
color: var(--sl-color-white) !important;
|
||||
}
|
||||
|
||||
@media (min-width: 50rem) {
|
||||
.hero {
|
||||
padding-block: clamp(2.5rem, calc(1rem + 10vmin), 5rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Index hero background */
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
z-index: -1;
|
||||
opacity: 0.7;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(-90deg, var(--sl-color-gray-6) 1px, transparent 1px),
|
||||
linear-gradient(var(--sl-color-gray-6) 1px, transparent 1px),
|
||||
linear-gradient(-90deg, var(--sl-color-gray-6) 1px, transparent 1px),
|
||||
linear-gradient(var(--sl-color-gray-6) 1px, transparent 1px),
|
||||
linear-gradient(transparent 6px, transparent 6px, transparent 156px, transparent 156px),
|
||||
linear-gradient(-90deg, var(--sl-color-gray-6) 1px, transparent 1px),
|
||||
linear-gradient(-90deg, transparent 6px, transparent 6px, transparent 156px, transparent 156px),
|
||||
linear-gradient(var(--sl-color-gray-6) 1px, transparent 1px), transparent;
|
||||
background-size:
|
||||
32px 32px,
|
||||
32px 32px,
|
||||
256px 256px,
|
||||
256px 256px,
|
||||
256px 256px,
|
||||
256px 256px,
|
||||
256px 256px,
|
||||
256px 256px;
|
||||
}
|
||||
|
||||
/* Transition hero background grid smoothly to page background color. */
|
||||
.hero-bg::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 70% 0 0;
|
||||
background: linear-gradient(transparent, var(--sl-color-bg));
|
||||
}
|
||||
|
||||
.bg-grad {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: 50%;
|
||||
width: 150vh;
|
||||
height: 150vh;
|
||||
opacity: 0.3;
|
||||
background: radial-gradient(circle, var(--sl-color-accent) 0%, transparent 70%);
|
||||
animation: 6s intro;
|
||||
}
|
||||
|
||||
.bg-grad-red {
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: -50%;
|
||||
width: 150vh;
|
||||
height: 150vh;
|
||||
opacity: 0.3;
|
||||
background: radial-gradient(circle, var(--sl-color-orange) 0%, transparent 70%);
|
||||
animation: 14s intro;
|
||||
}
|
||||
|
||||
:root[data-theme='light'] {
|
||||
.bg-grad {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.bg-grad-red {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
z-index: -1;
|
||||
opacity: 0.4;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(-90deg, var(--sl-color-gray-4) 1px, transparent 1px),
|
||||
linear-gradient(var(--sl-color-gray-4) 1px, transparent 1px),
|
||||
linear-gradient(-90deg, var(--sl-color-gray-4) 1px, transparent 1px),
|
||||
linear-gradient(var(--sl-color-gray-4) 1px, transparent 1px),
|
||||
linear-gradient(transparent 6px, transparent 6px, transparent 156px, transparent 156px),
|
||||
linear-gradient(-90deg, var(--sl-color-gray-4) 1px, transparent 1px),
|
||||
linear-gradient(-90deg,
|
||||
transparent 6px,
|
||||
transparent 6px,
|
||||
transparent 156px,
|
||||
transparent 156px),
|
||||
linear-gradient(var(--sl-color-gray-5) 1px, transparent 1px), transparent;
|
||||
background-size:
|
||||
32px 32px,
|
||||
32px 32px,
|
||||
256px 256px,
|
||||
256px 256px,
|
||||
256px 256px,
|
||||
256px 256px,
|
||||
256px 256px,
|
||||
256px 256px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tauri logo on index page */
|
||||
.hero>img {
|
||||
animation: 3s intro;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-bottom: -160px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media (min-width: 50rem) {
|
||||
.hero>img {
|
||||
z-index: 10;
|
||||
margin: 0;
|
||||
opacity: 0.7;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.sl-markdown-content .inline-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
:root[data-theme='light'] .hero>img {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
@keyframes intro {
|
||||
0% {
|
||||
scale: 1.4;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
80% {
|
||||
scale: 0.9;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
* {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.lp-cta-card {
|
||||
z-index: 100;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (min-width: 50rem) {
|
||||
.lp-cta-card {
|
||||
margin-top: -8em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
article.card {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
199
src/styles/lp.scss
Normal file
199
src/styles/lp.scss
Normal file
@@ -0,0 +1,199 @@
|
||||
.lp-tauri-logo {
|
||||
max-width: 360px;
|
||||
// margin-inline: auto;
|
||||
}
|
||||
|
||||
:root[data-theme='light'] {
|
||||
.lp-tauri-logo.light {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.lp-tauri-logo.dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.lp-tauri-logo.light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lp-content {
|
||||
margin-block: 2rem;
|
||||
margin-inline: auto;
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.lp-header {
|
||||
display: grid;
|
||||
grid-template-columns: 7fr 3fr;
|
||||
gap: 3%;
|
||||
padding-bottom: 2em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.lp-tagline {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
// hide h1 title
|
||||
.content-panel:has(h1#_top:not([data-page-title])) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.lp-hero>img {
|
||||
animation: 3s intro;
|
||||
animation-fill-mode: forwards;
|
||||
transition: opacity 1s ease-in-out;
|
||||
opacity: 0.2;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
margin-block: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 50rem) {
|
||||
.lp-hero>img {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes intro {
|
||||
0% {
|
||||
scale: 1.8;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
80% {
|
||||
scale: 1.2;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
scale: 1.1;
|
||||
}
|
||||
}
|
||||
|
||||
:root[data-theme='light'] .lp-hero>img {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
* {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Index hero background */
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
z-index: -1;
|
||||
opacity: 0.7;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(-90deg, var(--sl-color-gray-6) 1px, transparent 1px),
|
||||
linear-gradient(var(--sl-color-gray-6) 1px, transparent 1px),
|
||||
linear-gradient(-90deg, var(--sl-color-gray-6) 1px, transparent 1px),
|
||||
linear-gradient(var(--sl-color-gray-6) 1px, transparent 1px),
|
||||
linear-gradient(transparent 6px, transparent 6px, transparent 156px, transparent 156px),
|
||||
linear-gradient(-90deg, var(--sl-color-gray-6) 1px, transparent 1px),
|
||||
linear-gradient(-90deg, transparent 6px, transparent 6px, transparent 156px, transparent 156px),
|
||||
linear-gradient(var(--sl-color-gray-6) 1px, transparent 1px), transparent;
|
||||
background-size:
|
||||
32px 32px,
|
||||
32px 32px,
|
||||
256px 256px,
|
||||
256px 256px,
|
||||
256px 256px,
|
||||
256px 256px,
|
||||
256px 256px,
|
||||
256px 256px;
|
||||
}
|
||||
|
||||
/* Transition hero background grid smoothly to page background color. */
|
||||
.hero-bg::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 70% 0 0;
|
||||
background: linear-gradient(transparent, var(--sl-color-bg));
|
||||
}
|
||||
|
||||
.bg-grad {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: 50%;
|
||||
width: 150vh;
|
||||
height: 150vh;
|
||||
opacity: 0.3;
|
||||
background: radial-gradient(circle, var(--sl-color-accent) 0%, transparent 70%);
|
||||
animation: 6s intro;
|
||||
}
|
||||
|
||||
.bg-grad-red {
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: -50%;
|
||||
width: 150vh;
|
||||
height: 150vh;
|
||||
opacity: 0.3;
|
||||
background: radial-gradient(circle, var(--sl-color-orange) 0%, transparent 70%);
|
||||
animation: 14s intro;
|
||||
}
|
||||
|
||||
:root[data-theme='light'] {
|
||||
.bg-grad {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.bg-grad-red {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
z-index: -1;
|
||||
opacity: 0.4;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(-90deg, var(--sl-color-gray-4) 1px, transparent 1px),
|
||||
linear-gradient(var(--sl-color-gray-4) 1px, transparent 1px),
|
||||
linear-gradient(-90deg, var(--sl-color-gray-4) 1px, transparent 1px),
|
||||
linear-gradient(var(--sl-color-gray-4) 1px, transparent 1px),
|
||||
linear-gradient(transparent 6px, transparent 6px, transparent 156px, transparent 156px),
|
||||
linear-gradient(-90deg, var(--sl-color-gray-4) 1px, transparent 1px),
|
||||
linear-gradient(-90deg,
|
||||
transparent 6px,
|
||||
transparent 6px,
|
||||
transparent 156px,
|
||||
transparent 156px),
|
||||
linear-gradient(var(--sl-color-gray-5) 1px, transparent 1px), transparent;
|
||||
background-size:
|
||||
32px 32px,
|
||||
32px 32px,
|
||||
256px 256px,
|
||||
256px 256px,
|
||||
256px 256px,
|
||||
256px 256px,
|
||||
256px 256px,
|
||||
256px 256px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user