Fix: Embed CSS in sidebar to apply styles on ALL pages

Author: adgk2349

_config.yml

@@ -106,7 +106,7 @@ theme_mode: # [light | dark]
 cdn: "https://chirpy-img.netlify.app"
 
 # the avatar on sidebar, support local or CORS resources
-avatar: "/assets/img/avatar.jpg"
+avatar: "/assets/img/avatar.webp"
 
 # The URL of the site-wide social preview image used in SEO `og:image` meta tag.
 # It can be overridden by a customized `page.image` in front matter.

_includes/sidebar.html

@@ -1,5 +1,46 @@
-<!-- The Side Bar -->
+<style>
+  /* 1. 사이드바 배경 이미지 변경 */
+  #sidebar {
+    /* 배경 이미지 경로 (assets/img/bg.jpg 파일이 있어야 함) */
+    background: url('/assets/img/bg.jpg') no-repeat center center !important;
+    background-size: cover !important;
+    
+    /* 배경이 어두울 경우를 대비해 글씨를 잘 보이게 처리 */
+    position: relative;
+    z-index: 1;
+  }
 
+  /* 2. 배경 위에 검은색/남색 필터 씌우기 (글씨 가독성 확보) */
+  #sidebar::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    /* 0.7 숫자를 조절하면 배경 밝기가 변합니다 (0:투명 ~ 1:완전검정) */
+    background-color: rgba(20, 25, 40, 0.7); 
+    backdrop-filter: blur(10px); /* 흐림 효과 */
+    z-index: -1;
+  }
+
+  /* 3. 아바타(프로필 사진) 스타일 */
+  #avatar img {
+    /* 이미지는 _config.yml의 avatar 설정을 따라갑니다 */
+    border-radius: 50% !important; /* 동그랗게 */
+    border: 3px solid rgba(255, 255, 255, 0.3); /* 테두리 */
+    box-shadow: 0 0 15px rgba(255, 100, 100, 0.5); /* 붉은 빛 효과 */
+  }
+
+  /* 4. 글씨 색상 하얗게 고정 (배경이 들어갔으므로) */
+  #sidebar .site-title, #sidebar .site-subtitle, #sidebar .nav-link {
+    color: rgba(255, 255, 255, 0.95) !important;
+    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
+  }
+  #sidebar .nav-item.active .nav-link {
+    color: #63c0f5 !important; /* 선택된 메뉴 색상 (하늘색) */
+  }
+</style>
 <aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end">
   <header class="profile-wrapper">
     <a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
@@ -14,18 +55,14 @@
     <a class="site-title d-block" href="{{ '/' | relative_url }}">{{ site.title }}</a>
     <p class="site-subtitle fst-italic mb-0">{{ site.tagline }}</p>
   </header>
-  <!-- .profile-wrapper -->
-
   <nav class="flex-column flex-grow-1 w-100 ps-0">
     <ul class="nav">
-      <!-- home -->
       <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
         <a href="{{ '/' | relative_url }}" class="nav-link">
           <i class="fa-fw fas fa-home"></i>
           <span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span>
         </a>
       </li>
-      <!-- the real tabs -->
       {% for tab in site.tabs %}
         <li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
           <a href="{{ tab.url | relative_url }}" class="nav-link">
@@ -35,8 +72,7 @@
             <span>{{ site.data.locales[include.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
           </a>
         </li>
-        <!-- .nav-item -->
-      {% endfor %}
+        {% endfor %}
     </ul>
   </nav>
 
@@ -100,6 +136,4 @@
       {% endif %}
     {% endfor %}
   </div>
-  <!-- .sidebar-bottom -->
-</aside>
-<!-- #sidebar -->
+  </aside>