修改样式

Author: windshadow233

source/_posts/2026/03/使用打表法计算麻将向听数.md

@@ -82,8 +82,10 @@ $$s=2\times(4-m)-\max(d,4-m)-q$$
 
 {% note primary %}
 
-将九索视为雀头：$m = 1,\ d=2,\ q=1,\ s=2\times 3-2-1=3$
-将九索视为刻搭：$m = 1,\ d=3,\ q=0,\ s=2\times 3-3-0=3$
+将九索视为雀头：
+$m = 1,\ d=2,\ q=1,\ s=2\times 3-2-1=3$
+将九索视为刻搭：
+$m = 1,\ d=3,\ q=0,\ s=2\times 3-3-0=3$
 
 向听数为3
 {% endnote %}
@@ -92,10 +94,14 @@ $$s=2\times(4-m)-\max(d,4-m)-q$$
 
 {% note primary %}
 
-将五饼视为雀头：$m = 1,\ d=2,\ q=1,\ s=2\times 3-2-1=3$
-将五饼视为刻搭：$m = 1,\ d=3,\ q=0,\ s=2\times 3-3-0=3$
-将六饼视为雀头，五六饼视为顺搭：$m = 0,\ d=3,\ q=1,\ s=2\times 4-3-1=4$
-将六饼视为雀头，五饼视为刻搭：$m = 0,\ d=3,\ q=1,\ s=2\times 4-3-1=4$
+将五饼视为雀头：
+$m = 1,\ d=2,\ q=1,\ s=2\times 3-2-1=3$
+将五饼视为刻搭：
+$m = 1,\ d=3,\ q=0,\ s=2\times 3-3-0=3$
+将六饼视为雀头，五六饼视为顺搭：
+$m = 0,\ d=3,\ q=1,\ s=2\times 4-3-1=4$
+将六饼视为雀头，五饼视为刻搭：
+$m = 0,\ d=3,\ q=1,\ s=2\times 4-3-1=4$
 
 向听数为3
 {% endnote %}
@@ -104,7 +110,8 @@ $$s=2\times(4-m)-\max(d,4-m)-q$$
 
 {% note primary %}
 
-将一万视为雀头：$m = 1,\ d=4,\ q=1,\ s=2\times 3-3-1=2$
+将一万视为雀头：
+$m = 1,\ d=4,\ q=1,\ s=2\times 3-3-1=2$
 
 向听数为2
 {% endnote %}

themes/butterfly/scripts/tag/mahjong.js

@@ -112,7 +112,7 @@ function renderMahjong (tilesStr) {
     if (i !== called.length - 1) parts.push(BLANK)
   }
 
-  return `<span class=\"mahjong-wrap\">${parts.join('')}</span>`
+  return `<div class=\"mahjong-wrap\"><div class=\"mahjong-inner\">${parts.join('')}</div></div>`
 }
 
 const mahjongTag = (args) => {

themes/butterfly/source/css/_custom/mahjong.css

@@ -6,27 +6,41 @@
 */
 
 :root {
-  --mahjong-size: 40px;
+  --mahjong-size: 56px;
   --mahjong-gap: 3px;
+  /* container width bounds */
+  --mahjong-min-width: 240px; /* 最小容器宽度 */
+  --mahjong-max-width: 960px; /* 最大容器宽度 */
+  /* tile size will scale between min and max based on viewport
+     within the container width bounds */
+  --mahjong-size: clamp(32px, calc(2.6vw + 8px), 56px);
 }
 
 .mahjong-wrap {
   display: flex;
-  width: 100%;
-  justify-content: center; /* center the whole tile group horizontally */
-  flex-wrap: wrap; /* only wrap when container is too small */
+  width: 100%; /* full width so centering works */
+  justify-content: center; /* center inner container horizontally */
+  margin: 20px 0;
+}
+
+.mahjong-inner {
+  /* constrained inner container that actually holds tiles */
+  width: clamp(var(--mahjong-min-width), 100%, var(--mahjong-max-width));
+  max-width: var(--mahjong-max-width);
+  display: flex;
   gap: var(--mahjong-gap);
+  justify-content: center;
+  flex-wrap: wrap; /* wrap only when tiles overflow inner width */
   align-items: center;
   line-height: 0; /* avoid extra inline-gap from img descenders */
-  margin: 20px 0;
 }
 
 .mahjong-wrap img {
   display: block;
 }
 
 .mahjong-tile {
-  max-height: var(--mahjong-size);
+  height: var(--mahjong-size);
   width: auto; /* preserve aspect ratio */
   max-width: 100%;
   object-fit: contain;
@@ -42,5 +56,5 @@
 
 /* responsive: shrink tiles when container narrower */
 @media (max-width: 480px) {
-  :root { --mahjong-size: 32px; }
+  :root { --mahjong-size: 32px; --mahjong-gap: 1px;}
 }