New design for code snippet header
This commit is contained in:
Cotes Chung
parent
57feaa660e
commit
6a65f3a7f7
|
|
@ -118,16 +118,16 @@
|
|||
{% assign _left = _snippet | split: '><' | last%}
|
||||
|
||||
{% if _left contains 'file="' %}
|
||||
{% assign _text = _left | split: 'file="' | last | split: '"' | first %}
|
||||
{% assign _label_text = _left | split: 'file="' | last | split: '"' | first %}
|
||||
{% 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 %}
|
||||
{% capture _label_text %}{% include language-alias.html language=_lang %}{% endcapture %}
|
||||
{% assign _label_icon = 'fas fa-code small' %}
|
||||
{% endif %}
|
||||
|
||||
{% capture _label %}
|
||||
<span text-data="{{ _text }}"><i class="fa-fw {{ _label_icon }}"></i></span>
|
||||
<span label-text="{{ _label_text | strip }}"><i class="{{ _label_icon }}"></i></span>
|
||||
{% endcapture %}
|
||||
|
||||
{% assign _new_content = _new_content | append: _snippet
|
||||
|
|
|
|||
|
|
@ -38,13 +38,8 @@ $code-radius: 6px;
|
|||
}
|
||||
|
||||
%code-snippet-padding {
|
||||
padding: 1.2rem;
|
||||
}
|
||||
|
||||
div > pre {
|
||||
@extend %code-snippet-bg;
|
||||
@extend %code-snippet-radius;
|
||||
@extend %code-snippet-padding;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.highlighter-rouge {
|
||||
|
|
@ -65,6 +60,8 @@ div > pre {
|
|||
}
|
||||
|
||||
overflow: auto;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
pre {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -74,20 +71,12 @@ div > pre {
|
|||
}
|
||||
|
||||
table {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
td pre {
|
||||
overflow: visible; /* Fixed iOS safari overflow-x */
|
||||
word-break: normal; /* Fixed iOS safari linenos code break */
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.lineno {
|
||||
padding-right: 0.5rem;
|
||||
min-width: 2.2rem;
|
||||
|
|
@ -140,7 +129,7 @@ code {
|
|||
}
|
||||
|
||||
td.rouge-code {
|
||||
padding: 1.2rem 1.5rem 1.2rem 1rem;
|
||||
@extend %code-snippet-padding;
|
||||
|
||||
// Prevent some browser extends from
|
||||
// changing the URL string of code block.
|
||||
|
|
@ -164,62 +153,80 @@ div {
|
|||
}
|
||||
|
||||
td.rouge-code {
|
||||
@extend %code-snippet-padding;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code-header {
|
||||
background: var(--code-header-bg);
|
||||
@extend %no-cursor;
|
||||
|
||||
$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;
|
||||
line-height: 1.85rem;
|
||||
height: $code-header-height;
|
||||
|
||||
// icons
|
||||
i {
|
||||
font-size: 1rem;
|
||||
color: var(--lang-badge-muted-color);
|
||||
&::before {
|
||||
$dot-size: 0.75rem;
|
||||
$dot-margin: 0.5rem;
|
||||
|
||||
&.small {
|
||||
font-size: 70%;
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
||||
// the label block
|
||||
span {
|
||||
padding-left: 0.35rem;
|
||||
|
||||
&::after {
|
||||
content: attr(text-data);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--lang-badge-color);
|
||||
}
|
||||
|
||||
// label icon
|
||||
i {
|
||||
margin: 0 0.5rem;
|
||||
font-size: 1rem;
|
||||
margin-right: 0.4rem;
|
||||
color: var(--code-header-icon-color);
|
||||
|
||||
&.small {
|
||||
font-size: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
@at-root [file] #{&} > i {
|
||||
position: relative;
|
||||
top: 1px; // center the file icon
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
// label text
|
||||
&::after {
|
||||
content: attr(label-text);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--code-header-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
// clipboard
|
||||
button {
|
||||
border: 1px solid var(--code-header-bg);
|
||||
@extend %cursor-pointer;
|
||||
|
||||
border: 1px solid transparent;
|
||||
border-radius: $code-radius;
|
||||
height: $code-header-height;
|
||||
width: $code-header-height;
|
||||
padding: 0;
|
||||
width: 1.95rem;
|
||||
background-color: inherit;
|
||||
|
||||
@extend %cursor-pointer;
|
||||
i {
|
||||
color: var(--code-header-icon-color);
|
||||
}
|
||||
|
||||
&[timeout] {
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -74,9 +74,9 @@
|
|||
--highlighter-rouge-color: #de6b18;
|
||||
--highlight-lineno-color: #6c6c6d;
|
||||
--inline-code-bg: #272822;
|
||||
--code-header-bg: #353535;
|
||||
--lang-badge-color: #858586;
|
||||
--lang-badge-muted-color: #6c6c6d;
|
||||
--code-header-text-color: #6a6a6a;
|
||||
--code-header-muted-color: rgb(60 60 60);
|
||||
--code-header-icon-color: rgb(86 86 86);
|
||||
--clipboard-checked-color: #2bcc2b;
|
||||
|
||||
.highlight {
|
||||
|
|
|
|||
|
|
@ -71,9 +71,9 @@
|
|||
--highlighter-rouge-color: #2f2f2f;
|
||||
--highlight-lineno-color: #c2c6cc;
|
||||
--inline-code-bg: #f3f3f3;
|
||||
--code-header-bg: #eaeaea;
|
||||
--lang-badge-color: rgb(128 128 128 / 87%);
|
||||
--lang-badge-muted-color: rgb(128 128 128 / 36%);
|
||||
--code-header-text-color: #a3a3b1;
|
||||
--code-header-muted-color: #ebebeb;
|
||||
--code-header-icon-color: #d1d1d1;
|
||||
--clipboard-checked-color: #43c743;
|
||||
|
||||
} // light-syntax
|
||||
|
|
|
|||
Loading…
Reference in New Issue