SCSS

by Eugene Trounev

HTML

<link rel="stylesheet" href="https://www.docsie.io//style.css">
<link rel="stylesheet" href="https://lib.docsie.io/1.5.0/styles/docsie.css">
<header class="gn">
  <nav id="topNav">
    <ul class="nv-l">
      <li><a class="nv-lg" href="/">
          DOCS
        </a></li>
      <span class="spacer"></span>
      <li>
        <form class="src">
          <svg viewBox="0 0 20 20" width="18" height="18" class="icon-search">
            <path fill="none" stroke="currentColor" d="M14 14l4 4zm2-5a7 7 0 0 1-7 7 7 7 0 0 1-7-7 7 7 0 0 1 7-7 7 7 0 0 1 7 7z"></path>
          </svg>
          <input aria-label="Search documentation" type="search" placeholder="Search..." />
        </form>
      </li>
    </ul>
  </nav>
</header>

<main id="DOCSIE__ROOT" class="docsie-root">
  <div class="pure-docsie-container docsie-sidebar-collapsed ready" style="max-width: 100%;">
    <div class="pure-docsie-main">
      <nav class="docsie-nav">
        <div class="docsie-tableofcontents docsie-library">
          <ul>
            <li class="expanded">
              <a class=" " title="" href="#">Getting Started</a>
            </li>
            <li class="expanded">
              <a class=" " title="" href="#">Book title 2</a>
            </li>
            <li class="expanded">
              <a class=" " title="" href="#">Book title 3</a>
            </li>
            <li class="expanded">
              <a class=" " title="" href="#">Book title 4</a>
            </li>
            <li class="expanded">
              <a class=" " title="" href="#">Book title 5</a>
            </li>
          </ul>
        </div>
      </nav>
      <article class="docsie-doc">
        <button class="docsie-nav-toggle-button" name="Toggle menu" aria-label="Expand navigation"><svg class="docsie-icon-menu" viewBox="0 0 20 20" width="20" height="20">
            <path fill="none" stroke="currentColor" d="M3 4.5h14m-14 5h14m-14 5h14"></path>
          </svg></button>

        <header class="docsie-header"...

SCSS

#topNav {
  .src {
    display: flex;
    align-items: center;
    border-left: 1px solid #eee;
    .icon-search {
      margin-left: .9em;
    }
    [type=search] {
      font-weight: 400;
      text-align: left;
      white-space: nowrap;
      vertical-align: middle;
      user-select: none;
      border: 1px solid transparent;
      padding: .45em .9em;
      font-size: .875em;
      line-height: 1.5;
      color: inherit;
      background-color: #fff;
    }
  }
}
.docsie-root {
  .pure-docsie-main{
    .docsie-nav{
      .docsie-library {
        ul {
          font-size: 100%;
          a {
            margin-bottom: 1em;
          }
        }
      }
    }
     .docsie-link-cards {
       position: relative;
       display: grid;
       grid-template-columns: repeat(3,1fr);
       grid-gap: 20px;
       list-style: none;
       padding-left:0 !important;
        .docsie-link-card  {
          min-height: 40px;
          &:only-child {
            grid-column: 1/span 3;
          }
          a {
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            height: 100%;
            padding: 1em 1.5em;
            border: 1px solid #e3e8ee;
            border-radius: 4px;
            text-decoration: none;
            -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
            h4 {
                margin: 0;
                padding: 0;
                font-weight: 500;
            }
            p {
                color: #3b454e;
                margin: 0;
                padding: 4px 0 0;
                font-size: 14px;
                line-height: 20px;
            }
       ...