mirror of
https://github.com/centau/vide.git
synced 2026-08-20 14:41:37 +00:00
Update Banner
This commit is contained in:
alice
parent
08d10184fb
commit
452ae8288b
2 changed files with 67 additions and 63 deletions
|
|
@ -1,19 +1,39 @@
|
|||
|
||||
.VPSkipLink {
|
||||
order: -3
|
||||
}
|
||||
|
||||
.VPNav {
|
||||
order: -2
|
||||
}
|
||||
|
||||
.VPLocalNav {
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.banner {
|
||||
background-color: var(--vp-button-brand-bg);
|
||||
color: var(--vp-button-brand-text);
|
||||
width: 100%;
|
||||
height: 1.5rem;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
z-index: 30;
|
||||
bottom: 0px;
|
||||
z-index: 50;
|
||||
order: -1
|
||||
}
|
||||
|
||||
.VPNav {
|
||||
margin-top: 1.5rem;
|
||||
.advertising {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.VPSidebar {
|
||||
margin-top: 1.5rem;
|
||||
@media only screen and (min-width: 768px) {
|
||||
.advertising {width: calc(100% - 8rem);}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 960px) {
|
||||
.banner {position: fixed; margin-top: var(--vp-nav-height); bottom: auto}
|
||||
#VPSidebarNav {margin-top: 1.5rem;}
|
||||
.VPLocalNav {top: calc(var(--vp-nav-height) + 1.5rem) !important;}
|
||||
}
|
||||
|
||||
.plugin-tabs--tab-list {
|
||||
|
|
@ -29,13 +49,6 @@
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
#VPContent.is-home {
|
||||
background-color: rgba(255, 255, 255, 0%);
|
||||
background-image: radial-gradient(
|
||||
var(--vp-c-brand-2), var(--vp-c-bg)
|
||||
);
|
||||
}
|
||||
|
||||
:root {
|
||||
--vp-c-brand-1: #3086ff;
|
||||
--vp-c-brand-2: #75aeff;
|
||||
|
|
@ -48,11 +61,6 @@
|
|||
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #3661A2, #4896F3);
|
||||
--vp-home-hero-logo-background: -webkit-linear-gradient(120deg, #3661A2, #4896F3);
|
||||
|
||||
--vp-home-hero-image-background-image: linear-gradient(
|
||||
135deg,
|
||||
#1D314F 50%,
|
||||
#2A57A2 50%
|
||||
);
|
||||
--vp-home-hero-image-filter: blur(96px);
|
||||
|
||||
--vp-c-bg: #f2f5f8;
|
||||
|
|
@ -76,10 +84,4 @@
|
|||
--vp-c-border: #111720;
|
||||
--vp-c-divider: #1d273c;
|
||||
--vp-c-gutter: #181d27;
|
||||
|
||||
--vp-home-hero-image-background-image: linear-gradient(
|
||||
-45deg,
|
||||
#3D506C 50%,
|
||||
#2F415C 50%
|
||||
);
|
||||
}
|
||||
|
|
@ -6,73 +6,75 @@ next:
|
|||
link: '/tut/crash-course/1-introduction'
|
||||
|
||||
hero:
|
||||
name: Vide
|
||||
text: ""
|
||||
name: "Vide"
|
||||
tagline: A reactive UI and state library for Luau.
|
||||
image:
|
||||
src: /logo.svg
|
||||
alt: Vide
|
||||
actions:
|
||||
- theme: brand
|
||||
text: Quick Start
|
||||
text: Crash Course
|
||||
link: /tut/crash-course/1-introduction
|
||||
- theme: alt
|
||||
text: API Reference
|
||||
link: /api/reactivity-core
|
||||
|
||||
features:
|
||||
- title: Reactively driven
|
||||
details: Powerful and modern primitives inspired by SolidJS to build fluid UI with little friction
|
||||
- title: Declarative and concise
|
||||
details: Syntax built to be minimal and clean while also obvious and easy to understand to anyone
|
||||
- title: Fully Luau Typecheckable
|
||||
details: Ensure you write correct and robust code through the Luau typechecking engine.
|
||||
- title: Reactive State Management
|
||||
details: Built upon Solid and makes building reactive applications simple.
|
||||
- title: Declarative and simple syntax
|
||||
details: Syntax designed to be minimal while also being easy to understand.
|
||||
- title: Fully Luau typecheckable
|
||||
details: Luau's typechecker catches type errors before you even begin testing.
|
||||
---
|
||||
|
||||
<div class="advertising">
|
||||
|
||||
## Installation
|
||||
|
||||
Vide can be installed through 3 different ways.
|
||||
Vide can be installed via Wally and Github. There is currently no official Vide rbxm.
|
||||
|
||||
:::tabs
|
||||
== Wally
|
||||
|
||||
Make sure you have wally installed on your computer.<br>
|
||||
Add the following line to your `wally.toml` and then re-install your packages
|
||||
```toml
|
||||
[dependencies]
|
||||
vide = centau/vide@0.3.1
|
||||
```
|
||||
|
||||
== Roblox
|
||||
== Git
|
||||
|
||||
im so sorry you have to use rojo and build it yourself or ask someone in ross to build a vide rbxm for you :sob:
|
||||
cen is too busy working on system verilog
|
||||
Make sure you have Git installed on your computer.<br>
|
||||
Run the following command in the directory you want to have Vide installed at
|
||||
```sh
|
||||
git submodule add https://github.com/centau/vide.git
|
||||
```
|
||||
|
||||
== Build
|
||||
|
||||
Download vide onto your computer
|
||||
|
||||
```sh
|
||||
git clone https://github.com/centau/vide.git & cd vide
|
||||
```
|
||||
|
||||
then use a syncing tool to build Vide into a rbxm
|
||||
|
||||
```sh
|
||||
rojo build -o build.rbxm
|
||||
```
|
||||
|
||||
which you can then insert into Roblox Studio
|
||||
|
||||
:::
|
||||
|
||||
## Quick Examples
|
||||
<script setup>
|
||||
import { VPButton } from "vitepress/theme"
|
||||
</script>
|
||||
|
||||
A simple counter element that counts up when you click on it.
|
||||
<div style="display: flex; justify-content: end;">
|
||||
<VPButton href="/tut/crash-course/1-introduction" text="Read the crash Course"/>
|
||||
</div>
|
||||
|
||||
```luau
|
||||
local vide = require("vide")
|
||||
|
||||
local source = vide.source
|
||||
local create = vide.create
|
||||
|
||||
local function Counter()
|
||||
local count = source(0)
|
||||
|
||||
return create "TextButton" {
|
||||
Size = UDim2.fromOffset(200, 50),
|
||||
Text = function()
|
||||
return `count: {count()}`
|
||||
end,
|
||||
|
||||
Activated = function()
|
||||
count(count() + 1)
|
||||
end
|
||||
}
|
||||
end
|
||||
|
||||
return Counter
|
||||
```
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue