From d5e71844d4030aedcd1d66fe62998082b0e25408 Mon Sep 17 00:00:00 2001 From: timotheegoguely Date: Wed, 14 May 2025 17:45:12 +0200 Subject: [PATCH] move Menu and Projects skeleton style to 2.blocks.skeleton.css --- src/assets/css/index.css | 1 + src/assets/css/src/2.blocks.skeleton.css | 59 ++++++++++++++++++++++++ src/components/Menu.vue | 15 ------ src/components/Projects.vue | 39 +--------------- 4 files changed, 61 insertions(+), 53 deletions(-) create mode 100644 src/assets/css/src/2.blocks.skeleton.css diff --git a/src/assets/css/index.css b/src/assets/css/index.css index c3d67b4..86623f7 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -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'; diff --git a/src/assets/css/src/2.blocks.skeleton.css b/src/assets/css/src/2.blocks.skeleton.css new file mode 100644 index 0000000..f49abf2 --- /dev/null +++ b/src/assets/css/src/2.blocks.skeleton.css @@ -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 } +} diff --git a/src/components/Menu.vue b/src/components/Menu.vue index 953358b..46ee312 100644 --- a/src/components/Menu.vue +++ b/src/components/Menu.vue @@ -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 } -} diff --git a/src/components/Projects.vue b/src/components/Projects.vue index 259164b..7ddc6d5 100644 --- a/src/components/Projects.vue +++ b/src/components/Projects.vue @@ -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 } -}