Merge pull request #94 from syfxlin/develop

fix(style): Scroll behavior not working

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 && (
-        <section className="slide-enter" style={{ "--enter-step": 0 } as any}>
+        <section>
           <Heading level={2}>
             {t("category.name")}
           </Heading>
@@ -92,7 +92,7 @@ export default async function ArchivesPage() {
         </section>
       )}
       {data.archives.length !== 0 && (
-        <section className="slide-enter" style={{ "--enter-step": 1 } as any}>
+        <section>
           <Heading level={2}>
             {t("archive.name")}
           </Heading>
@@ -108,7 +108,7 @@ export default async function ArchivesPage() {
         </section>
       )}
       {data.tags.length !== 0 && (
-        <section className="slide-enter" style={{ "--enter-step": 2 } as any}>
+        <section>
           <Heading level={2}>
             {t("tag.name")}
           </Heading>

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<RendererProps> = React.memo(({ document, position, children }) => {
   return (
-    <section className={cx("slide-enter-content", styles.container)}>
+    <section className={styles.container}>
       {position === "none" && children}
       {position === "bottom" && children}
       {position !== "none" && document && (

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<ArticleInfoProps> = ({ animation, data }) => {
+export const ArticleInfo: React.FC<ArticleInfoProps> = ({ data }) => {
   return (
-    <article className={cx(typeof animation === "number" && "slide-enter", styles.article)} style={{ "--enter-step": animation } as any}>
+    <article className={styles.article}>
       <section className={styles.section}>
         <Link href={data.link} aria-label={data.title} className={styles.title}>
           {data.title}

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;
 `;

src/components/root/spotlight/index.tsx

@@ -63,8 +63,8 @@ export const Spotlight: React.FC<SpotlightProps> = (props) => {
         {(query.isLoading || query.data) && (
           <div className={styles.section}>
             {query.isLoading && <Loading />}
-            {query.data?.items.map((item, index) => (
-              <ArticleInfo key={`search-${item.link}`} data={item} animation={index} />
+            {query.data?.items.map(item => (
+              <ArticleInfo key={`search-${item.link}`} data={item} />
             ))}
             {query.data && (
               <Pagination index={page} pages={Math.ceil(query.data.total / 10)} onPage={page => setPage(page)} />

src/components/templates/articles/index.tsx

@@ -72,8 +72,8 @@ export const TemplateArticles: React.FC<TemplateArticlesProps> = (props) => {
         {props.display === "articles" && (
           <>
             <section>
-              {props.articles.items.map((item, index) => (
-                <ArticleInfo key={`article-${item.link}`} data={item} animation={index} />
+              {props.articles.items.map(item => (
+                <ArticleInfo key={`article-${item.link}`} data={item} />
               ))}
             </section>
             <Pagination links="/" index={props.articles.index} pages={props.articles.pages} />

src/components/templates/group/index.tsx

@@ -48,8 +48,8 @@ export const TemplateGroup: React.FC<TemplateGroupComponentProps> = (props) => {
           {props.total} {t("articles.name")}
         </Title>
         <section>
-          {props.items.map((item, index) => (
-            <ArticleInfo key={`${props.type}-${item.link}`} data={item} animation={index} />
+          {props.items.map(item => (
+            <ArticleInfo key={`${props.type}-${item.link}`} data={item} />
           ))}
         </section>
         <Pagination links={props.link} index={props.index} pages={props.pages} />

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%;
   }
 `;

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;
   }

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;
-    }
-  }
 `;