Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-18 06:44:46 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Update logo

Browse source
This commit is contained in:
Sam Carlton 2020-09-19 17:05:57 -05:00
parent 75cecf6d62
commit 7d880ce097
2 changed files with 7 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

82
components/Logo.vue
View file

@ -1,79 +1,7 @@
<template> <template>
<div class="VueToNuxtLogo"> <div
<div class="Triangle Triangle--two"/> :style="{
<div class="Triangle Triangle--one"/> fontSize: '10rem'
<div class="Triangle Triangle--three"/> }"
<div class="Triangle Triangle--four"/> >🦾</div>
</div>
</template> </template>
<style>
.VueToNuxtLogo {
display: inline-block;
animation: turn 2s linear forwards 1s;
transform: rotateX(180deg);
position: relative;
overflow: hidden;
height: 180px;
width: 245px;
}
.Triangle {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
}
.Triangle--one {
border-left: 105px solid transparent;
border-right: 105px solid transparent;
border-bottom: 180px solid #41b883;
}
.Triangle--two {
top: 30px;
left: 35px;
animation: goright 0.5s linear forwards 3.5s;
border-left: 87.5px solid transparent;
border-right: 87.5px solid transparent;
border-bottom: 150px solid #3b8070;
}
.Triangle--three {
top: 60px;
left: 35px;
animation: goright 0.5s linear forwards 3.5s;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 120px solid #35495e;
}
.Triangle--four {
top: 120px;
left: 70px;
animation: godown 0.5s linear forwards 3s;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 60px solid #fff;
}
@keyframes turn {
100% {
transform: rotateX(0deg);
}
}
@keyframes godown {
100% {
top: 180px;
}
}
@keyframes goright {
100% {
left: 70px;
}
}
</style>

11
components/navbar.vue
View file

@ -46,15 +46,8 @@
</svg> </svg>
</button> </button>
</div> </div>
<div class="flex-shrink-0 flex items-center"> <div class="flex-shrink-0 flex items-center text-4xl md:text-5xl py-3">
<img <div>🦾</div>
class="block lg:hidden h-8 w-auto"
src="https://tailwindui.com/img/logos/workflow-mark-on-dark.svg"
alt="Workflow logo">
<img
class="hidden lg:block h-8 w-auto"
src="https://tailwindui.com/img/logos/workflow-logo-on-dark.svg"
alt="Workflow logo">
</div> </div>
<div class="hidden md:ml-6 md:flex md:items-center"> <div class="hidden md:ml-6 md:flex md:items-center">
<a <a