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

refactor: simplify WelcomeHeader component

Browse source
This commit is contained in:
Sebin Nyshkim 2023-01-19 22:04:46 +01:00
parent 782046efa6
commit 9cb9bed431
1 changed files with 39 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

108
src/components/WelcomeHeader.vue
View file

@ -1,30 +1,22 @@
<template> <template>
<header class="welcome"> <header class="welcome">
<div class="welcome__image"> <div class="welcome__image">
<div class="welcome__image-wrapper"> <picture>
<picture> <source
<source srcset="@/assets/viktor-avatar.png?w=400;800&avif&quality=75&srcset"
srcset="@/assets/viktor-avatar.png?w=400;800&avif&quality=75&srcset" />
/> <source
<source srcset="@/assets/viktor-avatar.png?w=400;800&webp&quality=100&srcset"
srcset=" />
@/assets/viktor-avatar.png?w=400;800&webp&quality=100&srcset <img src="@/assets/viktor-avatar.png?w=400&png" alt="Viktor Avatar" />
" </picture>
/>
<img
class="welcome__image-img"
src="@/assets/viktor-avatar.png?w=400&png"
alt="Viktor Avatar"
/>
</picture>
</div>
</div> </div>
<div class="welcome__heading"> <div class="welcome__heading">
<h1 class="welcome__main"> <h1 class="welcome__mainline">
<slot name="main"></slot> <slot name="main"></slot>
</h1> </h1>
<h2 class="welcome__sub"> <h2 class="welcome__subline">
<slot name="sub"></slot> <slot name="sub"></slot>
</h2> </h2>
</div> </div>
@ -35,68 +27,46 @@
.welcome { .welcome {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: center; justify-content: space-evenly;
align-items: var(--welcome-headings-align-items);
width: 100%;
max-width: 50rem; max-width: 50rem;
margin: 2rem auto;
padding: var(--textblock-padding); margin: 0 auto;
padding: var(--welcome-padding);
transition: 0.2s ease-out; 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 { &__image {
flex: 0 0 15rem; flex: 0 1 15rem;
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;
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.2) rotateZ(calc(11 * 1deg));
}
} }
&__heading { &__heading {
flex: 1 0 0; flex: 0 1 auto;
text-align: center; text-align: var(--welcome-headings-text-align);
line-height: 1.6; line-height: 1.6;
margin: 2rem 0 0 0;
transition: 0.2s ease-out; transition: 0.2s ease-out;
@media (min-width: 50em) {
text-align: left;
margin: 2rem 0 0 4rem;
}
} }
&__image-wrapper { &__mainline {
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; margin: 1rem 0;
line-height: 1; line-height: 1;
} }