nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2025-05-16 15:04:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions2

clipboard: size inline code to fit surrounding text

Browse source
This commit is contained in:
Sören Weber 2025-03-29 22:21:58 +01:00
parent 6e26088dc2
commit 330a25b51e
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
3 changed files with 25 additions and 10 deletions
assets
css
theme.css
js
theme.js
layouts/partials
version.txt

22
assets/css/theme.css
View file

@ -980,7 +980,7 @@ code,
kbd, kbd,
pre:not(.mermaid), pre:not(.mermaid),
samp { samp {
font-size: 0.934375rem; font-size: 0.934375em;
font-variation-settings: var(--INTERNAL-CODE-font-variation-settings); font-variation-settings: var(--INTERNAL-CODE-font-variation-settings);
font-weight: var(--INTERNAL-CODE-font-weight); font-weight: var(--INTERNAL-CODE-font-weight);
font-family: var(--INTERNAL-CODE-font); font-family: var(--INTERNAL-CODE-font);
@ -991,14 +991,14 @@ samp {
code { code {
background-color: var(--INTERNAL-CODE-INLINE-BG-color); background-color: var(--INTERNAL-CODE-INLINE-BG-color);
border-color: var(--INTERNAL-CODE-INLINE-BORDER-color); border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
border-radius: 2px; border-radius: 0.125em;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
color: var(--INTERNAL-CODE-INLINE-color); color: var(--INTERNAL-CODE-INLINE-color);
-webkit-print-color-adjust: economy; -webkit-print-color-adjust: economy;
color-adjust: economy; color-adjust: economy;
padding-left: 2px; padding-left: 0.125em;
padding-right: 2px; padding-right: 0.125em;
} }
pre:not(.mermaid) { pre:not(.mermaid) {
@ -1475,7 +1475,7 @@ span.copy-to-clipboard {
code.copy-to-clipboard-code:has(+ .inline-copy-to-clipboard-button):after { code.copy-to-clipboard-code:has(+ .inline-copy-to-clipboard-button):after {
display: inline-block; display: inline-block;
width: calc(22px + var(--bpx1) * 2px); width: calc(1.333em + var(--bpx1) * 0.125em);
content: ''; content: '';
} }
@ -1484,7 +1484,6 @@ code.copy-to-clipboard-code:has(+ .inline-copy-to-clipboard-button):after {
cursor: pointer; cursor: pointer;
display: inline; display: inline;
font: initial; font: initial;
font-size: 0.934375rem;
} }
.inline-copy-to-clipboard-button { .inline-copy-to-clipboard-button {
@ -1493,7 +1492,8 @@ code.copy-to-clipboard-code:has(+ .inline-copy-to-clipboard-button):after {
border-inline-start-style: solid; border-inline-start-style: solid;
border-inline-start-width: 1px; border-inline-start-width: 1px;
color: var(--INTERNAL-CODE-INLINE-color); color: var(--INTERNAL-CODE-INLINE-color);
margin-inline-start: calc(-1 * (22px + var(--bpx1) * 2px)); font-size: 0.934375em;
margin-inline-start: calc(-1 * (1.333em + var(--bpx1) * 0.125em));
position: relative; position: relative;
z-index: 10; z-index: 10;
} }
@ -1511,6 +1511,7 @@ code.copy-to-clipboard-code:has(+ .inline-copy-to-clipboard-button):after {
color: var(--INTERNAL-MAIN-LINK-color); color: var(--INTERNAL-MAIN-LINK-color);
/* only show copy to clipboard on hover for code blocks if configured */ /* only show copy to clipboard on hover for code blocks if configured */
display: none; display: none;
font-size: 0.934375rem;
padding: 5px 3px; padding: 5px 3px;
position: absolute; position: absolute;
inset-inline-end: 4px; inset-inline-end: 4px;
@ -1539,7 +1540,12 @@ div.highlight:hover .block-copy-to-clipboard-button {
color: var(--INTERNAL-CODE-BLOCK-BG-color); color: var(--INTERNAL-CODE-BLOCK-BG-color);
} }
.inline-copy-to-clipboard-button > i, .inline-copy-to-clipboard-button > i {
font-size: 0.859625em;
padding-left: 0.333em;
padding-right: 0.333em;
}
.block-copy-to-clipboard-button > i { .block-copy-to-clipboard-button > i {
font-size: 0.859625rem; font-size: 0.859625rem;
padding-left: 5px; padding-left: 5px;

11
assets/js/theme.js
View file

@ -698,6 +698,15 @@ function initCodeClipboard() {
// avoid copy-to-clipboard for highlight shortcode in table lineno mode // avoid copy-to-clipboard for highlight shortcode in table lineno mode
var isFirstLineCell = inTable && code.parentNode.parentNode.parentNode.querySelector('td:first-child > pre > code') == code; var isFirstLineCell = inTable && code.parentNode.parentNode.parentNode.querySelector('td:first-child > pre > code') == code;
var isBlock = inTable || inPre; var isBlock = inTable || inPre;
var inHeading = false;
var parent = code.parentNode;
while (parent && parent !== document) {
if (/^h[1-6]$/i.test(parent.tagName)) {
inHeading = true;
break;
}
parent = parent.parentNode;
}
if (!isFirstLineCell && (inPre || text.length > 5)) { if (!isFirstLineCell && (inPre || text.length > 5)) {
code.classList.add('copy-to-clipboard-code'); code.classList.add('copy-to-clipboard-code');
@ -714,7 +723,7 @@ function initCodeClipboard() {
code = clone; code = clone;
} }
var button = null; var button = null;
if (isBlock || !window.relearn.disableInlineCopyToClipboard) { if (isBlock || (!window.relearn.disableInlineCopyToClipboard && !inHeading)) {
button = document.createElement('button'); button = document.createElement('button');
var buttonPrefix = isBlock ? 'block' : 'inline'; var buttonPrefix = isBlock ? 'block' : 'inline';
button.classList.add(buttonPrefix + '-copy-to-clipboard-button'); button.classList.add(buttonPrefix + '-copy-to-clipboard-button');

2
layouts/partials/version.txt
View file

@ -1 +1 @@
7.6.0 7.6.0+6e26088dc2f0a21d23aed131eca6d3a66303863d