From cb25c2d11e7fc2ac17adef9cf40fc15ce9257871 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 4 Jul 2024 23:20:16 +0800
Subject: [PATCH] refactor(ui): standardize the border radius

Impact:
- Increase the border radius of inline code and kbd tags
- Variable `$base-radius` renamed to `$radius-lg`
---
 _sass/addon/commons.scss     | 2 +-
 _sass/addon/module.scss      | 2 +-
 _sass/addon/syntax.scss      | 6 +++---
 _sass/addon/variables.scss   | 3 ++-
 _sass/layout/categories.scss | 2 +-
 _sass/layout/home.scss       | 4 ++--
 _sass/layout/post.scss       | 4 ++--
 7 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index c6aa02fecfa..465cb085905 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -134,7 +134,7 @@ kbd {
   padding-top: 0.1rem;
   color: var(--kbd-text-color);
   background-color: var(--kbd-bg-color);
-  border-radius: 0.25rem;
+  border-radius: $radius-sm;
   border: solid 1px var(--kbd-wrap-color);
   box-shadow: inset 0 -2px 0 var(--kbd-wrap-color);
 }
diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss
index 77fecca419d..42db4e2d991 100644
--- a/_sass/addon/module.scss
+++ b/_sass/addon/module.scss
@@ -81,7 +81,7 @@
 }
 
 %rounded {
-  border-radius: $base-radius;
+  border-radius: $radius-lg;
 }
 
 %img-caption {
diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss
index b0efd202d29..6bd7b406336 100644
--- a/_sass/addon/syntax.scss
+++ b/_sass/addon/syntax.scss
@@ -102,9 +102,9 @@ code {
 
   &.highlighter-rouge {
     font-size: $code-font-size;
-    padding: 3px 6px;
+    padding: 3px 5px;
     word-break: break-word;
-    border-radius: 4px;
+    border-radius: $radius-sm;
     background-color: var(--inline-code-bg);
   }
 
@@ -261,7 +261,7 @@ div {
     .content > & {
       @include ml-mr(0);
 
-      border-radius: $base-radius;
+      border-radius: $radius-lg;
     }
 
     .code-header {
diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss
index 8924a00b233..1d51cb14ee6 100644
--- a/_sass/addon/variables.scss
+++ b/_sass/addon/variables.scss
@@ -16,7 +16,8 @@ $search-max-width: 200px !default;
 $footer-height: 5rem !default;
 $footer-height-large: 6rem !default; /* screen width: < 850px */
 $main-content-max-width: 1250px !default;
-$base-radius: 0.625rem !default;
+$radius-sm: 6px !default;
+$radius-lg: 10px !default;
 $back2top-size: 2.75rem !default;
 
 /* syntax highlight */
diff --git a/_sass/layout/categories.scss b/_sass/layout/categories.scss
index 330d3d35040..f12b9633682 100644
--- a/_sass/layout/categories.scss
+++ b/_sass/layout/categories.scss
@@ -16,7 +16,7 @@
   }
 
   .card-header {
-    $radius: calc($base-radius - 1px);
+    $radius: calc($radius-lg - 1px);
 
     padding: 0.75rem;
     border-radius: $radius;
diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss
index 7f9fd2e8b01..0d95d7ba6a6 100644
--- a/_sass/layout/home.scss
+++ b/_sass/layout/home.scss
@@ -20,7 +20,7 @@
     background: none;
 
     %img-radius {
-      border-radius: $base-radius $base-radius 0 0;
+      border-radius: $radius-lg $radius-lg 0 0;
     }
 
     .preview-img {
@@ -131,7 +131,7 @@
 /* Tablet */
 @media all and (min-width: 768px) {
   %img-radius {
-    border-radius: 0 $base-radius $base-radius 0;
+    border-radius: 0 $radius-lg $radius-lg 0;
   }
 
   #post-list {
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index 112541db35f..815db933198 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -173,12 +173,12 @@ header {
     }
 
     &:first-child {
-      border-radius: $base-radius 0 0 $base-radius;
+      border-radius: $radius-lg 0 0 $radius-lg;
       left: 0.5px;
     }
 
     &:last-child {
-      border-radius: 0 $base-radius $base-radius 0;
+      border-radius: 0 $radius-lg $radius-lg 0;
       right: 0.5px;
     }
   }