From a56146c87229bcd996d4288cff02047b0701a603 Mon Sep 17 00:00:00 2001
From: Evan Luo <contact@ohevan.com>
Date: Sat, 19 Oct 2024 13:20:25 -0400
Subject: [PATCH] style: update logo styling and add new utility classes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Adjust logo image dimensions and spacing
• Add new utility classes for margin and sizing
• Comment out old logo styling in navbar.styl
• Update logo image HTML structure with new classes
---
 layout/_partials/navbar.ejs             |  6 +++--
 source/assets/build/styles.css          | 24 +++++++++++++++++++
 source/css/layout/_partials/navbar.styl | 32 ++++++++++++-------------
 3 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/layout/_partials/navbar.ejs b/layout/_partials/navbar.ejs
index d612844e..8c6ad6ea 100755
--- a/layout/_partials/navbar.ejs
+++ b/layout/_partials/navbar.ejs
@@ -3,8 +3,10 @@
     <div class="navbar-content <%- (theme.home_banner.enable === true && is_home() && !page.prev) ? 'has-home-banner' : '' %>">
         <div class="left">
             <% if (theme.defaults.hasOwnProperty('logo') && theme.defaults.logo) { %>
-                <a class="logo-image" href="<%= config.root %>">
-                    <%- image_tag(theme.defaults.logo) %>
+                <a class="logo-image h-8 w-8 sm:w-10 sm:h-10 mr-3" href="<%= config.root %>">
+                    <%- image_tag(theme.defaults.logo, {
+                        class: "w-full h-full rounded-sm"
+                    }) %>
                 </a>
             <% } %>
             <a class="logo-title" href="<%= config.root %>">
diff --git a/source/assets/build/styles.css b/source/assets/build/styles.css
index 35576a14..6da10a66 100644
--- a/source/assets/build/styles.css
+++ b/source/assets/build/styles.css
@@ -752,6 +752,10 @@ video {
   margin-right: 0.5rem;
 }
 
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
 .mr-4 {
   margin-right: 1rem;
 }
@@ -864,6 +868,10 @@ video {
   height: 15rem;
 }
 
+.h-8 {
+  height: 2rem;
+}
+
 .h-\[150px\] {
   height: 150px;
 }
@@ -904,6 +912,10 @@ video {
   width: 16rem;
 }
 
+.w-8 {
+  width: 2rem;
+}
+
 .w-\[1px\] {
   width: 1px;
 }
@@ -1112,6 +1124,10 @@ video {
   border-radius: 14px;
 }
 
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
 .rounded-small {
   border-radius: 9px;
 }
@@ -1678,10 +1694,18 @@ video {
     margin-right: 1.5rem;
   }
 
+  .sm\:h-10 {
+    height: 2.5rem;
+  }
+
   .sm\:h-72 {
     height: 18rem;
   }
 
+  .sm\:w-10 {
+    width: 2.5rem;
+  }
+
   .sm\:scale-110 {
     --tw-scale-x: 1.1;
     --tw-scale-y: 1.1;
diff --git a/source/css/layout/_partials/navbar.styl b/source/css/layout/_partials/navbar.styl
index 85003d9c..90d9f749 100755
--- a/source/css/layout/_partials/navbar.styl
+++ b/source/css/layout/_partials/navbar.styl
@@ -49,22 +49,22 @@ $logo-image-box-width = 34px
       //  transform-origin bottom
 
       if (hexo-config('defaults.logo') && hexo-config('defaults.logo') != '')
-        .logo-image
-          width $logo-image-box-width
-          height $logo-image-box-width
-          margin-right 12px
-
-          +redefine-tablet()
-            width: $logo-image-box-width * 0.9
-            height: $logo-image-box-width * 0.9
-
-          +redefine-mobile()
-            width: $logo-image-box-width * 0.8
-            height: $logo-image-box-width * 0.8
-
-          img
-            border-radius 6px
-            width 100%
+        //.logo-image
+          //width $logo-image-box-width
+          //height $logo-image-box-width
+          //margin-right 12px
+          //
+          //+redefine-tablet()
+          //  width: $logo-image-box-width * 0.9
+          //  height: $logo-image-box-width * 0.9
+          //
+          //+redefine-mobile()
+          //  width: $logo-image-box-width * 0.8
+          //  height: $logo-image-box-width * 0.8
+          //
+          //img
+          //  border-radius 6px
+          //  width 100%
 
       .logo-title
         font-size $logo-title-font-size