m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-22 09:13:35 +01:00
Code

code syntax style tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-07-15 15:15:57 +02:00
parent 8de5c43119
commit 34e9c6c11d
Signed by: m
GPG Key ID: 606EEEF3C479A91F
1 changed files with 66 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/styles/_code.scss
View File

@ -16,7 +16,6 @@ kbd {
code, code,
samp { samp {
white-space: normal; white-space: normal;
background: #444;
color: inherit; color: inherit;
background-color: rgba($code-bg, .05); background-color: rgba($code-bg, .05);
border-radius: $border-radius; border-radius: $border-radius;
@ -32,6 +31,7 @@ kbd {
} }
pre { pre {
position: relative;
display: block; display: block;
padding: 0; padding: 0;
margin-bottom: $spacer; margin-bottom: $spacer;
@ -43,49 +43,91 @@ pre {
// make 'em scrollable // make 'em scrollable
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
max-height: 300px; max-height: 800px;
@media (min-width: $screen-sm) { @media (min-width: $screen-sm) {
max-height: 80vh;
margin-left: -($spacer); margin-left: -($spacer);
margin-right: -($spacer); margin-right: -($spacer);
} }
code { code {
font-size: .8rem; font-size: .8rem;
padding: 0 $spacer / 2; padding: $spacer / 2;
white-space: pre; white-space: pre;
display: block; display: block;
color: inherit; color: inherit;
overflow-wrap: normal; overflow-wrap: normal;
word-wrap: normal; word-wrap: normal;
word-break: normal; word-break: normal;
overflow: auto; float: left;
@media (min-width: $screen-sm) { @media (min-width: $screen-sm) {
padding-left: $spacer; padding: $spacer;
padding-right: $spacer; }
}
&:first-child { &::-webkit-scrollbar {
padding-top: $spacer; width: .35rem;
} height: .35rem;
}
&:last-child { &::-webkit-scrollbar-thumb {
padding-bottom: $spacer; background: rgba($brand-main, .8);
} border-radius: $border-radius;
}
&::-webkit-scrollbar-track {
background: rgba($brand-main, .2);
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
}
pre[data-language]::before {
background: $brand-grey;
border-radius: 0 0 $border-radius $border-radius;
color: $brand-grey-dimmed;
font-size: $font-size-mini;
font-family: $font-family-base;
letter-spacing: .05em;
line-height: 1;
padding: .25rem .5rem;
position: absolute;
right: $spacer / 2;
top: 0;
}
pre[data-language='js']::before {
content: 'js';
}
pre[data-language='bash'] {
&::before {
content: 'bash';
}
.vscode-highlight-line:only-child {
padding-left: .5rem;
display: block;
&::before {
content: '$';
opacity: .5;
display: inline-block;
margin-left: -.5rem;
margin-right: .5rem;
} }
} }
} }
pre[data-language='bash'] .vscode-highlight-line:only-child { pre[data-language='html']::before {
padding-left: .5rem; content: 'html';
display: block; }
&::before { pre[data-language='css']::before {
content: '$'; content: 'css';
opacity: .5; }
display: inline-block;
margin-left: -.5rem; pre[data-language='php']::before {
margin-right: .5rem; content: 'php';
}
} }