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>
<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>
<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 src="@/assets/viktor-avatar.png?w=400&png" alt="Viktor Avatar" />
</picture>
</div>
<div class="welcome__heading">
<h1 class="welcome__main">
<h1 class="welcome__mainline">
<slot name="main"></slot>
</h1>
<h2 class="welcome__sub">
<h2 class="welcome__subline">
<slot name="sub"></slot>
</h2>
</div>
@ -35,68 +27,46 @@
.welcome {
display: flex;
flex-flow: row wrap;
justify-content: center;
justify-content: space-evenly;
align-items: var(--welcome-headings-align-items);
width: 100%;
max-width: 50rem;
margin: 2rem auto;
padding: var(--textblock-padding);
margin: 0 auto;
padding: var(--welcome-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;
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 {
flex: 1 0 0;
text-align: center;
flex: 0 1 auto;
text-align: var(--welcome-headings-text-align);
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 {
&__mainline {
margin: 1rem 0;
line-height: 1;
}