diff options
Diffstat (limited to 'src/site/components/logo')
| -rw-r--r-- | src/site/components/logo/Logo.vue | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/src/site/components/logo/Logo.vue b/src/site/components/logo/Logo.vue new file mode 100644 index 0000000..d594c7e --- /dev/null +++ b/src/site/components/logo/Logo.vue @@ -0,0 +1,59 @@ +<style lang="scss" scoped> + @import '../../styles/_colors.scss'; + #logo { + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; + -webkit-animation-duration: 1.5s; + animation-duration: 1.5s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-name: floatUp; + animation-name: floatUp; + -webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); + animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); + border-radius: 24px; + display: inline-block; + height: 240px; + position: relative; + vertical-align: top; + width: 240px; + box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2); + background: $backgroundAccent; + pointer-events: none; + } + + #logo img { + height: 200px; + margin-top: 20px; + } + + @keyframes floatUp { + 0% { + opacity: 0; + box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0); + -webkit-transform: scale(0.86); + transform: scale(0.86); + } + 25% { opacity: 100; } + 67% { + box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2); + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2); + -webkit-transform: scale(1); + transform: scale(1); + } + } +</style> + +<template> + <p id="logo"> + <img src="../../../../public/images/logo.png"> + </p> +</template> + +<script> +export default {}; +</script> |