mirror of
https://github.com/GoogleChromeLabs/squoosh.git
synced 2025-11-20 20:48:49 +00:00
New homepage (#861)
* Paste button * Logo and animated blobs * Predictable initial blob position * Initial blob shape * Update canvas on resize if not updating every frame * lol * Get styles from CSS * Background blobs * Fade into the center * Get initial focus * Pause time while page is hidden * Footer * Optimise amount of initial CSS * More CSS optimisation * Install button * Home page with demo loading * Tweak size * Replace thumbnails * Responsive demo section * Responsive main section * Remove debug stuff * Fix prerender SVG size * Changes from feedback * Blob nudges (#872) * more smaller blobs * less blobs that are practically invisible * more dynamic speed range and stronger gravity * Reverting resize observer change The content rect is different to getBoundingClientRect Co-authored-by: Adam Argyle <atom@argyleink.com>
This commit is contained in:
Jake Archibald
GitHub
243
src/shared/prerendered-app/Intro/style.css
Normal file
243
src/shared/prerendered-app/Intro/style.css
Normal file
@@ -0,0 +1,243 @@
|
||||
.intro {
|
||||
composes: abs-fill from global;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr max-content max-content;
|
||||
font-size: 1.2rem;
|
||||
color: var(--dark-text);
|
||||
}
|
||||
|
||||
.blob-canvas {
|
||||
composes: abs-fill from global;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main {
|
||||
min-height: 541px;
|
||||
display: grid;
|
||||
grid-template-rows: max-content max-content;
|
||||
justify-items: center;
|
||||
position: relative;
|
||||
--blob-pink: var(--hot-pink);
|
||||
--center-blob-opacity: 0.3;
|
||||
|
||||
@media (min-width: 600px) {
|
||||
min-height: 688px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
margin: 5rem 0 1rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
transform: translate(-1%, 0);
|
||||
width: 189px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.load-img {
|
||||
position: relative;
|
||||
color: var(--white);
|
||||
font-style: italic;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.blob-svg {
|
||||
composes: abs-fill from global;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: var(--blob-pink);
|
||||
|
||||
& path {
|
||||
opacity: var(--center-blob-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
.load-img-content {
|
||||
position: relative;
|
||||
--size: 29rem;
|
||||
max-width: var(--size);
|
||||
width: 100vw;
|
||||
height: var(--size);
|
||||
display: grid;
|
||||
grid-template-rows: max-content max-content;
|
||||
justify-items: center;
|
||||
align-content: center;
|
||||
gap: 0.7rem;
|
||||
|
||||
@media (min-width: 600px) {
|
||||
--size: 36rem;
|
||||
}
|
||||
}
|
||||
|
||||
.load-btn {
|
||||
composes: unbutton from global;
|
||||
}
|
||||
|
||||
.load-icon {
|
||||
--size: 5rem;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
fill: var(--white);
|
||||
transform: translate(4.3%, -1%);
|
||||
}
|
||||
|
||||
.paste-btn {
|
||||
composes: unbutton from global;
|
||||
text-decoration: underline;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.demos-container {
|
||||
position: relative;
|
||||
background: var(--deep-blue);
|
||||
padding-bottom: 5.2vw;
|
||||
}
|
||||
|
||||
.top-wave {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
.main-wave {
|
||||
fill: var(--deep-blue);
|
||||
}
|
||||
|
||||
.sub-wave {
|
||||
fill: var(--light-blue);
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: relative;
|
||||
background: var(--light-gray);
|
||||
}
|
||||
|
||||
.footer-wave {
|
||||
fill: var(--light-gray);
|
||||
}
|
||||
|
||||
.content-padding {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.footer-items {
|
||||
display: grid;
|
||||
justify-content: end;
|
||||
grid-auto-columns: max-content;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.footer-link-with-logo {
|
||||
composes: footer-link;
|
||||
display: grid;
|
||||
grid-template-columns: 1.8em max-content;
|
||||
align-items: center;
|
||||
gap: 0.6em;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.install-btn {
|
||||
composes: unbutton from global;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: var(--deep-blue);
|
||||
border-radius: 0.4em;
|
||||
color: var(--white);
|
||||
padding: 0.5em 1em;
|
||||
font-size: 1.6rem;
|
||||
animation: fade-in 600ms ease-in-out;
|
||||
}
|
||||
|
||||
.demo-title {
|
||||
color: var(--white);
|
||||
margin: 0;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.demos {
|
||||
display: grid;
|
||||
gap: 3rem;
|
||||
justify-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
margin: 3rem auto;
|
||||
--demo-size: 80px;
|
||||
grid-template-columns: repeat(auto-fit, var(--demo-size));
|
||||
|
||||
@media (min-width: 740px) {
|
||||
--demo-size: 100px;
|
||||
gap: 6rem;
|
||||
}
|
||||
|
||||
& > li {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-size {
|
||||
background: var(--dim-blue);
|
||||
border-radius: 1000px;
|
||||
color: var(--white);
|
||||
width: max-content;
|
||||
padding: 0.5rem 1.2rem;
|
||||
margin: 0.7rem auto 0;
|
||||
}
|
||||
|
||||
.demo-icon-container {
|
||||
border-radius: var(--demo-size);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.demo-icon {
|
||||
width: var(--demo-size);
|
||||
height: var(--demo-size);
|
||||
display: block;
|
||||
}
|
||||
.demo-loader {
|
||||
composes: abs-fill from global;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
animation: fade-in 600ms ease-in-out;
|
||||
|
||||
& > loading-spinner {
|
||||
--color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
.drop-text {
|
||||
@media (max-width: 599px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user