initial commit

app/assets/css/app.css

@@ -0,0 +1,6 @@
+@import "tailwindcss";
+
+@theme {
+  --color-primary: #fcef91;
+  --color-secondary: #fb9e3a;
+}

app/assets/css/main.css

@@ -0,0 +1,2 @@
+@import "./app.css";
+@import "./markdown.css";

app/assets/css/markdown.css

@@ -0,0 +1,565 @@
+/* markdown.css
+   默认：明亮 / 白色背景主题
+   同时提供：.dark .prose 覆盖（如需启用 class-based dark 模式）
+   依赖：全局定义的 CSS 变量 --color-primary 和 --color-secondary
+*/
+
+/* 平滑滚动 */
+html {
+  scroll-behavior: smooth;
+}
+
+/* ---------- 默认：明亮主题（Light） ---------- */
+
+/* 美化 prose 内容样式 */
+.prose {
+  @apply text-gray-800 leading-relaxed;
+  font-feature-settings:
+    "kern" 1,
+    "liga" 1;
+  color: inherit;
+}
+
+/* 标题层级 */
+.prose h1 {
+  @apply text-4xl font-bold mt-8 mb-6 pb-4 border-b border-gray-200;
+  background-image: linear-gradient(
+    90deg,
+    var(--color-primary),
+    var(--color-secondary)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  background-size: 200% 200%;
+  animation: gradientShift 3s ease infinite;
+}
+
+.prose h2 {
+  @apply text-3xl font-bold text-gray-900 mt-10 mb-5 pb-3 border-b border-gray-200 relative;
+}
+
+.prose h2::before {
+  content: "";
+  @apply absolute bottom-0 left-0 w-12 h-0.5 rounded-full;
+  background-image: linear-gradient(
+    90deg,
+    var(--color-primary),
+    var(--color-secondary)
+  );
+}
+
+.prose h3 {
+  @apply text-2xl font-semibold text-gray-800 mt-8 mb-4;
+  color: rgba(31, 41, 55, 0.95);
+}
+
+.prose h4 {
+  @apply text-xl font-semibold text-gray-700 mt-7 mb-3;
+}
+
+.prose h5 {
+  @apply text-lg font-medium text-gray-700 mt-6 mb-3;
+}
+
+.prose h6 {
+  @apply text-base font-medium text-gray-600 mt-5 mb-2 italic;
+}
+
+/* 段落和文本 */
+.prose p {
+  @apply text-gray-700 leading-relaxed mb-5;
+  text-align: justify;
+}
+
+.prose strong {
+  @apply font-bold px-1 rounded;
+  background: linear-gradient(
+    90deg,
+    rgba(252, 239, 145, 0.22),
+    rgba(251, 158, 58, 0.12)
+  );
+  color: rgba(31, 41, 55, 0.95);
+}
+
+.prose em {
+  @apply italic px-1 rounded;
+  color: var(--color-secondary);
+  background: rgba(251, 158, 58, 0.08);
+}
+
+.prose del {
+  @apply line-through px-1 rounded;
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.06);
+}
+
+/* 链接 */
+.prose a {
+  @apply font-medium relative transition-all duration-300;
+  color: var(--color-secondary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.prose a:hover {
+  color: var(--color-primary);
+  transform: translateY(1px);
+}
+
+.prose a::after {
+  content: "";
+  @apply absolute bottom-0 left-0 w-0 h-0.5 transition-all duration-300;
+  background: linear-gradient(
+    90deg,
+    var(--color-primary),
+    var(--color-secondary)
+  );
+}
+
+.prose a:hover::after {
+  @apply w-full;
+}
+
+/* 外部链接图标 */
+.prose a[href^="http"]::before {
+  content: "↗";
+  @apply inline-block mr-1 text-xs translate-y-[2px] opacity-70;
+}
+
+.prose h1 a,
+.prose h2 a,
+.prose h3 a,
+.prose h4 a,
+.prose h5 a,
+.prose h6 a {
+  text-decoration: none;
+}
+
+/* 列表 */
+.prose ul {
+  @apply list-none space-y-3 mb-6;
+}
+
+.prose ul li {
+  @apply relative pl-6;
+}
+
+.prose ul li::before {
+  content: "";
+  @apply absolute left-0 top-3 w-1.5 h-1.5 rounded-full;
+  background: var(--color-secondary);
+}
+
+.prose ol {
+  @apply list-decimal list-inside space-y-3 mb-6;
+  counter-reset: list-counter;
+}
+
+.prose ol li {
+  @apply relative pl-8;
+  counter-increment: list-counter;
+}
+
+.prose ol li::before {
+  content: counter(list-counter);
+  @apply absolute left-0 top-0 w-6 h-6 text-white text-xs rounded-full flex items-center justify-center font-bold;
+  background-image: linear-gradient(
+    135deg,
+    var(--color-primary),
+    var(--color-secondary)
+  );
+}
+
+/* 代码块（浅色风格） */
+.prose pre {
+  @apply rounded-xl p-6 my-8 border shadow-sm overflow-x-auto;
+  border: 1px solid rgba(229, 231, 235, 1); /* gray-200 */
+  background: linear-gradient(180deg, #ffffff, #f8fafc);
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
+  backdrop-filter: blur(6px);
+}
+
+.prose code {
+  @apply px-2 py-1 rounded text-sm font-mono;
+  background: rgba(243, 244, 246, 0.8); /* gray-50-ish */
+  border: 1px solid rgba(229, 231, 235, 1);
+  color: #0f172a;
+}
+
+.prose pre code {
+  @apply bg-transparent p-0 text-current border-none;
+  color: #0f172a;
+}
+
+/* 引用块（浅色友好） */
+.prose blockquote {
+  @apply pl-6 italic text-gray-700 my-8 py-4 pr-6 rounded-r-xl relative overflow-hidden;
+  border-left: 4px solid transparent;
+  border-image: linear-gradient(
+      to bottom,
+      rgba(252, 239, 145, 0.9),
+      rgba(251, 158, 58, 0.9)
+    )
+    1;
+  background: linear-gradient(
+    90deg,
+    rgba(252, 239, 145, 0.06),
+    rgba(255, 255, 255, 0)
+  );
+}
+
+.prose blockquote::before {
+  content: '"';
+  @apply absolute -top-4 -left-2 text-6xl opacity-20 font-serif;
+  color: var(--color-primary);
+}
+
+.prose blockquote p {
+  @apply mb-3 last:mb-0 relative z-10;
+}
+
+/* 图片 */
+.prose img {
+  @apply rounded-2xl my-8 mx-auto transition-all duration-500 border-2;
+  border-color: rgba(226, 232, 240, 0.6); /* gray-200 */
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
+}
+
+.prose img:hover {
+  @apply scale-[1.02];
+  border-color: var(--color-secondary);
+}
+
+.prose figure {
+  @apply my-8 text-center;
+}
+
+.prose figcaption {
+  @apply text-sm text-gray-500 mt-3 italic;
+}
+
+/* 表格 */
+.prose table {
+  @apply w-full border-collapse my-8 text-sm rounded-xl overflow-hidden shadow-sm;
+}
+
+.prose thead {
+  background-image: linear-gradient(
+    90deg,
+    rgba(252, 239, 145, 0.18),
+    rgba(251, 158, 58, 0.12)
+  );
+}
+
+.prose th {
+  @apply border px-6 py-4 text-left font-bold text-gray-800 text-sm uppercase tracking-wider;
+  border-color: rgba(226, 232, 240, 0.6);
+  background: rgba(250, 250, 250, 0.8);
+}
+
+.prose td {
+  @apply border px-6 py-4 text-gray-700;
+  border-color: rgba(226, 232, 240, 0.4);
+}
+
+.prose tr:nth-child(even) {
+  @apply bg-gray-50;
+}
+
+.prose tr:hover {
+  background: rgba(251, 158, 58, 0.06);
+  transition: background 0.2s;
+}
+
+/* 分割线 */
+.prose hr {
+  @apply border-gray-200 my-12 relative;
+}
+
+.prose hr::before {
+  content: "";
+  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full opacity-20;
+  background-image: linear-gradient(
+    90deg,
+    var(--color-primary),
+    var(--color-secondary)
+  );
+}
+
+/* 任务列表（checkbox） */
+.prose input[type="checkbox"] {
+  @apply mr-3 rounded w-5 h-5 transition-all duration-200;
+  background: #fff;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+}
+
+.prose input[type="checkbox"]:checked {
+  background-image: linear-gradient(
+    90deg,
+    var(--color-primary),
+    var(--color-secondary)
+  );
+  border: none;
+}
+
+.prose .task-list-item {
+  @apply list-none pl-0 flex items-start;
+}
+
+.prose .task-list-item input[type="checkbox"] {
+  @apply mt-0.5 flex-shrink-0;
+}
+
+/* 强调和标记 */
+.prose mark {
+  @apply px-2 py-1 rounded font-medium;
+  background: linear-gradient(
+    120deg,
+    rgba(252, 239, 145, 0.22),
+    rgba(251, 158, 58, 0.18)
+  );
+  color: #8a4b00;
+}
+
+/* 键盘按键 */
+.prose kbd {
+  @apply border rounded-lg px-3 py-1.5 text-sm font-mono shadow-sm;
+  background: rgba(247, 249, 250, 0.9);
+  border-color: rgba(226, 232, 240, 0.8);
+  color: #0f172a;
+}
+
+/* 动画定义 */
+@keyframes gradientShift {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+/* 滚动条（浅色） */
+.prose pre::-webkit-scrollbar {
+  @apply h-2;
+}
+
+.prose pre::-webkit-scrollbar-track {
+  @apply rounded-full;
+  background: rgba(243, 244, 246, 0.9);
+}
+
+.prose pre::-webkit-scrollbar-thumb {
+  border-radius: 9999px;
+  background-image: linear-gradient(
+    90deg,
+    var(--color-primary),
+    var(--color-secondary)
+  );
+}
+
+/* 移动端优化 */
+@media (max-width: 768px) {
+  .prose {
+    @apply text-base;
+  }
+  .prose h1 {
+    @apply text-3xl;
+  }
+  .prose h2 {
+    @apply text-2xl;
+  }
+  .prose h3 {
+    @apply text-xl;
+  }
+  .prose pre {
+    @apply p-4;
+  }
+}
+
+/* 打印优化 */
+@media print {
+  .prose {
+    @apply text-black;
+  }
+  .prose a {
+    @apply text-black no-underline;
+  }
+  .prose pre {
+    @apply bg-gray-100 border border-gray-300;
+  }
+}
+
+/* ---------- 可选：深色模式覆盖（.dark class 优先） ---------- */
+/* 如果你使用 Tailwind 的 class-based dark 模式（<html class="dark">），.dark .prose 会生效 */
+/* 也可替换为 @media (prefers-color-scheme: dark) {...} 来自动跟随系统 dark 模式 */
+
+.dark .prose {
+  @apply text-gray-200;
+  color: inherit;
+}
+
+.dark .prose h1 {
+  border-color: rgba(55, 65, 81, 0.5);
+}
+.dark .prose h2 {
+  color: #fff;
+  border-color: rgba(55, 65, 81, 0.4);
+}
+.dark .prose p {
+  @apply text-gray-300;
+}
+
+.dark .prose pre {
+  border: 1px solid rgba(55, 65, 81, 0.6);
+  background: linear-gradient(
+    135deg,
+    rgba(17, 24, 39, 0.9),
+    rgba(31, 41, 55, 0.9)
+  );
+  box-shadow: 0 8px 30px rgba(2, 6, 23, 0.6);
+}
+
+.dark .prose code {
+  background: rgba(31, 41, 55, 0.6);
+  border: 1px solid rgba(55, 65, 81, 0.5);
+  color: #e6eef8;
+}
+
+.dark .prose blockquote {
+  border-image: linear-gradient(
+      to bottom,
+      var(--color-primary),
+      var(--color-secondary)
+    )
+    1;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.02),
+    rgba(255, 255, 255, 0)
+  );
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.dark .prose table thead {
+  background-image: linear-gradient(
+    90deg,
+    rgba(252, 239, 145, 0.06),
+    rgba(251, 158, 58, 0.04)
+  );
+}
+.dark .prose tr:nth-child(even) {
+  background: rgba(255, 255, 255, 0.02);
+}
+.dark .prose td,
+.dark .prose th {
+  color: rgba(255, 255, 255, 0.9);
+}
+.dark .prose img {
+  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.6);
+  border-color: rgba(55, 65, 81, 0.5);
+}
+.dark .prose kbd {
+  background: rgba(31, 41, 55, 0.7);
+  border-color: rgba(55, 65, 81, 0.6);
+  color: #e6eef8;
+}
+
+/* 滚动条（深色） */
+.dark .prose pre::-webkit-scrollbar-track {
+  background: rgba(17, 24, 39, 0.8);
+}
+.dark .prose pre::-webkit-scrollbar-thumb {
+  background-image: linear-gradient(
+    90deg,
+    var(--color-primary),
+    var(--color-secondary)
+  );
+}
+
+@media (prefers-color-scheme: dark) {
+  .prose {
+    @apply text-gray-200;
+    color: inherit;
+  }
+
+  .prose h1 {
+    border-color: rgba(55, 65, 81, 0.5);
+  }
+  .prose h2 {
+    color: #fff;
+    border-color: rgba(55, 65, 81, 0.4);
+  }
+  .prose p {
+    @apply text-gray-300;
+  }
+
+  .prose pre {
+    border: 1px solid rgba(55, 65, 81, 0.6);
+    background: linear-gradient(
+      135deg,
+      rgba(17, 24, 39, 0.9),
+      rgba(31, 41, 55, 0.9)
+    );
+    box-shadow: 0 8px 30px rgba(2, 6, 23, 0.6);
+  }
+
+  .prose code {
+    background: rgba(31, 41, 55, 0.6);
+    border: 1px solid rgba(55, 65, 81, 0.5);
+    color: #e6eef8;
+  }
+
+  .prose blockquote {
+    border-image: linear-gradient(
+        to bottom,
+        var(--color-primary),
+        var(--color-secondary)
+      )
+      1;
+    background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.02),
+      rgba(255, 255, 255, 0)
+    );
+    color: rgba(255, 255, 255, 0.9);
+  }
+
+  .prose table thead {
+    background-image: linear-gradient(
+      90deg,
+      rgba(252, 239, 145, 0.06),
+      rgba(251, 158, 58, 0.04)
+    );
+  }
+  .prose tr:nth-child(even) {
+    background: rgba(255, 255, 255, 0.02);
+  }
+  .prose td,
+  .prose th {
+    color: rgba(255, 255, 255, 0.9);
+  }
+  .prose img {
+    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.6);
+    border-color: rgba(55, 65, 81, 0.5);
+  }
+  .prose kbd {
+    background: rgba(31, 41, 55, 0.7);
+    border-color: rgba(55, 65, 81, 0.6);
+    color: #e6eef8;
+  }
+
+  /* 滚动条（深色） */
+  .prose pre::-webkit-scrollbar-track {
+    background: rgba(17, 24, 39, 0.8);
+  }
+  .prose pre::-webkit-scrollbar-thumb {
+    background-image: linear-gradient(
+      90deg,
+      var(--color-primary),
+      var(--color-secondary)
+    );
+  }
+}