add about section

src/css/imports/about.scss

@@ -0,0 +1,7 @@
+.about-bg {
+  background-color: rgba(red, 0.5);
+}
+
+.about-section {
+  background-color: rgba(red, 0.5);
+}

src/css/main.css

@@ -1,5 +1,4 @@
 @import "imports/reset.css";
-// @import "milligram";
 
 @import "imports/variables.scss";
 
@@ -12,7 +11,9 @@
 
 @import "imports/components/base.scss";
 
+@import "imports/header.scss";
 @import "imports/hero.scss";
+@import "imports/about.scss";
 
 @import "mapbox-gl/dist/mapbox-gl.css";
 
@@ -32,86 +33,6 @@ html.is-animating .transition-fade {
   height: 30em;
 }
 
-// header
-
-.header-bg {
-  opacity: 0.6;
-}
-
-.header {
-  z-index: $z-index__header;
-
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-}
-
-.nav {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-
-  li {
-    margin-bottom: 0;
-  }
-}
-
-.nav__item {
-  margin: 0;
-}
-
-.nav__link {
-  display: block;
-  padding: 0.6em 1.5em;
-
-  &:last-child {
-    padding-right: 0;
-  }
-}
-
-.site-nav {
-  &__title {
-  }
-
-  &__menu-btn {
-    @media (max-width: $bp-s) {
-      margin: 0;
-      padding: 6px 0 6px;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-  }
-
-  &__nav-list {
-    @media (max-width: $bp-s) {
-      position: fixed;
-      top: 4rem;
-      bottom: 2rem;
-      left: 2rem;
-      right: 2rem;
-
-      background-color: #fff;
-    }
-  }
-}
-
-.menu-text {
-  margin-right: 0.5rem;
-}
-
-.menu-icon {
-  display: block;
-  height: 1.1em;
-  width: 1.1em;
-
-  border-radius: 3px;
-  background-color: blue;
-  opacity: 0.5;
-}
-
 // footer
 
 .footer {
@@ -221,102 +142,6 @@ html.is-animating .transition-fade {
   }
 }
 
-// hero
-
-.hero-bg {
-  // background-color: var(--primary-500);
-}
-
-// about
-
-.about-bg {
-  background-color: var(--page-bg);
-
-  &--secondary {
-    background-color: var(--neutral-200);
-  }
-}
-
-.about-section {
-  align-items: flex-end;
-
-  &__info {
-    padding: 0;
-
-    @media (min-width: $bp-m) {
-      padding-right: 64px;
-    }
-  }
-
-  &--swapped {
-    .about-section__info {
-      order: 2;
-      @media (min-width: $bp-m) {
-        padding-left: 64px;
-      }
-    }
-
-    .about-section__card {
-      order: 1;
-    }
-  }
-}
-
-.about-card {
-  height: 30em;
-  width: 100%;
-  max-width: 30em;
-
-  margin-left: auto;
-  margin-right: auto;
-  font-size: 0.9em;
-
-  @media (min-width: $bp-m) {
-    width: 100%;
-    max-width: 26em;
-    height: 40em;
-    margin-left: auto;
-    margin-right: initial;
-  }
-}
-
-.about-section--swapped .about-card {
-  @media (min-width: $bp-m) {
-    margin-left: initial;
-    margin-right: auto;
-  }
-}
-
-.about-card-bg-img {
-  background-size: cover;
-  background-position: center center;
-}
-
-.about-card-bg-1 {
-  background-color: pink;
-}
-
-.about-card-bg-img-1 {
-  background-image: url(https://via.placeholder.com/300x400);
-}
-
-.about-card-bg-2 {
-  background-color: lightblue;
-}
-
-.about-card-bg-img-2 {
-  background-image: url(https://via.placeholder.com/300x400);
-}
-
-.about-icon {
-  width: 4em;
-  height: 4em;
-  border-radius: 50%;
-  margin-bottom: 1.25rem;
-  background-color: blue;
-  opacity: 0.2;
-}
-
 // services
 
 .services-bg {
@@ -385,16 +210,6 @@ html.is-animating .transition-fade {
   margin-bottom: 1.25rem;
 }
 
-// global
-
-.site-title {
-  text-transform: capitalize;
-}
-
-.body-bg {
-  background-color: var(--color-bg);
-}
-
 .social-icon {
   display: block;
   width: 1em;