removed menu.js

auroursa · Nov 30, 2023 · e538f2c · e538f2c
1 parent 94d1b03
commit e538f2c
Show file tree

Hide file tree

Showing 27 changed files with 114 additions and 151 deletions.
diff --git a/404.html b/404.html
@@ -23,7 +23,7 @@
     <meta name="twitter:description" content="Page Not Found">
     <meta name="twitter:image" content="https://cynosura.one/img/banner.jpg">
     <!--链接样式-->
-    <link rel="stylesheet" type="text/css" href="https://cynosura.one/css/main.css?v=3.0.0">
+    <link rel="stylesheet" type="text/css" href="https://cynosura.one/css/main.css?v=3.1.0">
     <!--图标-->
     <link rel="icon" type="image/x-icon" href="https://cynosura.one/img/favicon.ico">
 </head>
@@ -54,9 +54,9 @@ <h1 class="header-title">Cynosura</h1>
                 </button>
             </div>
             <div class="menu-b">
-                <button class="menu-button" id="open-menu" aria-label="打开菜单">
+                <a href="#drawer" id="open-menu" class="menu-button" aria-label="打开菜单">
                     <svg class="icon menu-icon" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
-                </button>
+                </a>
             </div>
         </nav>
         <div class="menu-b-drawer-container" id="drawer">
@@ -86,9 +86,9 @@ <h3 class="subtitle">即时通讯 / IM</h3>
                     <a class="menu-b-button" href="https://matrix.to/#/@froseiun:matrix.org"><span class="menu-b-button social-im-button">Matrix</span></a>
                 </div>
                 <div class="menu-b-close-div">
-                    <button class="menu-button" id="close-menu" aria-label="关闭菜单">
+                    <a href="#" id="open-menu" class="menu-button" aria-label="关闭菜单">
                         <svg class="icon menu-icon" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M437.5,386.6L306.9,256l130.6-130.6c14.1-14.1,14.1-36.8,0-50.9c-14.1-14.1-36.8-14.1-50.9,0L256,205.1L125.4,74.5  c-14.1-14.1-36.8-14.1-50.9,0c-14.1,14.1-14.1,36.8,0,50.9L205.1,256L74.5,386.6c-14.1,14.1-14.1,36.8,0,50.9  c14.1,14.1,36.8,14.1,50.9,0L256,306.9l130.6,130.6c14.1,14.1,36.8,14.1,50.9,0C451.5,423.4,451.5,400.6,437.5,386.6z"/></svg>
-                    </button>
+                    </a>
                 </div>
             </div>
         </div>
@@ -101,7 +101,6 @@ <h1>404</h1>
     </main>
     <footer>
         <p>Designed by <a href="https://cynosura.one">Cynosura</a> &copy;&nbsp;2023</p>
-        <script src="https://cynosura.one/js/menu.js?v=3.0.0" defer></script>
     </footer>
 </body>
 </html>
diff --git a/about.html b/about.html
@@ -21,7 +21,7 @@
     <meta name="twitter:description" content="有关本站的一些建站信息">
     <meta name="twitter:image" content="https://cynosura.one/img/banner.webp">
     <!--链接样式-->
-    <link rel="stylesheet" type="text/css" href="css/main.css?v=3.0.0">
+    <link rel="stylesheet" type="text/css" href="css/main.css?v=3.1.0">
     <!--图标-->
     <link rel="icon" type="image/x-icon" href="img/favicon.ico">
 </head>
@@ -52,9 +52,9 @@ <h1 class="header-title">Cynosura</h1>
                 </button>
             </div>
             <div class="menu-b">
-                <button class="menu-button" id="open-menu" aria-label="打开菜单">
+                <a href="#drawer" id="open-menu" class="menu-button" aria-label="打开菜单">
                     <svg class="icon menu-icon" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
-                </button>
+                </a>
             </div>
         </nav>
         <div class="menu-b-drawer-container" id="drawer">
@@ -84,9 +84,9 @@ <h3 class="subtitle">即时通讯 / IM</h3>
                     <a class="menu-b-button" href="https://matrix.to/#/@froseiun:matrix.org"><span class="menu-b-button social-im-button">Matrix</span></a>
                 </div>
                 <div class="menu-b-close-div">
-                    <button class="menu-button" id="close-menu" aria-label="关闭菜单">
+                    <a href="#" id="open-menu" class="menu-button" aria-label="关闭菜单">
                         <svg class="icon menu-icon" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M437.5,386.6L306.9,256l130.6-130.6c14.1-14.1,14.1-36.8,0-50.9c-14.1-14.1-36.8-14.1-50.9,0L256,205.1L125.4,74.5  c-14.1-14.1-36.8-14.1-50.9,0c-14.1,14.1-14.1,36.8,0,50.9L205.1,256L74.5,386.6c-14.1,14.1-14.1,36.8,0,50.9  c14.1,14.1,36.8,14.1,50.9,0L256,306.9l130.6,130.6c14.1,14.1,36.8,14.1,50.9,0C451.5,423.4,451.5,400.6,437.5,386.6z"/></svg>
-                    </button>
+                    </a>
                 </div>
             </div>
         </div>
@@ -149,6 +149,5 @@ <h2 class="card-title">留言板</h2>
     </main>
     <footer>
         <p>Designed by <a href="https://cynosura.one">Cynosura</a> &copy;&nbsp;2023</p>
-        <script src="js/menu.js?v=3.0.0" defer></script>
     </footer>
 </body>
diff --git a/css/main.css b/css/main.css
@@ -994,13 +994,13 @@ main {
         background-color: var(--bg-blur-color);
     }
 
-    .menu-b-drawer-container hr {
-        border: 1px dashed var(--hr-line-color);
+    /* 使用 :target 来实现菜单打开效果 */
+    .menu-b-drawer-container:target {
+        right: 0;
     }
 
-    /* 打开抽屉菜单时调整左边距 */
-    .menu-b-drawer-container.open {
-        right: 0;
+    .menu-b-drawer-container hr {
+        border: 1px dashed var(--hr-line-color);
     }
 
     .menu-b-drawer-content {

diff --git a/friends.html b/friends.html
@@ -21,7 +21,7 @@
     <meta name="twitter:description" content="友链列表，按 A-Z 顺序排列">
     <meta name="twitter:image" content="https://cynosura.one/img/banner.webp">
     <!--链接样式-->
-    <link rel="stylesheet" type="text/css" href="css/main.css?v=3.0.0">
+    <link rel="stylesheet" type="text/css" href="css/main.css?v=3.1.0">
     <!--图标-->
     <link rel="icon" type="image/x-icon" href="img/favicon.ico">
 </head>
@@ -52,9 +52,9 @@ <h1 class="header-title">Cynosura</h1>
                 </button>
             </div>
             <div class="menu-b">
-                <button class="menu-button" id="open-menu" aria-label="打开菜单">
+                <a href="#drawer" id="open-menu" class="menu-button" aria-label="打开菜单">
                     <svg class="icon menu-icon" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
-                </button>
+                </a>
             </div>
         </nav>
         <div class="menu-b-drawer-container" id="drawer">
@@ -84,9 +84,9 @@ <h3 class="subtitle">即时通讯 / IM</h3>
                     <a class="menu-b-button" href="https://matrix.to/#/@froseiun:matrix.org"><span class="menu-b-button social-im-button">Matrix</span></a>
                 </div>
                 <div class="menu-b-close-div">
-                    <button class="menu-button" id="close-menu" aria-label="关闭菜单">
+                    <a href="#" id="open-menu" class="menu-button" aria-label="关闭菜单">
                         <svg class="icon menu-icon" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M437.5,386.6L306.9,256l130.6-130.6c14.1-14.1,14.1-36.8,0-50.9c-14.1-14.1-36.8-14.1-50.9,0L256,205.1L125.4,74.5  c-14.1-14.1-36.8-14.1-50.9,0c-14.1,14.1-14.1,36.8,0,50.9L205.1,256L74.5,386.6c-14.1,14.1-14.1,36.8,0,50.9  c14.1,14.1,36.8,14.1,50.9,0L256,306.9l130.6,130.6c14.1,14.1,36.8,14.1,50.9,0C451.5,423.4,451.5,400.6,437.5,386.6z"/></svg>
-                    </button>
+                    </a>
                 </div>
             </div>
         </div>
@@ -643,6 +643,5 @@ <h3 class="card-title friends-card-title">Zikin 的独立博客</h3>
     </main>
     <footer>
         <p>Designed by <a href="https://cynosura.one">Cynosura</a> &copy;&nbsp;2023</p>
-        <script src="js/menu.js?v=3.0.0" defer></script>
     </footer>
 </body>
diff --git a/index.html b/index.html
@@ -21,7 +21,7 @@
     <meta name="twitter:description" content="赤茶的个人页面">
     <meta name="twitter:image" content="https://cynosura.one/img/banner.webp">
     <!--链接样式-->
-    <link rel="stylesheet" type="text/css" href="css/main.css?v=3.0.0">
+    <link rel="stylesheet" type="text/css" href="css/main.css?v=3.1.0">
     <!--图标和站点地图-->
     <link rel="icon" type="image/x-icon" href="img/favicon.ico">
     <link rel="sitemap" type="application/xml" title="Sitemap" href="sitemap.xml">
@@ -56,9 +56,9 @@ <h1 class="header-title">Cynosura</h1>
                 </button>
             </div>
             <div class="menu-b">
-                <button class="menu-button" id="open-menu" aria-label="打开菜单">
+                <a href="#drawer" id="open-menu" class="menu-button" aria-label="打开菜单">
                     <svg class="icon menu-icon" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
-                </button>
+                </a>
             </div>
         </nav>
         <div class="menu-b-drawer-container" id="drawer">
@@ -88,9 +88,9 @@ <h3 class="subtitle">即时通讯 / IM</h3>
                     <a class="menu-b-button" href="https://matrix.to/#/@froseiun:matrix.org"><span class="menu-b-button social-im-button">Matrix</span></a>
                 </div>
                 <div class="menu-b-close-div">
-                    <button class="menu-button" id="close-menu" aria-label="关闭菜单">
+                    <a href="#" id="open-menu" class="menu-button" aria-label="关闭菜单">
                         <svg class="icon menu-icon" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M437.5,386.6L306.9,256l130.6-130.6c14.1-14.1,14.1-36.8,0-50.9c-14.1-14.1-36.8-14.1-50.9,0L256,205.1L125.4,74.5  c-14.1-14.1-36.8-14.1-50.9,0c-14.1,14.1-14.1,36.8,0,50.9L205.1,256L74.5,386.6c-14.1,14.1-14.1,36.8,0,50.9  c14.1,14.1,36.8,14.1,50.9,0L256,306.9l130.6,130.6c14.1,14.1,36.8,14.1,50.9,0C451.5,423.4,451.5,400.6,437.5,386.6z"/></svg>
-                    </button>
+                    </a>
                 </div>
             </div>
         </div>
@@ -271,6 +271,5 @@ <h3>即使不知道如何介绍自己...</h3>
     </main>
     <footer>
         <p>Designed by <a href="https://cynosura.one">Cynosura</a> &copy;&nbsp;2023</p>
-        <script src="js/menu.js?v=3.0.0" defer></script>
     </footer>
 </body>
diff --git a/js/menu.js b/js/menu.js
diff --git a/posts/2022-mid-year-summary.html b/posts/2022-mid-year-summary.html
@@ -22,7 +22,7 @@
     <meta name="twitter:description" content="在过去的半年里也发生了不少事情，是时候写个年中总结来梳理一下时间线了">
     <meta name="twitter:image" content="https://cynosura.one/img/banner.webp">
     <!--链接样式-->
-    <link rel="stylesheet" type="text/css" href="https://cynosura.one/css/main.css?v=3.0.0">
+    <link rel="stylesheet" type="text/css" href="https://cynosura.one/css/main.css?v=3.1.0">
     <!--图标和站点地图-->
     <link rel="icon" type="image/x-icon" href="https://cynosura.one/img/favicon.ico">
     <link rel="sitemap" type="application/xml" title="Sitemap" href="https://cynosura.one/posts/sitemap.xml">
@@ -56,9 +56,9 @@ <h1 class="header-title">Cynosura</h1>
             </button>
         </div>
         <div class="menu-b">
-            <button class="menu-button" id="open-menu" aria-label="打开菜单">
+            <a href="#drawer" id="open-menu" class="menu-button" aria-label="打开菜单">
                 <svg class="icon menu-icon" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
-            </button>
+            </a>
         </div>
     </nav>
     <div class="menu-b-drawer-container" id="drawer">
@@ -78,9 +78,9 @@ <h3 class="subtitle">文章分类</h3>
                 <a class="menu-b-button" href="https://cynosura.one/posts/category/za-tan.html"><span class="menu-b-button post-left-menu-category">杂谈</span></a>
             </div>
             <div class="menu-b-close-div">
-                <button class="menu-button" id="close-menu" aria-label="关闭菜单">
+                <a href="#" id="open-menu" class="menu-button" aria-label="关闭菜单">
                     <svg class="icon menu-icon" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M437.5,386.6L306.9,256l130.6-130.6c14.1-14.1,14.1-36.8,0-50.9c-14.1-14.1-36.8-14.1-50.9,0L256,205.1L125.4,74.5  c-14.1-14.1-36.8-14.1-50.9,0c-14.1,14.1-14.1,36.8,0,50.9L205.1,256L74.5,386.6c-14.1,14.1-14.1,36.8,0,50.9  c14.1,14.1,36.8,14.1,50.9,0L256,306.9l130.6,130.6c14.1,14.1,36.8,14.1,50.9,0C451.5,423.4,451.5,400.6,437.5,386.6z"/></svg>
-                </button>
+                </a>
             </div>
         </div>
     </div>
@@ -190,7 +190,6 @@ <h2 class="card-title">评论</h2>
 </main>
     <footer>
         <p>Designed by <a href="https://cynosura.one">Cynosura</a> &copy;&nbsp;2023</p>
-        <script src="https://cynosura.one/js/menu.js?v=3.0.0" defer></script>
     </footer>
 </body>
 </html>
diff --git a/posts/2022-year-end-summary.html b/posts/2022-year-end-summary.html
@@ -22,7 +22,7 @@
     <meta name="twitter:description" content="一年写了三篇「总结」类型的文章，不愧是我">
     <meta name="twitter:image" content="https://cynosura.one/img/banner.webp">
     <!--链接样式-->
-    <link rel="stylesheet" type="text/css" href="https://cynosura.one/css/main.css?v=3.0.0">
+    <link rel="stylesheet" type="text/css" href="https://cynosura.one/css/main.css?v=3.1.0">
     <!--图标和站点地图-->
     <link rel="icon" type="image/x-icon" href="https://cynosura.one/img/favicon.ico">
     <link rel="sitemap" type="application/xml" title="Sitemap" href="https://cynosura.one/posts/sitemap.xml">
@@ -56,9 +56,9 @@ <h1 class="header-title">Cynosura</h1>
             </button>
         </div>
         <div class="menu-b">
-            <button class="menu-button" id="open-menu" aria-label="打开菜单">
+            <a href="#drawer" id="open-menu" class="menu-button" aria-label="打开菜单">
                 <svg class="icon menu-icon" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
-            </button>
+            </a>
         </div>
     </nav>
     <div class="menu-b-drawer-container" id="drawer">
@@ -78,9 +78,9 @@ <h3 class="subtitle">文章分类</h3>
                 <a class="menu-b-button" href="https://cynosura.one/posts/category/za-tan.html"><span class="menu-b-button post-left-menu-category">杂谈</span></a>
             </div>
             <div class="menu-b-close-div">
-                <button class="menu-button" id="close-menu" aria-label="关闭菜单">
+                <a href="#" id="open-menu" class="menu-button" aria-label="关闭菜单">
                     <svg class="icon menu-icon" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M437.5,386.6L306.9,256l130.6-130.6c14.1-14.1,14.1-36.8,0-50.9c-14.1-14.1-36.8-14.1-50.9,0L256,205.1L125.4,74.5  c-14.1-14.1-36.8-14.1-50.9,0c-14.1,14.1-14.1,36.8,0,50.9L205.1,256L74.5,386.6c-14.1,14.1-14.1,36.8,0,50.9  c14.1,14.1,36.8,14.1,50.9,0L256,306.9l130.6,130.6c14.1,14.1,36.8,14.1,50.9,0C451.5,423.4,451.5,400.6,437.5,386.6z"/></svg>
-                </button>
+                </a>
             </div>
         </div>
     </div>
@@ -179,7 +179,6 @@ <h2 class="card-title">评论</h2>
 </main>
     <footer>
         <p>Designed by <a href="https://cynosura.one">Cynosura</a> &copy;&nbsp;2023</p>
-        <script src="https://cynosura.one/js/menu.js?v=3.0.0" defer></script>
     </footer>
 </body>
 </html>
diff --git a/posts/android-grf.html b/posts/android-grf.html
@@ -22,7 +22,7 @@
     <meta name="twitter:description" content="在参考了几个消息来源后，决定总结一下我理解的 GRF 具体是什么东西">
     <meta name="twitter:image" content="https://cynosura.one/img/banner.webp">
     <!--链接样式-->
-    <link rel="stylesheet" type="text/css" href="https://cynosura.one/css/main.css?v=3.0.0">
+    <link rel="stylesheet" type="text/css" href="https://cynosura.one/css/main.css?v=3.1.0">
     <!--图标和站点地图-->
     <link rel="icon" type="image/x-icon" href="https://cynosura.one/img/favicon.ico">
     <link rel="sitemap" type="application/xml" title="Sitemap" href="https://cynosura.one/posts/sitemap.xml">
@@ -56,9 +56,9 @@ <h1 class="header-title">Cynosura</h1>
             </button>
         </div>
         <div class="menu-b">
-            <button class="menu-button" id="open-menu" aria-label="打开菜单">
+            <a href="#drawer" id="open-menu" class="menu-button" aria-label="打开菜单">
                 <svg class="icon menu-icon" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
-            </button>
+            </a>
         </div>
     </nav>
     <div class="menu-b-drawer-container" id="drawer">
@@ -78,9 +78,9 @@ <h3 class="subtitle">文章分类</h3>
                 <a class="menu-b-button" href="https://cynosura.one/posts/category/za-tan.html"><span class="menu-b-button post-left-menu-category">杂谈</span></a>
             </div>
             <div class="menu-b-close-div">
-                <button class="menu-button" id="close-menu" aria-label="关闭菜单">
+                <a href="#" id="open-menu" class="menu-button" aria-label="关闭菜单">
                     <svg class="icon menu-icon" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M437.5,386.6L306.9,256l130.6-130.6c14.1-14.1,14.1-36.8,0-50.9c-14.1-14.1-36.8-14.1-50.9,0L256,205.1L125.4,74.5  c-14.1-14.1-36.8-14.1-50.9,0c-14.1,14.1-14.1,36.8,0,50.9L205.1,256L74.5,386.6c-14.1,14.1-14.1,36.8,0,50.9  c14.1,14.1,36.8,14.1,50.9,0L256,306.9l130.6,130.6c14.1,14.1,36.8,14.1,50.9,0C451.5,423.4,451.5,400.6,437.5,386.6z"/></svg>
-                </button>
+                </a>
             </div>
         </div>
     </div>
@@ -152,7 +152,6 @@ <h2 class="card-title">评论</h2>
 </main>
     <footer>
         <p>Designed by <a href="https://cynosura.one">Cynosura</a> &copy;&nbsp;2023</p>
-        <script src="https://cynosura.one/js/menu.js?v=3.0.0" defer></script>
     </footer>
 </body>
 </html>