external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-14 17:49:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Responsive demo section

Browse Source
This commit is contained in:
Jake Archibald
2020-11-27 11:06:31 +00:00
parent eeafef4e14
commit be5a96a42a
1 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/shared/prerendered-app/Intro/style.css
View File

@@ -177,14 +177,18 @@
.demos { .demos {
display: grid; display: grid;
gap: 6rem; gap: 3rem;
grid-auto-columns: 1fr;
grid-auto-flow: column;
justify-items: center; justify-items: center;
justify-content: center; justify-content: center;
padding: 0; padding: 0;
width: max-content;
margin: 3rem auto; 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 { & > li {
display: block; display: block;
@@ -201,14 +205,13 @@
} }
.demo-icon-container { .demo-icon-container {
--size: 100px; border-radius: var(--demo-size);
border-radius: var(--size);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.demo-icon { .demo-icon {
width: var(--size); width: var(--demo-size);
height: var(--size); height: var(--demo-size);
display: block; display: block;
} }
.demo-loader { .demo-loader {