doc(Footer): update footer style (#4733)

* doc: 更新 Ip 屏蔽逻辑

* doc: 更新备案号

* doc: 重构基金会准则

* doc: 移动基金会信息到 footer 中

* refactor: 更新样式

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor

@@ -11,6 +11,12 @@
 @Body
 
 <footer>
+    <div class="bb-foundation">
+        <div class="bb-foundation-content">本项目属于 <a href="https://www.dotnetfoundation.org/">.NET 基金会</a>，并根据其 <a href="https://www.dotnetfoundation.org/code-of-conduct">行为准则</a> 运作</div>
+        <a class="bb-foundation-img d-none d-sm-block" href="https://www.dotnetfoundation.org/">
+            <img src="./images/dotnet_foundation_v4.png" width="100" />
+        </a>
+    </div>
     <div class="footer-body">
         <div>
             <h4>@Localizer["FooterH1"]</h4>
@@ -55,7 +61,7 @@
             </ul>
         </div>
     </div>
-    <div class="footer-info d-flex">
+    <div class="footer-info">
         <div class="d-flex">
             <div>Powered by .NET @Version on @OS</div>
             <div class="ms-1">BB @VersionService.Version</div>
@@ -70,7 +76,7 @@
         </div>
         <div class="d-flex flex-fill align-items-center justify-content-center">
             <a class="d-none d-md-block me-3" href="@WebsiteOption.CurrentValue.GiteeRepositoryUrl" target="_blank">@Localizer["Footer"]</a>
-            <a class="d-none d-lg-block me-3" href="https://beian.miit.gov.cn/" target="_blank">苏ICP备16047547号</a>
+            <a class="d-none d-lg-block me-3" href="https://beian.miit.gov.cn/" target="_blank">鲁ICP备19015061号-4</a>
         </div>
         <div class="d-md-flex d-none">
             <img alt="global" class="footer-lang" src="./images/global.svg" />

src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor.css

@@ -1,7 +1,9 @@
-.footer-body {
+footer {
+    background-color: var(--bs-tertiary-bg);
+}
+
+.footer-body {
     padding: 1rem;
-    color: var(--bb-footer-body-color);
-    background-color: var(--bb-footer-body-bg);
     margin: 0;
     display: flex;
     flex-direction: column;
@@ -19,8 +21,7 @@
     }
 
     .footer-body .footer-link {
-        transition: all .3s linear;
-        color: rgba(255,255,255,.9);
+        color: var(--bs-body-color);
         text-decoration: none;
         line-height: 2;
         display: block;
@@ -29,26 +30,23 @@
 
         .footer-body .footer-link:hover,
         .footer-body .footer-link a:hover {
-            color: #40a9ff;
+            color: var(--bs-link-hover-color);
+            text-decoration: underline;
         }
 
         .footer-body .footer-link:not(:last-child) {
             margin-top: 1rem;
         }
 
-        .footer-body .footer-link a {
-            transition: all .3s linear;
-            color: #fff;
-        }
-
 .footer-info {
     background-color: #222;
     padding: var(--bb-footer-padding);
-    color: #9d9d9d;
+    color: #ddd;
+    display: flex;
 }
 
     .footer-info a {
-        color: #9d9d9d;
+        color: #ddd;
     }
 
     .footer-info .footer-logo {
@@ -65,9 +63,26 @@
         color: var(--bs-success)
     }
 
+.bb-foundation {
+    display: flex;
+    align-items: center;
+}
+
+    .bb-foundation .bb-foundation-content {
+        text-align: center;
+        font-size: 1rem;
+        font-weight: bolder;
+        padding: 1rem 0;
+        flex-grow: 1;
+    }
+
 @media (min-width: 768px) {
     .footer-body {
         padding: 2rem;
         flex-direction: row;
     }
+
+    .bb-foundation .bb-foundation-content {
+        margin-left: 100px;
+    }
 }

src/BootstrapBlazor.Server/Components/Pages/Index.razor

@@ -36,10 +36,4 @@
         <h5 class="d-none d-sm-block mb-3">@Localizer["DonateH2"]</h5>
         <img alt="barcode" class="barcode" src="./images/[email protected]" />
     </div>
-    <div class="bb-foundation">
-        <a class="bb-foundation-img d-none d-sm-block" href="https://www.dotnetfoundation.org/">
-            <img src="./images/dotnet_foundation_v4.png" width="100" />
-        </a>
-        <div class="bb-foundation-content">本项目属于 <a href="https://www.dotnetfoundation.org/">.NET 基金会</a>，并根据其 <a href="https://www.dotnetfoundation.org/code-of-conduct">行为准则</a> 运作。</div>
-    </div>
 </section>

src/BootstrapBlazor.Server/Components/Pages/Index.razor.css

@@ -84,25 +84,6 @@
         width: 280px;
     }
 
-.bb-foundation {
-    background-color: rgb(var(--bs-tertiary-bg-rgb));
-    position: relative;
-}
-
-    .bb-foundation .bb-foundation-img {
-        position: absolute;
-        right: 1rem;
-        top: 1rem;
-    }
-
-    .bb-foundation .bb-foundation-content {
-        text-align: center;
-        font-size: 1.1rem;
-        font-weight: bolder;
-        line-height: 100px;
-        padding: 1rem 0;
-    }
-
 @media (min-width: 768px) {
     .bd-masthead .lead {
         font-size: calc(1.275rem + .3vw);

src/BootstrapBlazor.Server/Extensions/IpExtensions.cs

@@ -12,12 +12,9 @@ public static string MaskIpString(this string ip)
         var ret = ip;
         if (!string.IsNullOrEmpty(ip))
         {
-            var index = ip.LastIndexOf('.');
-            if (index > -1)
-            {
-                var mask = ip[index..];
-                ret = ip.Replace(mask, ".###");
-            }
+            var segments = ip.Split('.');
+            segments[^1] = "###";
+            ret = string.Join('.', segments);
         }
         return ret;
     }