@anglefeint/astro-theme 0.1.18 → 0.1.19

package/src/styles/ai/prose.css

@@ -0,0 +1,267 @@
+/* AI prose layer: article typography and content presentation rules. */
+/* GPU 风格：散热鳍片 + PCB 底 + 金属边框 */
+body.ai-page .ai-content .prose {
+  position: relative;
+  background:
+    repeating-linear-gradient(
+      90deg,
+      transparent 0,
+      transparent 19px,
+      rgba(50, 90, 70, 0.03) 19px,
+      rgba(50, 90, 70, 0.03) 20px
+    ),
+    repeating-linear-gradient(
+      180deg,
+      transparent 0,
+      transparent 2px,
+      rgba(55, 65, 80, 0.14) 2px,
+      rgba(55, 65, 80, 0.14) 4px
+    ),
+    linear-gradient(135deg, rgba(14, 18, 24, 0.97) 0%, rgba(10, 14, 20, 0.95) 50%, rgba(6, 10, 16, 0.97) 100%),
+    radial-gradient(
+      ellipse 80% 50% at 50% 0%,
+      rgba(70, 110, 150, 0.06),
+      transparent 60%
+    );
+  backdrop-filter: blur(16px) saturate(1.1);
+  -webkit-backdrop-filter: blur(16px) saturate(1.1);
+  border-radius: 8px;
+  padding: 2em;
+  border: 1px solid rgba(140, 155, 175, 0.35);
+  box-shadow:
+    0 0 60px rgba(0, 0, 0, 0.5),
+    inset 0 1px 0 rgba(200, 210, 225, 0.12),
+    inset 0 -1px 0 rgba(40, 50, 65, 0.4),
+    inset 0 0 0 1px rgba(100, 120, 150, 0.15);
+  animation: ai-breathe 6s ease-in-out infinite;
+}
+/* 呼吸式微动 */
+@keyframes ai-breathe {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.98;
+    transform: scale(1.001);
+  }
+}
+/* 加载扫描线 */
+.ai-load-scan {
+  position: fixed;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(100, 255, 180, 0.6),
+    rgba(120, 180, 255, 0.6),
+    transparent
+  );
+  box-shadow: 0 0 12px rgba(100, 255, 180, 0.5);
+  animation: ai-scan 0.8s ease-out forwards;
+  pointer-events: none;
+  z-index: 20;
+}
+@keyframes ai-scan {
+  0% {
+    top: 0;
+    opacity: 1;
+  }
+  100% {
+    top: 100vh;
+    opacity: 0.2;
+  }
+}
+/* 文章区域渐显 */
+.ai-article {
+  animation: ai-article-in 0.6s ease-out forwards;
+  opacity: 0;
+}
+@keyframes ai-article-in {
+  to {
+    opacity: 1;
+  }
+}
+.ai-title {
+  animation: ai-title-in 0.5s ease-out 0.15s forwards;
+  opacity: 0;
+}
+@keyframes ai-title-in {
+  to {
+    opacity: 1;
+  }
+}
+.ai-prose-body {
+  animation: ai-prose-in 0.6s ease-out 0.35s forwards;
+  opacity: 0;
+}
+@keyframes ai-prose-in {
+  to {
+    opacity: 1;
+  }
+}
+/* 标题/正文区光晕 */
+body.ai-page .ai-content .prose .ai-title {
+  text-shadow:
+    0 0 20px rgba(132, 214, 255, 0.18),
+    0 0 36px rgba(160, 224, 255, 0.16);
+}
+body.ai-page .ai-content .prose .ai-prose-body {
+  box-shadow: inset 0 0 80px rgba(124, 206, 255, 0.035);
+}
+/* GPU 金属边框：铝银质感 */
+body.ai-page .ai-content .prose::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(
+    135deg,
+    rgba(200, 210, 225, 0.4) 0%,
+    rgba(140, 155, 180, 0.25) 25%,
+    rgba(100, 115, 140, 0.2) 50%,
+    rgba(140, 155, 180, 0.28) 75%,
+    rgba(180, 195, 215, 0.35) 100%
+  );
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+body.ai-page .ai-content .prose:hover::before {
+  opacity: 1.3;
+}
+/* 链接 hover 光晕/脉冲 */
+body.ai-page .ai-content .prose a {
+  text-decoration: none;
+  padding: 0 2px;
+  border-radius: 2px;
+  transition:
+    box-shadow 0.25s ease,
+    text-shadow 0.25s ease,
+    color 0.25s ease;
+}
+body.ai-page .ai-content .prose a:hover {
+  box-shadow:
+    0 0 12px rgba(140, 210, 242, 0.4),
+    0 0 24px rgba(132, 214, 255, 0.28);
+  text-shadow:
+    0 0 10px rgba(162, 222, 248, 0.56),
+    0 0 20px rgba(138, 214, 255, 0.3);
+  color: rgba(190, 236, 255, 0.98);
+}
+/* 代码块：输出窗口风格 */
+body.ai-page .ai-content .prose code {
+  background: rgba(10, 18, 30, 0.72);
+  border: 1px solid rgba(126, 192, 224, 0.26);
+  color: rgba(196, 232, 248, 0.92);
+}
+body.ai-page .ai-content .prose pre {
+  background: rgba(8, 12, 22, 0.88);
+  border: 1px solid rgba(142, 218, 255, 0.2);
+  box-shadow:
+    inset 0 0 34px rgba(14, 34, 54, 0.44),
+    0 0 20px rgba(132, 214, 255, 0.08),
+    0 0 0 1px rgba(146, 214, 244, 0.14);
+  border-radius: 6px;
+  overflow: hidden;
+}
+body.ai-page .ai-content .prose pre code {
+  background: transparent;
+  border: none;
+  color: inherit;
+}
+/* 引用块：输出窗口风格 + 命令提示符 */
+body.ai-page .ai-content .prose blockquote {
+  position: relative;
+  background: rgba(12, 18, 30, 0.64);
+  border: 1px solid rgba(126, 192, 224, 0.22);
+  border-left: 3px solid rgba(146, 214, 244, 0.56);
+  padding: 1em 1.25em 1em 2.5em;
+  border-radius: 4px;
+  box-shadow:
+    0 0 16px rgba(136, 206, 238, 0.1),
+    inset 0 0 20px rgba(8, 28, 44, 0.26);
+}
+body.ai-page .ai-content .prose blockquote::before {
+  content: ">";
+  position: absolute;
+  left: 0.6em;
+  top: 1em;
+  color: rgba(156, 220, 246, 0.8);
+  font-family: monospace;
+  font-weight: bold;
+}
+/* 代码块命令提示符 */
+body.ai-page .ai-content .prose pre {
+  position: relative;
+  padding-left: 2.5em;
+  padding-top: 2.2em;
+}
+body.ai-page .ai-content .prose pre::before {
+  content: "●  ●  ●   runtime";
+  position: absolute;
+  left: 1em;
+  top: 0.9em;
+  color: rgba(168, 226, 248, 0.72);
+  font-family: monospace;
+  font-size: 0.72em;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  text-shadow: 0 0 8px rgba(124, 206, 246, 0.28);
+}
+body.ai-page .ai-content .prose pre::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    110deg,
+    rgba(132, 214, 255, 0) 0%,
+    rgba(132, 214, 255, 0.18) 48%,
+    rgba(132, 214, 255, 0) 100%
+  );
+  transform: translateX(-130%);
+  transition: transform 0.5s ease;
+}
+body.ai-page .ai-content .prose pre:hover::after {
+  transform: translateX(130%);
+}
+body.ai-page .ai-content .prose blockquote::after {
+  content: "reference";
+  position: absolute;
+  right: 1em;
+  top: 0.9em;
+  color: rgba(172, 230, 252, 0.64);
+  font-family: ui-monospace, monospace;
+  font-size: 0.66em;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+body.ai-page header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 11;
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+}
+body.ai-page .ai-content {
+  padding-top: calc(3em + 56px);
+}
+@media (max-width: 720px) {
+  body.ai-page .ai-content {
+    padding-top: calc(1em + 56px);
+  }
+}

package/src/styles/ai/related.css

@@ -0,0 +1,106 @@
+/* AI related layer: related-post cards and back-to-blog controls. */
+/* ========== 相关文章 + 返回博客 ========== */
+.ai-related {
+  width: 720px;
+  max-width: calc(100% - 2em);
+  margin: 2.5rem auto 1.5rem;
+}
+.ai-related-title {
+  font-size: 0.9em;
+  color: rgba(172, 228, 252, 0.88);
+  margin-bottom: 1rem;
+  font-weight: 500;
+}
+.ai-related-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+@media (max-width: 780px) {
+  .ai-related-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.ai-related-card {
+  display: block;
+  background: rgba(12, 10, 20, 0.7);
+  border: 1px solid rgba(126, 192, 224, 0.24);
+  border-radius: 6px;
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    border-color 0.2s ease;
+}
+.ai-related-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 0 24px rgba(124, 206, 246, 0.2);
+  border-color: rgba(172, 228, 255, 0.34);
+}
+.ai-related-img {
+  aspect-ratio: 16/9;
+  overflow: hidden;
+}
+.ai-related-img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.ai-related-placeholder {
+  aspect-ratio: 16/9;
+  background: linear-gradient(
+    135deg,
+    rgba(22, 8, 16, 0.9),
+    rgba(14, 24, 42, 0.8)
+  );
+  border-bottom: 1px solid rgba(126, 192, 224, 0.22);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ai-related-placeholder span {
+  font-size: 2em;
+  color: rgba(168, 222, 246, 0.62);
+  font-weight: 600;
+}
+.ai-related-card-title {
+  padding: 0.75rem 1rem 0.25rem;
+  font-size: 0.95em;
+  margin: 0;
+  color: rgba(220, 245, 255, 0.95);
+}
+.ai-related-card-date {
+  padding: 0 1rem 0.75rem;
+  font-size: 0.75em;
+  color: rgba(176, 216, 238, 0.66);
+  margin: 0;
+}
+.ai-back-to-blog {
+  width: 720px;
+  max-width: calc(100% - 2em);
+  margin: 0 auto 2.5rem;
+}
+.ai-back-to-blog a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: ui-monospace, monospace;
+  font-size: 0.9em;
+  color: rgba(188, 226, 248, 0.84);
+  text-decoration: none;
+  padding: 0.5rem 0;
+  transition:
+    color 0.2s ease,
+    text-shadow 0.2s ease;
+}
+.ai-back-to-blog a:hover {
+  color: rgba(188, 236, 255, 0.98);
+  text-shadow: 0 0 12px rgba(124, 206, 246, 0.3);
+}
+.ai-back-prompt {
+  color: rgba(154, 218, 246, 0.78);
+}
+
+/* 回到顶部按钮：芯片电路图风格 */

package/src/styles/ai/responsive.css

@@ -0,0 +1,49 @@
+/* AI responsive layer: viewport-specific overrides. */
+.ai-back-to-top {
+  position: fixed;
+  /* 文章宽 720px 居中时，右半边空隙中心 = (100vw - 720px)/2 + 720px + (100vw - 720px)/4 = 75vw + 180px */
+  left: calc(75vw + 180px);
+  top: 68%;
+  transform: translate(-50%, calc(-50% + 8px));
+  z-index: 50;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: 1px solid rgba(126, 192, 224, 0.44);
+  border-radius: 10px;
+  background:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='rgba(80,160,220,0.5)'/%3E%3Cstop offset='1' stop-color='rgba(100,180,240,0.35)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='6' y='6' width='32' height='32' rx='2' fill='none' stroke='url(%23g)' stroke-width='0.8'/%3E%3Cpath d='M6 8 Q6 6 8 6' fill='none' stroke='url(%23g)' stroke-width='0.8'/%3E%3Crect x='18' y='18' width='8' height='8' fill='rgba(124,206,246,0.08)' stroke='rgba(100,180,220,0.5)' stroke-width='0.6'/%3E%3Crect x='10' y='4' width='3' height='2' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='17' y='4' width='3' height='2' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='24' y='4' width='3' height='2' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='31' y='4' width='3' height='2' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='10' y='38' width='3' height='2' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='17' y='38' width='3' height='2' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='24' y='38' width='3' height='2' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='31' y='38' width='3' height='2' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='4' y='10' width='2' height='3' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='4' y='17' width='2' height='3' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='4' y='24' width='2' height='3' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='4' y='31' width='2' height='3' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='38' y='10' width='2' height='3' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='38' y='17' width='2' height='3' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='38' y='24' width='2' height='3' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='38' y='31' width='2' height='3' fill='rgba(100,180,220,0.5)'/%3E%3Cline x1='12' y1='6' x2='12' y2='18' stroke='rgba(100,180,220,0.35)' stroke-width='0.5'/%3E%3Cline x1='19' y1='6' x2='19' y2='18' stroke='rgba(100,180,220,0.35)' stroke-width='0.5'/%3E%3Cline x1='26' y1='6' x2='26' y2='18' stroke='rgba(100,180,220,0.35)' stroke-width='0.5'/%3E%3Cline x1='33' y1='6' x2='33' y2='18' stroke='rgba(100,180,220,0.35)' stroke-width='0.5'/%3E%3Cline x1='6' y1='12' x2='18' y2='12' stroke='rgba(100,180,220,0.35)' stroke-width='0.5'/%3E%3Cline x1='6' y1='19' x2='18' y2='19' stroke='rgba(100,180,220,0.35)' stroke-width='0.5'/%3E%3Cline x1='26' y1='12' x2='38' y2='12' stroke='rgba(100,180,220,0.35)' stroke-width='0.5'/%3E%3Cline x1='26' y1='19' x2='38' y2='19' stroke='rgba(100,180,220,0.35)' stroke-width='0.5'/%3E%3C/svg%3E"),
+    linear-gradient(180deg, rgba(12, 22, 36, 0.95), rgba(8, 16, 28, 0.98));
+  background-size: 100% 100%, 100% 100%;
+  background-position: 0 0, 0 0;
+  color: rgba(190, 236, 255, 0.95);
+  font-size: 1.35em;
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    opacity 0.25s ease,
+    transform 0.25s ease,
+    border-color 0.2s,
+    box-shadow 0.2s;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 0 20px rgba(124, 206, 246, 0.18);
+}
+.ai-back-to-top.visible {
+  opacity: 1;
+  transform: translate(-50%, -50%);
+}
+.ai-back-to-top:hover {
+  border-color: rgba(162, 222, 248, 0.72);
+  box-shadow: 0 0 24px rgba(124, 206, 246, 0.36);
+}
+@media (max-width: 840px) {
+  /* 视口较窄时右侧空隙太小，改回贴右 */
+  .ai-back-to-top {
+    left: auto;
+    right: 1rem;
+    transform: translateY(calc(-50% + 8px));
+  }
+  .ai-back-to-top.visible {
+    transform: translateY(-50%);
+  }
+}