moritzruth/moritzruth.de
1
0
Fork 0
Code Activity Actions

Improve blob placement

Browse source
This commit is contained in:
Moritz Ruth 2021-08-07 16:41:10 +02:00
parent e8530cc991
commit ae1da673b7
No known key found for this signature in database
GPG key ID: AFD57E23E753841B
3 changed files with 35 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/App.vue
View file

@ -1,9 +1,9 @@
<template>
<NavigationMenu/>
<div class="bg-white text-black max-w-1200px w-full mx-auto px-6 sm:px-10" style="min-height: calc(100vh - 160px)">
<div class="bg-white text-black max-w-1200px w-full mx-auto px-6 sm:px-10 _content">
<router-view/>
</div>
<div class="w-full h-20 space-x-10 flex items-center justify-center">
<div class="w-full h-20 space-x-10 flex items-center justify-center relative z-2">
<router-link
v-for="item in items"
:key="item.to"
@ -24,15 +24,13 @@
@apply bg-blue-900 bg-opacity-80 text-white;
}
.asterisk-list > li {
&:not(:last-child) {
margin-bottom: 5px;
}
._content {
min-height: calc(100vh - 80px);
}
&::before {
@apply text-blue-900;
content: "*";
margin-right: 5px;
@screen sm {
._content {
min-height: calc(100vh - 160px);
}
}
</style>

12
src/main.css
View file

@ -24,4 +24,16 @@
@apply not-italic text-lg max-w-240;
}
}
.asterisk-list > li {
&:not(:last-child) {
margin-bottom: 5px;
}
&::before {
@apply text-blue-900;
content: "*";
margin-right: 5px;
}
}
}

28
src/pages/index.vue
View file

@ -1,6 +1,6 @@
<template>
<main class="flex -md:flex-col justify-between items-start md:items-center min-h-80vh">
<div class="relative -md:pt-20vh -md:pb-20">
<div class="relative -md:pt-20vh">
<div class="_fade-2">
<div class="_pattern transform rotate-179.5 absolute w-full h-35 -left-4 md:-left-10 top-20vh -md:-mt-10 md:-top-15 opacity-3 md:opacity-5"/>
</div>
@ -26,18 +26,20 @@
<span class="mr-2">→</span> {{ t("contact_me") }}
</router-link>
</div>
<BlurredBlobCanvas
class="_fade-1 self-center"
:colors="['#6577fc', '#eb34cf', '#6577fc', '#eb34cf']"
:size="350"
:blur="30"
:minimum-duration="1000"
:duration-variation="1500"
:minimum-opacity="0.2"
:opacity-variation="0.4"
:points="10"
:randomness="80"
/>
<div class="self-center -md:fixed -bottom-30">
<BlurredBlobCanvas
class="_fade-1"
:colors="['#6577fc', '#eb34cf', '#6577fc', '#eb34cf']"
:size="350"
:blur="30"
:minimum-duration="1000"
:duration-variation="1500"
:minimum-opacity="0.2"
:opacity-variation="0.4"
:points="10"
:randomness="80"
/>
</div>
</main>
</template>