style: optimize github card for mobile, adjust spacing between consecutive images

src/content/posts/guides/Markdown Extended Features-zh.md

@@ -30,7 +30,7 @@ abbrlink: markdown-extended-features
 
 ## Github 仓库卡片
 
-使用双冒号语法 `::github{repo="owner/repo"}`，即可创建 Github 仓库卡片。在页面加载后，从 GitHub API 中实时获取仓库数据。
+使用双冒号语法 `::github{repo="owner/repo"}`，即可创建 Github 仓库卡片。在页面加载后，从 GitHub API 中获取仓库数据。
 
 ### 语法
 
@@ -44,18 +44,18 @@ abbrlink: markdown-extended-features
 
 ## 提示块
 
-使用三冒号语法 `:::type` 或 GitHub 语法 `> [!TYPE]`，即可创建提示块。支持 `note`、`tip`、`important`、`warning` 和 `caution` 五种类型。
+使用 GitHub 语法 `> [!TYPE]` 或三冒号语法 `:::type`，即可创建提示块。支持 `note`、`tip`、`important`、`warning` 和 `caution` 五种类型。
 
 ### 语法
 
 ```
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
 :::note
 Useful information that users should know, even when skimming content.
 :::
 
-> [!NOTE]
-> Useful information that users should know, even when skimming content.
-
 :::note[YOUR CUSTOM TITLE]
 This is a note with a custom title.
 :::

src/styles/extend.css

@@ -74,44 +74,47 @@
 
 /* GitHub Card >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
 .gc-container {
-  --at-apply: 'block mt-3 mb-6 rounded border border-solid border-secondary/5 bg-secondary/5 px-5 py-4';
-  --at-apply: 'transition-colors lg:(px-6 py-5) hover:(bg-secondary/10 c-primary)';
+  --at-apply: 'block overflow-x-auto scrollbar-hidden mt-3 mb-6 rounded border border-solid border-secondary/5';
+  --at-apply: 'bg-secondary/5 px-5 py-4 transition-colors lg:(px-6 py-5) hover:(bg-secondary/10 c-primary)';
+}
+.gc-container::-webkit-scrollbar {
+  display: none;
 }
 
 /* Title Bar */
 .gc-title-bar {
-  --at-apply: 'flex items-center gap-3';
+  --at-apply: 'flex items-center gap-2.5 lg:gap-3';
 }
 .gc-owner-avatar {
   --at-apply: 'flex-shrink-0 aspect-square w-5.5 rounded-full bg-secondary/20';
 }
 .gc-repo-title {
-  --at-apply: 'flex items-center text-lg leading-normal';
+  --at-apply: 'flex items-center leading-normal lg:text-lg';
 }
 .gc-slash {
-  --at-apply: 'mx-2 op-40';
+  --at-apply: 'mx-1 op-40 lg:mx-1.2';
 }
 .gc-github-icon {
-  --at-apply: 'flex-shrink-0 w-6 ml-auto';
+  --at-apply: 'flex-shrink-0 w-5.5 ml-auto lg:w-6';
 }
 
 /* Repo Description */
 .gc-repo-description {
-  --at-apply: 'mt-2.8 mb-4';
+  --at-apply: 'mt-2.45 mb-3.5 text-sm text-start lg:(text-base mt-2.8 mb-4)';
 }
 
 /* Info Bar */
 .gc-info-bar {
-  --at-apply: 'flex items-center gap-2 text-sm';
+  --at-apply: 'flex items-center gap-1.75 text-xs lg:(text-sm gap-2)';
 }
 .gc-info-icon {
   --at-apply: 'flex-shrink-0';
 }
 .gc-stars-count {
-  --at-apply: 'mr-4';
+  --at-apply: 'mr-3 lg:mr-4';
 }
 .gc-forks-count {
-  --at-apply: 'mr-5';
+  --at-apply: 'mr-3.75 lg:mr-5';
 }
 .gc-license-info {
   --at-apply: 'ml-0.5 mr-4';
@@ -136,4 +139,4 @@ details summary::-webkit-details-marker {
 }
 details summary::marker {
   content: '';
-} */
+} */

src/styles/heti.css

@@ -92,6 +92,12 @@
 .heti :where(figure) {
   --at-apply: 'mx-auto mt-3 mb-6';
 }
+.heti :where(figure:has(+ figure)) {
+  --at-apply: 'mb-4';
+}
+.heti :where(figure:has(+ p > img:first-child)) {
+  --at-apply: 'mb-4';
+}
 .heti :where(figcaption) {
   --at-apply: 'text-center text-sm mt-3 text-secondary/80';
 }