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> <template>
<NavigationMenu/> <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/> <router-view/>
</div> </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 <router-link
v-for="item in items" v-for="item in items"
:key="item.to" :key="item.to"
@ -24,15 +24,13 @@
@apply bg-blue-900 bg-opacity-80 text-white; @apply bg-blue-900 bg-opacity-80 text-white;
} }
.asterisk-list > li { ._content {
&:not(:last-child) { min-height: calc(100vh - 80px);
margin-bottom: 5px; }
}
&::before { @screen sm {
@apply text-blue-900; ._content {
content: "*"; min-height: calc(100vh - 160px);
margin-right: 5px;
} }
} }
</style> </style>

12
src/main.css
View file

@ -24,4 +24,16 @@
@apply not-italic text-lg max-w-240; @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> <template>
<main class="flex -md:flex-col justify-between items-start md:items-center min-h-80vh"> <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="_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 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> </div>
@ -26,18 +26,20 @@
<span class="mr-2">→</span> {{ t("contact_me") }} <span class="mr-2">→</span> {{ t("contact_me") }}
</router-link> </router-link>
</div> </div>
<BlurredBlobCanvas <div class="self-center -md:fixed -bottom-30">
class="_fade-1 self-center" <BlurredBlobCanvas
:colors="['#6577fc', '#eb34cf', '#6577fc', '#eb34cf']" class="_fade-1"
:size="350" :colors="['#6577fc', '#eb34cf', '#6577fc', '#eb34cf']"
:blur="30" :size="350"
:minimum-duration="1000" :blur="30"
:duration-variation="1500" :minimum-duration="1000"
:minimum-opacity="0.2" :duration-variation="1500"
:opacity-variation="0.4" :minimum-opacity="0.2"
:points="10" :opacity-variation="0.4"
:randomness="80" :points="10"
/> :randomness="80"
/>
</div>
</main> </main>
</template> </template>