chore(landing): improve landing page and docs

ArtalkJS · Feb 2, 2025 · 3e45bb9 · 3e45bb9
1 parent 64a2adb
commit 3e45bb9
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 20 deletions.
diff --git a/docs/docs/en/guide/env.md b/docs/docs/en/guide/env.md
@@ -276,7 +276,7 @@ ATK_TRUSTED_DOMAINS_0="https://a.com"
 | **ATK_FRONTEND_UABADGE** | `false` | User UA badge | frontend.uaBadge (UI Settings > User UA badge) |
 | **ATK_FRONTEND_VERSIONCHECK** | `true` | Version check | frontend.versionCheck (UI Settings > Version check) |
 | **ATK_FRONTEND_VOTE** | `true` | Vote button | frontend.vote (UI Settings > Vote button) |
-| **ATK_FRONTEND_VOTEDOWN** | `false` | Dislike button | frontend.voteDown (UI Settings > Dislike button) |
+| **ATK_FRONTEND_VOTEDOWN** | `false` | Vote down button | frontend.voteDown (UI Settings > Vote down button) |
 
 
 ## Web server

diff --git a/docs/landing/src/components/Features/Frameworks.scss b/docs/landing/src/components/Features/Frameworks.scss
@@ -4,6 +4,7 @@
   justify-content: center;
   flex-direction: row;
   padding: 20px 0;
+  margin: 0 auto;
   margin-bottom: 100px;
 
   .title {
@@ -22,9 +23,10 @@
 
   .methods {
     padding: 0 50px;
-    flex: 1;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
+    display: inline-flex;
+    flex-wrap: wrap;
+    margin: 0 auto;
+    gap: 15px;
 
     .icon {
       height: 80px;

diff --git a/docs/landing/src/i18n/zh-TW.ts b/docs/landing/src/i18n/zh-TW.ts
@@ -5,7 +5,7 @@ export const zhTW: MessageSchema = {
   get_artalk: '取得 Artalk',
   get_artalk_link: 'https://artalk.js.org/guide/intro.html',
   slogan_line_1: 'Artalk 評論系統',
-  slogan_line_2: '即時評論，即時回應',
+  slogan_line_2: '即時評論，即刻回應',
   slogan_line_3: '',
   nav_docs_link: 'https://artalk.js.org/guide/intro.html',
   nav_changelog_link: 'https://github.com/ArtalkJS/Artalk/blob/master/CHANGELOG.md',

diff --git a/docs/landing/src/responsive.scss b/docs/landing/src/responsive.scss
@@ -203,10 +203,8 @@ $breakpoints: (
     }
 
     .methods {
-      width: 100%;
-      place-items: center;
-      padding: 0 20px;
-      grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
+      padding: 0 40px;
+      gap: 15px;
 
       .icon {
         height: 65px;
@@ -223,6 +221,7 @@ $breakpoints: (
 
   .full-feature {
     padding-bottom: 50px;
+    padding-top: 50px;
   }
 
   .full-feature .func-list {

diff --git a/ui/artalk/src/comment/renders/header.ts b/ui/artalk/src/comment/renders/header.ts
@@ -44,7 +44,7 @@ function renderVerifyBadge(ctx: Render) {
     ctx.$headerBadgeWrap.append($badge)
   } else if (ctx.data.is_verified) {
     const $verifiedBadge = Utils.createElement(
-      `<span class="atk-verified-icon" title="${$t('emailVerified')}"></span>`,
+      `<span class="atk-icon-verified" title="${$t('emailVerified')}"></span>`,
     ) // 邮箱验证徽章
     ctx.$headerBadgeWrap.append($verifiedBadge)
   }

diff --git a/ui/artalk/src/style/comment.scss b/ui/artalk/src/style/comment.scss
@@ -145,16 +145,6 @@
         background: #f44336;
       }
 
-      .atk-verified-icon {
-        height: 1.4em;
-        width: 1.4em;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: contain;
-        display: block;
-        background-image: url('data:image/svg+xml,<svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" fill="%231d9bf0"><g><path d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"></path></g></svg>');
-      }
-
       .atk-ua {
         @extend .badge;
       }

diff --git a/ui/artalk/src/style/main.scss b/ui/artalk/src/style/main.scss
@@ -333,6 +333,16 @@
   mask-image: url('data:image/svg+xml,<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"></path></svg>');
 }
 
+.atk-icon-verified {
+  height: 1.4em;
+  width: 1.4em;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  display: block;
+  background-image: url('data:image/svg+xml,<svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" fill="%231d9bf0"><g><path d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"></path></g></svg>');
+}
+
 /* Layer */
 .atk-error-layer {
   @extend .atk-full-layer;