Docsie styling sampler

This fiddle illustrates the ease of Docsie styling using nothing but SCSS

by Eugene Trounev

HTML

<!-- This is just a basic DOcsie.io script setup. -->
<script async type="text/javascript" src="https://lib.docsie.io/1.4.8/service.js" data-docsie="test_pk_Hsa3JWrwu3iHmTaANKtlXR5P:boo_thRQIJEMLZxvRG3hP,version:true,language:true,viewportWidth:100%,plugins:[highlight]"></script>

SCSS

/**
* Docsie.io sample documentation style
*/
/* Responsive breakpoint */
$sm: 'screen and (min-width: 568px)'; // 568px
$ism: 'screen and (max-width: 568px)'; // 568px
$md: 'screen and (min-width: 768px)'; // 768px
$lg: 'screen and (min-width: 1024px)'; // 1024px
$xl: 'screen and (min-width: 1280px)'; // 1280px
$xxl: 'screen and (min-width: 1600px)'; // 1600px
/* Visual styles */
$textColor: #202a42;
$linkColor: #007bff;
$anchorColor: #999;
$inputBackground: #fff;
$codeBackground: #f0f8ff;
$codeBorder: #6b7690;
$borderColor: #ddd;
/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400&subset=cyrillic,latin-ext');
/* Style */
#DOCSIE__ROOT {
    /* This is the base root element
     * of docsie document.
     * set all the base font/styles here:
     */
    font-family: "Open Sans", Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
    line-height: 1.6;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1em;
    padding-right: 1em;
    font-size: 1.125em;
    color: $textColor;
    @media #{$xl} {
        font-size: 1.25em;
        padding-left: 2em;
        padding-right: 2em;
    }
    /* Settings of the base elements
     * and structures
     * element specific styles
     * should be set later
     */
    article,
    header,
    nav {
        display: block;
    }
    input,
    select,
    button {
        color: inherit;
        padding: .5em .6em;
        display: inline-block;
        border: 1px solid $borderColor;
        background-color: $inputBackground;
        box-shadow: none;
        font-size: inherit;
        border-radius: 4px;
        vertical-align: middle;
        box-sizing: border-box;
        cursor: pointer;
    }
    select {
        height: 2.25em;
    }
    button {
        overflow: visible;
        text-transform: none;
        -webkit-appearance: none;
        margin: 0;
        text-decoration: none;
        &:-moz-focus-inner {
            border-style: none;
            padding: 0;
 ...