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

Remove logo gradient

Browse source
This commit is contained in:
Moritz Ruth 2020-05-19 18:28:46 +02:00
parent fb9a23543f
commit e7ff2455e3
No known key found for this signature in database
GPG key ID: AFD57E23E753841B
1 changed files with 27 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

74
components/AnimatedLogo.vue
View file

@ -1,33 +1,31 @@
<template> <template>
<div class="animated-logo"> <div class="animated-logo">
<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">
<svg class="animated-logo__svg" xmlns="http://www.w3.org/2000/svg" viewBox="76.75 182.661 358.5 146.679"> <path
<path class="animated-logo__m1"
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 "
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-rule="evenodd" fill="currentColor"
fill="currentColor" />
/> <path
<path class="animated-logo__m2"
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 "
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-rule="evenodd" fill="currentColor"
fill="currentColor" />
/> <path
<path class="animated-logo__r1"
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 "
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-rule="evenodd" fill="currentColor"
fill="currentColor" />
/> <path
<path class="animated-logo__r2"
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 "
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-rule="evenodd" fill="currentColor"
fill="currentColor" />
/> </svg>
</svg>
</div>
<div class="animated-logo__name"> <div class="animated-logo__name">
Moritz Ruth Moritz Ruth
</div> </div>
@ -52,27 +50,9 @@
padding: 40px 40px 30px; padding: 40px 40px 30px;
} }
.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 { .animated-logo__svg {
width: 100%; width: 100%;
color: colors.$background-c;
margin-bottom: 20px; margin-bottom: 20px;
animation: scaleUp $scale-up-duration ease-out both; animation: scaleUp $scale-up-duration ease-out both;