Updates

index.css

@@ -101,8 +101,12 @@ a {
   background-image: linear-gradient(to left, transparent 11px, #eee 1px);
 }
 
+.anchor {
+  margin-inline-start: 0.25em;
+}
+
 /** 导航样式 **/
-.article__toc details ol {
+.article .article__toc ol {
   margin-block-start: 24px;
   margin-block-end: 24px;
 }
@@ -206,37 +210,22 @@ a {
   color: rgba(255, 255, 255, 0.95);
 }
 
-/** 演示区块 **/
-.demo__main {
-  margin-block-start: 24px;
-  margin-block-end: 24px;
-}
-
 /** 演示卡片 **/
 .card {
-  box-sizing: border-box;
   position: relative;
+  left: -12px;
   width: 100%;
   margin-block-start: 24px;
-  margin-block-end: 72px;
+  margin-block-end: 48px;
-  padding-block-start: 24px;
+  padding-block-start: 12px;
-  padding-block-end: 24px;
+  padding-block-end: 12px;
-  padding-inline-start: 16px;
+  padding-inline-start: 12px;
-  padding-inline-end: 16px;
+  padding-inline-end: 12px;
   border-radius: 2px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
   background-color: #fff;
 }
 
-.card__vertical-container {
-  box-sizing: border-box;
-  width: 100%;
-  height: 30em;
-  border: 1px solid #eee;
-  overflow: auto;
-  writing-mode: vertical-rl;
-}
-
 .article .card {
   text-align: left;
 }
@@ -249,7 +238,30 @@ a {
   padding-inline-start: 0;
   padding-inline-end: 72px;
   line-height: 24px;
-  border-block-start: 1px solid #ccc;
+  border-block-start: 1px solid #eee;
+}
+
+.card__vertical-container {
+  box-sizing: border-box;
+  width: 100%;
+  height: 30em;
+  border: 1px solid #eee;
+  overflow: auto;
+  writing-mode: vertical-rl;
+}
+
+/** 演示区块 **/
+.demo {
+  margin-block-start: 24px;
+  margin-block-end: 24px;
+}
+
+.section {
+  width: 100%;
+  max-height: 85vh;
+  margin-block-start: 12px;
+  margin-block-end: 12px;
+  overflow: auto;
 }
 
 @media screen and (min-width: 640px) {
@@ -298,6 +310,7 @@ a {
     position: absolute;
     left: -1em;
     width: 1em;
+    margin-inline-start: 0;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-weight: 400;
     line-height: inherit;
@@ -312,23 +325,33 @@ a {
   }
 
   .card {
+    box-sizing: border-box;
     left: -20%;
     width: 140%;
+    margin-block-start: 24px;
+    margin-block-end: 72px;
+    padding-block-start: 24px;
+    padding-block-end: 24px;
     padding-inline-start: 32px;
     padding-inline-end: 32px;
   }
+
+  .section {
+    height: auto;
+    overflow: visible;
+  }
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 900px) {
   .article__toc {
     position: relative;
     z-index: 1;
     float: right;
     width: 192px;
-    margin-block-start: 0;
+    margin-block-start: -1px;
     margin-block-end: 12px;
     margin-inline-start: 32px;
-    margin-inline-end: -48px;
+    margin-inline-end: -16px;
     padding-block-start: 12px;
     padding-block-end: 12px;
     padding-inline-start: 8px;
@@ -338,7 +361,8 @@ a {
     background-color: #fff;
   }
 
-  .article__toc details ol {
+  .article .article__toc ol {
+    margin-block-start: 12px;
     margin-block-end: 0;
   }
 }

index.html

@@ -5,7 +5,7 @@
   <title>赫蹏 - 一个简约又简单的网页中文排版增强</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="./normalize.css">
-  <link rel="stylesheet" href="./index.css">
+  <link rel="stylesheet" href="./index.css?1">
   <link rel="stylesheet" href="./heti.css">
   <link rel="icon" href="./favicon.svg">
 </head>
@@ -87,9 +87,9 @@
 
       <h2 id="examples">效果示例<a class="anchor" href="#examples">#</a></h2>
       <p>本站已<em>全页</em>应用了赫蹏样式，下面是赫蹏在特殊排版下的效果演示。</p>
-      <details class="demo" open>
+      <details open>
         <summary id="example-1">示例1：古文</summary>
-        <section class="demo__main">
+        <section class="demo">
           <div class="heti heti--ancient">
             <h1>出师表</h1>
             <p class="heti-meta heti-small">作者：<abbr title="字孔明">諸葛亮</abbr>（181年～234年10月8日）</p>
@@ -106,9 +106,9 @@
         </section>
       </details>
 
-      <details class="demo" open>
+      <details open>
         <summary id="example-2">示例2：诗词</summary>
-        <section class="demo__main">
+        <section class="demo">
           <div class="heti heti--ancient">
             <h2>一剪梅·红藕香残玉簟秋<span class="heti-meta heti-small">[宋]<abbr title="号易安居士">李清照</abbr></span></h2>
             <p class="heti-verse heti-x-large">
@@ -131,9 +131,9 @@
         </section>
       </details>
 
-      <details class="demo" open>
+      <details open>
         <summary id="example-3">示例3：行间注</summary>
-        <section class="demo__main">
+        <section class="demo">
           <div class="heti heti--ancient heti--annotation">
             <h2>庖丁解牛</h2>
             <p class="heti-meta heti-small">作者：<abbr title="庄子">庄周</abbr>（公元前369～公元前286年）</p>
@@ -146,14 +146,16 @@
         </section>
       </details>
 
-      <details class="demo">
+      <details>
         <summary id="example-4">示例4：英文演示</summary>
-        <section class="demo__main" lang="en-US">
+        <section class="demo">
+          <div class="heti" lang="en-US">
             <h1>Lorem Ipsum</h1>
             <p><q>There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain...</q></p>
             <p><dfn>Lorem Ipsum</dfn> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <em>Aldus PageMaker</em> including versions of Lorem Ipsum.</p>
             <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, <i>"Lorem ipsum dolor sit amet.."</i>, comes from a line in section 1.10.32.</p>
             <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from <cite>"de Finibus Bonorum et Malorum"</cite> by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
+          </div>
         </section>
       </details>
 
@@ -240,15 +242,16 @@
       <p>参考《中文排版需求<sup><a href="#fn-03">[3]</a></sup>》中描述的四种常见书籍排版字体：宋体、楷体、黑体、仿宋。赫蹏提供黑体、宋体和<u title="以正文宋体、标题楷体构成的搭配">传统</u>三种字体风格，前两者分别对应无衬线、衬线字体族。</p>
       <details>
         <summary>查看对照表</summary>
-        <table class="card">
+        <section class="section">
+          <table>
             <caption>各字体族下不同标签对应的字体</caption>
             <thead>
             <tr>
-            <td style="width: 80px;"></td>
+              <td style="width: 60px;"></td>
-            <th style="width: 80px;">黑体</th>
+              <th style="width: 60px;">黑体</th>
-            <th style="width: 80px;">宋体</th>
+              <th style="width: 60px;">宋体</th>
-            <th style="width: 80px;">传统</th>
+              <th style="width: 60px;">传统</th>
-            <th>备注</th>
+              <th style="width: 380px;">备注</th>
             </tr>
             </thead>
             <tbody>
@@ -355,6 +358,7 @@
             </tr>
             </tbody>
           </table>
+        </section>
       </details>
       <h3>标点</h3>
       <p>参考《中文排版需求》制定符号样式。唯一差异在于简体中文一律采用直角引号（「」）替代圆角引号（“”），这样可以保持字符等宽。</p>
@@ -368,6 +372,7 @@
       <p>赫蹏在间距、边框、位置属性上采用了Logical properties，在所有现代浏览器上表现良好。</p>
       <details>
         <summary>查看兼容性列表</summary>
+        <section class="section">
           <table>
             <caption>兼容性列表（未经充分测试）</caption>
             <tr>
@@ -387,12 +392,14 @@
               <td>79</td>
             </tr>
           </table>
+        </section>
       </details>
 
       <h3 id="tags">标签示例表<a class="anchor" href="#tags">#</a></h3>
       <details open>
         <summary>查看标签示例表</summary>
-        <table class="card">
+        <section class="section">
+          <table>
             <caption>常用标签样式示例表</caption>
             <tr>
               <th style="width: 40px;">类型</th>
@@ -455,6 +462,7 @@
               <td>这道题<mark>必考</mark>，你们爱记不记。</td>
             </tr>
           </table>
+        </section>
       </details>
 
       <h3 id="license">开源协议<a class="anchor" href="#tags">#</a></h3>