style: update logo styling and add new utility classes

• 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
EvanNotFound · Oct 19, 2024 · a56146c · a56146c
1 parent e91e988
commit a56146c
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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