layout, pageClass, hero, features
| layout |
pageClass |
hero |
features |
| home |
home-page |
| name |
text |
tagline |
image |
actions |
| Astal |
Library and Framework for building Desktop Shells |
The best way to make <i>beautiful</i> <b>and</b> <i>functional</i> wayland widgets! |
/front-image.png |
| theme |
text |
link |
| brand |
What is Astal? |
/getting-started/introduction |
|
| theme |
text |
link |
| alt |
Get Started |
/getting-started/installation |
|
| theme |
text |
link |
| alt |
References |
/libraries/references |
|
|
|
| title |
icon |
details |
| Use Your Preferred Language |
<i style="color:var(--vp-c-brand-3)" class="devicon-typescript-plain"></i> |
The main focus of Astal is TypeScript using JSX. But you can use the libraries in any language that supports <a href="https://en.wikipedia.org/wiki/List_of_language_bindings_for_GTK">Gobject Introspection</a>. |
|
| title |
icon |
details |
| No bash scripts needed |
<i style="color:var(--vp-c-brand-3)" class="devicon-bash-plain"></i> |
Includes modules to work with Network, Bluetooth, Battery, Audio and more. |
|
| title |
icon |
details |
| Use any Gtk widget |
<i style="color:var(--vp-c-brand-3)" class="fl-gtk"></i> |
With Astal you work with Gtk directly. You are not limited to only a set of them. |
|
|
<script setup>
import Showcases from './showcases/Showcases.vue'
</script>
<style>
:root {
--vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-brand-1), var(--vp-c-brand-3));
}
:root {
--overlay-gradient: color-mix(in srgb, var(--vp-c-brand-1), transparent 55%);
}
.dark {
--overlay-gradient: color-mix(in srgb, var(--vp-c-brand-1), transparent 85%);
}
.home-page {
background:
linear-gradient(215deg, var(--overlay-gradient), transparent 40%),
radial-gradient(var(--overlay-gradient), transparent 40%) no-repeat -60vw -40vh / 105vw 200vh,
radial-gradient(var(--overlay-gradient), transparent 65%) no-repeat 50% calc(100% + 20rem) / 60rem 30rem;
.VPFeature a {
font-weight: bold;
}
.VPNavBar {
background-color: transparent !important;
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
div.divider {
display: none;
}
}
}
</style>
