troldspejlet/hugo-theme-stack
troldspejlet/hugo-theme-stack
1
0
Fork 0
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2024-11-27 20:13:49 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add style to new codeblock

Browse source
This commit is contained in:
Jimmy Cai 2022-06-12 14:23:26 +00:00 committed by GitHub
parent 7b2fda70a4
commit 7a710cbb55
1 changed files with 28 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
assets/scss/partials/layout/article.scss
View file

@ -286,10 +286,12 @@
line-height: 1.428571429; line-height: 1.428571429;
word-break: break-all; word-break: break-all;
padding: var(--card-padding); padding: var(--card-padding);
// keep Codeblocks LTR // keep Codeblocks LTR
[dir="rtl"] & { [dir="rtl"] & {
direction: ltr; direction: ltr;
} }
code { code {
color: unset; color: unset;
border: none; border: none;
@ -303,15 +305,11 @@
padding: var(--card-padding); padding: var(--card-padding);
position: relative; position: relative;
&:hover {
.copyCodeButton {
opacity: 1;
}
}
// keep Codeblocks LTR // keep Codeblocks LTR
[dir="rtl"] & { [dir="rtl"] & {
direction: ltr; direction: ltr;
} }
pre { pre {
margin: initial; margin: initial;
padding: 0; padding: 0;
@ -320,20 +318,30 @@
} }
} }
.copyCodeButton { .codeblock {
position: absolute; header {
top: calc(var(--card-padding)); background-color: var(--card-background-selected);
right: calc(var(--card-padding)); padding: 5px var(--card-padding);
background: var(--card-background); display: flex;
border: none; justify-content: space-between;
box-shadow: var(--shadow-l2); box-shadow: var(--shadow-l1);
border-radius: var(--tag-border-radius);
padding: 8px 16px; span {
color: var(--card-text-color-main); text-transform: uppercase;
cursor: pointer; font-weight: bold;
font-size: 14px; color: var(--card-text-color-secondary);
opacity: 0; }
transition: opacity 0.3s ease; }
.codeblock-copy {
cursor: pointer;
background-color: transparent;
border: none;
padding: 8px 16px;
color: var(--card-text-color-secondary);
font-size: 14px;
font-weight: bold;
}
} }
.table-wrapper { .table-wrapper {
@ -402,7 +410,7 @@
/// Negative margins /// Negative margins
blockquote, blockquote,
figure, figure,
.highlight, .codeblock,
pre, pre,
.gallery, .gallery,
.video-wrapper, .video-wrapper,