Sections background color problem on custom layout

[shaypal5]

Hey,

Great work on this theme! <3

I used a custom layout, as suggested, in order to use only some of the sections. My site now has an all-white background, which is not as pretty, and also makes it head to distinguish between different section.

You can see it here: https://datanights-il.github.io/dsmgmt/

And the code here: https://github.com/DataNights-IL/dsmgmt/

This is my custom layout:

---
layout: default
---
{% include navheader.html %}
{% include services.html %}
{% include about.html %}
{% include team.html %}
{% include contact.html %}

How can I make the about section have the light gray background some sections have? Like the portfolio and team sections here: https://y7kim.github.io/agency-jekyll-theme/

[shaypal5]

I've managed to do this by overriding includes/about.html and changing the section there to use a new about-page-section class.

And then similarly overriding _sass/base/_page.scss with an identical copy, and adding athe desired custom class style, configuring its background color:

.about-page-section {
  padding: 100px 0;
  background-color: #F6F6F6;
  h2.section-heading {
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 15px;
  }
  h3.section-subheading {
    font-size: 16px;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 75px;
    text-transform: none;
    @include serif-font;
  }
}
@media (min-width: 768px) {
  section {
    padding: 150px 0;
  }