Gatsby Theme Docs

 General Styling

Currently Gatsby Theme Docbar uses css modules for styling and relies on shadowing if you want to overwrite the styles with your own custom styling. To add your own styling, follow these instructions:

  1. Add a new css file in your site at src/gatsby-theme-docbar/components/styles/sidebar.module.css
  2. Copy in this template: 
.sidebar {
  background-color: #FAF8F8;
  width: 25%;
  min-height: calc(100vh - 130px);
  font-family: Arial;
  box-shadow: 1px 0 1px #dedede;
}

.sidebar-heading {
  font-size: 1.2rem;
  padding: 0.2rem;
  margin-top: 1.4rem;
  width: max-content;
}

.sidebar-heading:hover {
  cursor: pointer;
}

.sidebar-subheading {
  font-size: 1rem;
  margin-top: 0.8rem;
}

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

.sidebar-link {
  text-decoration: none;
  color: #535353;
}

.sidebar-link:hover {
  color: #0096F4;
}

.sidebar-active-link {
  color: #0096F4;
  font-weight: 500;
}
  1. Change the defaults to whatever you need for your site.

This is a temporary solution, in future releases I'd like to see this project move to using Theme UI.