update styles

Author: Developer09264

assets/css/styles.css

@@ -1,9 +1,3 @@
-/* body {
-    margin: 0;
-    padding: 0;
-    overflow: auto;
-} */
-/* 动态背景 */
 @keyframes pearl-shimmer {
     0% {
         background-position: 0% 50%;
@@ -38,7 +32,6 @@ html {
 }
 
 .welcome-page {
-    position: relative;
     width: 100%;
     height: 100vh;
     color: #391d45;
@@ -49,10 +42,6 @@ html {
     padding-top: 30%;
 }
 
-.title {
-    font-size: 48px;
-}
-
 .quote {
     font-size: 8vw;
     position: absolute;
@@ -78,6 +67,35 @@ html {
     background-color: #f2e3f6;
 }
 
+#quotepad {
+    min-height: 100vh;
+    width: 50vw;
+    border-radius: 5vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 10vh;
+    margin: 20vh auto;
+    background-color: rgba(247, 244, 251, 0.9);
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+}
+
+#footer {
+    height: 20vh;
+    width: 100vw;
+    background-color: #c4c4c4bd;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: auto;
+}
+
+h2 {
+    color: #8a297f;
+    font-size: 4vh;
+}
+
 .quotes-content {
     flex-grow: 1;
     display: flex;
@@ -100,6 +118,7 @@ html {
 #quote-list {
     list-style: none;
     padding: 0;
+    font-size: 3vh;
 }
 
 #back-to-top {
@@ -136,6 +155,12 @@ html {
     bottom: 20px;
 }
 
+.ma-shan-zheng-regular {
+    font-family: "Ma Shan Zheng", cursive;
+    font-weight: 400;
+    font-style: normal;
+}
+
 #navbar {
     position: fixed;
     top: 0;
@@ -144,23 +169,26 @@ html {
     height: 12.5vh;
     opacity: 0;
     pointer-events: none;
-    transition: opacity 0.5s;
-    background-color: #d6d6d695;
+    transition: opacity 0.8s, background-color 0.4s;
+    background-color: rgba(225, 225, 225, 0.2);
     display: flex;
     align-items: center;
     padding: 0 20px;
     box-sizing: border-box;
     z-index: 1;
     border-bottom-right-radius: 10px;
     border-bottom-left-radius: 10px;
-    /* filter: blur(5px); */
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     backdrop-filter: blur(5px);
 }
 
 #navbar.show {
     opacity: 1;
     pointer-events: auto;
-    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+}
+
+#navbar:hover {
+    background-color: rgba(255, 255, 255, 0.8);
 }
 
 .logo {
@@ -174,10 +202,8 @@ html {
     transition: background-color 0.3s;
 }
 
-/* Dropdown styles */
 .dropdown {
     margin-left: auto;
-    /* 推向右端 */
 }
 
 .dropdown-btn {

assets/html/about.html

@@ -108,7 +108,7 @@ <h2>关于田语</h2>
   <p>《田语》者，今世思想家、教育家田氏之门人，录其言行而辑成之语录也。辑于二〇二三年，具体日期未详。以语录体为主，集中显现田氏及其学派之教育主张、伦理思想、道德观念、生活态度等。然《田语》之编著，曾遭严酷压制，故编撰转入地下。《田语》不独为田氏之象征，亦乃一班级、一时代之象征，实为田学之瑰宝焉。</p>
      </div>
  <div class="timer" id="timer"></div>
-联系我：c09264@outlook.com
+联系我: c09264@outlook.com
  </div>
  <script type="text/javascript" src="../js/about.js"></script>
 </body>

assets/js/about.js

@@ -6,6 +6,6 @@ function updateTimer() {
     const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
     const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
     const seconds = Math.floor((diff % (1000 * 60)) / 1000);
-    document.getElementById('timer').innerHTML = `网站运行 ${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒`;
+    document.getElementById('timer').innerHTML = `网站已运行 ${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒`;
    }
    setInterval(updateTimer, 1000);

assets/js/script.js

@@ -51,7 +51,7 @@ fetch("assets/quotes.txt")
     console.error('There was a problem with the fetch operation:', error);
   });
 
-// 定时切换田语（每隔3秒）
+  
 setInterval(showRandomQuote, 4000);
 
 

index.html

@@ -12,6 +12,9 @@
     <meta http-equiv="Content-Language" content="zh-CN">
     <link rel="icon" href="./assets/images/favicon.svg" type="image/svg+xml">
     <link rel="stylesheet" type="text/css" href="./assets/css/styles.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
 </head>
 
 <body>
@@ -26,12 +29,20 @@
         </div>
     </div>
     <div class="welcome-page">
-        <p class="quote" id="quote">田语</p>
+        <p class="quote ma-shan-zheng-regular" id="quote">田语</p>
     </div>
-    <div class="quotes">
+    <div id="quotepad">
         <h2>所有田语</h2>
-        <ul id="quote-list">
-        </ul>
+        <ol id="quote-list">
+        </ol>
+    </div>
+    <div id="footer">
+        <p>
+            powered by <a href="https://github.com/Developer09264">c09264</a>
+        </p>
+        <p>
+            contact me: c09264@outlook.com
+        </p>
     </div>
     <button id="back-to-top">↑</button>
     <script src="./assets/js/script.js"></script>