/** * Code */ // Reboot // –––––––––––––––––––– // 1. Correct the inheritance and scaling of font size in all browsers. // 2. Correct the odd `em` font sizing in all browsers. pre, code, kbd, samp { font-family: $monospace; // 1 font-size: 1rem; // 2 } // Pico // –––––––––––––––––––– pre, code, kbd { background: var(--code-inlined); color: var(--code-color-1); font-size: 85%; font-weight: 400; line-height: 1; @if map-get($breakpoints, "sm") and $enable-responsive-typography { @media (min-width: map-get($breakpoints, "sm")) { font-size: 83%; } } @if map-get($breakpoints, "md") and $enable-responsive-typography { @media (min-width: map-get($breakpoints, "md")) { font-size: 81%; } } @if map-get($breakpoints, "lg") and $enable-responsive-typography { @media (min-width: map-get($breakpoints, "lg")) { font-size: 79%; } } @if map-get($breakpoints, "lg") and $enable-responsive-typography { @media (min-width: map-get($breakpoints, "xl")) { font-size: 77%; } } } code, kbd { display: inline-block; padding: .375rem .5rem; border-radius: $round; } pre { display: block; margin-bottom: $spacing-block; padding: $spacing-block $spacing-gutter; overflow-x: auto; background: var(--code-background); > code { display: block; padding: 0; background: transparent; font-size: 14px; line-height: $line-height; } } // Code Syntax highlighting code { // Tags b { color: var(--code-color-2); font-weight: normal; } // Properties i { color: var(--code-color-3); font-style: normal; } // Values u { color: var(--code-color-4); text-decoration: none; } // Comments em { color: var(--code-color-5); font-style: normal; } } // kbd kbd { background-color: var(--secondary); color: var(--secondary-inverse); font-weight: bolder; }