mirror of
https://github.com/danog/sass-site.git
synced 2024-12-13 18:07:35 +01:00
62 lines
1.2 KiB
SCSS
62 lines
1.2 KiB
SCSS
%code-theme {
|
|
@include border-radius(4px);
|
|
border: 1px solid #ebebeb;
|
|
background: #f8f8f8;
|
|
color: $color-text-strong;
|
|
}
|
|
|
|
code,
|
|
pre {
|
|
@extend %code-theme;
|
|
@include font-size-small;
|
|
font: {
|
|
weight: $font-weight-regular;
|
|
family: $font-family-code;
|
|
}
|
|
white-space: pre-wrap;
|
|
text-align: left;
|
|
@include box-sizing(border-box);
|
|
strong & {
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
}
|
|
|
|
code {
|
|
padding: .25em;
|
|
line-height: 0;
|
|
}
|
|
|
|
%pre-block {
|
|
@include rhythm(0, .5, .5, 0);
|
|
padding: {
|
|
right: 1em;
|
|
left: 1em;
|
|
}
|
|
display: block;
|
|
}
|
|
|
|
pre {
|
|
@extend %pre-block;
|
|
@include trailer;
|
|
@include rhythm(.5, .5, .5, .5);
|
|
@include bleed(1em);
|
|
|
|
// It's important that this be 22px so that we can easily compute the extra
|
|
// padding necessary to align sections in code examples. 22px is the line
|
|
// height (24px) minus the borders (2px) of a section, which means we can just
|
|
// add an extra line to sections to make them align.
|
|
margin: auto 0 22px;
|
|
|
|
// Account for some code outputs that place code tags in pre tags
|
|
code {
|
|
@extend %reset-padding;
|
|
border: 0;
|
|
background: none;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
&.highlight .err {
|
|
background: none;
|
|
}
|
|
}
|