From 2a4d67d65cc283ff1dc4bdd8a6440f976004fb97 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 21 Mar 2023 10:59:20 +0800
Subject: [PATCH] refactor: uniform block border radius

scope:
- categories
- posts (prompt, code snippets)
---
 _sass/addon/module.scss        |  2 +-
 _sass/addon/variables.scss     |  2 +-
 _sass/jekyll-theme-chirpy.scss | 29 +++++++++++++----------------
 _sass/layout/categories.scss   |  9 ++++++---
 _sass/layout/home.scss         |  4 ++--
 _sass/layout/post.scss         |  4 ++--
 6 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss
index 64dc4a5..603554a 100644
--- a/_sass/addon/module.scss
+++ b/_sass/addon/module.scss
@@ -92,7 +92,7 @@
 }
 
 %rounded {
-  border-radius: 6px;
+  border-radius: $base-radius;
 }
 
 %img-caption {
diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss
index 7b1ae11..bc6f866 100644
--- a/_sass/addon/variables.scss
+++ b/_sass/addon/variables.scss
@@ -23,7 +23,7 @@ $footer-height: 5rem !default;
 $footer-height-mobile: 6rem !default; /* screen width: <= 576px */
 $main-content-max-width: 1250px !default;
 $bottom-min-height: 35rem !default;
-$card-radius: 0.5rem;
+$base-radius: 0.5rem;
 
 /* syntax highlight */
 
diff --git a/_sass/jekyll-theme-chirpy.scss b/_sass/jekyll-theme-chirpy.scss
index 1424a57..c72e4c3 100644
--- a/_sass/jekyll-theme-chirpy.scss
+++ b/_sass/jekyll-theme-chirpy.scss
@@ -6,19 +6,16 @@
  * MIT Licensed
  */
 
-@import
-  "colors/light-typography",
-  "colors/dark-typography",
-
-  "addon/variables",
-  "variables-hook",
-  "addon/module",
-  "addon/syntax",
-  "addon/commons",
-
-  "layout/home",
-  "layout/post",
-  "layout/tags",
-  "layout/archives",
-  "layout/categories",
-  "layout/category-tag";
+@import 'colors/light-typography';
+@import 'colors/dark-typography';
+@import 'addon/variables';
+@import 'variables-hook';
+@import 'addon/module';
+@import 'addon/syntax';
+@import 'addon/commons';
+@import 'layout/home';
+@import 'layout/post';
+@import 'layout/tags';
+@import 'layout/archives';
+@import 'layout/categories';
+@import 'layout/category-tag';
diff --git a/_sass/layout/categories.scss b/_sass/layout/categories.scss
index 31c8e8e..574f624 100644
--- a/_sass/layout/categories.scss
+++ b/_sass/layout/categories.scss
@@ -9,8 +9,14 @@
 .categories {
   margin-bottom: 2rem;
 
+  &.card,
+  .list-group {
+    @extend %rounded;
+  }
+
   .card-header {
     padding-right: 12px;
+    border-radius: $base-radius $base-radius 0 0;
   }
 
   i {
@@ -42,9 +48,7 @@
     position: relative;
     height: 0.7rem;
     width: 1rem;
-    transition: -webkit-transform 300ms ease;
     transition: transform 300ms ease;
-    transition: transform 300ms ease, -webkit-transform 300ms ease;
   }
 
   &:hover {
@@ -62,6 +66,5 @@
 }
 
 .rotate {
-  -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }
diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss
index 1ebf312..801ec55 100644
--- a/_sass/layout/home.scss
+++ b/_sass/layout/home.scss
@@ -19,7 +19,7 @@
 
   .card {
     %img-radius {
-      border-radius: $card-radius $card-radius 0 0;
+      border-radius: $base-radius $base-radius 0 0;
     }
 
     .preview-img {
@@ -146,7 +146,7 @@
 @media all and (min-width: 768px) {
   #post-list {
     %img-radius {
-      border-radius: 0 $card-radius $card-radius 0;
+      border-radius: 0 $base-radius $base-radius 0;
     }
 
     .card {
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index 3e29d34..203c69c 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -205,12 +205,12 @@ h1 + .post-meta {
     }
 
     &:first-child {
-      border-radius: $card-radius 0 0 $card-radius;
+      border-radius: $base-radius 0 0 $base-radius;
       left: 0.5px;
     }
 
     &:last-child {
-      border-radius: 0 $card-radius $card-radius 0;
+      border-radius: 0 $base-radius $base-radius 0;
       right: 0.5px;
     }
   }