SebinNyshkim/viktor-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add WelcomeHeader component

Browse source
This commit is contained in:
Sebin Nyshkim 2022-09-29 02:38:18 +02:00
parent 6548750aa2
commit 852246e148
1 changed files with 105 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

105
src/components/WelcomeHeader.vue Normal file
View file

@ -0,0 +1,105 @@
<template>
<header class="welcome">
<div class="welcome__image">
<div class="welcome__image-wrapper">
<picture>
<source
srcset="@/assets/viktor-avatar.png?w=400;800&avif&quality=75&srcset"
/>
<source
srcset="
@/assets/viktor-avatar.png?w=400;800&webp&quality=100&srcset
"
/>
<img
class="welcome__image-img"
src="@/assets/viktor-avatar.png?w=400&png"
alt="Viktor Avatar"
/>
</picture>
</div>
</div>
<div class="welcome__heading">
<h1 class="welcome__main">
<slot name="main"></slot>
</h1>
<h2 class="welcome__sub">
<slot name="sub"></slot>
</h2>
</div>
</header>
</template>
<style lang="scss">
.welcome {
display: flex;
flex-flow: row wrap;
justify-content: center;
max-width: 50rem;
margin: 2rem auto;
padding: var(--textblock-padding);
transition: 0.2s ease-out;
&:hover &__image-wrapper {
@media (min-width: 50em) {
transform: scale(0.84) translateX(15%) rotateZ(0);
}
}
&:hover &__image-img {
@media (min-width: 50em) {
transform: scale(1.2) rotateZ(0);
}
}
&:hover &__heading {
@media (min-width: 50em) {
margin: 4.75rem 0 0 2rem;
}
}
&__image {
flex: 0 0 15rem;
}
&__heading {
flex: 1 0 0;
text-align: center;
line-height: 1.6;
margin: 2rem 0 0 0;
transition: 0.2s ease-out;
@media (min-width: 50em) {
text-align: left;
margin: 2rem 0 0 4rem;
}
}
&__image-wrapper {
background-color: var(--theme-c-desert-sand-translucent);
border: 0.5rem solid var(--theme-c-walnut-brown);
border-radius: 2rem;
transform: scale(0.84) translateX(15%) rotateZ(calc(-1 * (11 * 1deg)));
transform-origin: 0 100%;
overflow: hidden;
transition: transform 0.2s ease-out;
}
&__image-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.2) rotateZ(calc(11 * 1deg));
transition: transform 0.2s ease-out;
}
&__main {
margin: 1rem 0;
line-height: 1;
}
}
</style>