asandikci.com/web
1
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages Wiki Activity Actions

refactor: unify the border radius of blocks

Browse source 
scope: code blocks, prompts, images, and videos
This commit is contained in:
Cotes Chung 2022-12-20 16:04:39 +08:00
parent 9306c7b39e
commit e01eb8af14
No known key found for this signature in database
GPG key ID: 0D9E54843167A808
4 changed files with 16 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
_sass/addon/commons.scss
View file

@ -134,10 +134,11 @@ blockquote {
&[class^="prompt-"] { &[class^="prompt-"] {
display: flex; display: flex;
border-left: 0; border-left: 0;
border-radius: 6px;
padding: 1rem; padding: 1rem;
color: var(--prompt-text-color); color: var(--prompt-text-color);
@extend %rounded;
&::before { &::before {
text-align: center; text-align: center;
width: 1.25rem; width: 1.25rem;
@ -543,11 +544,13 @@ i { /* fontawesome icons */
} }
} }
.rounded-10 {
border-radius: 10px !important;
}
.img-link { .img-link {
color: transparent; color: transparent;
display: inline-flex; display: inline-flex;
@extend %img-rounded;
} }
.shimmer { .shimmer {
@ -579,9 +582,10 @@ i { /* fontawesome icons */
.embed-video { .embed-video {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 4px;
margin-bottom: 1rem; margin-bottom: 1rem;
@extend %rounded;
&.youtube { &.youtube {
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
} }

4
_sass/addon/module.scss
View file

@ -90,8 +90,8 @@
font-style: normal; font-style: normal;
} }
%img-rounded { %rounded {
border-radius: 10px; border-radius: 6px;
} }
%img-caption { %img-caption {

16
_sass/addon/syntax.scss
View file

@ -29,18 +29,12 @@ html {
} }
} }
/* -- Codes Snippet -- */ /* -- code snippets -- */
$code-radius: 6px;
%code-snippet-bg { %code-snippet-bg {
background: var(--highlight-bg-color); background: var(--highlight-bg-color);
} }
%code-snippet-radius {
border-radius: $code-radius;
}
%code-snippet-padding { %code-snippet-padding {
padding-left: 1rem; padding-left: 1rem;
padding-right: 1.5rem; padding-right: 1.5rem;
@ -48,7 +42,7 @@ $code-radius: 6px;
.highlighter-rouge { .highlighter-rouge {
@extend %code-snippet-bg; @extend %code-snippet-bg;
@extend %code-snippet-radius; @extend %rounded;
color: var(--highlighter-rouge-color); color: var(--highlighter-rouge-color);
margin-top: 0.5rem; margin-top: 0.5rem;
@ -56,7 +50,7 @@ $code-radius: 6px;
} }
.highlight { .highlight {
@extend %code-snippet-radius; @extend %rounded;
@extend %code-snippet-bg; @extend %code-snippet-bg;
@at-root figure#{&} { @at-root figure#{&} {
@ -173,8 +167,6 @@ div {
$code-header-height: 2.25rem; $code-header-height: 2.25rem;
border-top-left-radius: $code-radius;
border-top-right-radius: $code-radius;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -226,9 +218,9 @@ div {
/* clipboard */ /* clipboard */
button { button {
@extend %cursor-pointer; @extend %cursor-pointer;
@extend %rounded;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: $code-radius;
height: $code-header-height; height: $code-header-height;
width: $code-header-height; width: $code-header-height;
padding: 0; padding: 0;

3
_sass/layout/post.scss
View file

@ -33,6 +33,7 @@
.preview-img { .preview-img {
@include align-center; @include align-center;
@extend %preview-margin; @extend %preview-margin;
@extend %rounded;
max-width: 100%; max-width: 100%;
@ -48,7 +49,7 @@
object-fit: cover; object-fit: cover;
@extend %preview-margin; @extend %preview-margin;
@extend %img-rounded; @extend %rounded;
} }
} }