From e01eb8af14c6455c7159be7bf6a47441fdf96232 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 20 Dec 2022 16:04:39 +0800
Subject: [PATCH] refactor: unify the border radius of blocks

scope: code blocks, prompts, images, and videos
---
 _sass/addon/commons.scss | 12 ++++++++----
 _sass/addon/module.scss  |  4 ++--
 _sass/addon/syntax.scss  | 16 ++++------------
 _sass/layout/post.scss   |  3 ++-
 4 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index e4e3850..bf7a104 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -134,10 +134,11 @@ blockquote {
   &[class^="prompt-"] {
     display: flex;
     border-left: 0;
-    border-radius: 6px;
     padding: 1rem;
     color: var(--prompt-text-color);
 
+    @extend %rounded;
+
     &::before {
       text-align: center;
       width: 1.25rem;
@@ -543,11 +544,13 @@ i { /* fontawesome icons */
   }
 }
 
+.rounded-10 {
+  border-radius: 10px !important;
+}
+
 .img-link {
   color: transparent;
   display: inline-flex;
-
-  @extend %img-rounded;
 }
 
 .shimmer {
@@ -579,9 +582,10 @@ i { /* fontawesome icons */
 .embed-video {
   width: 100%;
   height: 100%;
-  border-radius: 4px;
   margin-bottom: 1rem;
 
+  @extend %rounded;
+
   &.youtube {
     aspect-ratio: 16 / 9;
   }
diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss
index a00e2dc..1fc9ae5 100644
--- a/_sass/addon/module.scss
+++ b/_sass/addon/module.scss
@@ -90,8 +90,8 @@
   font-style: normal;
 }
 
-%img-rounded {
-  border-radius: 10px;
+%rounded {
+  border-radius: 6px;
 }
 
 %img-caption {
diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss
index 361fe08..78f1d09 100644
--- a/_sass/addon/syntax.scss
+++ b/_sass/addon/syntax.scss
@@ -29,18 +29,12 @@ html {
   }
 }
 
-/* -- Codes Snippet -- */
-
-$code-radius: 6px;
+/* -- code snippets -- */
 
 %code-snippet-bg {
   background: var(--highlight-bg-color);
 }
 
-%code-snippet-radius {
-  border-radius: $code-radius;
-}
-
 %code-snippet-padding {
   padding-left: 1rem;
   padding-right: 1.5rem;
@@ -48,7 +42,7 @@ $code-radius: 6px;
 
 .highlighter-rouge {
   @extend %code-snippet-bg;
-  @extend %code-snippet-radius;
+  @extend %rounded;
 
   color: var(--highlighter-rouge-color);
   margin-top: 0.5rem;
@@ -56,7 +50,7 @@ $code-radius: 6px;
 }
 
 .highlight {
-  @extend %code-snippet-radius;
+  @extend %rounded;
   @extend %code-snippet-bg;
 
   @at-root figure#{&} {
@@ -173,8 +167,6 @@ div {
 
   $code-header-height: 2.25rem;
 
-  border-top-left-radius: $code-radius;
-  border-top-right-radius: $code-radius;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -226,9 +218,9 @@ div {
   /* clipboard */
   button {
     @extend %cursor-pointer;
+    @extend %rounded;
 
     border: 1px solid transparent;
-    border-radius: $code-radius;
     height: $code-header-height;
     width: $code-header-height;
     padding: 0;
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index ed7dcd8..ac445d7 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -33,6 +33,7 @@
 .preview-img {
   @include align-center;
   @extend %preview-margin;
+  @extend %rounded;
 
   max-width: 100%;
 
@@ -48,7 +49,7 @@
     object-fit: cover;
 
     @extend %preview-margin;
-    @extend %img-rounded;
+    @extend %rounded;
   }
 }