f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2026-08-05 21:37:37 +00:00
Code Issues Packages Releases Activity

fix(ui): truncate overflowed code block label with ellipsis (#2771)

Browse Source
This commit is contained in:
Seonhyo Choi
2026-07-09 07:20:20 +09:00
committed by GitHub
parent 99614aede3
commit 3c1f7fae4b
1 changed files with 86 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_sass/base/_syntax.scss
+56 -52
View File
@@ -124,57 +124,6 @@ div[class^='language-'] {
}
.code-header {
@include bp.sm {
@include mx.ml-mr(0);
$dot-margin: 1rem;
&::before {
content: '';
display: inline-block;
margin-left: $dot-margin;
width: v.$code-dot-size;
height: v.$code-dot-size;
border-radius: 50%;
background-color: var(--code-header-muted-color);
box-shadow:
(v.$code-dot-size + v.$code-dot-gap) 0 0
var(--code-header-muted-color),
(v.$code-dot-size + v.$code-dot-gap) * 2 0 0
var(--code-header-muted-color);
}
span {
// center the text of label
margin-left: calc(($dot-margin + v.$code-dot-size) / 2 * -1);
}
}
}
.highlight {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
/* Hide line numbers for default, console, and terminal code snippets */
div {
&.nolineno,
&.language-plaintext,
&.language-console,
&.language-terminal {
td:first-child {
padding: 0 !important;
margin-right: 0;
.lineno {
display: none;
}
}
}
}
.code-header {
@extend %no-cursor;
display: flex;
@@ -186,7 +135,11 @@ div {
/* the label block */
span {
color: var(--code-header-text-color);
line-height: v.$code-header-height;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* label icon */
i {
@@ -209,7 +162,6 @@ div {
content: attr(data-label-text);
font-size: 0.85rem;
font-weight: 600;
color: var(--code-header-text-color);
}
}
@@ -252,4 +204,56 @@ div {
}
}
}
@include bp.sm {
@include mx.ml-mr(0);
$dot-margin: 1rem;
&::before {
content: '';
display: inline-block;
margin-left: $dot-margin;
width: v.$code-dot-size;
height: v.$code-dot-size;
border-radius: 50%;
background-color: var(--code-header-muted-color);
box-shadow:
(v.$code-dot-size + v.$code-dot-gap) 0 0
var(--code-header-muted-color),
(v.$code-dot-size + v.$code-dot-gap) * 2 0 0
var(--code-header-muted-color);
}
span {
margin-left: v.$code-icon-width * -1; // center the label text
max-width: calc(
100% - $dot-margin - (v.$code-dot-gap + v.$code-dot-size) * 3 -
v.$code-icon-width * 4
);
}
}
}
.highlight {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
/* Hide line numbers for default, console, and terminal code snippets */
div {
&.nolineno,
&.language-plaintext,
&.language-console,
&.language-terminal {
td:first-child {
padding: 0 !important;
margin-right: 0;
.lineno {
display: none;
}
}
}
}