fix: 修复图片位置偏移的问题

使用补丁方式实现css修改
AirboZH · Sep 12, 2023 · 5dc063c · 5dc063c
1 parent a188c91
commit 5dc063c
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 8 deletions.
diff --git a/src/css/addon/commons.scss b/src/css/addon/commons.scss
@@ -718,9 +718,6 @@ $btn-mb: 0.5rem;
  display: block;
  width: 7rem;
  height: 7rem;
- line-height: 7rem;
- font-size: 40px;
- text-align: center;
  overflow: hidden;
  box-shadow: var(--avatar-border-color) 0 0 0 2px;
  transform: translateZ(0); /* fixed the zoom in Safari */

diff --git a/src/css/patch/commons.scss b/src/css/patch/commons.scss
@@ -0,0 +1,13 @@
+#sidebar {
+ #avatar {
+ font-size: 50px;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ p {
+ margin: auto;
+ }
+ }
+}
diff --git a/src/css/patch/index.scss b/src/css/patch/index.scss
@@ -0,0 +1,2 @@
+@import "footer";
+@import "commons";
diff --git a/src/css/style.scss b/src/css/style.scss
@@ -2,7 +2,7 @@
 
 //append your custom style below
 
-@import "patch/footer";
+@import "patch";
 
 //import third-party css
 @import "bootstrap/dist/css/bootstrap.css";

diff --git a/templates/modules/sidebar.html b/templates/modules/sidebar.html
@@ -12,10 +12,9 @@
  <th:block th:if="${not #strings.isEmpty(site.logo)}">
  <img th:src="${site.logo}" width="112" height="112" alt="avatar" />
  </th:block>
- <th:block
- th:if="${#strings.isEmpty(site.logo)}"
- th:text="${#strings.substring(site.title,0,1)}"
- ></th:block>
+ <th:block th:if="${#strings.isEmpty(site.logo)}">
+ <p th:text="${#strings.substring(site.title,0,1)}" />
+ </th:block>
  </a>
 
  <div class="site-title">