pref: 优化头部标题栏及头像

Author: LIlGG

src/css/common/outline/header/brand.css

@@ -1,10 +1,9 @@
 .site-branding {
-  float: left;
   position: relative;
-  line-height: var(--header-height);
   animation: sitetop 1s;
 
   & .site-title {
+    display: flex;
     margin: 0;
 
     & a {
@@ -17,37 +16,33 @@
     }
 
     & img {
+      height: 2.5rem;
+      width: 2.5rem;
+      object-fit: cover;
+
       &:hover {
         opacity: 1;
       }
     }
 
     & a,
     & img {
-      height: 2.5rem;
-      width: 2.5rem;
-      margin-top: 1rem;
-      opacity: 0.75;
-      object-fit: cover;
+      display: inline-block;
       transition: color 0.2s ease-out, border 0.2s ease-out, opacity 0.2s ease-out;
     }
   }
 
   @mixin screens-md {
-    float: right;
-    height: 2.5rem;
-    line-height: 2.5rem;
-
     & .site-title {
       font-size: 1.25rem;
-      margin-right: 10px;
 
       & img {
         height: 2rem;
         width: 2rem;
         border-radius: 100%;
         margin: 0;
         vertical-align: middle;
+        margin-right: 0.625rem;
       }
     }
   }

src/css/common/outline/header/layout.css

@@ -28,15 +28,29 @@
   }
 
   & .header-inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     height: var(--header-height);
     width: 100%;
-    display: block;
     margin: 0 auto;
     position: fixed;
     padding: 0 1.25rem;
     box-sizing: border-box;
     top: 0;
     transition: top 0.3s ease-in-out;
+
+    & .header-after,
+    & .header-content,
+    & .header-before {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    & .header-content {
+      flex: 1;
+    }
   }
 
   @mixin screens-md {
@@ -48,6 +62,15 @@
 
     & .header-inner {
       padding: 0;
+
+      & .header-before {
+        flex: 1;
+        justify-content: space-between;
+      }
+
+      & .header-content {
+        display: none;
+      }
     }
   }
 }

src/css/common/outline/header/menu.css

@@ -2,12 +2,9 @@
   position: absolute;
   text-align: center;
   pointer-events: none;
-  width: 100%;
-  height: 100%;
 
   & .lower {
     display: inline-block;
-    margin: 1rem 0 0 10px;
     font-size: 1rem;
     position: relative;
     pointer-events: auto;

src/css/common/outline/header/nav-toggle.css

@@ -4,12 +4,9 @@
   @mixin screens-md {
     transition-duration: 0.5s;
     height: 2.5rem;
-    position: absolute;
-    top: 0;
-    z-index: 10;
     display: block;
-    background: 0 0;
-
+    z-index: 10;
+    
     &.open {
       display: none;
     }

src/css/common/outline/header/search.css

@@ -1,8 +1,4 @@
 .searchbox {
-  float: right;
-  height: 4.75rem;
-  line-height: 4.75rem;
-  margin-left: 1.25rem;
   animation: fadeInRight 1s;
 
   & .iconsearch {

src/css/common/outline/header/user.css

@@ -1,9 +1,7 @@
 .header-user-avatar {
   position: relative;
-  float: right;
-  margin-left: 1.25rem;
-  margin-top: 1.375rem;
   animation: fadeInRight 1s;
+  margin-left: 1.25rem;
 
   & img {
     border-radius: 100%;
@@ -24,9 +22,8 @@
 .header-user-menu {
   position: absolute;
   right: -11px;
-  top: 44px;
+  top: 2.875rem;
   display: none;
-  overflow: hidden;
   animation: header-user-menu 0.4s;
   box-shadow: 0 1px 40px -8px rgba(0, 0, 0, 0.5);
   border-radius: 5px;
@@ -47,13 +44,12 @@
       white-space: nowrap;
     }
   }
-
+  
   &::before {
     content: "";
-    position: fixed;
-    top: 46px;
-    right: 25px;
-    margin-left: -10px;
+    position: absolute;
+    top: -20px;
+    right: 18px;
     border-width: 10px;
     border-style: solid;
     border-color: transparent transparent var(--widget-background-color);

src/css/variables/layout.css

@@ -108,9 +108,9 @@
   --theme-item-background-color: #31363b;
   --mobile-menu-text-color: #eee;
   --entry-content-heading-color: #ccc;
-  --entry-content-text-color: #999;
-  --entry-content-list-color: #999;
-  --entry-content-table-color: #999;
+  --entry-content-text-color: #ffffffcc;
+  --entry-content-list-color: #ffffffcc;
+  --entry-content-table-color: #ffffffcc;
   --card-container-box-shadow: 0 1px 35px -8px rgba(0, 0, 0, 0.8);
   --card-container-title-color: #ccc;
   --photo-group-change-color: #222;

templates/assets/dist/css/main.min.css

@@ -1,11 +1,17 @@
 <th:block th:fragment="header">
-  <th:block th:replace="~{module/header/nav-toggle}"></th:block>
-  <th:block th:replace="~{module/header/brand}"></th:block>
-  <th:block th:replace="~{module/header/user}"></th:block>
-  <th:block th:replace="~{module/header/search}"></th:block>
-  <div class="lower-container">
-    <div class="lower">
-      <th:block th:replace="~{module/header/menu}"></th:block>
+  <div class="header-before">
+    <th:block th:replace="~{module/header/nav-toggle}"></th:block>
+    <th:block th:replace="~{module/header/brand}"></th:block>
+  </div>
+  <div class="header-content">
+    <div class="lower-container">
+      <div class="lower">
+        <th:block th:replace="~{module/header/menu}"></th:block>
+      </div>
     </div>
   </div>
-</th:block>
+  <div class="header-after">
+    <th:block th:replace="~{module/header/search}"></th:block>
+    <th:block th:replace="~{module/header/user}"></th:block>
+  </div>
+</th:block>