差異處

這裏顯示兩個版本的差異處。

--- start [2025/06/22 17:01] – jason
+++ start [2025/06/23 09:07] (目前版本) – jason
@@ 行 3: / 行 3: @@
 <html>
 <style>
-/* 整体布局样式 */
+/* 外層容器 */
 #google-style-wrapper {
     display: flex;
@@ 行 9: / 行 9: @@
     justify-content: center;
     align-items: center;
-    height: 75vh;
+    min-height: 75vh;
+    padding: 0 1em 15em;
     text-align: center;
+    box-sizing: border-box;
 }
-/* 网站标题 */
+/* 標題 */
 #google-style-wrapper h1 {
-    font-size: 2.5em;
+    font-size: 2.2em;
-    margin-bottom: 0.5em;
+    margin-bottom: 0.4em;
-    color: #2c3e50; /* 深蓝字体，与顶部匹配 */
+    color: #2c3e50;
 }
-/* 简短描述 */
+/* 描述文字 */
 #google-style-wrapper p.description {
-    font-size: 1.2em;
+    font-size: 1.1em;
-    color: #555;
+    color: #666;
-    margin-top: 5em;
+    margin-top: 2em;
-    margin-bottom: 2em;
+    max-width: 480px;
 }
-/* 搜索输入框 */
+/* 搜索表單 */
+#google-style-wrapper form {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.5em;
+    width: 100%;
+    max-width: 480px;
+}
+/* 搜索框 */
 #google-style-wrapper input[type="text"] {
-    width: 400px;
+    flex: 1 1 auto;
-    height: 45px;
+    height: 42px;
-    font-size: 18px;
+    font-size: 16px;
     padding: 5px 15px;
-    border-radius: 25px;
+    border-radius: 20px;
     border: 1px solid #ccc;
-    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
+    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
     outline: none;
-    margin-right: 10px;
+    box-sizing: border-box;
+    min-width: 0;
 }
-/* 搜索按钮 */
+/* 按鈕 */
 #google-style-wrapper input[type="submit"] {
-    padding: 10px 25px;
+    height: 42px;
-    font-size: 16px;
+    padding: 0 20px;
-    border-radius: 25px;
+    font-size: 15px;
+    border-radius: 20px;
     border: none;
-    background-color: rgb(149, 165, 166); /* bootstrap 主色 */
-    color: white;
     cursor: pointer;
+    white-space: nowrap;
 }
-/* 按钮 hover */
-#google-style-wrapper input[type="submit"]:hover {
-    background-color: #286090;
+/* 響應式調整 */
+@media (max-width: 480px) {
+    #google-style-wrapper h1 {
+        font-size: 1.6em;
+    }
+    #google-style-wrapper p.description {
+        font-size: 0.95em;
+        margin-bottom: 1.5em;
+    }
+    #google-style-wrapper form {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0.5em;
+    }
+    #google-style-wrapper input[type="text"],
+    #google-style-wrapper input[type="submit"] {
+        width: 100%;
+        border-radius: 10px;
+    }
 }
 </style>
@@ 行 63: / 行 97: @@
         <input type="hidden" name="do" value="search">
         <input type="text" name="id" placeholder="搜你所尋...">
-        <input type="submit" value="搜尋">
+        <input class="btn" type="submit" value="搜尋">
     </form>
-    <p class="description"><a target="_blank" href="https://wiki.0xbuer.com/%E4%BD%9B%E5%AD%B8%E5%A4%A7%E8%BE%AD%E5%85%B8/%E4%B8%8D%E4%BA%8C">不二</a> wiki 是一個佛學詞典集成網站，公益運營，內容亦來自網絡。主要目的是方便本人學習查閱，如果也能利益大眾不勝榮幸。如果發現有錯誤的地方，歡迎聯繫我 email: [email protected]，twitter: <a target="_blank" href="https://x.com/anxiangzhai">西門老鐵</a></p>
+    <p class="description"><a target="_blank" href="https://wiki.0xbuer.com/%E4%BD%9B%E5%AD%B8%E5%A4%A7%E8%BE%AD%E5%85%B8/%E4%B8%8D%E4%BA%8C">不二</a> wiki 是一個佛學詞典集成網站，公益運營，內容亦來自網絡。主要目的是方便本人學習查閱，如果也能利益大眾不勝榮幸。</p>
+    <p class="description">如果發現有錯誤的地方，歡迎聯繫我 [email protected]，twitter: <a target="_blank" href="https://x.com/anxiangzhai">西門老鐵</a></p>
 </div>
 </html>