diff --git a/static/css/skeleton.css b/static/css/skeleton.css index 5924088..c3d653c 100644 --- a/static/css/skeleton.css +++ b/static/css/skeleton.css @@ -60,12 +60,15 @@ } /* Loading state: Hide actual content, show skeleton */ -.component-wrapper.loading .actual-content { +/* Triggered by manual .loading class OR when parent page container has .loading */ +.component-wrapper.loading .actual-content, +.loading .component-wrapper .actual-content { opacity: 0; pointer-events: none; } -.component-wrapper.loading .skeleton-content { +.component-wrapper.loading .skeleton-content, +.loading .component-wrapper .skeleton-content { opacity: 1; pointer-events: all; } @@ -100,7 +103,7 @@ .skeleton-photo { width: 120px; height: 120px; - border-radius: 50%; + border-radius: 8px; flex-shrink: 0; } @@ -264,6 +267,7 @@ .skeleton-photo { width: 100px; height: 100px; + border-radius: 8px; } .skeleton-experience-item { diff --git a/templates/index.html b/templates/index.html index 7ceaab0..617d1b0 100644 --- a/templates/index.html +++ b/templates/index.html @@ -114,6 +114,21 @@ +
@@ -26,14 +27,7 @@ hx-swap="outerHTML swap:250ms settle:250ms" hx-indicator="#lang-indicator-en" hx-push-url="/?lang=en" - aria-label="English" - _="on htmx:beforeRequest - add .loading to .component-wrapper in #cv-inner-content-page-1 - add .loading to .component-wrapper in #cv-inner-content-page-2 - on htmx:afterSwap - wait 100ms - remove .loading from .component-wrapper in #cv-inner-content-page-1 - remove .loading from .component-wrapper in #cv-inner-content-page-2"> + aria-label="English"> English