mirror of
https://github.com/tauri-apps/tauri-docs.git
synced 2026-01-31 00:35:16 +01:00
Lorenzo Lewis
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB |
6
src/assets/logo-outline.svg
Normal file
6
src/assets/logo-outline.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="210" height="234" viewBox="0 0 210 234" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M146.34 85.6102C146.34 97.9524 136.271 107.958 123.85 107.958C111.429 107.958 101.36 97.9524 101.36 85.6102C101.36 73.2681 111.429 63.2628 123.85 63.2628C136.271 63.2628 146.34 73.2681 146.34 85.6102Z" stroke="white"/>
|
||||
<path d="M108.64 148.39C108.64 160.732 98.5708 170.737 86.1499 170.737C73.729 170.737 63.6599 160.732 63.6599 148.39C63.6599 136.048 73.729 126.042 86.1499 126.042C98.5708 126.042 108.64 136.048 108.64 148.39Z" stroke="white"/>
|
||||
<path d="M69.0134 65.4936C30.2 73.3739 1 107.493 1 148.39C1 195.119 39.1229 233 86.1499 233C124.358 233 156.689 207.994 167.471 173.554C157.292 178.538 146.275 181.765 134.897 183.039C124.023 198.116 106.241 207.94 86.1499 207.94C53.0515 207.94 26.22 181.278 26.22 148.39C26.22 122.701 42.5902 100.811 65.5305 92.4581C64.5999 83.3843 65.7609 74.1388 69.0134 65.4936Z" stroke="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M140.986 168.506C179.8 160.626 209 126.507 209 85.6102C209 38.8813 170.877 1 123.85 1C85.6418 1 53.3113 26.006 42.5294 60.4465C52.708 55.4618 63.7247 52.2348 75.1035 50.9613C85.9768 35.884 103.759 26.0601 123.85 26.0601C156.948 26.0601 183.78 52.7216 183.78 85.6102C183.78 111.3 167.41 133.19 144.469 141.542C145.4 150.616 144.239 159.861 140.986 168.506Z" stroke="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -3,6 +3,8 @@ title: Hardend foundation for your web apps.
|
||||
description: The cross-platform app building toolkit
|
||||
template: splash
|
||||
hero:
|
||||
image:
|
||||
file: ../../assets/logo-outline.svg
|
||||
actions:
|
||||
- text: Get Started
|
||||
link: /2/guide/
|
||||
@@ -21,42 +23,11 @@ hero:
|
||||
import { Card, CardGrid } from '@astrojs/starlight/components';
|
||||
|
||||
<div class="hero-bg">
|
||||
<div class="bg-logo"></div>
|
||||
<div class="bg-logo"></div>
|
||||
<div class="bg-grad"></div>
|
||||
<div class="bg-grad-red"></div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:10rem;background-color:#101010;border:1px solid;border-radius:16px;padding:2rem;display:flex;justify-content:center;scale:0.7;margin-bottom:5rem;overflow:hidden;">
|
||||
## npm create tauri-app@latest
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
# Ship tiny, fast, secure, cross-platform apps.
|
||||
#### Tauri only ships the code needed for your app to run, no need to ship a whole browser with your app. Tauri apps are tiny, fast and secure by deafult.
|
||||
|
||||
<div style="display:flex;justify-content:center;scale:0.7;margin-bottom:5rem;overflow:hidden;">
|
||||
<img src="smol.svg" />
|
||||
I think we can do some 3D here, just got to sit down and write some webgl - alve
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
# Build it the way you know, once.
|
||||
#### copy about this
|
||||
<br/>
|
||||
|
||||
<div style="display:flex;justify-content:center;scale:2;opacity:0.4;z-index:-10;margin-bottom:30rem;overflow:hidden;">
|
||||
<img src="frameworks.svg" />
|
||||
</div>
|
||||
|
||||
# Seamless native code without the headackes.
|
||||
#### Tauri has a built in event passing system allowing you painless communication from javascript to your native rust code that runs directly on your device.
|
||||
|
||||
<div style="display:flex;justify-content:center;scale:1.5;margin-bottom:30rem;overflow:hidden;">
|
||||
<img src="tauwry.svg" />
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
<CardGrid stagger>
|
||||
<Card title="Frontend Independent" icon="rocket">
|
||||
Bring your existing web stack to Tauri or start that new dream project.
|
||||
@@ -72,12 +43,15 @@ I think we can do some 3D here, just got to sit down and write some webgl - alve
|
||||
deep into the system with Swift and Kotlin.
|
||||
</Card>
|
||||
<Card title="Maximum Security" icon="rocket">
|
||||
Feature
|
||||
Front-of-mind for the Tauri Team driving our highest priorities and biggest
|
||||
innovations.
|
||||
</Card>
|
||||
<Card title="Minimal Size" icon="rocket">
|
||||
Feature
|
||||
By using the OS's native web renderer, the size of a Tauri app can be less
|
||||
than 600KB.
|
||||
</Card>
|
||||
<Card title="Powered by Rust" icon="rocket">
|
||||
Feature
|
||||
With performance and security at the center, Rust is the language for the
|
||||
next generation of apps.
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
@@ -48,102 +48,10 @@
|
||||
--sl-hue-blue: 186;
|
||||
--sl-hue-orange: 42;
|
||||
|
||||
--sl-nav-height: 4rem;
|
||||
|
||||
/* Custom */
|
||||
--tauri-transition-speed: 200ms;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 80px;
|
||||
padding: 0px .8rem;
|
||||
background: var(--sl-color-bg-nav);
|
||||
backdrop-filter: blur(4px);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.sidebar-pane,
|
||||
.main-frame,
|
||||
header,
|
||||
.right-sidebar {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.right-sidebar {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.sidebar li a,
|
||||
starlight-toc li a,
|
||||
.sidebar summary,
|
||||
.starlight__on-this-page li {
|
||||
transition: 0.07s ease;
|
||||
border-radius: 0px;
|
||||
margin: 0px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.sidebar details ul {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.sidebar summary {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
details[open] summary {
|
||||
border-bottom: 1px solid #ffffff1c;
|
||||
}
|
||||
|
||||
.sidebar summary:hover {
|
||||
background-color: #ffffff13;
|
||||
}
|
||||
|
||||
.sidebar ul li {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.sidebar li a[aria-current="page"]:hover,
|
||||
.starlight__on-this-page li:hover {
|
||||
padding-left: .7rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
starlight-toc li a:hover {
|
||||
padding-left: .7rem;
|
||||
background-color: #ffffff13;
|
||||
}
|
||||
|
||||
.sidebar li a[aria-current="page"],
|
||||
.starlight-toc li a[aria-current="page"],
|
||||
.starlight__on-this-page li {
|
||||
animation: menu 0.6s;
|
||||
}
|
||||
|
||||
.main-pane {
|
||||
animation: fade 0.8s;
|
||||
}
|
||||
|
||||
.sidebar li a:hover,
|
||||
.sidebar .summary:hover {
|
||||
padding-left: .7rem;
|
||||
background-color: #ffffff13;
|
||||
}
|
||||
|
||||
.sidebar li a:active {
|
||||
padding-left: .9rem;
|
||||
background-color: #ffffff1a;
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
margin-left: 1rem;
|
||||
border-bottom: 1px solid #ffffff0e;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.content details {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
@@ -176,55 +84,6 @@ starlight-toc li a:hover {
|
||||
color: var(--sl-color-white) !important;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #fffb00;
|
||||
color: #3f2900;
|
||||
}
|
||||
|
||||
.heading-link {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.content a,
|
||||
.link {
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 2px;
|
||||
text-underline-offset: .2rem;
|
||||
transition: all .15s ease;
|
||||
}
|
||||
|
||||
.content a:hover,
|
||||
.link:hover {
|
||||
text-decoration-thickness: 3px;
|
||||
text-underline-offset: .4rem;
|
||||
}
|
||||
|
||||
site-search button {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.link:focus,
|
||||
a.button:focus,
|
||||
.content a:focus,
|
||||
button:focus,
|
||||
img:focus,
|
||||
input[type=email]:focus,
|
||||
input[type=image]:focus,
|
||||
input[type=search]:focus,
|
||||
input[type=submit]:focus,
|
||||
input[type=tel]:focus,
|
||||
input[type=text]:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
transition: all .15s ease;
|
||||
border-radius: 0;
|
||||
-webkit-box-shadow: 0 0 0 2px #00000000, 0 0 0 4px #00000000, 0 0 0 5px #fff;
|
||||
box-shadow: 0 0 0 2px #00000000, 0 0 0 4px #00000000, 0 0 0 5px #fff;
|
||||
-webkit-box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #00000000, 0 0 0 4px #1b1e23, 0 0 0 5px #fff);
|
||||
box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #00000000, 0 0 0 4px #1b1e23, 0 0 0 5px #fff);
|
||||
outline: none
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -235,35 +94,35 @@ textarea:focus {
|
||||
z-index: -1;
|
||||
opacity: 0.7;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(-90deg, rgba(192, 192, 192, .2) 1px, transparent 1px),
|
||||
linear-gradient(rgba(192, 192, 192, .2) 1px, transparent 1px),
|
||||
linear-gradient(-90deg, rgba(192, 192, 192, .1) 1px, transparent 1px),
|
||||
linear-gradient(rgba(192, 192, 192, .1) 1px, transparent 1px),
|
||||
linear-gradient(transparent 6px, transparent 6px, transparent 156px, transparent 156px),
|
||||
linear-gradient(-90deg, rgba(192, 192, 192, .1) 1px, transparent 1px),
|
||||
linear-gradient(-90deg, transparent 6px, transparent 6px, transparent 156px, transparent 156px),
|
||||
linear-gradient(rgba(192, 192, 192, .1) 1px, transparent 1px),
|
||||
transparent;
|
||||
background-size:
|
||||
32px 32px, 32px 32px,
|
||||
256px 256px, 256px 256px,
|
||||
256px 256px, 256px 256px,
|
||||
256px 256px, 256px 256px;
|
||||
|
||||
background: linear-gradient(
|
||||
-90deg,
|
||||
rgba(192, 192, 192, 0.2) 1px,
|
||||
transparent 1px
|
||||
),
|
||||
linear-gradient(rgba(192, 192, 192, 0.2) 1px, transparent 1px),
|
||||
linear-gradient(-90deg, rgba(192, 192, 192, 0.1) 1px, transparent 1px),
|
||||
linear-gradient(rgba(192, 192, 192, 0.1) 1px, transparent 1px),
|
||||
linear-gradient(
|
||||
transparent 6px,
|
||||
transparent 6px,
|
||||
transparent 156px,
|
||||
transparent 156px
|
||||
),
|
||||
linear-gradient(-90deg, rgba(192, 192, 192, 0.1) 1px, transparent 1px),
|
||||
linear-gradient(
|
||||
-90deg,
|
||||
transparent 6px,
|
||||
transparent 6px,
|
||||
transparent 156px,
|
||||
transparent 156px
|
||||
),
|
||||
linear-gradient(rgba(192, 192, 192, 0.1) 1px, transparent 1px), transparent;
|
||||
background-size: 32px 32px, 32px 32px, 256px 256px, 256px 256px, 256px 256px,
|
||||
256px 256px, 256px 256px, 256px 256px;
|
||||
}
|
||||
|
||||
.bg-logo {
|
||||
width: 60vh;
|
||||
height: 60vh;
|
||||
position: absolute;
|
||||
top: 7%;
|
||||
left: 45%;
|
||||
z-index: -1;
|
||||
.hero > img {
|
||||
opacity: 0.3;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 200 224' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M139.3 81.7a21.1 21.1 0 1 1-42.3 0 21.1 21.1 0 0 1 42.3 0ZM103 142.3a21.1 21.1 0 1 1-42.2 0 21.1 21.1 0 0 1 42.2 0Zm-102.5 0c0-39 27.5-71.5 64.1-79.4a58 58 0 0 0-3 25 58 58 0 1 0 67.4 88.3 95.5 95.5 0 0 0 30.2-8.6A81.4 81.4 0 0 1 .5 142.3Zm199-60.6c0 39-27.5 71.5-64.1 79.4a58 58 0 0 0 3-25A58 58 0 1 0 71 47.7a95.5 95.5 0 0 0-30.2 8.6 81.4 81.4 0 0 1 158.7 25.3Z' stroke='%23fff'/%3E%3C/svg%3E");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
animation: 3s intro;
|
||||
}
|
||||
|
||||
@@ -273,8 +132,12 @@ textarea:focus {
|
||||
left: 50%;
|
||||
width: 150vh;
|
||||
height: 150vh;
|
||||
opacity: .3;
|
||||
background: radial-gradient(circle, rgba(2, 87, 247, 1) 0%, rgba(0, 0, 0, 0) 70%);
|
||||
opacity: 0.3;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(2, 87, 247, 1) 0%,
|
||||
rgba(0, 0, 0, 0) 70%
|
||||
);
|
||||
animation: 6s intro;
|
||||
}
|
||||
|
||||
@@ -284,8 +147,12 @@ textarea:focus {
|
||||
left: -50%;
|
||||
width: 150vh;
|
||||
height: 150vh;
|
||||
opacity: .3;
|
||||
background: radial-gradient(circle, rgb(247, 169, 2) 0%, rgba(0, 0, 0, 0) 70%);
|
||||
opacity: 0.3;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgb(247, 169, 2) 0%,
|
||||
rgba(0, 0, 0, 0) 70%
|
||||
);
|
||||
animation: 14s intro;
|
||||
}
|
||||
|
||||
@@ -295,33 +162,12 @@ textarea:focus {
|
||||
opacity: 0%;
|
||||
}
|
||||
|
||||
100% {}
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
0% {
|
||||
transform: translateY(0.6rem);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes menu {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(.7rem);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
* {
|
||||
transition: none !important
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user