feat: docus

Projects/kompose/docs/assets/css/main.css

@@ -0,0 +1,214 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+
+  body {
+    @apply bg-dark-950 text-gray-100 antialiased;
+  }
+
+  /* Typography improvements */
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-bold tracking-tight;
+  }
+
+  h1 {
+    @apply text-5xl md:text-6xl lg:text-7xl;
+  }
+
+  h2 {
+    @apply text-4xl md:text-5xl;
+  }
+
+  h3 {
+    @apply text-3xl md:text-4xl;
+  }
+}
+
+@layer components {
+  /* Gradient text */
+  .gradient-text {
+    @apply bg-gradient-to-r from-primary-400 via-accent-400 to-primary-500 bg-clip-text text-transparent;
+  }
+
+  .gradient-text-hero {
+    @apply bg-gradient-hero bg-clip-text text-transparent animate-gradient-xy;
+  }
+
+  /* Glass morphism */
+  .glass {
+    @apply backdrop-blur-lg bg-white/5 border border-white/10;
+  }
+
+  .glass-dark {
+    @apply backdrop-blur-lg bg-black/30 border border-white/5;
+  }
+
+  /* Glow effects */
+  .glow-box {
+    @apply shadow-glow-cyber;
+  }
+
+  .glow-text {
+    @apply animate-glow;
+  }
+
+  /* Button styles */
+  .btn {
+    @apply px-6 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 active:scale-95;
+  }
+
+  .btn-primary {
+    @apply btn bg-gradient-primary text-white shadow-glow-orange hover:shadow-lg;
+  }
+
+  .btn-accent {
+    @apply btn bg-gradient-accent text-white shadow-glow-purple hover:shadow-lg;
+  }
+
+  .btn-ghost {
+    @apply btn border-2 border-primary-500/50 text-primary-400 hover:bg-primary-500/10 hover:border-primary-400;
+  }
+
+  /* Card styles */
+  .card {
+    @apply rounded-xl p-6 transition-all duration-300;
+  }
+
+  .card-glass {
+    @apply card glass hover:bg-white/10;
+  }
+
+  .card-glow {
+    @apply card bg-dark-900 border border-primary-500/20 hover:border-primary-500/40 hover:shadow-glow-cyber;
+  }
+
+  /* Code block improvements */
+  .prose pre {
+    @apply relative overflow-hidden;
+  }
+
+  .prose pre::before {
+    content: '';
+    @apply absolute inset-0 bg-gradient-shine opacity-0 hover:opacity-100 transition-opacity duration-500 pointer-events-none;
+    animation: shimmer 2s linear infinite;
+  }
+
+  /* Link styles */
+  .link-fancy {
+    @apply relative inline-block text-primary-400 hover:text-primary-300 transition-colors;
+  }
+
+  .link-fancy::after {
+    content: '';
+    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-primary transition-all duration-300;
+  }
+
+  .link-fancy:hover::after {
+    @apply w-full;
+  }
+
+  /* Sidebar */
+  .sidebar-link {
+    @apply block px-4 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-all duration-200;
+  }
+
+  .sidebar-link.active {
+    @apply text-white bg-gradient-to-r from-primary-500/20 to-accent-500/20 border-l-4 border-primary-500;
+  }
+
+  /* Search box */
+  .search-box {
+    @apply w-full px-4 py-3 bg-dark-900 border border-dark-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all;
+  }
+
+  /* Table of contents */
+  .toc-link {
+    @apply text-sm text-gray-400 hover:text-primary-400 transition-colors py-1 border-l-2 border-dark-700 pl-4 hover:border-primary-500;
+  }
+
+  .toc-link.active {
+    @apply text-primary-400 border-primary-500;
+  }
+}
+
+@layer utilities {
+  /* Gradient animations */
+  .animate-gradient {
+    background-size: 200% 200%;
+    animation: gradient 8s ease infinite;
+  }
+
+  /* Perspective utilities */
+  .perspective-1000 {
+    perspective: 1000px;
+  }
+
+  .transform-style-3d {
+    transform-style: preserve-3d;
+  }
+
+  /* Shimmer effect */
+  .shimmer {
+    @apply relative overflow-hidden;
+  }
+
+  .shimmer::after {
+    content: '';
+    @apply absolute inset-0 bg-gradient-shine;
+    animation: shimmer 2s infinite;
+  }
+}
+
+/* Markdown content improvements */
+.prose {
+  @apply max-w-none;
+}
+
+.prose img {
+  @apply rounded-lg shadow-lg;
+}
+
+.prose table {
+  @apply w-full border-collapse;
+}
+
+.prose th {
+  @apply bg-dark-800 text-primary-400 font-semibold py-3 px-4 text-left border-b-2 border-primary-500/30;
+}
+
+.prose td {
+  @apply py-3 px-4 border-b border-dark-700;
+}
+
+.prose tr:hover {
+  @apply bg-white/5;
+}
+
+/* Copy button for code blocks */
+.copy-button {
+  @apply absolute top-2 right-2 p-2 rounded-md bg-dark-800 text-gray-400 hover:text-white hover:bg-dark-700 transition-all opacity-0 group-hover:opacity-100;
+}
+
+/* Loading states */
+.loading-dots {
+  @apply inline-flex space-x-1;
+}
+
+.loading-dots span {
+  @apply w-2 h-2 bg-primary-500 rounded-full animate-pulse;
+  animation-delay: calc(var(--i) * 150ms);
+}
+
+/* Hero section decorations */
+.hero-decoration {
+  @apply absolute pointer-events-none;
+}
+
+.hero-blob {
+  @apply absolute w-96 h-96 bg-gradient-radial from-primary-500/30 to-transparent rounded-full blur-3xl animate-pulse-slow;
+}