import live www.sillylaird.ca webrootHEADmain

1 files changed, 63 insertions, 0 deletions

diff --git a/assets/css/skeleton.css b/assets/css/skeleton.css
new file mode 100644
index 0000000..9e86e6c
--- /dev/null
+++ b/assets/css/skeleton.css
@@ -0,0 +1,63 @@
+/* ==========================================================================
+   skeleton.css — Skeleton loading placeholders
+   Shimmering blocks that match the dark aesthetic of the site.
+   ========================================================================== */
+
+@keyframes skeleton-shimmer {
+  0%   { background-position: -200px 0; }
+  100% { background-position: calc(200px + 100%) 0; }
+}
+
+.skeleton-line {
+  display: block;
+  height: 0.9em;
+  margin: var(--space-sm, 0.5rem) 0;
+  border-radius: var(--r, 6px);
+  background: linear-gradient(
+    90deg,
+    var(--border, #2a1010) 0px,
+    #3a1818 40px,
+    var(--border, #2a1010) 80px
+  );
+  background-size: 200px 100%;
+  animation: skeleton-shimmer 1.4s ease-in-out infinite;
+}
+
+.skeleton-line:first-child { width: 60%; }
+.skeleton-line:nth-child(2) { width: 80%; }
+.skeleton-line:nth-child(3) { width: 45%; }
+.skeleton-line:nth-child(4) { width: 70%; }
+
+.skeleton-block {
+  display: block;
+  height: 3rem;
+  margin: var(--space-sm, 0.5rem) 0;
+  border-radius: var(--r, 6px);
+  background: linear-gradient(
+    90deg,
+    var(--border, #2a1010) 0px,
+    #3a1818 40px,
+    var(--border, #2a1010) 80px
+  );
+  background-size: 200px 100%;
+  animation: skeleton-shimmer 1.4s ease-in-out infinite;
+}
+
+/* High-contrast theme skeleton */
+[data-theme="high-contrast"] .skeleton-line,
+[data-theme="high-contrast"] .skeleton-block {
+  background: linear-gradient(
+    90deg,
+    #ddd 0px,
+    #eee 40px,
+    #ddd 80px
+  );
+  background-size: 200px 100%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton-line,
+  .skeleton-block {
+    animation: none;
+  }
+}