github-starred/Socio
2
0
Fork 0
mirror of https://github.com/Rolands-Laucis/Socio.git synced 2026-05-15 14:15:57 -06:00
Code Issues Projects Packages Wiki Activity Actions

page corner blobs

Browse source
This commit is contained in:
Rolands 2023-01-06 16:26:50 +02:00
parent 3c5eb3f0cf
commit de001280e3
2 changed files with 56 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

12
demos/full-stack_framework/src/app.scss
View file

@ -5,9 +5,8 @@
html, body{
width: 100vw;
height: 100vh;
// background-color: black;
background: radial-gradient(50% 50% at 50% 50%, #07071D 0%, #07070C 100%);
background-color: black;
color: $light;
color-scheme: dark;
@ -29,6 +28,13 @@ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, a, html, body, button,
margin-block-start:0px;
margin-block-end:0px;
}
body{
background: radial-gradient(50% 50% at 50% 50%, #07071D 0%, #07070C 100%);
padding: 24px;
width: calc(100% - 48px);
height: calc(100% - 48px);
position: relative;
}
h1,.h1{font-size: 73.24px; font-weight: 700;}
h2,.h2{font-size: 46.88px;}

58
demos/full-stack_framework/src/routes/+layout.svelte
View file

@ -1,18 +1,54 @@
<script>
import "../app.scss";
import Nav from "./nav.svelte";
import "../app.scss";
import Nav from "./nav.svelte";
import { Toaster } from 'svelte-french-toast';
import { Toaster } from "svelte-french-toast";
</script>
<main>
<Toaster></Toaster>
<Nav></Nav>
<slot />
<Toaster />
<Nav />
<slot />
</main>
<style>
main{
padding: 24px;
}
</style>
<div class="blobs">
<div class="blob"></div>
<div class="blob"></div>
</div>
<style lang="scss">
main {
width: 100%;
height: auto;
}
.blobs{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
.blob{
position: absolute;
aspect-ratio: 1/1;
width: 150px;
border-radius: 50%;
filter: blur(150px);
background-color: $acc2;
top:100%;
left: 0px;
transform: translate(-50%, -50%);
&:nth-child(2){
left:100%;
top: 0px;
background-color: $acc1;
}
}
}
</style>