refactor(ui): standardize the border radius

Impact: - Increase the border radius of inline code and kbd tags - Variable `$base-radius` renamed to `$radius-lg`
cotes2020 · Aug 24, 2024 · cb25c2d · cb25c2d
1 parent 5f4dab1
commit cb25c2d
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
     }
   }