87 lines
2.1 KiB
Vue
87 lines
2.1 KiB
Vue
<template>
|
|
<div class="welcome">
|
|
<div class="welcome__image">
|
|
<!-- max 500px -->
|
|
<picture>
|
|
<source
|
|
srcset="
|
|
@/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&avif&quality=75&withoutEnlargement&srcset
|
|
"
|
|
sizes="(min-width: 120em) 280px, (min-width: 80em) 240px, (min-width: 35em) 200px, 180px"
|
|
type="image/avif"
|
|
/>
|
|
<source
|
|
srcset="
|
|
@/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&webp&quality=100&withoutEnlargement&srcset
|
|
"
|
|
sizes="(min-width: 120em) 280px, (min-width: 80em) 240px, (min-width: 35em) 200px, 180px"
|
|
type="image/webp"
|
|
/>
|
|
<img
|
|
srcset="
|
|
@/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&png&withoutEnlargement&srcset
|
|
"
|
|
sizes="(min-width: 120em) 280px, (min-width: 80em) 240px, (min-width: 35em) 200px, 180px"
|
|
alt="Sebin Avatar"
|
|
/>
|
|
</picture>
|
|
</div>
|
|
<div class="welcome__headings">
|
|
<h1 class="welcome__mainline">
|
|
<slot name="main"></slot>
|
|
</h1>
|
|
<h2 class="welcome__subline">
|
|
<slot name="sub"></slot>
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.welcome {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
|
|
max-width: 40rem;
|
|
margin: 1rem auto;
|
|
|
|
&__image {
|
|
flex: 0 0 50vw;
|
|
max-width: 10rem;
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
border-radius: 100%;
|
|
border: 0.375rem solid #fff;
|
|
box-shadow: var(--container-box-shadow);
|
|
}
|
|
}
|
|
|
|
&__headings {
|
|
flex: 0 0 100%;
|
|
max-width: 23rem;
|
|
margin: var(--welcome-header-headings-margin);
|
|
}
|
|
|
|
&__mainline,
|
|
&__subline {
|
|
font-family: 'Exo', sans-serif;
|
|
text-align: center;
|
|
font-style: italic;
|
|
margin: 0;
|
|
}
|
|
|
|
&__mainline {
|
|
font-size: var(--welcome-header-mainline-font-size);
|
|
font-weight: 900;
|
|
}
|
|
|
|
&__subline {
|
|
font-size: var(--welcome-header-subline-font-size);
|
|
font-weight: 300;
|
|
}
|
|
}
|
|
</style>
|