SCSS

by Eugene Trounev

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<div class="docsie">
  <div class="ui tablet computer only padded grid">
    <div class="ui borderless top fixed fluid menu">
      <a class="header item">Project name</a>
      <div class="right menu">
        <div class="item">
          <div class="ui small input"><input placeholder="Search..."></div>
        </div>
        <a class="item">Dashboard</a> <a class="item">Settings</a>
        <a class="item">Profile</a> <a class="item">Help</a>
      </div>
    </div>
  </div>
  <div class="ui mobile only padded grid">
    <div class="ui top fixed borderless fluid inverted menu">
      <a class="header item">Project Name</a>
      <div class="right menu">
        <div class="item">
          <button class="ui icon toggle basic inverted button">
            <i class="content icon"></i>
          </button>
        </div>
      </div>
      <div class="ui vertical borderless inverted fluid menu" style="display: none;">
        <a class="item">Dashboard</a> <a class="item">Settings</a>
        <a class="item">Profile</a> <a class="item">Help</a>
        <div class="ui fitted divider"></div>
        <div class="item">
          <div class="ui small input"><input placeholder="Search..."></div>
        </div>
      </div>
    </div>
  </div>
  <div class="ui padded grid">
    <div class="three wide tablet only three wide computer only column" id="sidebar">
      <div class="ui vertical borderless fluid text menu">
        <a class="active item">Overview</a> <a class="item">Reports</a>
        <a class="item">Analytics</a> <a class="item">Export</a>
        <div class="ui hidden divider"></div>
        <a class="item">Nav item</a> <a class="item">Nav item again</a>
        <a class="item">One more nav</a> <a class="item">Another nav item</a>
        <a class="item">More navigation</a>
        <div class="ui hidden divider"></div>
        <a class="item">Macintosh</a> <a...

SCSS

// Typography
$fontColor: #533333;
$headingColor: #533333;
// UI
$primaryColorDark: #990032;
$primaryColor: #b50000;
$primaryBgColor: #ff4141;
$primartTextColor: #fff;
$errorColor: #990032;

$buttonBgColor: #fff;
$buttonTextColor: #ff4141;
$buttonBorderColor: #ff4141;
$inputBorderColor: #ddd;
// Header
$headerBgColor: $primaryBgColor;
$headerTextColor: $primartTextColor;
// Sidebar
$sidebarTextColor: #000;
// Code Styles
$codeBgColor: #223344;
$codeTextColor: #ddd;
$codeVarColor: #ee6969;
$codeFunctionColor: #77a7e7;
$codeReservedColor: #c969da;
// Tables
$tableBorderColor: #ddd;
$tableHeaderBgColor: #e0e0e0;
$tableOddBgColor: #f2f2f2;

#sidebar {
    position: fixed;
    height: 100vh;
    padding-top: 56px;
}
#content {
    padding-top: 56px;
    padding-left: 20px;
    padding-right: 20px;
}


.docsie {
    text-rendering: optimizespeed;
    font-family: "Open Sans", Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
    font-size: 12pt;
    color: $fontColor;
    margin: 0;
    padding: 0;
    
    
  h1,h2,h3,h4,h5,h6 {
    // font-family: "Open Sans Light", Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
    font-weight: lighter;
    color: $headingColor;
  }

  a {
    color: $primaryBgColor;
    // &:hover,
    // &:focus,
    // &:active {
    //   color: lighten($primaryBgColor, 35%)
    // }
  }
}