更新字体 delivery

Team-PhiTogether · Jul 19, 2024 · b4c854c · b4c854c
1 parent d1629ee
commit b4c854c
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 101 deletions.
diff --git a/fonts/MiSans-Bold.subset.ttf b/fonts/MiSans-Bold.subset.ttf
diff --git a/fonts/MiSans-Regular.subset.ttf b/fonts/MiSans-Regular.subset.ttf
diff --git a/index.html b/index.html
@@ -3,106 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <title>bilib[ii]li</title>
-    <link
-      rel="stylesheet"
-      crossorigin="anonymous"
-      href="https://cdn.jsdelivr.net/npm/[email protected]/lib/Normal/MiSans-Medium.min.css"
-    />
-    <link
-      rel="stylesheet"
-      crossorigin="anonymous"
-      href="https://cdn.jsdelivr.net/npm/[email protected]/lib/Normal/MiSans-Bold.min.css"
-    />
-    <style>
-      body {
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-family: "MiSans";
-        background-size: cover;
-        background-position: center;
-        min-height: 100vh;
-        background-repeat: no-repeat;
-      }
-
-      b {
-        color: crimson;
-      }
-
-      span {
-        font-size: large;
-      }
-
-      .container {
-        margin-top: -24px;
-        opacity: 0;
-        width: 400px;
-        height: auto;
-        padding: 36px;
-        background-color: rgba(255, 255, 255, 0.8);
-        backdrop-filter: blur(12px);
-        border-radius: 24px;
-        box-shadow: 0 0 48px rgba(0, 0, 0, 0.5);
-        transition: opacity 1s cubic-bezier(0.51, 0.01, 0, 1);
-      }
-
-      .container.visible {
-        opacity: 1;
-      }
-
-      .button-container {
-        display: flex;
-        justify-content: flex-end;
-      }
-
-      #greeting {
-        font-weight: bold;
-        font-size: xx-large;
-      }
-
-      #redirect {
-        margin-top: 36px;
-        color: white;
-        background-color: #0fa7d9;
-        border-radius: 24px;
-        border: none;
-        padding: 12px;
-        transition: opacity 0.2s ease-in-out;
-      }
-
-      #redirect:hover {
-        opacity: 0.75;
-        cursor: pointer;
-      }
-
-      #footer {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        text-align: center;
-        mask-image: linear-gradient(
-          to bottom,
-          rgba(0, 0, 0, 0) 10%,
-          rgba(0, 0, 0, 1) 90%
-        );
-        -webkit-mask-image: -webkit-linear-gradient(
-          to bottom,
-          rgba(0, 0, 0, 0) 10%,
-          rgba(0, 0, 0, 1) 90%
-        );
-        height: 100px;
-        opacity: 1;
-        color: rgba(255, 255, 255, 0.76);
-        position: fixed;
-        bottom: 0;
-        width: 100%;
-        text-align: center;
-        font-size: small;
-        padding: 3px;
-        backdrop-filter: blur(12px);
-      }
-    </style>
+    <link rel="stylesheet" href="style.css" />
     <script>
       function redirect() {
         document.getElementById("redirect").value = "正在跳转...";
@@ -127,7 +28,7 @@
         <input
           id="redirect"
           type="button"
-          value="是否本来要前往哔哩哔哩？"
+          value="  是否本来要前往哔哩哔哩？"
           onclick="redirect()"
         />
       </div>

diff --git a/style.css b/style.css
@@ -0,0 +1,100 @@
+@font-face {
+  font-family: "MiSans";
+  src: url("./fonts/MiSans-Regular.subset.ttf");
+}
+
+@font-face {
+  font-family: "MiSans";
+  src: url("./fonts/MiSans-Bold.subset.ttf");
+  font-weight: bold;
+}
+
+body {
+  @font-face {
+    font-family: "MiSans";
+    src: url("./fonts/MiSans-Regular.subset.ttf") url("./fonts/MiSans-Bold.subset.ttf");
+  }
+
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "MiSans";
+  background-size: cover;
+  background-position: center;
+  min-height: 100vh;
+  background-repeat: no-repeat;
+}
+
+b {
+  color: crimson;
+}
+
+span {
+  font-size: large;
+}
+
+.container {
+  margin-top: -24px;
+  opacity: 0;
+  width: 400px;
+  height: auto;
+  padding: 36px;
+  background-color: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(12px);
+  border-radius: 24px;
+  box-shadow: 0 0 48px rgba(0, 0, 0, 0.5);
+  transition: opacity 1s cubic-bezier(0.51, 0.01, 0, 1);
+}
+
+.container.visible {
+  opacity: 1;
+}
+
+.button-container {
+  display: flex;
+  justify-content: flex-end;
+}
+
+#greeting {
+  font-weight: bold;
+  font-size: xx-large;
+}
+
+#redirect {
+  margin-top: 36px;
+  color: white;
+  background-color: #0fa7d9;
+  border-radius: 24px;
+  border: none;
+  padding: 12px;
+  transition: opacity 0.2s ease-in-out;
+}
+
+#redirect:hover {
+  opacity: 0.75;
+  cursor: pointer;
+}
+
+#footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  mask-image: linear-gradient(to bottom,
+      rgba(0, 0, 0, 0) 10%,
+      rgba(0, 0, 0, 1) 90%);
+  -webkit-mask-image: -webkit-linear-gradient(to bottom,
+      rgba(0, 0, 0, 0) 10%,
+      rgba(0, 0, 0, 1) 90%);
+  height: 100px;
+  opacity: 1;
+  color: rgba(255, 255, 255, 0.76);
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  font-size: small;
+  padding: 3px;
+  backdrop-filter: blur(12px);
+}