@ -1,109 +1,161 @@
< script >
import Image from './Image.svelte ';
import { Icon } from '@sveltejs/site-kit/components
import SvelteLogotype from './svelte-logotype.svg';
// @ts-ignore
import MachineDesktop from './svelte-machine-desktop.png?w=1200;2000;2800;4400&format=avif; webp;png;&as=picture';
// @ts-ignore
import MachineMobile from './svelte-machine-mobile.png?w=960&format=avif; webp;png;&as=picture';
import Machine from './svelte-machine.png?big-image';
const srcset = (sources) => sources.map(({ src , w } ) => `${ src } ${ w } w`).join(', ') ;
< / script >
< div class = "hero" >
< strong > Cybernetically enhanced web apps< / strong >
< Image
src={ Machine }
alt="The Svelte compiler packaging up your component code"
--max-height="60vh"
/>
< img alt = "Svelte logotype" class = "logotype" src = { SvelteLogotype } / >
< div class = "hero-content" >
< img alt = "Svelte logotype" class = "logotype" src = { SvelteLogotype } / >
< strong >
< span style = "white-space: nowrap;" > Cybernetically enhanced< / span > < br / > web apps
< / strong >
< div class = "buttons" >
< a href = "https://learn.svelte.dev" rel = "external" class = "cta" >
tutorial < Icon name = "arrow-right" / >
< / a >
< a href = "/docs/introduction" class = "cta basic" > read the docs< / a >
< / div >
< / div >
< picture class = "machine" >
< source
srcset={ srcset ( MachineDesktop . sources . avif )}
type="image/avif"
media="(min-width: 800px)"
/>
< source
srcset={ srcset ( MachineDesktop . sources . webp )}
type="image/webp"
media="(min-width: 800px)"
/>
< source
srcset={ srcset ( MachineDesktop . sources . png )}
type="image/png"
media="(min-width: 800px)"
/>
< source srcset = { srcset ( MachineMobile . sources . avif )} type="image/avif" />
< source srcset = { srcset ( MachineMobile . sources . webp )} type="image/webp" />
< source srcset = { srcset ( MachineMobile . sources . png )} type="image/png" />
< img alt = "The Svelte compiler packaging up your component code" src = { MachineMobile . img . src } / >
< / picture >
< / div >
< style >
.hero {
position: relative;
background: radial-gradient(circle at 40% 30%, rgb(235, 243, 249), rgb(214, 222, 228));
height: 40vh;
padding: 6rem 0 34vw 0;
margin-bottom: 3rem ;
}
.hero :global(picture img) {
width: 240%;
transform: translateX(-26%);
.machine img {
position: absolute ;
pointer-events: none ;
}
.logotype {
display: none;
.hero-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-bottom: 4rem;
}
strong {
position: absolute;
font-size: min(4vw, var(--sk-text-s));
max-width: 10em;
text-transform: uppercase;
font-weight: 700;
font-size: var(--sk-text-l) ;
text-align: center ;
font-family: var(--sk-font) ;
text-transform: low ercase;
font-weight: 4 00;
color: var(--sk-text-2);
line-height: 1.2;
}
.buttons {
display: flex;
gap: 1rem;
align-items: center;
}
.cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--sk-theme-1);
padding: 0.35em 0.8em;
font-size: var(--sk-text-s);
letter-spacing: 0.05em;
left: max(var(--sk-page-padding-side), 10%);
top: 25%;
white-space: nowrap;
border-radius: var(--sk-border-radius);
box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.08);
color: #fff;
color: color-mix(in hwb, hsl(var(--sk-theme-1-hsl)) 10%, var(--sk-back-1) 95%);
transition: 0.5s var(--quint-out);
transition-property: transform, box-shadow, color;
}
@media (min-width: 580px) {
strong {
max-width: 12em;
top: 30%;
}
.cta:hover {
text-decoration: none;
box-shadow: 0px 0.8px 3.8px rgba(0, 0, 0, 0.115), 0px 6px 30px rgba(0, 0, 0, 0.23) ;
transform: scale3d(1.01, 1.01, 1) ;
}
.hero {
height: 42vh;
}
.cta.basic {
background-color: var(--sk-back-5);
.hero :global(picture img) {
width: 220%;
transform: translateX(-26%);
}
color: var(--sk-text-1);
}
.logotype {
width: min(45vw, 40em);
}
@media (min-width: 800px) {
.logotype {
.hero-content {
--width: clamp(60rem, 50vw, 80rem);
position: absolute;
display: block;
width: min(30vw, 36rem);
bottom: 54%;
left: 15%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 4rem;
grid-row-gap: 2rem;
width: var(--width);
left: calc(0.5 * (100% - min(100vw, 120rem)) + var(--sk-page-padding-side));
top: 6rem;
font-size: 0.9em;
}
strong {
max-width: 16em;
top: 49% ;
.logotype {
width: 100% ;
justify-self: end ;
}
.logotype,
strong {
left: calc(var(--sk-page-padding-side) + 8rem);
text-align: left;
font-size: calc(0.04 * var(--width));
}
.hero {
height: 44vh;
}
.hero :global(picture img) {
width: 160%;
transform: translateX(-14%);
height: calc(14rem + 20vw);
padding: 14rem 0 0 0;
}
}
@media (min-width: 1200px) {
strong,
.logotype {
left: calc(50% - 56rem + var(--sk-page-padding-side));
@media (min-width: 1400px) {
.hero-content {
grid-template-columns: 1fr;
width: calc(0.5 * var(--width));
top: 6vw;
}
.hero {
height: 45vh;
}
.hero :global(picture img) {
width: 120%;
transform: translateX(-10%);
height: calc(10rem + 20vw);
padding: 10rem 0 0 0;
}
}
Puru Vijay
2 years ago
committed by
GitHub
