Add custom CSS file for styling hero elements

This commit is contained in:
Moritz Hölting 2024-04-03 13:57:10 +02:00
parent 17b38c7449
commit 83a7970cca
2 changed files with 9 additions and 0 deletions

View File

@ -32,6 +32,7 @@ export default defineConfig({
editLink: { editLink: {
baseUrl: 'https://github.com/moritz-hoelting/shulkerscript-webpage/edit/main', baseUrl: 'https://github.com/moritz-hoelting/shulkerscript-webpage/edit/main',
}, },
customCss: ['./src/styles/style.css'],
plugins: [starlightLinksValidator({ plugins: [starlightLinksValidator({
errorOnFallbackPages: false, errorOnFallbackPages: false,
})], })],

8
src/styles/style.css Normal file
View File

@ -0,0 +1,8 @@
:root {
--purple-hsl: 255, 60%, 60%;
--overlay-blurple: hsla(var(--purple-hsl), .2);
}
[data-has-hero] .page {
background: linear-gradient(215deg,var(--overlay-blurple),transparent 40%),radial-gradient(var(--overlay-blurple),transparent 40%) no-repeat -30vw -20vh / 105vw 200vh,radial-gradient(var(--overlay-blurple),transparent 65%) no-repeat 50% calc(100% + 20rem) / 60rem 30rem
}