feat(body): Update the top banner

Blue-Archive-Web · Sep 4, 2024 · 037f49a · 037f49a
1 parent 0a5d17e
commit 037f49a
Show file tree

Hide file tree

Showing 10 changed files with 312 additions and 119 deletions.
diff --git a/css/bootstrap.4.5.3.min.css b/css/bootstrap.4.5.3.min.css
diff --git a/css/top-banner-fix.css b/css/top-banner-fix.css
@@ -0,0 +1,56 @@
+/* 重置默认样式 */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.text-center {
+    text-align: center!important;
+}
+
+.text-white {
+    color: #fff!important;
+}
+
+.bg-blue {
+    background: rgb(0, 93, 186);
+}
+
+.py-5 {
+    padding-top: 3rem!important;
+    padding-bottom: 3rem!important;
+}
+
+.header-top {
+    text-align: center!important;
+    color: #fff!important;
+    background: rgb(0, 93, 186);
+
+    /* 这玩意还是得留着，不留会出 Bug (Thinking) */
+    padding-top: 1px!important;  /* 设置顶部边距为 2rem */
+    padding-bottom: 1px!important;  /* 设置底部边距为 4rem */
+
+    /* padding: 5px; */
+}
+
+.header-top p {
+    font-size: 18px;
+    margin-bottom: 0;
+    font-weight: 500;
+
+    padding: 5px;
+    margin: 5px;
+}
+
+@media only screen and (max-width: 767px) {
+    .header-top p {
+        padding: 5px 0;
+        font-size: 15px;
+        line-height: 1.4;
+
+        /* 留着不留着好像没什么用 (Thinking) */
+        padding: 5px;  /* 统一设置内边距 */
+        margin: 5px;  /* 统一设置外边距 */
+    }
+}
diff --git a/css/top-banner.css b/css/top-banner.css
@@ -0,0 +1,43 @@
+.text-center {
+    text-align: center!important;
+}
+
+.text-white {
+    color: #fff!important;
+}
+
+.bg-blue {
+    background: rgb(0, 93, 186);
+}
+
+.py-5 {
+    padding-top: 3rem!important;
+    padding-bottom: 3rem!important;
+}
+
+.header-top {
+    text-align: center!important;
+    color: #fff!important;
+    background: rgb(0, 93, 186);
+    padding-top: 3rem!important;
+    padding-bottom: 3rem!important;
+}
+
+.header-top {
+    padding-top: 2rem!important;  /* 设置顶部边距为 2rem */
+    padding-bottom: 4rem!important;  /* 设置底部边距为 4rem */
+}
+
+.header-top p {
+    font-size: 18px;
+    margin-bottom: 0;
+    font-weight: 500;
+}
+
+@media only screen and (max-width: 767px) {
+    .header-top p {
+        padding: 5px 0;
+        font-size: 15px;
+        line-height: 1.4;
+    }
+}
diff --git a/index.html b/index.html
@@ -21,6 +21,9 @@
     <!-- 引入 MDUI CSS 文件 -->
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/mdui.min.css" />
 
+    <link rel="stylesheet" href="./css/top-banner-fix.css" />
+
+
     <style>
         /* 针对整个页面设置背景图片 */
         body {
@@ -124,6 +127,30 @@
 
     </div>
 
+    <!-- ver 1.0 -->
+    <!-- <div class="header-top text-center text-white bg-blue py-5">
+        <div class="container rel z-1">
+            <p>Banner Text</p>
+            
+        </div>
+    </div> -->
+
+    <!-- ver 1.1 -->
+    <!-- <div class="header-top text-center text-white bg-blue py-5">
+        <p title="Tooltip Text">Banner Text
+            <a href="javascript:;" target="_blank">点击查看</a>
+        </p>
+    </div> -->
+
+    <div class="header-top text-center text-white bg-blue py-5">
+
+        <div class="mdui-typo">
+            <p mdui-tooltip="{content: '国服新闻'}">🎉《蔚蓝档案》国服 发条之花的帕凡舞曲篇 第 2 章“友情、勇气与光的浪漫” 现已更新！
+                <a href="https://bluearchive-cn.com/news/1008" target="_blank">点击查看</a>
+            </p>
+        </div>
+    </div>
+
 
     <div class="mdui-container-fluid">
         <br>

diff --git a/index_404.html b/index_404.html
diff --git a/Home.md → others/Home.md b/Home.md → others/Home.md
diff --git a/Links_Markdown.md → others/Links_Markdown.md b/Links_Markdown.md → others/Links_Markdown.md
diff --git a/Tools.md → others/Tools.md b/Tools.md → others/Tools.md
diff --git a/others/huh.html b/others/huh.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        /* 重置默认样式 */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        .text-center {
+            text-align: center !important;
+        }
+
+        .text-white {
+            color: #fff !important;
+        }
+
+        .bg-blue {
+            background: rgb(0, 93, 186);
+        }
+
+        .header-top {
+            text-align: center !important;
+            color: #fff !important;
+            background: rgb(0, 93, 186);
+            padding: 5px;  /* 统一设置内边距 */
+        }
+
+        .header-top p {
+            font-size: 18px;
+            margin-bottom: 0;
+            font-weight: 500;
+            padding: 5px;  /* 统一设置内边距 */
+            margin: 5px;  /* 统一设置外边距 */
+            position: relative;  /* 使 tooltip 相对于 p 元素定位 */
+        }
+
+        .header-top p:hover .tooltip {
+            visibility: visible;
+            opacity: 1;
+        }
+
+        .tooltip {
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: #333;
+            color: #fff;
+            padding: 10px;
+            border-radius: 5px;
+            visibility: hidden;
+            opacity: 0;
+            transition: visibility 0s, opacity 0.3s ease;
+        }
+
+        @media only screen and (max-width: 767px) {
+            .header-top p {
+                font-size: 15px;
+                line-height: 1.4;
+                padding: 5px;  /* 统一设置内边距 */
+                margin: 5px;  /* 统一设置外边距 */
+            }
+        }
+    </style>
+</head>
+<body>
+
+<div class="header-top text-center text-white bg-blue">
+    <div class="container rel z-1">
+        <p>
+            Banner Text
+            <span class="tooltip">Tooltip Text</span>
+        </p>
+    </div>
+</div>
+
+</body>
+</html>