Some helpers for a standard nerdpack layout

standard-nerdpack-layout.css

.toolbar-container {
  height: 66px;
  box-sizing: border-box;
  border-top: 1px solid #edeeee;
  border-bottom: 1px solid #edeeee;
  padding: 0 16px;
  background-color: #fff;
}

.toolbar-section1 .toolbar-item:first-child {
  padding-left: 0;
}

.toolbar-item {
  display: flex;
  justify-content: center;
  padding: 8px 16px;
  align-items: center;

  &.has-separator {
    border-right: 1px dotted #e3e4e4;
  }
}

.primary-grid {
  grid-gap: 0;
  overflow: hidden;
  position: relative;
  height: calc(100% - 66px);
}

.sidebar-container {
  height: 100%;
  overflow: hidden;
  border-right: 1px solid #eeeeee;
  background-color: #fff;
}

.primary-content-container {
  padding: 16px;
}

.sidebar-list {
  padding: 0;
  list-style-type: none;
}

.sidebar-list-item {
  padding: 12px 16px;
  list-style-type: none;
  color: #2a3434;
  font-size: 12px;
  overflow-wrap: break-word;
  border-bottom: 1px solid #f4f4f4;

  &:hover {
    background-color: #fafbfb;
    cursor: pointer;
  }
}

.primary-content {
  padding: 16px;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 11px 15px -10px rgba(31, 75, 116, 0.15),
    0 1px 3px 1px rgba(0, 134, 148, 0.03), 0 3px 0 0 rgba(0, 49, 54, 0.04),
    0 1px 0 0 rgba(0, 75, 82, 0.04);

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 12px;
  }
  p {
    font-size: 14px;
    color: #464e4e;
    line-height: 21px;
  }

  ul {
    padding: 16px 32px;
    font-size: 14px;
    color: #464e4e;
    line-height: 21px;
  }
}