Skip to content

Instantly share code, notes, and snippets.

@lonekorean lonekorean/file.scss
Created Mar 11, 2019

Embed
What would you like to do?
Coder's Block v6 code styles
@mixin code-wrap {
border: 1px dashed #ccc;
background-color: #f2f2f2;
}
code {
font-family: 'Source Code Pro', monospace;
}
// inline code
:not(pre) > code {
@include code-wrap;
padding: 1px 4px;
white-space: nowrap;
}
// block code
pre code {
display: block;
padding: 10px 20px;
border-left: 5px solid #666;
line-height: 1.4;
overflow: auto;
}
// block code wrapper
.gatsby-highlight pre {
@include code-wrap;
margin: 0;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #62707F;
}
.token.punctuation {
color: #6E6E6E;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #527A00;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #8D6535;
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #0072A3;
}
.token.function,
.token.class-name {
color: #D2284A;
}
.token.regex,
.token.important,
.token.variable {
color: #996300;
}
.token.italic,
.token.comment {
font-style: italic;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.