Documentation style

by Eugene Trounev

HTML

<header style="height:60px;margin-bottom: 2em;border-bottom:1px solid">
  Header
</header>
<main data-ddsroot>
</main>
<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:false,viewportWidth:100%,plugins:[highlight]"></script>

SCSS

/**
* Docsie.io Masonry documentation style
*/

$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
$textColor: #3b454e;
$linkColor: #3884ff;
$anchorColor: $linkColor;
$textActiveColor: $linkColor;
// Buttons
$buttonText: $linkColor;
$buttonBackground: #fff;
$buttonBorder: $linkColor;
// Inputs
$inputText: $textColor;
$inputBackground: #fff;
$inputBorder: #E6ECF1;
// Code
$codeText: #000;
$codeBackground: #f5f7f9;
$codeBorder: $linkColor;
// Quote
$quoteBackground: #f5f7f9;
// Table
$dictDefinitionText: $textColor;
$dictDefinitionBackground: $quoteBackground;
$tableBorder: #E6ECF1;
$tableOddBorder: #fafbfe;
$tableOddBackground: #fafbfe;
$tableOddText: $textColor;
$tableEvenBorder: #fafbfe;
$tableEvenBackground: #fff;
$tableEvenText: $textColor;
// Fonts
@import url('https://fonts.googleapis.com/css?family=Alata|IBM+Plex+Sans|IBM+Plex+Sans+Condensed:400i');
html, body {
  margin: 0; padding: 0;
  scroll-behavior: smooth;
}
// CSS
#DOCSIE__ROOT {
    font-family: 'IBM Plex Sans', sans-serif;
    line-height: 1.625;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    color: $textColor;
    font-weight: 300;
    font-size: 14px;
    letter-spacing: normal;
    @media #{$sm} {
      font-size: 15px;
    }
    @media #{$lg} {
      font-size: 16px;
    }
    article,
    header,
    nav {
        display: block;
    }
    label {
        display: inline-block;
        margin-bottom: .5em
    }
    input,
    select,
    button {
        margin: 0;
        text-rendering: auto;
        color: initial;
        font-size: inherit;
        font-family: inherit;
        line-height: inherit;
        letter-spacing: normal;
        word-spacing: normal;
        text-transform: none;
        text-indent: 0px;
       ...