resolve conflicts

Research-Nexas · Oct 28, 2024 · 1f80e89 · 1f80e89
1 parent c05cf92
commit 1f80e89
Show file tree

Hide file tree

Showing 2 changed files with 1,504 additions and 791 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -1875,3 +1875,105 @@ ul {
 
 }
 
+/* Base skeleton styles */
+.skeleton {
+  background-color: #e0e0e0;
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+}
+
+/* Loading animation */
+.skeleton::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  0% {
+      left: -100%;
+  }
+  50% {
+      left: 100%;
+  }
+  100% {
+      left: -100%;
+  }
+}
+
+/* Header Skeleton */
+.skeleton-header {
+  height: 60px;
+  margin-bottom: 20px;
+  width: 100%;
+}
+
+/* Banner Skeleton */
+.skeleton-banner {
+  height: 300px;
+  width: 100%;
+  margin-bottom: 20px;
+  border-radius: 10px;
+}
+
+/* Section Skeleton with different types of elements */
+.skeleton-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.skeleton-section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.skeleton-title {
+  width: 50%;
+  height: 24px;
+  border-radius: 4px;
+  margin: 5px 0;
+}
+
+.skeleton-paragraph {
+  width: 100%;
+  height: 16px;
+  border-radius: 4px;
+  margin: 4px 0;
+}
+
+.skeleton-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+.skeleton-button {
+  width: 120px;
+  height: 32px;
+  border-radius: 8px;
+  margin-top: 10px;
+}
+
+/* Multi-column layout to simulate cards or sections */
+.skeleton-card-container {
+  display: flex;
+  gap: 15px;
+}
+
+.skeleton-card {
+  flex: 1 1 200px;
+  height: 250px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 15px;
+  border-radius: 8px;
+}