tauri-apps/archived-tauri-docs
1
0
Fork 0
mirror of https://github.com/tauri-apps/tauri-docs.git synced 2026-01-31 00:35:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
Ayres Vitor
2025-07-30 20:18:02 -03:00
parent 188226b006
commit 8cc1097b04
4 changed files with 226 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/Hero.astro
View File

@@ -1,31 +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>
---
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>

1
src/components/sponsors/OpenCollective/Main.astro
View File

@@ -109,7 +109,6 @@ const totalBronzeSponsors = sponsorsByTier.bronze.length;
.sponsor-container.silver > div {
margin-inline-start: calc(var(--silver-overlap) * -1);
}
.sponsor-container.silver {

5
src/styles/custom.scss
View File

@@ -34,7 +34,6 @@
color: var(--sl-color-white) !important;
}
.sl-markdown-content .inline-icon {
display: inline-block;
}
@@ -52,7 +51,7 @@ figcaption {
text-align: center;
}
figure>img {
figure > img {
margin-left: auto;
margin-right: auto;
}
}

392
src/styles/lp.scss
View File

@@ -1,199 +1,193 @@
.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;
}
}
.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;
}
}