156 lines
3.3 KiB
SCSS
156 lines
3.3 KiB
SCSS
// Code
|
|
//-------------------------------
|
|
// Inline and block-level code snippets. Includes tweaks to syntax highlighted
|
|
// snippets from Rouge and Gist embeds.
|
|
|
|
code,
|
|
pre {
|
|
font-family: $serif;
|
|
}
|
|
|
|
// small code thingies
|
|
code {
|
|
padding: .25em .5em;
|
|
font-size: .85em;
|
|
// Could be mistaken for a link if the user choses a similar link-color, so better no colored inline code.
|
|
// color: $code-color;
|
|
background-color: var(--code-bg-color);
|
|
// No border radius to prevent repaint on code scroll
|
|
// border-radius: 3px;
|
|
}
|
|
|
|
code.highlighter-rouge {
|
|
box-shadow: 0 1px 1px var(--shadow-color);
|
|
}
|
|
|
|
pre code {
|
|
padding: 0;
|
|
font-size: .75em;
|
|
color: inherit;
|
|
background-color: transparent;
|
|
}
|
|
|
|
figure, .figure {
|
|
margin-left: -1rem;
|
|
margin-right: -1rem;
|
|
|
|
> *:first-child {
|
|
padding: 1rem;
|
|
background: var(--code-bg-color);
|
|
}
|
|
|
|
> figcaption, > .figcaption {
|
|
font-size: smaller;
|
|
color: #9a9a9a;
|
|
text-align: center;
|
|
font-style: italic;
|
|
margin-top: 0.5rem;
|
|
padding: 0 1rem;
|
|
}
|
|
}
|
|
|
|
//http://www.minh.io/blog/2015/06/28/jekyll-line-numbers/
|
|
//https://drewsilcock.co.uk/proper-linenumbers
|
|
//https://sacha.me/articles/jekyll-rouge/#using-rouge-in-jekyll-3-on-github-pages
|
|
// Rouge
|
|
.highlight {
|
|
margin-bottom: 1.5rem;
|
|
font-size: .75em;
|
|
// /* Prevent code linebreaks and allow side-scrolling (much better readability on mobile) */
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
// /* Make code same width as regular text, and scroll the full page width on mobile */
|
|
@include figure2();
|
|
|
|
backface-visibility: hidden;
|
|
box-shadow: 0 1px 2px var(--shadow-color);
|
|
position: relative;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding: 0.5em;
|
|
background-color: var(--code-border);
|
|
content: "\e86f";
|
|
font-family: "icomoon" !important;
|
|
line-height: 1;
|
|
text-transform: none;
|
|
speak: none;
|
|
box-shadow: 0 1px 2px var(--shadow-color);
|
|
}
|
|
|
|
pre {
|
|
line-height: 1.6;
|
|
padding: .5rem 0 .5rem .5rem;
|
|
margin-bottom: 0;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.lineno {
|
|
display: inline-block; // Ensures the null space also isn't selectable
|
|
padding-right: .25rem;
|
|
color: var(--metadata-color);
|
|
// Make sure numbers aren't selectable
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
table {
|
|
// resets down below
|
|
width: 90%;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
margin-bottom: 0;
|
|
font-size: inherit;
|
|
|
|
td, th {
|
|
padding: 0.25rem .5rem;
|
|
}
|
|
|
|
td:not(:first-child) {
|
|
border-left: 0;
|
|
}
|
|
|
|
td.gutter {
|
|
background: var(--code-border);
|
|
box-shadow: 0 1px 2px var(--shadow-color);
|
|
width: 6%;
|
|
}
|
|
|
|
td.code {
|
|
position:relative;
|
|
width: 90%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 48rem) {
|
|
td.code:before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Gist via GitHub Pages
|
|
// .gist .gist-file {
|
|
// font-family: Menlo, Monaco, "Courier New", monospace !important;
|
|
// }
|
|
// .gist .markdown-body {
|
|
// padding: 15px;
|
|
// }
|
|
// .gist pre {
|
|
// padding: 0;
|
|
// background-color: transparent;
|
|
// }
|
|
// .gist .gist-file .gist-data {
|
|
// font-size: .8rem !important;
|
|
// line-height: 1.4;
|
|
// }
|
|
// .gist code {
|
|
// padding: 0;
|
|
// color: inherit;
|
|
// background-color: transparent;
|
|
// border-radius: 0;
|
|
// }
|