From ce8cc2ee2ac35f0c7bc387e0abe50a79fccbef25 Mon Sep 17 00:00:00 2001 From: syfxlin Date: Mon, 29 Jan 2024 19:18:40 +0800 Subject: [PATCH 1/4] fix(style): Scroll behavior not working --- src/app/(group)/archives/page.tsx | 6 +- src/components/docs/index.tsx | 3 +- src/components/layouts/article-info/index.tsx | 6 +- src/components/layouts/main/styles.css.ts | 1 + src/components/templates/articles/index.tsx | 4 +- src/theme/global.css.ts | 108 +----------------- 6 files changed, 13 insertions(+), 115 deletions(-) diff --git a/src/app/(group)/archives/page.tsx b/src/app/(group)/archives/page.tsx index be6d1ae3..642b1d5d 100644 --- a/src/app/(group)/archives/page.tsx +++ b/src/app/(group)/archives/page.tsx @@ -76,7 +76,7 @@ export default async function ArchivesPage() { desc={t("archives.desc", data.archives.length, data.categories.length, data.tags.length, data.articles.length)} > {data.categories.length !== 0 && ( -
+
{t("category.name")} @@ -92,7 +92,7 @@ export default async function ArchivesPage() {
)} {data.archives.length !== 0 && ( -
+
{t("archive.name")} @@ -108,7 +108,7 @@ export default async function ArchivesPage() {
)} {data.tags.length !== 0 && ( -
+
{t("tag.name")} diff --git a/src/components/docs/index.tsx b/src/components/docs/index.tsx index ae7e7b82..944178e6 100644 --- a/src/components/docs/index.tsx +++ b/src/components/docs/index.tsx @@ -2,7 +2,6 @@ import React, { ReactNode } from "react"; import { DocumentRenderer } from "@keystatic/core/renderer"; import { DocumentRendererProps } from "@keystatic/core/dist/declarations/src/renderer"; -import { cx } from "@syfxlin/reve"; import { DocumentElement } from "@keystatic/core"; import * as styles from "./styles.css"; import { Code } from "./code"; @@ -56,7 +55,7 @@ export interface RendererProps { export const Renderer: React.FC = React.memo(({ document, position, children }) => { return ( -
+
{position === "none" && children} {position === "bottom" && children} {position !== "none" && document && ( diff --git a/src/components/layouts/article-info/index.tsx b/src/components/layouts/article-info/index.tsx index c265e6e7..c63b6666 100644 --- a/src/components/layouts/article-info/index.tsx +++ b/src/components/layouts/article-info/index.tsx @@ -1,6 +1,5 @@ import React from "react"; import Link from "next/link"; -import { cx } from "@syfxlin/reve"; import { MetaInfo } from "../meta-info"; import { Image } from "../../ui/image"; import { LinkButton } from "../../ui/button"; @@ -9,13 +8,12 @@ import { t } from "../../../locales"; import * as styles from "./styles.css"; export interface ArticleInfoProps { - animation?: number; data: ArticleList; } -export const ArticleInfo: React.FC = ({ animation, data }) => { +export const ArticleInfo: React.FC = ({ data }) => { return ( -
+
{data.title} diff --git a/src/components/layouts/main/styles.css.ts b/src/components/layouts/main/styles.css.ts index 1887089c..d949eca7 100644 --- a/src/components/layouts/main/styles.css.ts +++ b/src/components/layouts/main/styles.css.ts @@ -8,4 +8,5 @@ export const container = styled.css` width: 100%; max-width: ${theme.fontSize.calc(45)}; padding: 0 ${theme.spacing.calc(8)}; + animation: fade-in 0.5s ease; `; diff --git a/src/components/templates/articles/index.tsx b/src/components/templates/articles/index.tsx index 7436578f..11a79f14 100644 --- a/src/components/templates/articles/index.tsx +++ b/src/components/templates/articles/index.tsx @@ -72,8 +72,8 @@ export const TemplateArticles: React.FC = (props) => { {props.display === "articles" && ( <>
- {props.articles.items.map((item, index) => ( - + {props.articles.items.map(item => ( + ))}
diff --git a/src/theme/global.css.ts b/src/theme/global.css.ts index 0a592d89..920012a1 100644 --- a/src/theme/global.css.ts +++ b/src/theme/global.css.ts @@ -19,7 +19,7 @@ styled.global` font-weight: ${theme.fontWeight.default}; line-height: ${theme.lineHeight.default}; letter-spacing: ${theme.letterSpacing.wide}; - scroll-behavior: smooth; + scroll-behavior: smooth !important; word-break: break-word; transition: color 0.3s, background-color 0.3s; -moz-text-size-adjust: 100%; @@ -31,14 +31,6 @@ styled.global` min-height: ${theme.size.vh}; } - .i-icon { - vertical-align: middle; - text-align: center; - display: inline-flex; - justify-content: center; - align-items: center; - } - ::-webkit-scrollbar { width: 6px; height: 6px; @@ -257,106 +249,14 @@ styled.global` background: ${theme.color.background.full} !important; } - // slide-enter - @keyframes slide-enter { - 0% { - transform: translateY(10px); + // fade-in + @keyframes fade-in { + from { opacity: 0; } to { - transform: translateY(0); opacity: 100; } } - - @media (prefers-reduced-motion: no-preference) { - .slide-enter, - .slide-enter-content > * { - --enter-step: 0; - --enter-delay: 90ms; - animation: slide-enter 1s both 1; - animation-delay: calc(var(--enter-step) * var(--enter-delay)); - } - - .slide-enter-content > *:nth-child(1) { - --enter-step: 1 !important; - } - - .slide-enter-content > *:nth-child(2) { - --enter-step: 2 !important; - } - - .slide-enter-content > *:nth-child(3) { - --enter-step: 3 !important; - } - - .slide-enter-content > *:nth-child(4) { - --enter-step: 4 !important; - } - - .slide-enter-content > *:nth-child(5) { - --enter-step: 5 !important; - } - - .slide-enter-content > *:nth-child(6) { - --enter-step: 6 !important; - } - - .slide-enter-content > *:nth-child(7) { - --enter-step: 7 !important; - } - - .slide-enter-content > *:nth-child(8) { - --enter-step: 8 !important; - } - - .slide-enter-content > *:nth-child(9) { - --enter-step: 9 !important; - } - - .slide-enter-content > *:nth-child(10) { - --enter-step: 10 !important; - } - - .slide-enter-content > *:nth-child(11) { - --enter-step: 11 !important; - } - - .slide-enter-content > *:nth-child(12) { - --enter-step: 12 !important; - } - - .slide-enter-content > *:nth-child(13) { - --enter-step: 13 !important; - } - - .slide-enter-content > *:nth-child(14) { - --enter-step: 14 !important; - } - - .slide-enter-content > *:nth-child(15) { - --enter-step: 15 !important; - } - - .slide-enter-content > *:nth-child(16) { - --enter-step: 16 !important; - } - - .slide-enter-content > *:nth-child(17) { - --enter-step: 17 !important; - } - - .slide-enter-content > *:nth-child(18) { - --enter-step: 18 !important; - } - - .slide-enter-content > *:nth-child(19) { - --enter-step: 19 !important; - } - - .slide-enter-content > *:nth-child(20) { - --enter-step: 20 !important; - } - } `; From 1670d1b235fb8274fb1444ca822a01eac8407af1 Mon Sep 17 00:00:00 2001 From: syfxlin Date: Mon, 29 Jan 2024 20:31:16 +0800 Subject: [PATCH 2/4] fix(style): Fix some styles --- src/components/widgets/projects/styles.css.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/widgets/projects/styles.css.ts b/src/components/widgets/projects/styles.css.ts index 5f26f5aa..0b00d77d 100644 --- a/src/components/widgets/projects/styles.css.ts +++ b/src/components/widgets/projects/styles.css.ts @@ -94,7 +94,6 @@ export const github = styled.css` white-space: nowrap; svg { - margin-top: ${theme.fontSize.calc(0.1)} !important; width: ${theme.fontSize.calc(0.9)} !important; height: ${theme.fontSize.calc(0.9)} !important; } From ff87439fbc812e77d98cb47977dcf01bcbedd399 Mon Sep 17 00:00:00 2001 From: syfxlin Date: Mon, 29 Jan 2024 20:57:55 +0800 Subject: [PATCH 3/4] fix(style): Fix some styles --- src/components/root/spotlight/index.tsx | 4 ++-- src/components/templates/group/index.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/root/spotlight/index.tsx b/src/components/root/spotlight/index.tsx index edc2d69a..0dd73ce4 100644 --- a/src/components/root/spotlight/index.tsx +++ b/src/components/root/spotlight/index.tsx @@ -63,8 +63,8 @@ export const Spotlight: React.FC = (props) => { {(query.isLoading || query.data) && (
{query.isLoading && } - {query.data?.items.map((item, index) => ( - + {query.data?.items.map(item => ( + ))} {query.data && ( setPage(page)} /> diff --git a/src/components/templates/group/index.tsx b/src/components/templates/group/index.tsx index 03bd8ffd..a077ce7e 100644 --- a/src/components/templates/group/index.tsx +++ b/src/components/templates/group/index.tsx @@ -48,8 +48,8 @@ export const TemplateGroup: React.FC = (props) => { {props.total} {t("articles.name")}
- {props.items.map((item, index) => ( - + {props.items.map(item => ( + ))}
From ed6686d47a54683f69dcefd1680a06b93ab3ad97 Mon Sep 17 00:00:00 2001 From: syfxlin Date: Mon, 29 Jan 2024 21:19:36 +0800 Subject: [PATCH 4/4] fix(style): Fix some styles --- src/components/ui/link/styles.css.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/ui/link/styles.css.ts b/src/components/ui/link/styles.css.ts index 573920bb..8b498fdd 100644 --- a/src/components/ui/link/styles.css.ts +++ b/src/components/ui/link/styles.css.ts @@ -3,15 +3,17 @@ import { theme } from "../../../theme/theme.css"; export const link = styled.css` text-decoration: none; - position: relative; color: ${theme.color.text.primary}; - border-bottom: ${theme.borderWidth.calc(1)} ${theme.borderStyle.default} ${theme.color.background.focus}; - transition: border 0.3s, color 0.3s, background-color 0.3s; + transition: background-size 0.3s, color 0.3s, background-color 0.3s; + background: linear-gradient(to right, transparent, transparent), linear-gradient(to right, ${theme.color.background.focus}, ${theme.color.background.focus}); + background-size: 100% 40%, 0 40%; + background-repeat: no-repeat; + background-position: 100% 100%, 0 100%; &.active, &:hover, &:focus, &:active { - border-bottom-color: ${theme.color.text.primary}; + background-size: 0 40%, 100% 40%; } `;