f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-18 05:41:31 +00:00
Code Issues Packages Releases Activity

feat(ui): improve code snippet design

Browse Source
This commit is contained in:
Cotes Chung
2023-03-24 02:46:48 +08:00
parent 0c80552d77
commit 6d99f5cc36
4 changed files with 45 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
_sass/addon/syntax.scss
View File

@@ -32,7 +32,7 @@ html {
/* -- code snippets -- */
%code-snippet-bg {
background: var(--highlight-bg-color);
background-color: var(--highlight-bg-color);
}
%code-snippet-padding {
@@ -41,9 +41,6 @@ html {
}
.highlighter-rouge {
@extend %code-snippet-bg;
@extend %rounded;
color: var(--highlighter-rouge-color);
margin-top: 0.5rem;
margin-bottom: 1.2em; /* Override BS Inline-code style */
@@ -140,13 +137,25 @@ td.rouge-code {
}
}
div[class^='language-'] {
@extend %rounded;
@extend %code-snippet-bg;
box-shadow: var(--language-border-color) 0 0 0 1px;
.post-content > & {
@include ml-mr(-1.25rem);
border-radius: 0;
}
}
/* Hide line numbers for default, console, and terminal code snippets */
div {
&[class^='highlighter-rouge'],
&.nolineno,
&.language-plaintext.highlighter-rouge,
&.language-console.highlighter-rouge,
&.language-terminal.highlighter-rouge {
&.language-plaintext,
&.language-console,
&.language-terminal {
pre.lineno {
display: none;
}
@@ -166,28 +175,15 @@ div {
justify-content: space-between;
align-items: center;
height: $code-header-height;
&::before {
$dot-size: 0.75rem;
$dot-margin: 0.5rem;
content: '';
display: inline-block;
margin-left: 1rem;
width: $dot-size;
height: $dot-size;
border-radius: 50%;
background-color: var(--code-header-muted-color);
box-shadow: ($dot-size + $dot-margin) 0 0 var(--code-header-muted-color),
($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
}
margin-left: 1rem;
margin-right: 0.25rem;
/* the label block */
span {
/* label icon */
i {
font-size: 1rem;
margin-right: 0.4rem;
margin-right: 0.5rem;
color: var(--code-header-icon-color);
&.small {
@@ -248,21 +244,30 @@ div {
}
}
@media all and (max-width: 576px) {
.post-content {
> div[class^='language-'] {
@include ml-mr(-1.25rem);
@media all and (min-width: 576px) {
div[class^='language-'] {
.post-content > & {
@include ml-mr(0);
border-radius: 0;
border-radius: $base-radius;
}
.highlight {
padding-left: 0.25rem;
}
.code-header {
@include ml-mr(0);
.code-header {
border-radius: 0;
padding-left: 0.4rem;
padding-right: 0.5rem;
&::before {
$dot-size: 0.75rem;
$dot-margin: 0.5rem;
content: '';
display: inline-block;
margin-left: 1rem;
width: $dot-size;
height: $dot-size;
border-radius: 50%;
background-color: var(--code-header-muted-color);
box-shadow: ($dot-size + $dot-margin) 0 0 var(--code-header-muted-color),
($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
}
}
}