Updated for Heavy Text and Header

teacat · Apr 9, 2022 · cb09367 · cb09367
1 parent 6f41d49
commit cb09367
Show file tree

Hide file tree

Showing 16 changed files with 238 additions and 4 deletions.
diff --git a/dist/tocas.css b/dist/tocas.css
@@ -10161,6 +10161,14 @@ button {
     font-weight: 500 !important;
 }
 
+/**
+ * Heavy
+ */
+
+.ts-text.is-heavy {
+    font-weight: bold !important;
+}
+
 /**
  * Italic
  */
@@ -15827,6 +15835,14 @@ a.ts-header:hover {
     color: var(--ts-negative-600);
 }
 
+/**
+ * Heavy
+ */
+
+.ts-header.is-heavy {
+    font-weight: bold !important;
+}
+
 /**
  * Aligns
  */
@@ -16100,15 +16116,17 @@ a.ts-segment:hover {
     font-size: 3.3rem;
     font-weight: bold;
     line-height: 1.2;
-    margin: 0 auto 1.5rem auto;
+    margin: 0 auto .5rem auto;
     text-align: center;
     height: 2.6rem;
     width: 2.6rem;
+    position: relative;
 }
 
 .ts-quote.is-heading .cite {
     font-size: 15px;
     font-weight: normal;
+    margin-top: 0;
 }
 
 /**

diff --git a/dist/tocas.min.css b/dist/tocas.min.css
diff --git a/docs/en-us/assets/tocas/header.css b/docs/en-us/assets/tocas/header.css
@@ -53,6 +53,14 @@ a.ts-header:hover {
     color: var(--ts-negative-600);
 }
 
+/**
+ * Heavy
+ */
+
+.ts-header.is-heavy {
+    font-weight: bold !important;
+}
+
 /**
  * Aligns
  */

diff --git a/docs/en-us/assets/tocas/text.css b/docs/en-us/assets/tocas/text.css
@@ -68,6 +68,14 @@
     font-weight: 500 !important;
 }
 
+/**
+ * Heavy
+ */
+
+.ts-text.is-heavy {
+    font-weight: bold !important;
+}
+
 /**
  * Italic
  */

diff --git a/docs/en-us/header.html b/docs/en-us/header.html
@@ -553,6 +553,37 @@
                             <!-- / 圖示組 -->
                         </div>
 
+                        <div class="主體-格局-內容-單個範例">
+                            <a class="主體-格局-內容-單個範例-錨點" id="heavy"></a>
+                            <div class="主體-格局-內容-單個範例-文字-標題 主體-格局-內容-單個範例-文字-標題_段落">
+                                <a href="#heavy" class="主體-格局-內容-單個範例-文字-標題-連結">沈重的</a>
+
+                                <button class="主體-格局-內容-單個範例-文字-標題-切換原始碼"><span class="ts-icon is-code-icon"></span> Code</button>
+
+                            </div>
+                            <div class="主體-格局-內容-單個範例-文字"><p>以最粗的方式標註某段文字，如果字體不支援這個粗度，那麼這會與原有的外觀相同。</p>
+</div>
+
+                            <!-- 範例與程式碼 -->
+
+                            <div class="主體-格局-內容-單個範例-範例">
+                                <div class="主體-格局-內容-單個範例-範例-實際效果"><div class="ts-header is-heavy">今天是芥末日！</div>
+</div>
+                                <div class="主體-格局-內容-單個範例-範例-程式碼"><pre><code class="hljs">&lt;<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"ts-header <mark>is-heavy</mark>"</span>&gt;今天是芥末日！&lt;/<span class="hljs-keyword">div</span>&gt;</code></pre>
+</div>
+                            </div>
+
+                            <!-- / 範例與程式碼 -->
+
+                            <!-- 附帶程式片段 -->
+
+                            <!-- / 附帶程式片段 -->
+
+                            <!-- 圖示組 -->
+
+                            <!-- / 圖示組 -->
+                        </div>
+
                         <div class="主體-格局-內容-單個範例">
                             <a class="主體-格局-內容-單個範例-錨點" id="negative"></a>
                             <div class="主體-格局-內容-單個範例-文字-標題 主體-格局-內容-單個範例-文字-標題_段落">
@@ -753,6 +784,10 @@
                                 側邊圖示的 <span class="主體-格局-索引-清單-項目-英文">is-start-icon</span>
                             </a>
 
+                            <a class="主體-格局-索引-清單-項目" href="#heavy">
+                                沈重的 <span class="主體-格局-索引-清單-項目-英文">is-heavy</span>
+                            </a>
+
                             <a class="主體-格局-索引-清單-項目" href="#negative">
                                 負面的 <span class="主體-格局-索引-清單-項目-英文">is-negative</span>
                             </a>

diff --git a/docs/en-us/text.html b/docs/en-us/text.html
@@ -955,6 +955,37 @@
                             <!-- / 圖示組 -->
                         </div>
 
+                        <div class="主體-格局-內容-單個範例">
+                            <a class="主體-格局-內容-單個範例-錨點" id="heavy"></a>
+                            <div class="主體-格局-內容-單個範例-文字-標題 主體-格局-內容-單個範例-文字-標題_段落">
+                                <a href="#heavy" class="主體-格局-內容-單個範例-文字-標題-連結">沈重的</a>
+
+                                <button class="主體-格局-內容-單個範例-文字-標題-切換原始碼"><span class="ts-icon is-code-icon"></span> Code</button>
+
+                            </div>
+                            <div class="主體-格局-內容-單個範例-文字"><p>以最粗的方式標註某段文字，如果字體不支援這個粗度，那麼這會與「粗體的」有相同外觀。</p>
+</div>
+
+                            <!-- 範例與程式碼 -->
+
+                            <div class="主體-格局-內容-單個範例-範例">
+                                <div class="主體-格局-內容-單個範例-範例-實際效果"><span class="ts-text is-heavy">噢不</span>！今天是芥末日！
+</div>
+                                <div class="主體-格局-內容-單個範例-範例-程式碼"><pre><code class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ts-text <mark>is-heavy</mark>"</span>&gt;</span>噢不<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>！今天是芥末日！</code></pre>
+</div>
+                            </div>
+
+                            <!-- / 範例與程式碼 -->
+
+                            <!-- 附帶程式片段 -->
+
+                            <!-- / 附帶程式片段 -->
+
+                            <!-- 圖示組 -->
+
+                            <!-- / 圖示組 -->
+                        </div>
+
                         <div class="主體-格局-內容-單個範例">
                             <a class="主體-格局-內容-單個範例-錨點" id="italic"></a>
                             <div class="主體-格局-內容-單個範例-文字-標題 主體-格局-內容-單個範例-文字-標題_段落">
@@ -1316,6 +1347,10 @@
                                 粗體的 <span class="主體-格局-索引-清單-項目-英文">is-bold</span>
                             </a>
 
+                            <a class="主體-格局-索引-清單-項目" href="#heavy">
+                                沈重的 <span class="主體-格局-索引-清單-項目-英文">is-heavy</span>
+                            </a>
+
                             <a class="主體-格局-索引-清單-項目" href="#italic">
                                 斜體的 <span class="主體-格局-索引-清單-項目-英文">is-italic</span>
                             </a>

diff --git a/docs/zh-tw/assets/tocas/header.css b/docs/zh-tw/assets/tocas/header.css
@@ -53,6 +53,14 @@ a.ts-header:hover {
     color: var(--ts-negative-600);
 }
 
+/**
+ * Heavy
+ */
+
+.ts-header.is-heavy {
+    font-weight: bold !important;
+}
+
 /**
  * Aligns
  */

diff --git a/docs/zh-tw/assets/tocas/text.css b/docs/zh-tw/assets/tocas/text.css
@@ -68,6 +68,14 @@
     font-weight: 500 !important;
 }
 
+/**
+ * Heavy
+ */
+
+.ts-text.is-heavy {
+    font-weight: bold !important;
+}
+
 /**
  * Italic
  */

diff --git a/docs/zh-tw/header.html b/docs/zh-tw/header.html
@@ -671,6 +671,37 @@
                             <!-- / 圖示組 -->
                         </div>
 
+                        <div class="主體-格局-內容-單個範例">
+                            <a class="主體-格局-內容-單個範例-錨點" id="heavy"></a>
+                            <div class="主體-格局-內容-單個範例-文字-標題 主體-格局-內容-單個範例-文字-標題_段落">
+                                <a href="#heavy" class="主體-格局-內容-單個範例-文字-標題-連結">沈重的</a>
+
+                                <button class="主體-格局-內容-單個範例-文字-標題-切換原始碼"><span class="ts-icon is-code-icon"></span> 原始碼</button>
+
+                            </div>
+                            <div class="主體-格局-內容-單個範例-文字"><p>以最粗的方式標註某段文字，如果字體不支援這個粗度，那麼這會與原有的外觀相同。</p>
+</div>
+
+                            <!-- 範例與程式碼 -->
+
+                            <div class="主體-格局-內容-單個範例-範例">
+                                <div class="主體-格局-內容-單個範例-範例-實際效果"><div class="ts-header is-heavy">今天是芥末日！</div>
+</div>
+                                <div class="主體-格局-內容-單個範例-範例-程式碼"><pre><code class="hljs">&lt;<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"ts-header <mark>is-heavy</mark>"</span>&gt;今天是芥末日！&lt;/<span class="hljs-keyword">div</span>&gt;</code></pre>
+</div>
+                            </div>
+
+                            <!-- / 範例與程式碼 -->
+
+                            <!-- 附帶程式片段 -->
+
+                            <!-- / 附帶程式片段 -->
+
+                            <!-- 圖示組 -->
+
+                            <!-- / 圖示組 -->
+                        </div>
+
                         <div class="主體-格局-內容-單個範例">
                             <a class="主體-格局-內容-單個範例-錨點" id="negative"></a>
                             <div class="主體-格局-內容-單個範例-文字-標題 主體-格局-內容-單個範例-文字-標題_段落">
@@ -871,6 +902,10 @@
                                 側邊圖示的 <span class="主體-格局-索引-清單-項目-英文">is-start-icon</span>
                             </a>
 
+                            <a class="主體-格局-索引-清單-項目" href="#heavy">
+                                沈重的 <span class="主體-格局-索引-清單-項目-英文">is-heavy</span>
+                            </a>
+
                             <a class="主體-格局-索引-清單-項目" href="#negative">
                                 負面的 <span class="主體-格局-索引-清單-項目-英文">is-negative</span>
                             </a>

diff --git a/docs/zh-tw/text.html b/docs/zh-tw/text.html
@@ -1050,7 +1050,7 @@
                                 <button class="主體-格局-內容-單個範例-文字-標題-切換原始碼"><span class="ts-icon is-code-icon"></span> 原始碼</button>
 
                             </div>
-                            <div class="主體-格局-內容-單個範例-文字"><p>以更粗的方式標註某個文字讓使用者知道重點為何。</p>
+                            <div class="主體-格局-內容-單個範例-文字"><p>以粗體的方式標註某個文字讓使用者知道重點為何。</p>
 </div>
 
                             <!-- 範例與程式碼 -->
@@ -1073,6 +1073,37 @@
                             <!-- / 圖示組 -->
                         </div>
 
+                        <div class="主體-格局-內容-單個範例">
+                            <a class="主體-格局-內容-單個範例-錨點" id="heavy"></a>
+                            <div class="主體-格局-內容-單個範例-文字-標題 主體-格局-內容-單個範例-文字-標題_段落">
+                                <a href="#heavy" class="主體-格局-內容-單個範例-文字-標題-連結">沈重的</a>
+
+                                <button class="主體-格局-內容-單個範例-文字-標題-切換原始碼"><span class="ts-icon is-code-icon"></span> 原始碼</button>
+
+                            </div>
+                            <div class="主體-格局-內容-單個範例-文字"><p>以最粗的方式標註某段文字，如果字體不支援這個粗度，那麼這會與「粗體的」有相同外觀。</p>
+</div>
+
+                            <!-- 範例與程式碼 -->
+
+                            <div class="主體-格局-內容-單個範例-範例">
+                                <div class="主體-格局-內容-單個範例-範例-實際效果"><span class="ts-text is-heavy">噢不</span>！今天是芥末日！
+</div>
+                                <div class="主體-格局-內容-單個範例-範例-程式碼"><pre><code class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ts-text <mark>is-heavy</mark>"</span>&gt;</span>噢不<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>！今天是芥末日！</code></pre>
+</div>
+                            </div>
+
+                            <!-- / 範例與程式碼 -->
+
+                            <!-- 附帶程式片段 -->
+
+                            <!-- / 附帶程式片段 -->
+
+                            <!-- 圖示組 -->
+
+                            <!-- / 圖示組 -->
+                        </div>
+
                         <div class="主體-格局-內容-單個範例">
                             <a class="主體-格局-內容-單個範例-錨點" id="italic"></a>
                             <div class="主體-格局-內容-單個範例-文字-標題 主體-格局-內容-單個範例-文字-標題_段落">
@@ -1434,6 +1465,10 @@
                                 粗體的 <span class="主體-格局-索引-清單-項目-英文">is-bold</span>
                             </a>
 
+                            <a class="主體-格局-索引-清單-項目" href="#heavy">
+                                沈重的 <span class="主體-格局-索引-清單-項目-英文">is-heavy</span>
+                            </a>
+
                             <a class="主體-格局-索引-清單-項目" href="#italic">
                                 斜體的 <span class="主體-格局-索引-清單-項目-英文">is-italic</span>
                             </a>

diff --git a/languages/en-us/components/header.yml b/languages/en-us/components/header.yml
@@ -50,6 +50,13 @@ Definitions:
                     99.9% 保證穩定上線
                 </div>
 
+          - Title: 沈重的
+            Anchor: Heavy
+            Description: 以最粗的方式標註某段文字，如果字體不支援這個粗度，那麼這會與原有的外觀相同。
+            Since: 4.0.0
+            HTML: |
+                <div class="ts-header [[is-heavy]]">今天是芥末日！</div>
+
           - Title: 負面的
             Anchor: Negative
             Description: 含有危險、負面意味標語。

diff --git a/languages/en-us/components/text.yml b/languages/en-us/components/text.yml
@@ -144,6 +144,13 @@ Definitions:
             HTML: |
                 是時候按下前面的<span class="ts-text [[is-bold]]">按鈕</span>來揭曉這一切了！
 
+          - Title: 沈重的
+            Anchor: Heavy
+            Description: 以最粗的方式標註某段文字，如果字體不支援這個粗度，那麼這會與「粗體的」有相同外觀。
+            Since: 4.0.0
+            HTML: |
+                <span class="ts-text [[is-heavy]]">噢不</span>！今天是芥末日！
+
           - Title: 斜體的
             Anchor: Italic
             Description: 令文字傾斜，通常用於特別標註某個代名詞或是該注意的事物。

diff --git a/languages/zh-tw/components/header.yml b/languages/zh-tw/components/header.yml
@@ -50,6 +50,13 @@ Definitions:
                     99.9% 保證穩定上線
                 </div>
 
+          - Title: 沈重的
+            Anchor: Heavy
+            Description: 以最粗的方式標註某段文字，如果字體不支援這個粗度，那麼這會與原有的外觀相同。
+            Since: 4.0.0
+            HTML: |
+                <div class="ts-header [[is-heavy]]">今天是芥末日！</div>
+
           - Title: 負面的
             Anchor: Negative
             Description: 含有危險、負面意味標語。

diff --git a/languages/zh-tw/components/text.yml b/languages/zh-tw/components/text.yml
@@ -139,11 +139,18 @@ Definitions:
 
           - Title: 粗體的
             Anchor: Bold
-            Description: 以更粗的方式標註某個文字讓使用者知道重點為何。
+            Description: 以粗體的方式標註某個文字讓使用者知道重點為何。
             Since: 4.0.0
             HTML: |
                 是時候按下前面的<span class="ts-text [[is-bold]]">按鈕</span>來揭曉這一切了！
 
+          - Title: 沈重的
+            Anchor: Heavy
+            Description: 以最粗的方式標註某段文字，如果字體不支援這個粗度，那麼這會與「粗體的」有相同外觀。
+            Since: 4.0.0
+            HTML: |
+                <span class="ts-text [[is-heavy]]">噢不</span>！今天是芥末日！
+
           - Title: 斜體的
             Anchor: Italic
             Description: 令文字傾斜，通常用於特別標註某個代名詞或是該注意的事物。

diff --git a/src/header.css b/src/header.css
@@ -53,6 +53,14 @@ a.ts-header:hover {
     color: var(--ts-negative-600);
 }
 
+/**
+ * Heavy
+ */
+
+.ts-header.is-heavy {
+    font-weight: bold !important;
+}
+
 /**
  * Aligns
  */