@xingwangzhe/stalux 1.29.7 → 1.30.0

package/src/styles/theme/layout.css

@@ -0,0 +1,143 @@
+@layer components {
+    /* navs */
+    nav {
+        @apply w-full min-w-0 max-w-full;
+    }
+    .stalux-nav-scroll-btn:hover {
+        background: transparent;
+    }
+
+    .stalux-nav-scroll-btn[data-visible] {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    .stalux-nav-scroll-btn[data-side="left"] {
+        left: 4px;
+    }
+
+    .stalux-nav-scroll-btn[data-side="right"] {
+        right: 4px;
+    }
+    .stalux-nav-container:hover .stalux-nav-scroll-btn[data-visible] {
+        opacity: 1;
+    }
+    .stalux-nav-scroll-btn svg {
+        width: 20px;
+        height: 20px;
+        stroke: currentColor;
+        stroke-width: 2;
+        fill: none;
+    }
+
+    .stalux-nav-link,
+    .stalux-nav-link:visited {
+        @apply text-inherit no-underline cursor-pointer stalux-flex-row w-full;
+        background: none;
+        border: none;
+        font: inherit;
+        padding: 0.5rem 0.75rem;
+        gap: 0.5rem;
+        min-height: 44px;
+    }
+
+    .stalux-nav-link .nav-icon {
+        stroke: var(--white-full);
+    }
+
+    .stalux-nav-link:hover .nav-icon,
+    .stalux-nav-link:hover .stalux-nav-text {
+        stroke: var(--stalux-accent-color);
+        color: var(--stalux-accent-color);
+    }
+
+    .stalux-nav-toggle svg {
+        width: 32px;
+        height: 32px;
+    }
+
+    .stalux-nav-overlay[data-state="show"] {
+        @apply block;
+        opacity: 1;
+        pointer-events: auto;
+    }
+    @media (max-width: 1100px) {
+        .stalux-nav-list {
+            gap: 1rem;
+        }
+
+        .stalux-nav-item {
+            font-size: 1em;
+            margin-right: 0.6em;
+            margin-left: 0.6em;
+        }
+    }
+    @media (max-width: 900px) {
+        .stalux-nav-item {
+            font-size: 0.95em;
+            margin-right: 0.25em;
+            margin-left: 0.25em;
+        }
+
+        .stalux-nav-list {
+            gap: 0.5rem;
+        }
+    }
+    @media (max-width: 600px) {
+        .stalux-nav-toggle {
+            @apply block fixed;
+            top: 0.75rem;
+            left: 0.75rem;
+        }
+
+        .stalux-nav-container {
+            overflow: visible;
+        }
+
+        nav {
+            width: auto;
+        }
+
+        .stalux-nav-list {
+            @apply fixed flex-col items-start justify-start overflow-y-auto pointer-events-none;
+            top: 0;
+            left: 0;
+            right: auto;
+            width: min(220px, calc(100vw - 1rem));
+            height: 100vh;
+            background: var(--black-20p);
+            backdrop-filter: blur(20px);
+            gap: 0;
+            padding: 0.5rem 1rem 2rem 1rem;
+            transform: translateX(-100%);
+            z-index: 1000;
+        }
+
+        .stalux-nav-list[data-state="open"] {
+            transform: translateX(0);
+            pointer-events: auto;
+        }
+
+        .stalux-nav-item {
+            @apply w-full m-0 shrink-0;
+            border-bottom: 1px solid var(--white-10p);
+            font-size: 0.9em;
+        }
+
+        .stalux-nav-text {
+            display: inline;
+        }
+
+        .stalux-nav-link {
+            @apply w-full;
+            padding: 0.45rem 0.75rem;
+            min-height: 44px;
+            font-size: inherit;
+        }
+
+        .stalux-nav-link .nav-icon {
+            width: 18px;
+            height: 18px;
+        }
+    }
+}

package/src/styles/theme/link-cards.css

@@ -0,0 +1,114 @@
+@layer components {
+    /* linkList */
+    @media (min-width: 1400px) {
+        .stalux-links {
+            grid-template-columns: repeat(5, 1fr);
+        }
+    }
+    @media (1100px <= width <= 1399px) {
+        .stalux-links {
+            grid-template-columns: repeat(4, 1fr);
+        }
+    }
+    @media (768px <= width <= 1099px) {
+        .stalux-links {
+            grid-template-columns: repeat(3, 1fr);
+        }
+    }
+    @media (480px <= width <= 767px) {
+        .stalux-links {
+            grid-template-columns: repeat(2, 1fr);
+            gap: 16px;
+        }
+    }
+    @media (max-width: 479px) {
+        .stalux-links {
+            grid-template-columns: 1fr;
+            gap: 14px;
+            margin: 20px auto;
+        }
+    }
+
+    /* linkCard */
+
+    .stalux-link-card:hover {
+        transform: translateY(-3px);
+        background: var(--white-05p);
+        box-shadow: var(--card-box-shadow-hover);
+    }
+
+    .stalux-link-card-avatar img {
+        @apply rounded-full object-cover;
+        width: 80px;
+        height: 80px;
+        border: 2px solid var(--accent-60p);
+        transform-origin: center;
+        transition:
+            transform 220ms ease,
+            border-color 220ms ease;
+    }
+
+    .stalux-link-card:hover .stalux-link-card-avatar img {
+        transform: scale(1.04);
+        animation: stalux-link-avatar-spin 700ms ease-in-out 1;
+        box-shadow: 0 0 20px var(--accent-50p);
+        border-color: var(--accent-85p);
+    }
+
+    @keyframes stalux-link-avatar-spin {
+        from {
+            transform: rotate(0deg) scale(1.04);
+        }
+        to {
+            transform: rotate(360deg) scale(1.04);
+        }
+    }
+
+    .stalux-link-card-title {
+        @apply whitespace-nowrap overflow-hidden;
+        font-size: 1.1rem;
+        margin: 0 0 8px 0;
+        background: linear-gradient(90deg, var(--white-95p), var(--accent-90p));
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        text-overflow: ellipsis;
+    }
+
+    .stalux-link-card-description {
+        @apply m-0 overflow-hidden;
+        font-size: 0.95rem;
+        color: var(--white-78p);
+        line-height: 1.45;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        text-overflow: ellipsis;
+    }
+
+    @media (max-width: 480px) {
+        .stalux-link-card {
+            padding: 14px;
+        }
+
+        .stalux-link-card-avatar img {
+            width: 70px;
+            height: 70px;
+        }
+
+        .stalux-link-card-title {
+            font-size: 1rem;
+        }
+
+        .stalux-link-card-description {
+            font-size: 0.9rem;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .stalux-link-card:hover .stalux-link-card-avatar img {
+            animation: none;
+            transform: none;
+            transition: none;
+        }
+    }
+}

package/src/styles/theme/links.css

@@ -0,0 +1,69 @@
+@layer components {
+    /* socialLinks */
+    .stalux-social {
+        margin-top: 3em;
+        ul {
+            @apply flex flex-wrap justify-center p-0 m-0;
+            gap: 1em;
+            li {
+                @apply inline-flex items-center justify-center text-center rounded-full box-border overflow-hidden;
+                font-size: large;
+                width: 2.5em;
+                height: 2.5em;
+                background-color: var(--white-15p);
+            }
+            a,
+            .stalux-social-icon-container,
+            .stalux-social-custom-icon {
+                @apply inline-flex items-center justify-center w-full h-full;
+                line-height: 1;
+            }
+        }
+    }
+
+    .stalux-social[data-stalux-social-animate="true"] li {
+        animation: stalux-social-stalux-social-arrive 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+    }
+
+    .stalux-social[data-stalux-social-animate="true"] li:nth-child(2) {
+        animation-delay: 30ms;
+    }
+
+    .stalux-social[data-stalux-social-animate="true"] li:nth-child(3) {
+        animation-delay: 60ms;
+    }
+
+    .stalux-social[data-stalux-social-animate="true"] li:nth-child(4) {
+        animation-delay: 90ms;
+    }
+
+    .stalux-social[data-stalux-social-animate="true"] li:nth-child(5) {
+        animation-delay: 120ms;
+    }
+
+    .stalux-social[data-stalux-social-animate="true"] li:nth-child(6) {
+        animation-delay: 150ms;
+    }
+
+    .stalux-social[data-stalux-social-animate="true"] li:nth-child(n + 7) {
+        animation-delay: 180ms;
+    }
+
+    @keyframes stalux-social-stalux-social-arrive {
+        from {
+            opacity: 0;
+            transform: translateY(0.75rem) rotate(-12deg);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0) rotate(0);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .stalux-social[data-stalux-social-animate="true"] li {
+            animation: none;
+        }
+    }
+}

package/src/styles/theme/pages.css

@@ -0,0 +1,35 @@
+@layer components {
+    /* home */
+
+    #stalux-home-show-post-list {
+        @apply cursor-pointer;
+        margin-top: 3em;
+        font-size: 1.5em;
+        @apply stalux-glow;
+    }
+    @media (max-width: 768px) {
+        .stalux-home-body {
+            @apply w-full box-border;
+            height: auto;
+            padding: 2rem 0.5rem 1.5rem 0.5rem;
+            max-width: 95vw;
+        }
+        .stalux-home-title {
+            font-size: 2em;
+            margin-top: 1em;
+            word-break: break-all;
+        }
+        .stalux-home-navs {
+            @apply flex-col items-center;
+            gap: 0.5em;
+        }
+
+        .stalux-home-navs nav {
+            @apply w-full;
+        }
+        #stalux-home-show-post-list {
+            margin-top: 2em;
+            font-size: 1.1em;
+        }
+    }
+}

package/src/styles/theme/posts.css

@@ -0,0 +1,79 @@
+@layer components {
+    /* postList */
+    .stalux-post-list-container {
+        @apply w-full;
+        height: auto;
+        margin: 5px 0;
+        ul {
+            @apply flex flex-wrap stalux-list-bare;
+            gap: 2rem;
+            margin: 3em;
+        }
+
+        @media (max-width: 768px) {
+            ul {
+                margin: 1rem;
+            }
+        }
+
+        ul > li {
+            @apply min-w-0 m-0;
+            flex: 1 1 min(22rem, 100%);
+        }
+    }
+
+    /* postCard */
+
+    .stalux-card-post-title a {
+        @apply text-inherit no-underline;
+    }
+
+    .stalux-post-card > a:first-child {
+        @apply block w-full min-w-0;
+    }
+
+    .stalux-card-post-cover img {
+        @apply w-full max-w-full h-full object-cover;
+        transition: transform var(--transition-fast) ease;
+    }
+
+    .stalux-post-card:is(:hover, :focus-within) .stalux-card-post-cover img {
+        transform: scale(1.05);
+    }
+    .stalux-post-card:is(:hover, :focus-within) {
+        transform: translateY(-3px);
+        box-shadow: var(--card-box-shadow-hover);
+    }
+    .stalux-card-post-date,
+    .stalux-card-post-updated {
+        @apply inline-flex items-center w-fit;
+        gap: 0.35rem;
+        padding: 0.28rem 0.6rem;
+        border-radius: 10px;
+        font-size: 0.9rem;
+        line-height: 1.1;
+        color: #e8f2ff;
+    }
+    .stalux-card-post-date {
+        @apply [background:var(--date-bg)] [border:1px_solid_var(--date-border)] [color:#e8f2ff];
+    }
+
+    .stalux-card-post-updated {
+        @apply [background:var(--updated-bg)] [border:1px_solid_var(--updated-border)] [color:#fff7de];
+    }
+
+    .stalux-card-post-tags a {
+        @apply no-underline;
+    }
+    .stalux-card-post-tag:focus,
+    .stalux-card-post-tag:hover {
+        background: var(--tag-bg-hover);
+    }
+    .stalux-card-post-categories a {
+        @apply no-underline;
+    }
+    .stalux-card-post-category:focus,
+    .stalux-card-post-category:hover {
+        background: var(--category-bg-hover);
+    }
+}