加入使用手册按钮，Safari 顶部彩虹

src/components/Qrcode.js

@@ -244,15 +244,18 @@ class Qrcode extends React.Component {
                     </div>
                     <div className="Qr-Centered">
                         <div className="div-btn">
+                            <a href="https://www.yuque.com/qrbtf/docs" rel="noopener noreferrer" target="_blank">
+                                <button className="dl-btn">使用手册</button>
+                            </a>
                             <button disabled className="dl-btn">提交样式</button>
                         </div>
                     </div>
                 </div>
                 <div className="Qr-titled">
                     <div className="Qr-Centered Qr-footer note-font">
-                        <div><strong>作者</strong>&emsp;<a href="https://blog.ciaochaos.com/" rel="noopener noreferrer" target="_blank" data-pjax-state="">ciaochaos</a>&emsp;<a href="https://github.com/CPunisher/" rel="noopener noreferrer" target="_blank" data-pjax-state="">CPunisher</a></div>
+                        <div><strong>作者</strong>&emsp;<a href="https://blog.ciaochaos.com/" rel="noopener noreferrer" target="_blank">ciaochaos</a>&emsp;<a href="https://github.com/CPunisher/" rel="noopener noreferrer" target="_blank">CPunisher</a></div>
                         <div className="Gray">Copyright © {currentYear} QRBTF. 保留所有权利。</div>
-                        <div className="Gray"><a href="http://www.beian.miit.gov.cn/" rel="noopener noreferrer" target="_blank" data-pjax-state="">浙 ICP 备 19005869 号 </a></div>
+                        <div className="Gray"><a href="http://www.beian.miit.gov.cn/" rel="noopener noreferrer" target="_blank">浙 ICP 备 19005869 号 </a></div>
                     </div>
                 </div>
             </div>

src/index.css

@@ -10,6 +10,47 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  body:before {
+    right: 0;
+    top: 0;
+    left: 0;
+    height: 100px;
+    z-index: 2147483647;
+    position: fixed;
+    content: "";
+    display: block;
+    -webkit-transform: translateY(-99.99px);
+    background: linear-gradient(124deg,
+    #FF0000,
+    #FF7F00,
+    #FFFF00,
+    #7FFF00,
+    #00FF00,
+    #00FF7F,
+    #00FFFF,
+    #007FFF,
+    #0000FF,
+    #7F00FF,
+    #FF00FF,
+    #FF007F,
+    #FF0000);
+    animation: rainbow 15s ease infinite;
+    background-size: 1000% 1000%;
+  }
+}
+@keyframes rainbow {
+  0% {
+    background-position: 0% 80%;
+  }
+  50% {
+    background-position: 100% 20%;
+  }
+  100% {
+    background-position: 0% 80%;
+  }
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;