feat: update quickreference.md. 9a5e90d6e6

docs/quickreference.html

@@ -35,7 +35,7 @@
     localStorage.setItem(LOCAL_NANE, mode);
   }
 </script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap max-container"><header class="wrap-header h1wrap"><h1 id="quick-reference-备忘清单"><a aria-hidden="true" tabindex="-1" href="#quick-reference-备忘清单"><span class="icon icon-link"></span></a>Quick Reference 备忘清单</h1><div class="wrap-body">
-<p>这是您可以在 Quick Reference 备忘单上使用的样式参考，快速参与贡献！</p>
+<p>这是您可以在 Quick Reference 备忘单上使用的样式参考，快速参与<a href="https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md">贡献</a>！</p>
 </div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
 </div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="本地编译预览"><a aria-hidden="true" tabindex="-1" href="#本地编译预览"><span class="icon icon-link"></span></a>本地编译预览</h3><div class="wrap-body">
 <p>简单的将仓库克隆下来本地调试页面展示。</p>
@@ -640,6 +640,24 @@
 </ul>
 <!--rehype:className=cols-4-->
 <p><code>&#x3C;!--rehype:className=cols-4--></code></p>
+</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="列表步骤"><a aria-hidden="true" tabindex="-1" href="#列表步骤"><span class="icon icon-link"></span></a>列表步骤</h3><div class="wrap-body">
+<!--rehype:wrap-class=row-span-2-->
+<ul class="style-timeline">
+<li><strong>重命名为 new_name</strong>
+<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">git</span> branch <span class="token parameter variable">-m</span> <span class="token operator">&#x3C;</span>new_name<span class="token operator">></span>
+</span></code></pre>
+</li>
+<li>推送和<strong>重置</strong>
+<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">git</span> push origin <span class="token parameter variable">-u</span> <span class="token operator">&#x3C;</span>new_name<span class="token operator">></span>
+</span></code></pre>
+</li>
+<li>删除远程分支
+<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">git</span> push origin <span class="token parameter variable">--delete</span> <span class="token operator">&#x3C;</span>old<span class="token operator">></span>
+</span></code></pre>
+</li>
+</ul>
+<!--rehype:className=style-timeline-->
+<p><code>&#x3C;!--rehype:className=style-timeline--></code></p>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="没有标记"><a aria-hidden="true" tabindex="-1" href="#没有标记"><span class="icon icon-link"></span></a>没有标记</h3><div class="wrap-body">
 <ul class="cols-3 style-none">
 <li>Item 1</li>
@@ -648,9 +666,20 @@
 <li>Item 4</li>
 <li>Item 5</li>
 <li>Item 6</li>
+<li>Item 7</li>
+<li>Item 8</li>
+<li>Item 9</li>
 </ul>
 <!--rehype:className=cols-3 style-none-->
 <p><code>&#x3C;!--rehype:className=cols-3 style-none--></code></p>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="圆圈标记"><a aria-hidden="true" tabindex="-1" href="#圆圈标记"><span class="icon icon-link"></span></a>圆圈标记</h3><div class="wrap-body">
+<ul class="style-round">
+<li>Item 1</li>
+<li>Item 2</li>
+<li>Item 3</li>
+</ul>
+<!--rehype:className=style-round-->
+<p><code>&#x3C;!--rehype:className=style-round--></code></p>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="h2-部分---5列效果展示"><a aria-hidden="true" tabindex="-1" href="#h2-部分---5列效果展示"><span class="icon icon-link"></span></a>H2 部分 - 5列效果展示</h2><div class="wrap-body">
 <!--rehype:body-class=cols-5-->
 </div></div><div class="h2wrap-body cols-5"><div class="wrap" style="background:#dba300;"><div class="wrap-header h3wrap"><h3 id="one"><a aria-hidden="true" tabindex="-1" href="#one"><span class="icon icon-link"></span></a>One</h3><div class="wrap-body">

index.html

@@ -114,9 +114,11 @@
   <path d="M32 15.979h-.036l-5.755-5.755 5.734-5.885V1.948l-.865-.865H20.146l-.88.807v1.396L16.021.036V0L16 .021 15.979 0v.036L14.26 1.755l-.719-.719H2.713l-.849.927v2.51l.818.823h.964v7.078L.037 15.983H.001l.021.016-.021.021h.036l3.609 3.604v8.625l1.208.698h3.094l2.479-2.542 5.552 5.557v.036l.021-.021.021.021v-.036l3.344-3.344h.646a.352.352 0 0 0 .333-.24l.198-.568a.356.356 0 0 0-.052-.323l1.948-1.948-.813 2.615a.352.352 0 0 0 .234.443.242.242 0 0 0 .104.021h2.432a.365.365 0 0 0 .323-.219l.219-.526a.333.333 0 0 0-.005-.271.313.313 0 0 0-.193-.188.45.45 0 0 0-.13-.031h-.099l1.12-3.521h1.641l-1.354 4.292a.359.359 0 0 0 .343.459h2.667a.362.362 0 0 0 .333-.224l.219-.573a.355.355 0 0 0-.334-.474h-.193l1.505-4.901a.347.347 0 0 0-.052-.318l-.5-.672v-.005a.355.355 0 0 0-.281-.141h-1.917a.348.348 0 0 0-.25.109l-.536.589h-.828l-.057-.063 5.927-5.927h.036l-.021-.016zM13.12 28.188l2.104-6.016h-.672l.401-.406h2.208l-2.083 6.078h.833l-.109.344zm4.922-10.027.203.203-.359 1.229-.302.302h-1.292l-.24-.24.417-1.161.38-.333zm-10.589 9.61H5.172l-.354-.198V4.12H3.172l-.135-.13V2.422l.193-.208h9.828l.286.286v1.479l-.193.229h-1.438v11.583L23.458 4.208h-2.781l-.234-.25V2.406l.161-.146h9.984l.177.177v1.427L17.307 17.666h-.557l-.026.005a.41.41 0 0 0-.156.078l-.458.396-.005.005a.407.407 0 0 0-.099.146l-.391 1.109zm19.693-5.266.63-.693h1.776l.417.552-1.688 5.474h.656l-.109.281h-2.375l1.5-4.755h-2.688l-1.438 4.521h.568l-.099.234h-2.141l1.479-4.729h-2.797l-1.417 4.453h.583l-.099.276H17.69l2.021-5.948h-.781l.12-.359h2.198l.693.714h1.208l.656-.734h1.411l.656.714z"></path>
 </svg>
 <span>Vim</span></a><!--rehype:style=background: rgb(9 150 8/var(\-\-bg\-opacity));-->
-<a href="./docs/xpath.html" style="background: rgb(91 163 230/var(\-\-bg\-opacity));"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
+<a href="./docs/xpath.html" style="background: rgb(91 163 230/var(\-\-bg\-opacity));"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em">
-  <path d="M107.946667 838.4l57.173333 23.893333v-385.28l-103.68 250.026667c-17.493333 43.52 3.413333 93.44 46.506667 111.36z m832-157.866667L728.32 169.813333a85.888 85.888 0 0 0-77.226667-52.48c-11.093333 0-22.613333 1.706667-33.706666 6.4L302.933333 253.866667a85.290667 85.290667 0 0 0-46.08 110.933333l211.626667 510.72a85.248 85.248 0 0 0 110.933333 46.08l314.026667-130.133333a85.077333 85.077333 0 0 0 46.506667-110.933334zM336.213333 373.333333c-23.466667 0-42.666667-19.2-42.666666-42.666666s19.2-42.666667 42.666666-42.666667 42.666667 19.2 42.666667 42.666667-19.2 42.666667-42.666667 42.666666z m-85.333333 469.333334c0 46.933333 38.4 85.333333 85.333333 85.333333h61.866667l-147.2-355.84v270.506667z"></path>
+  <path fill="none" d="M0 0h24v24H0z"></path>
-</svg><span>XPath</span></a><!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));--></p>
+  <path d="M10 2a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H8v2h5V9a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-1H8v6h5v-1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-1H7a1 1 0 0 1-1-1V8H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h6zm9 16h-4v2h4v-2zm0-8h-4v2h4v-2zM9 4H5v2h4V4z"></path>
+</svg>
+<span>XPath</span></a><!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));--></p>
 <!--rehype:class=home-card-->
 </div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="linux-命令"><a aria-hidden="true" tabindex="-1" href="#linux-命令"><span class="icon icon-link"></span></a>Linux 命令</h2><div class="wrap-body">
 <p class="home-card"><a href="./docs/chmod.html" style="background: rgb(239 68 113/var(\-\-bg\-opacity));"><svg viewBox="0 0 1024 1024" version="1.1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em"><path d="M912.9 130.6c-26.1 4.5-52.8 6.9-80.2 6.9-115.4 0-221.1-41.9-302.6-111.2-10.6-9-26.2-9-36.8 0-81.5 69.4-187.2 111.2-302.6 111.2-27 0-53.5-2.3-79.2-6.7-17.2-2.9-32.9 10.4-33 27.9-0.2 109.1-0.4 238.1-0.4 242.5 0 471 394.5 592.7 431 603 1.8 0.5 3.6 0.5 5.4 0C550.9 994 943 873 945.5 405.7l0.4-247c0-17.6-15.8-31.1-33-28.1zM546 568.9v154.5c0 18.8-15.2 34-34 34s-34-15.2-34-34V568.9c-68.2-15.5-119.1-76.4-119.1-149.3 0-84.5 68.5-153.1 153.1-153.1S665.1 335 665.1 419.6c0 72.9-50.9 133.9-119.1 149.3z"></path></svg><span>Chmod</span></a><!--rehype:style=background: rgb(239 68 113/var(\-\-bg\-opacity));-->

style/style.css

@@ -576,6 +576,55 @@ body:not(.home) .h2wrap > h2 a::after {
   position: relative;
 }
 
+.h2wrap-body ul.style-timeline {
+  counter-reset: stepCount;
+}
+.h2wrap-body ul.style-timeline li:first-child:before {
+  background-color: #228e6c;
+  color: rgb(226 232 240/1);
+}
+.h2wrap-body ul.style-timeline li::before {
+  color: #228e6c;
+  background-color: #fff;
+  counter-increment: stepCount;
+  content: counter(stepCount);
+  border-radius: initial;
+  border-radius: 0.5rem;
+  height: 1.5rem;
+  width: 1.5rem;
+  text-align: center;
+  font-size: 0.875rem;
+  line-height: 1.30rem;
+  border: 2px solid #228e6c;
+  top: -1px;
+  left: -14px;
+}
+.h2wrap-body ul.style-timeline li:last-child {
+  border-image: linear-gradient(to bottom,#228e6c,rgba(0,0,0,0)) 1 100%;
+}
+.h2wrap-body ul.style-timeline li {
+  border-bottom: 0 !important;
+  padding-top: 0 !important;
+  padding-bottom: 25px !important;
+  border-left: 2px solid #228e6c;
+  margin-left: 30px;
+}
+.h2wrap-body ul.style-timeline li > pre {
+  padding: 0 !important;
+  padding-top: 10px !important;
+  height: initial !important;
+}
+
+.h2wrap-body ul.style-round li::before {
+  border-radius: 9999px;
+  border-width: 2px;
+  height: 0.5rem;
+  width: 0.5rem;
+  border-color: #228e6c;
+  background: transparent;
+  top: 14px;
+}
+
 .wrap-body ul:last-child {
   margin-bottom: 0;
 }