💄 Style: add global border radius for theme components (#40)

hugo-fixit · Mar 11, 2022 · 759402b · 759402b · vercel · Mar 11, 2022
1 parent 737ff5a
commit 759402b
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 19 deletions.
diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss
@@ -23,7 +23,7 @@ html {
 
 ::-webkit-scrollbar-thumb {
   background-color: $scrollbar-color;
-  border-radius: $global-border-radius;
+  @include border-radius($global-border-radius);
 
   &:hover {
     background-color: $scrollbar-hover-color;
@@ -50,6 +50,15 @@ body {
   }
 }
 
+img {
+  @include object-fit(contain);
+  @include border-radius($global-border-radius/2);
+}
+
+iframe {
+  @include border-radius($global-border-radius);
+}
+
 @include ms;
 @include link(true, true);
 
@@ -58,7 +67,3 @@ body {
 @import '../_partial/details';
 @import '../_partial/fixed-button';
 @import '../_partial/cookieconsent';
-
-img {
-  @include object-fit(contain);
-}
diff --git a/assets/css/_page/_friends.scss b/assets/css/_page/_friends.scss
@@ -24,7 +24,7 @@
   background: rgba(255, 255, 255, 0.3);
   box-sizing: border-box;
   box-shadow: 3px 3px 5px #aaa;
-  border-radius: $global-border-radius;
+  @include border-radius($global-border-radius);
   border: none;
   transition-duration: 0.3s;
   margin-bottom: 1rem;
@@ -42,7 +42,7 @@
   object-position: center;
   width: 100% !important;
   height: 150px !important;
-  border-radius: $global-border-radius;
+  @include border-radius($global-border-radius);
   margin: 0;
   padding: 0;
 }

diff --git a/assets/css/_partial/_details.scss b/assets/css/_partial/_details.scss
@@ -1,5 +1,7 @@
 .details {
   .details-summary {
+    @include border-radius($global-border-radius);
+
     &:hover {
       cursor: pointer;
     }
@@ -21,12 +23,17 @@
   }
 
   &.open {
+    .details-summary {
+      @include border-radius($global-border-radius $global-border-radius 0 0);
+    }
+
     i.details-icon {
       @include transform(rotate(90deg));
     }
 
     .details-content {
       max-height: 100%;
+      @include border-radius(0 0 $global-border-radius $global-border-radius);
       @include details-transition-close;
     }
   }

diff --git a/assets/css/_partial/_single/_code.scss b/assets/css/_partial/_single/_code.scss
@@ -7,7 +7,7 @@ code {
   font-family: $code-font-family;
   color: $code-color;
   background-color: rgba(175, 184, 193, 0.2);
-  border-radius: $global-border-radius;
+  @include border-radius($global-border-radius);
   @include overflow-wrap(break-word);
   @include line-break(anywhere);
 
@@ -25,7 +25,7 @@ pre {
   overflow: auto;
   font-size: $code-font-size;
   font-family: $code-font-family;
-  border-radius: $global-border-radius;
+  @include border-radius($global-border-radius);
   @include tab-size(4);
 
   background-color: $code-background-color;
@@ -36,8 +36,8 @@ pre {
 
   code {
     padding: 0;
-    border-radius: 0;
     background-color: transparent;
+    @include border-radius(0);
     @include max-content(min-width);
 
     [theme='dark'] & {
@@ -86,9 +86,9 @@ pre {
       font-family: $global-font-family;
       font-weight: bold;
       line-height: 1.4em;
-      border-radius: $global-border-radius;
       color: $code-info-color;
       background-color: darken($code-background-color, 3%);
+      @include border-radius($global-border-radius);
       @include transition(border-radius 0.2s ease);
 
       [theme='dark'] & {
@@ -145,7 +145,7 @@ pre {
     .table-wrapper {
       max-height: 0;
       overflow: hidden;
-      border-radius: 0 0 $global-border-radius $global-border-radius;
+      @include border-radius(0 0 $global-border-radius $global-border-radius);
       @include details-transition-open;
     }
 
@@ -167,8 +167,8 @@ pre {
 
       pre {
         padding: 0.25rem;
-        border-radius: 0;
         outline-offset: -1px;
+        @include border-radius(0);
       }
 
       /* lineNumbersInTable=false */
@@ -204,7 +204,7 @@ pre {
     &.open {
       .code-header {
         background-color: darken($code-background-color, 6%);
-        border-radius: $global-border-radius $global-border-radius 0 0;
+        @include border-radius($global-border-radius $global-border-radius 0 0);
 
         [theme='dark'] & {
           background-color: darken($code-background-color-dark, 3%);

diff --git a/assets/css/_shortcodes/_admonition.scss b/assets/css/_shortcodes/_admonition.scss
@@ -5,6 +5,7 @@
   background-color: map-get($admonition-background-color-map, 'note');
   border-left: 0.25rem solid map-get($admonition-color-map, 'note');
   overflow: auto;
+  @include border-radius($global-border-radius);
 
   .admonition-title {
     font-weight: bold;

diff --git a/assets/css/_shortcodes/_cardlink.scss b/assets/css/_shortcodes/_cardlink.scss
@@ -8,12 +8,12 @@
   display: block;
   margin: 0.5rem auto;
   box-sizing: border-box;
-  border-radius: 0.75rem;
   width: 400px;
   max-width: 100%;
   overflow: hidden;
   text-decoration: none;
   border: none;
+  @include border-radius(0.75rem);
 }
 
 .cl- {

diff --git a/assets/css/_shortcodes/_index.scss b/assets/css/_shortcodes/_index.scss
@@ -5,4 +5,3 @@
 @import '_echarts';
 @import '_instagram';
 @import '_mapbox';
-@import '_music';
diff --git a/assets/css/_shortcodes/_mapbox.scss b/assets/css/_shortcodes/_mapbox.scss
@@ -1,4 +1,5 @@
 .mapbox {
   margin: 0.5rem 0;
   padding: 0.5rem 0;
+  @include border-radius($global-border-radius);
 }
diff --git a/assets/css/_shortcodes/_music.scss b/assets/css/_shortcodes/_music.scss