diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html index c97f746..95c6d7b 100644 --- a/_includes/refactor-content.html +++ b/_includes/refactor-content.html @@ -119,7 +119,7 @@ {% if _left contains 'file="' %} {% assign _text = _left | split: 'file="' | last | split: '"' | first %} - {% assign _label_icon = 'far fa-file' %} + {% assign _label_icon = 'far fa-file-code' %} {% else %} {% assign _lang = _left | split: 'language-' | last | split: ' ' | first %} {% capture _text %}{% include language-alias.html language=_lang %}{% endcapture %} @@ -135,7 +135,7 @@ | append: _label | append: '' + | append: '">' | append: '
'
%}
diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss
index 1abcb12..8dea9e2 100644
--- a/_sass/addon/syntax.scss
+++ b/_sass/addon/syntax.scss
@@ -172,17 +172,27 @@ div {
align-items: center;
line-height: 1.85rem;
+ // icons
+ i {
+ font-size: 1rem;
+ color: var(--lang-badge-muted-color);
+
+ &.small {
+ font-size: 70%;
+ margin-left: 0.25rem;
+ }
+ }
+
// the label block
span {
- color: var(--lang-badge-color);
padding-left: 0.6rem;
- font-size: 0.85rem;
&:after {
content: attr(text-data);
margin-left: 0.3rem;
+ font-size: 0.85rem;
font-weight: 600;
-
+ color: var(--lang-badge-color);
}
@at-root [file] #{&} > i { // center the file icon
@@ -200,13 +210,14 @@ div {
padding: 0;
width: 1.95rem;
background-color: inherit;
- color: var(--highlight-lineno-color);
@extend %cursor-pointer;
&[timeout] {
- color: var(--clipboard-checked-color);
border-color: var(--clipboard-checked-color);
+ i {
+ color: var(--clipboard-checked-color);
+ }
}
&:not([timeout]):hover {
@@ -220,10 +231,6 @@ div {
outline: none;
}
- i {
- font-size: 0.9rem;
- }
-
}
}
diff --git a/_sass/colors/dark-syntax.scss b/_sass/colors/dark-syntax.scss
index 4f5fe84..6559f6b 100644
--- a/_sass/colors/dark-syntax.scss
+++ b/_sass/colors/dark-syntax.scss
@@ -75,7 +75,8 @@
--highlight-lineno-color: #6c6c6d;
--inline-code-bg: #272822;
--code-header-bg: #353535;
- --lang-badge-color: #6c6c6d;
+ --lang-badge-color: #858586;
+ --lang-badge-muted-color: #6c6c6d;
--clipboard-checked-color: #2bcc2b;
.highlight {
diff --git a/_sass/colors/light-syntax.scss b/_sass/colors/light-syntax.scss
index 314fe2e..0b2b721 100644
--- a/_sass/colors/light-syntax.scss
+++ b/_sass/colors/light-syntax.scss
@@ -72,7 +72,8 @@
--highlight-lineno-color: #c2c6cc;
--inline-code-bg: #f3f3f3;
--code-header-bg: #eaeaea;
- --lang-badge-color: #a4a7ab;
+ --lang-badge-color: rgb(128 128 128 / 87%);
+ --lang-badge-muted-color: rgb(128 128 128 / 36%);
--clipboard-checked-color: #43c743;
} // light-syntax