studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

move Menu and Projects skeleton style to 2.blocks.skeleton.css

Browse source
This commit is contained in:
Timothée Goguely 2025-05-14 17:45:12 +02:00
parent 73722aadc2
commit d5e71844d4
4 changed files with 61 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/assets/css/index.css
View file

@ -28,6 +28,7 @@
@import 'src/2.blocks.pill.css';
@import 'src/2.blocks.pdf-viewer.css';
@import 'src/2.blocks.project.css';
@import 'src/2.blocks.skeleton.css';
@import 'src/2.blocks.skip-link.css';
@import 'src/2.blocks.track.css';

59
src/assets/css/src/2.blocks.skeleton.css Normal file
View file

@ -0,0 +1,59 @@
/* SKELETON BLOCK */
/* Menu */
#menu details.skeleton::after {
content: '';
display: block;
height: calc(44px * 5);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 332 88' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%23F2F2F2' x='16' y='10' width='240' height='24' rx='8' ry='8'/%3E%3Crect fill='%23F2F2F2' x='16' y='54' width='160' height='24' rx='8' ry='8'/%3E%3C/svg%3E%0A");
background-repeat: repeat-y;
mask-image: linear-gradient(to bottom, black 50%, white);
animation: skeleton-menu 1s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
}
@keyframes skeleton-menu {
0% { opacity: .25 }
100% { opacity: .75 }
}
/* Section */
section.skeleton::before,
section.skeleton::after {
content: '';
position: absolute;
inset: 0;
display: block;
margin: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1080 260' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='white' x='0' y='0' width='100%25' height='244' rx='20' ry='20' /%3E%3Crect fill='%23F2F2F2' x='32' y='34' width='72' height='72' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='40' width='240' height='26' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='80' width='160' height='18' rx='4' ry='4' /%3E%3C/svg%3E%0A");
background-repeat: repeat-y;
background-size: 1080px 260px;
background-position-x: left;
mask-image: linear-gradient(to bottom, black 50%, white);
animation: skeleton-section 1s -.25s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
}
section.skeleton::after {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1080 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='tr'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='1060' cy='20' fill='black'/%3E%3C/mask%3E%3Cmask id='br'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='1060' cy='224' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect fill='%23F2F2F2' x='1060' y='0' width='20' height='20' mask='url(%23tr)' /%3E%3Crect fill='%23F2F2F2' x='1060' y='224' width='20' height='20' mask='url(%23br)' /%3E%3C/svg%3E");
background-size: 1080px 260px;
background-position-x: right;
animation: none;
mask-image: none;
}
@media (min-width: 1530px) {
section.skeleton::before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 3468 156' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='white' x='0' y='0' width='100%25' height='140' rx='20' ry='20' /%3E%3Crect fill='%23F2F2F2' x='32' y='34' width='72' height='72' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='40' width='240' height='26' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='80' width='160' height='18' rx='4' ry='4' /%3E%3C/svg%3E%0A");
background-size: 3468px 156px;
}
section.skeleton::after {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 3468 156' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='tr'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='3448' cy='20' fill='black'/%3E%3C/mask%3E%3Cmask id='br'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='3448' cy='120' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect fill='%23F2F2F2' x='3448' y='0' width='20' height='20' mask='url(%23tr)' /%3E%3Crect fill='%23F2F2F2' x='3448' y='120' width='20' height='20' mask='url(%23br)' /%3E%3C/svg%3E");
background-size: 3468px 156px;
}
}
@keyframes skeleton-section {
0% { opacity: .50 }
100% { opacity: 1.0 }
}

15
src/components/Menu.vue
View file

@ -398,19 +398,4 @@ button[aria-controls="menu"][aria-expanded="false"]
transform: translateY(-0.1em);
overflow: hidden;
}
/* Skeleton */
#menu details.skeleton::after {
content: '';
display: block;
height: calc(44px * 5);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 332 88' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%23F2F2F2' x='16' y='10' width='240' height='24' rx='8' ry='8'/%3E%3Crect fill='%23F2F2F2' x='16' y='54' width='160' height='24' rx='8' ry='8'/%3E%3C/svg%3E%0A");
background-repeat: repeat-y;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0));
animation: skeleton 1s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
}
@keyframes skeleton {
0% { opacity: .25 }
100% { opacity: .75 }
}
</style>

39
src/components/Projects.vue
View file

@ -71,7 +71,7 @@ section {
--flow-space: var(--space-16);
min-height: calc(100vh - 8.5rem);
}
section:empty::after {
section:not(.skeleton):empty::after {
content: 'Aucun projet pour le moment';
position: absolute;
inset: 0;
@ -88,41 +88,4 @@ section:empty::after {
background-repeat: no-repeat;
background-size: var(--space-40);
}
/* Skeleton */
section.skeleton::before,
section.skeleton::after {
content: '';
display: block;
width: 100%;
height: 100%;
max-width: unset;
margin: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1080 260' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='white' x='0' y='0' width='100%25' height='244' rx='20' ry='20' /%3E%3Crect fill='%23F2F2F2' x='32' y='34' width='72' height='72' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='40' width='240' height='26' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='80' width='160' height='18' rx='4' ry='4' /%3E%3C/svg%3E%0A");
background-repeat: repeat-y;
background-size: 1080px 260px;
background-position-x: left;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
animation: skeleton 1s -.25s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
}
section.skeleton::after {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1080 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='tr'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='1060' cy='20' fill='black'/%3E%3C/mask%3E%3Cmask id='br'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='1060' cy='224' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect fill='%23F2F2F2' x='1060' y='0' width='20' height='20' mask='url(%23tr)' /%3E%3Crect fill='%23F2F2F2' x='1060' y='224' width='20' height='20' mask='url(%23br)' /%3E%3C/svg%3E");
background-size: 1080px 260px;
background-position-x: right;
animation: none;
mask-image: none;
}
@media (min-width: 1530px) {
section.skeleton::before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 3468 156' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='white' x='0' y='0' width='100%25' height='140' rx='20' ry='20' /%3E%3Crect fill='%23F2F2F2' x='32' y='34' width='72' height='72' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='40' width='240' height='26' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='80' width='160' height='18' rx='4' ry='4' /%3E%3C/svg%3E%0A");
background-size: 3468px 156px;
}
section.skeleton::after {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 3468 156' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='tr'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='3448' cy='20' fill='black'/%3E%3C/mask%3E%3Cmask id='br'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='3448' cy='120' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect fill='%23F2F2F2' x='3448' y='0' width='20' height='20' mask='url(%23tr)' /%3E%3Crect fill='%23F2F2F2' x='3448' y='120' width='20' height='20' mask='url(%23br)' /%3E%3C/svg%3E");
background-size: 3468px 156px;
}
}
@keyframes skeleton {
0% { opacity: .50 }
100% { opacity: 1.0 }
}
</style>