diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html index cd04c11..910c032 100644 --- a/_includes/refactor-content.html +++ b/_includes/refactor-content.html @@ -102,7 +102,7 @@ {% endif %} - + {% if _content contains '
' + | append: '">
' %} {% capture _tag_tail %}{{ _snippet | replace: '-rouge">
', _replacement }}{% endcapture %} {% assign _new_content = _new_content | append: _tag_head | append: _tag_tail %} diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss index 6cc8d08..eda2e50 100644 --- a/_sass/addon/syntax.scss +++ b/_sass/addon/syntax.scss @@ -166,6 +166,10 @@ div { background: var(--code-header-bg); 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; // language badge &::before { @@ -176,6 +180,29 @@ div { text-transform: uppercase; padding-left: 1em; } + + // clipboard + button { + border: 0; + background-color: inherit; + border-top-right-radius: $code-radius; + color: var(--highlight-lineno-color); + + &:hover { + background-color: gray; + color: white; + } + + &:focus { + outline: none; + } + + i { + font-size: 85%; + } + + } + } @media all and (max-width: 576px) { @@ -187,7 +214,11 @@ div { .code-header { border-radius: 0; - padding: 0 0.4rem; + padding-left: 0.4rem; + + button { + border-top-right-radius: 0; + } } } }