@xingwangzhe/stalux 1.29.8 → 1.30.0

package/src/styles/theme/prose.css

@@ -0,0 +1,478 @@
+@layer components {
+    .stalux-prose {
+        font-family:
+            var(--font-body), "Noto Sans SC", "Noto Sans CJK SC", system-ui, -apple-system,
+            sans-serif;
+        font-size: var(--font-size-base);
+        line-height: 1.75;
+        color: var(--white-85p);
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-rendering: optimizeLegibility;
+    }
+
+    .stalux-prose h1,
+    .stalux-prose h2,
+    .stalux-prose h3,
+    .stalux-prose h4,
+    .stalux-prose h5,
+    .stalux-prose h6 {
+        @apply font-semibold;
+        color: var(--white-full);
+        line-height: 1.3;
+        margin-top: var(--space-xl);
+        margin-bottom: var(--space-md);
+    }
+
+    .stalux-prose h1 {
+        @apply font-bold;
+        font-size: 2.6rem;
+        line-height: 1.25;
+        margin-top: 2.5rem;
+        margin-bottom: var(--space-lg);
+        border-bottom: 3px solid var(--accent-50p);
+        padding-bottom: 0.6rem;
+    }
+
+    .stalux-prose h2 {
+        font-size: 2rem;
+        font-weight: 650;
+        line-height: 1.3;
+        margin-top: 2.5rem;
+        margin-bottom: var(--space-md);
+        border-bottom: 2px solid var(--accent-30p);
+        padding-bottom: 0.4rem;
+    }
+
+    .stalux-prose h3 {
+        @apply font-semibold;
+        font-size: 1.5rem;
+        line-height: 1.4;
+        margin-top: 2rem;
+        margin-bottom: var(--space-md);
+        color: var(--white-95p);
+    }
+
+    .stalux-prose h4 {
+        @apply font-semibold;
+        font-size: 1.25rem;
+        line-height: 1.45;
+        margin-top: 1.5rem;
+        margin-bottom: 0.6rem;
+        color: var(--white-90p);
+    }
+
+    .stalux-prose h5 {
+        @apply font-semibold;
+        font-size: 1.1rem;
+        line-height: 1.5;
+        margin-top: 1.5rem;
+        margin-bottom: 0.5rem;
+        color: var(--white-90p);
+    }
+
+    .stalux-prose h6 {
+        @apply font-semibold;
+        font-size: 1rem;
+        line-height: 1.5;
+        margin-top: 1.5rem;
+        margin-bottom: 0.5rem;
+        color: var(--white-80p);
+    }
+
+    .stalux-prose p {
+        margin: 0 0 var(--space-lg);
+        line-height: 1.75;
+    }
+
+    .stalux-prose strong {
+        @apply font-semibold;
+        color: #ffd966;
+    }
+
+    .stalux-prose em {
+        @apply italic;
+        color: var(--white-85p);
+    }
+
+    .stalux-prose strong em,
+    .stalux-prose em strong {
+        color: #ffd966;
+    }
+
+    .stalux-prose del {
+        color: var(--white-60p);
+    }
+
+    .stalux-prose mark {
+        @apply text-inherit;
+        background-color: rgba(255, 217, 102, 0.25);
+        padding: 0.1em 0.2em;
+        border-radius: 2px;
+    }
+
+    .stalux-prose kbd {
+        font-family:
+            var(--font-code), "JetBrains Mono", "Fira Code", "Consolas", "Courier New", monospace;
+        font-size: 0.85em;
+        background-color: var(--white-10p);
+        border: 1px solid var(--white-20p);
+        border-radius: 4px;
+        padding: 0.15em 0.4em;
+        color: var(--white-85p);
+    }
+
+    .stalux-prose sup,
+    .stalux-prose sub {
+        font-size: 0.8em;
+    }
+
+    .stalux-prose a {
+        @apply no-underline;
+        color: var(--accent-80p);
+        border-bottom: 2px solid transparent;
+        transition:
+            color var(--transition-fast) ease,
+            border-bottom-color var(--transition-fast) ease;
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        word-break: break-word;
+    }
+
+    .stalux-prose a:hover,
+    .stalux-prose a:focus-visible {
+        color: var(--accent-90p);
+        border-bottom-color: var(--accent-60p);
+    }
+
+    .stalux-prose code {
+        font-family:
+            var(--font-code), "JetBrains Mono", "Fira Code", "Consolas", "Courier New", monospace;
+        font-size: 0.88em;
+        color: #ff92d0;
+        background-color: rgba(255, 121, 198, 0.15);
+        padding: 0.2em 0.4em;
+        border-radius: 4px;
+        border: 1px solid rgba(255, 121, 198, 0.25);
+    }
+
+    .stalux-prose pre {
+        @apply overflow-x-auto;
+        background: var(--black-30p);
+        color: var(--white-85p);
+        padding: 1.2rem 1.5rem;
+        border-radius: 8px;
+        border-left: 4px solid var(--accent-60p);
+        margin: var(--space-xl) 0;
+        font-size: 0.92em;
+        line-height: 1.65;
+        font-family:
+            var(--font-code), "JetBrains Mono", "Fira Code", "Consolas", "Courier New", monospace;
+        box-shadow: var(--shadow-md);
+    }
+
+    .stalux-prose pre code {
+        @apply text-inherit p-0;
+        background: none;
+        border: none;
+        font-size: inherit;
+        font-family: inherit;
+    }
+    .expressive-code pre,
+    .expressive-code code {
+        all: revert;
+    }
+
+    .stalux-prose ul,
+    .stalux-prose ol {
+        margin: 0 0 var(--space-lg);
+        padding-left: 1.75rem;
+    }
+
+    .stalux-prose li {
+        margin: 0.4rem 0;
+        line-height: 1.75;
+        color: var(--white-85p);
+    }
+
+    .stalux-prose ul li {
+        list-style: disc;
+    }
+
+    .stalux-prose ul li ul li {
+        list-style: circle;
+    }
+
+    .stalux-prose ul li ul li ul li {
+        list-style: square;
+    }
+
+    .stalux-prose ol li {
+        list-style: decimal;
+    }
+
+    .stalux-prose ol li ol li {
+        list-style: lower-alpha;
+    }
+
+    .stalux-prose li > ul,
+    .stalux-prose li > ol {
+        margin-top: 0.3rem;
+        margin-bottom: 0.3rem;
+    }
+
+    .stalux-prose blockquote {
+        margin: var(--space-xl) 0;
+        padding: 1rem 1.5rem;
+        border-left: 4px solid var(--accent-60p);
+        background: var(--black-10p);
+        border-radius: 0 8px 8px 0;
+        color: var(--white-75p);
+    }
+
+    .stalux-prose blockquote p {
+        @apply m-0;
+        line-height: 1.7;
+    }
+
+    .stalux-prose blockquote p + p {
+        margin-top: 0.8rem;
+    }
+
+    .stalux-prose blockquote strong {
+        color: #ffd966;
+    }
+
+    .stalux-prose blockquote code {
+        font-size: 0.85em;
+    }
+
+    .stalux-prose table {
+        @apply w-full overflow-hidden block overflow-x-auto;
+        border-collapse: collapse;
+        margin: var(--space-xl) 0;
+        box-shadow: var(--shadow-md);
+        border-radius: 8px;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .stalux-prose th,
+    .stalux-prose td {
+        @apply text-left;
+        padding: 0.75rem 1rem;
+        border-bottom: 1px solid var(--white-10p);
+        line-height: 1.6;
+    }
+
+    .stalux-prose th {
+        @apply font-semibold whitespace-nowrap;
+        background: var(--accent-30p);
+        color: var(--white-full);
+        font-size: 0.95em;
+    }
+
+    .stalux-prose td {
+        color: var(--white-85p);
+    }
+
+    .stalux-prose tr:nth-child(even) td {
+        background-color: var(--white-05p);
+    }
+
+    .stalux-prose tr:hover td {
+        background-color: var(--black-10p);
+    }
+
+    .stalux-prose table code {
+        font-size: 0.85em;
+    }
+
+    .stalux-prose img {
+        @apply max-w-full block;
+        height: auto;
+        margin: var(--space-xl) auto;
+        border-radius: 8px;
+        box-shadow: var(--shadow-lg);
+        transition:
+            transform var(--transition-normal) ease,
+            box-shadow var(--transition-normal) ease;
+    }
+
+    .stalux-prose img:hover {
+        transform: scale(1.02);
+        box-shadow: var(--shadow-xl);
+    }
+
+    .stalux-prose iframe,
+    .stalux-prose embed,
+    .stalux-prose video {
+        @apply max-w-full block;
+        height: auto;
+        margin: var(--space-xl) auto;
+        border-radius: 8px;
+    }
+
+    .stalux-prose hr {
+        margin: var(--space-2xl) 0;
+        border: none;
+        height: 1.5px;
+        background: linear-gradient(
+            90deg,
+            transparent,
+            var(--white-15p) 20%,
+            var(--accent-40p) 50%,
+            var(--white-15p) 80%,
+            transparent
+        );
+    }
+
+    .stalux-prose details {
+        margin: var(--space-lg) 0;
+        padding: 0.8rem 1rem;
+        background-color: var(--white-05p);
+        border: 1px solid var(--white-10p);
+        border-radius: 6px;
+        transition: border-color var(--transition-fast) ease;
+    }
+
+    .stalux-prose details:hover {
+        border-color: var(--white-20p);
+    }
+
+    .stalux-prose summary {
+        @apply cursor-pointer font-semibold;
+        color: var(--white-90p);
+    }
+
+    .stalux-prose details[open] summary {
+        margin-bottom: 0.8rem;
+        padding-bottom: 0.6rem;
+        border-bottom: 1px solid var(--white-10p);
+    }
+
+    .stalux-prose figure {
+        @apply text-center;
+        margin: var(--space-xl) 0;
+    }
+
+    .stalux-prose figcaption {
+        @apply italic;
+        font-size: 0.9em;
+        color: var(--white-70p);
+        margin-top: 0.5rem;
+    }
+
+    .stalux-prose .footnotes {
+        font-size: 0.88em;
+        color: var(--white-75p);
+        border-top: 1px solid var(--white-15p);
+        margin-top: var(--space-2xl);
+        padding-top: var(--space-lg);
+    }
+
+    .stalux-prose .footnotes ol {
+        margin-left: 1rem;
+        padding-left: 0.5rem;
+    }
+
+    .stalux-prose .footnotes li {
+        margin: 0.5rem 0;
+        line-height: 1.6;
+    }
+
+    .stalux-prose .footnotes a {
+        font-size: 0.9em;
+    }
+
+    @media (max-width: 1024px) {
+        .stalux-prose {
+            font-size: 1.05rem;
+        }
+
+        .stalux-prose h1 {
+            font-size: 2.2rem;
+        }
+
+        .stalux-prose h2 {
+            font-size: 1.8rem;
+        }
+
+        .stalux-prose h3 {
+            font-size: 1.35rem;
+        }
+
+        .stalux-prose h4 {
+            font-size: 1.15rem;
+        }
+
+        .stalux-prose pre {
+            font-size: 0.88em;
+            padding: 1rem 1.2rem;
+        }
+    }
+
+    @media (max-width: 768px) {
+        .stalux-prose {
+            font-size: 1rem;
+            line-height: 1.7;
+        }
+
+        .stalux-prose h1 {
+            font-size: 1.8rem;
+            margin-top: 1.5rem;
+        }
+
+        .stalux-prose h2 {
+            font-size: 1.4rem;
+            margin-top: 1.5rem;
+        }
+
+        .stalux-prose h3 {
+            font-size: 1.2rem;
+            margin-top: 1.25rem;
+        }
+
+        .stalux-prose h4 {
+            font-size: 1.1rem;
+            margin-top: 1rem;
+        }
+
+        .stalux-prose h5 {
+            font-size: 1rem;
+        }
+
+        .stalux-prose h6 {
+            font-size: 0.95rem;
+        }
+
+        .stalux-prose p {
+            margin-bottom: var(--space-md);
+        }
+
+        .stalux-prose pre {
+            font-size: 0.82em;
+            padding: 0.8rem 1rem;
+            margin: var(--space-lg) 0;
+            border-left-width: 3px;
+        }
+
+        .stalux-prose table {
+            font-size: 0.85rem;
+        }
+
+        .stalux-prose th,
+        .stalux-prose td {
+            padding: 0.5rem 0.7rem;
+        }
+
+        .stalux-prose blockquote {
+            padding: 0.8rem 1rem;
+            font-size: 0.9em;
+        }
+
+        .stalux-prose ul,
+        .stalux-prose ol {
+            padding-left: 1.5rem;
+        }
+    }
+}

package/src/styles/theme/tags.css

@@ -0,0 +1,130 @@
+@layer components {
+    /* tagsCloud */
+
+    @supports not (content-visibility: auto) {
+        .stalux-cloud-tag-group {
+            contain-intrinsic-block-size: auto;
+        }
+    }
+
+    @media (min-width: 769px) {
+        .stalux-cloud-cards {
+            @apply hidden;
+        }
+    }
+    .stalux-cloud-canvas {
+        @apply hidden w-full relative;
+        --cloud-base-diameter: 660px;
+        height: min(calc(var(--cloud-base-diameter) * var(--cloud-density)), 120cqw);
+        min-height: 520px;
+    }
+
+    @media (min-width: 769px) {
+        .stalux-cloud-canvas {
+            @apply block;
+        }
+    }
+
+    .stalux-cloud-tag-card::before {
+        @apply absolute;
+        content: "";
+        inset: 0;
+        background: linear-gradient(
+            120deg,
+            rgba(255, 255, 255, 0),
+            var(--white-10p),
+            rgba(255, 255, 255, 0)
+        );
+        transform: translateX(-100%);
+        transition: transform var(--transition-slowest);
+        z-index: 1;
+    }
+
+    .stalux-cloud-tag-card:hover {
+        transform: translateY(-2px);
+        border-color: var(--accent-50p);
+        box-shadow: var(--card-box-shadow-hover);
+    }
+
+    .stalux-cloud-tag-card:hover::before {
+        transform: translateX(100%);
+    }
+    .stalux-cloud-tag-card[data-count="1"] {
+        font-size: 0.9rem;
+        padding: 0.3rem 0.8rem;
+    }
+    .stalux-cloud-tag-card[data-count="2"] {
+        font-size: 1rem;
+        padding: 0.4rem 0.9rem;
+    }
+    .stalux-cloud-tag-card[data-count="3"] {
+        font-size: 1.1rem;
+        padding: 0.5rem 1rem;
+    }
+    .stalux-cloud-tag-card[data-count^="4"],
+    .stalux-cloud-tag-card[data-count^="5"] {
+        font-size: 1.2rem;
+        padding: 0.6rem 1.1rem;
+    }
+    .stalux-cloud-tag-card[data-count^="6"],
+    .stalux-cloud-tag-card[data-count^="7"],
+    .stalux-cloud-tag-card[data-count^="8"],
+    .stalux-cloud-tag-card[data-count^="9"] {
+        font-size: 1.3rem;
+        padding: 0.7rem 1.2rem;
+    }
+
+    @media (min-width: 1024px) {
+        .stalux-cloud-canvas {
+            --cloud-base-diameter: 840px;
+        }
+    }
+    @media (min-width: 1440px) {
+        .stalux-cloud-canvas {
+            --cloud-base-diameter: 960px;
+        }
+    }
+
+    /* tagHeader */
+    .stalux-tag-header {
+        @apply relative;
+        margin: 3em;
+        margin-bottom: 2.5rem;
+        padding-bottom: 1rem;
+        border-bottom: 1px solid var(--white-10p);
+
+        & .stalux-tag-page-title {
+            @apply stalux-flex-row;
+            font-size: 1.8rem;
+            margin-bottom: 0.5rem;
+            color: var(--white-full);
+
+            & .stalux-tag-category-icon {
+                margin-right: 0.8rem;
+                color: var(--accent-80p);
+            }
+
+            & .stalux-tag-category-name {
+                color: var(--accent-90p);
+                font-weight: 500;
+            }
+        }
+
+        & .stalux-tag-page-description {
+            font-size: 1rem;
+            color: var(--white-70p);
+            margin-bottom: 0.5rem;
+        }
+
+        & .stalux-tag-back-link {
+            @apply no-underline inline-block;
+            font-size: 0.9rem;
+            color: var(--white-60p);
+            transition: color var(--transition-fast) ease;
+
+            &:hover {
+                color: var(--accent-90p);
+            }
+        }
+    }
+}

package/src/styles/theme/words.css

@@ -0,0 +1,84 @@
+@layer components {
+    /* wordList */
+
+    @media (max-width: 768px) {
+        .stalux-word-list-list {
+            gap: 1rem;
+            margin: 1.5rem auto;
+        }
+
+        .stalux-word-list-item {
+            @apply max-w-full;
+        }
+    }
+
+    /* wordCard */
+
+    .stalux-word-body .expressive-code {
+        @apply max-w-full overflow-x-auto;
+    }
+
+    .stalux-word-card:hover {
+        transform: translateY(-4px);
+        box-shadow: var(--card-box-shadow-hover);
+    }
+    .stalux-word-card:target,
+    .stalux-word-card[data-glow] {
+        animation: stalux-word-word-glow 2s ease-out;
+        box-shadow:
+            0 0 20px var(--accent-40p),
+            0 0 60px var(--accent-20p),
+            var(--shadow-lg);
+    }
+
+    @keyframes stalux-word-word-glow {
+        0% {
+            box-shadow:
+                0 0 30px var(--accent-50p),
+                0 0 80px var(--accent-30p),
+                var(--shadow-lg);
+            transform: scale(1.02);
+        }
+        100% {
+            box-shadow:
+                0 0 20px var(--accent-40p),
+                0 0 60px var(--accent-20p),
+                var(--shadow-lg);
+            transform: scale(1);
+        }
+    }
+
+    .stalux-word-body h1,
+    .stalux-word-body h2,
+    .stalux-word-body h3,
+    .stalux-word-body h4,
+    .stalux-word-body h5,
+    .stalux-word-body h6 {
+        font-size: 1.1em;
+        margin: 0.5rem 0;
+    }
+
+    .stalux-word-body p {
+        margin: 0.5rem 0;
+    }
+
+    .stalux-word-body blockquote {
+        margin: 0.5rem 0;
+        padding: 0.6rem 1rem;
+        border-left: 3px solid var(--accent-60p);
+        background: var(--white-05p);
+    }
+    .stalux-word-body pre {
+        white-space: pre-wrap;
+        word-break: break-word;
+        overflow-x: visible;
+    }
+
+    .stalux-word-body code {
+        word-break: break-word;
+    }
+
+    .stalux-word-source-link:hover {
+        color: var(--accent-90p);
+    }
+}

package/src/styles/theme.css

@@ -0,0 +1,12 @@
+@layer theme, base, components, utilities;
+@import "./theme/pages.css";
+@import "./theme/posts.css";
+@import "./theme/links.css";
+@import "./theme/layout.css";
+@import "./theme/footer.css";
+@import "./theme/common.css";
+@import "./theme/inline.css";
+@import "./theme/base.css";
+@import "./shared/animations.css";
+@import "./shared/stagger.css";
+@import "./shared/view-transitions.css";

package/src/styles/words.css

@@ -0,0 +1,2 @@
+@layer theme, base, components, utilities;
+@import "./theme/words.css";