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

Redesign (again...)

Browse source 
Black -> white
This commit is contained in:
Moritz Ruth 2020-05-19 18:23:52 +02:00
parent f35cf47a8b
commit 3aa23732fa
No known key found for this signature in database
GPG key ID: AFD57E23E753841B
19 changed files with 329 additions and 340 deletions
Download patch file Download diff file Expand all files Collapse all files

95
components/AnimatedLogo.vue
View file

@ -1,31 +1,33 @@
<template>
<div class="animated-logo">
<svg class="animated-logo__svg" xmlns="http://www.w3.org/2000/svg" viewBox="76.75 182.661 358.5 146.679">
<path
class="animated-logo__m1"
d=" M 121.75 182.749 L 166.75 329.339 L 76.75 329.339 L 121.75 182.749 Z "
fill-rule="evenodd"
fill="currentColor"
/>
<path
class="animated-logo__m2"
d=" M 206.75 182.749 L 251.75 329.339 L 161.75 329.339 L 206.75 182.749 Z "
fill-rule="evenodd"
fill="currentColor"
/>
<path
class="animated-logo__r1"
d=" M 327.25 182.705 L 372.25 329.295 L 282.25 329.295 L 327.25 182.705 Z "
fill-rule="evenodd"
fill="currentColor"
/>
<path
class="animated-logo__r2"
d=" M 390.537 329.339 L 345.25 182.837 L 435.25 182.661 L 390.537 329.339 Z "
fill-rule="evenodd"
fill="currentColor"
/>
</svg>
<div class="animated-logo__logo">
<svg class="animated-logo__svg" xmlns="http://www.w3.org/2000/svg" viewBox="76.75 182.661 358.5 146.679">
<path
class="animated-logo__m1"
d=" M 121.75 182.749 L 166.75 329.339 L 76.75 329.339 L 121.75 182.749 Z "
fill-rule="evenodd"
fill="currentColor"
/>
<path
class="animated-logo__m2"
d=" M 206.75 182.749 L 251.75 329.339 L 161.75 329.339 L 206.75 182.749 Z "
fill-rule="evenodd"
fill="currentColor"
/>
<path
class="animated-logo__r1"
d=" M 327.25 182.705 L 372.25 329.295 L 282.25 329.295 L 327.25 182.705 Z "
fill-rule="evenodd"
fill="currentColor"
/>
<path
class="animated-logo__r2"
d=" M 390.537 329.339 L 345.25 182.837 L 435.25 182.661 L 390.537 329.339 Z "
fill-rule="evenodd"
fill="currentColor"
/>
</svg>
</div>
<div class="animated-logo__name">
Moritz Ruth
</div>
@ -36,20 +38,37 @@
@use "~@/assets/styles/colors";
$scale-up-duration: 800ms;
$slide-duration: 1000ms;
$slide-delay: $scale-up-duration / 2;
$slide-delay: 200ms;
$slide-duration: 800ms;
$fade-duration: 400ms;
$fade-delay: $slide-delay + 300ms;
$slide-length: 37.5%;
$border-show-delay: $fade-delay + $fade-duration;
$fade-name-delay: $fade-delay;
$fade-name-duration: 300ms;
.animated-logo {
width: 300px;
max-width: 60vw;
padding: 40px 40px 30px;
}
background: transparentize(colors.$background, 0.5);
.animated-logo__logo {
position: relative;
color: colors.$background-c;
&::after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(90deg, colors.$blue, colors.$pink 80%);
pointer-events: none;
mix-blend-mode: lighten;
}
}
.animated-logo__svg {
@ -59,12 +78,6 @@
animation: scaleUp $scale-up-duration ease-out both;
}
.animated-logo__name {
font-size: 2rem;
animation: fadeIn $slide-duration $scale-up-duration ease both;
text-align: center;
}
.animated-logo__m1, .animated-logo__r2 {
animation: slideFromRight $slide-duration $slide-delay ease both;
}
@ -75,12 +88,19 @@
.animated-logo__m2, .animated-logo__r1 {
animation: fadeIn $fade-duration $fade-delay ease both;
transform: translateX(5px);
}
.animated-logo__m2 {
animation-delay: $fade-delay + 100ms;
}
.animated-logo__name {
font-size: 2rem;
animation: fadeIn $fade-name-duration $fade-name-delay ease both;
text-align: center;
}
@keyframes scaleUp {
from {
transform: scale(0);
@ -124,7 +144,6 @@
<script>
export default {
name: "AnimatedLogo",
components: { }
name: "AnimatedLogo"
};
</script>