Made about page

public/styles/components/_page--style-about.scss

@@ -0,0 +1,47 @@
+/*
+ *  About Page
+ *    Styles for index page elements
+ *
+ *  Dependencies:
+ *    styles/settings/responsive.scss
+ *    styles/tools/_flex.scss
+ *    styles/tools/_responsive.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/11
+ */
+.c-page--style-about__profile {
+  width: 100%;
+  max-width: 256px;
+  margin: 0 auto;
+}
+
+.c-page--style-about__blurb {
+  font-size: 1.25em;
+  max-width: 25em;
+}
+
+.c-page--style-about__language-container {
+  @extend %t-flexbox;
+  @include t-flex-wrap(wrap);
+}
+
+.c-page--style-about__language {
+  width: 100%;
+  padding: 1em;
+}
+
+.c-page--style-about__language-heading,
+.c-page--style-about__language-description {
+  text-align: center;
+}
+
+.c-page--style-about__subheading {
+  margin-top: 4em;
+}
+
+@include t-media-query($s-small-up) {
+  .c-page--style-about__language {
+    width: 50%;
+  }
+}

public/styles/components/_page--style-contact.scss

@@ -6,7 +6,7 @@
  *    styles/settings/responsive.scss
  *    styles/tools/_repsonsive.scss
  *    styles/tools/_flex.scss
- *    styles/components/_style.scss
+ *    styles/components/_page.scss
  *
  *  Version:
  *    1.0.0 - 2018/03/10

public/styles/components/_page--style-index.scss

@@ -0,0 +1,12 @@
+/*
+ *  Index Page
+ *    Styles for index page elements
+ *
+ *  Dependencies:
+ *    styles/settings/responsive.scss
+ *    styles/tools/_repsonsive.scss
+ *    styles/tools/_flex.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/11
+ */

public/styles/components/_section--style-body.scss

@@ -10,15 +10,17 @@
  *  Version:
  *    1.0.0 - 2018/02/28
  */
-.c-section--style-body {
+.c-section--style-body__inner {
   background: $s-color--background-default;
   padding: 1em;
 }
 
 @include t-media-query($s-small-up) {
   .c-section--style-body {
-    margin-left: 4%;
-    width: 96%;
+    padding-left: 4%;
+  }
+
+  .c-section--style-body__inner {
     @include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5));
   }
 }

public/styles/components/_section--style-split.scss

@@ -0,0 +1,34 @@
+/*
+ *  Section Style Split
+ *    Styles for split style section
+ *
+ *  Dependencies:
+ *    styles/settings/responsive.scss
+ *    styles/tools/_repsonsive.scss
+ *    styles/tools/_flex.scss
+ *    styles/components/_section.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/11
+ */
+.c-section--style-split {
+  @include t-flexbox();//Because we're winning a fight
+  @include t-flex-wrap(wrap);
+}
+
+.c-section--style-split__split-part {
+  width: 100%;
+}
+
+
+@include t-media-query($s-small-up) {
+  .c-section--style-split {
+    @include t-flex-wrap(nowrap);
+    @include t-justify-content(space-around);
+    @include t-align-items(center);
+  }
+
+  .c-section--style-split__split-part {
+    width: auto;
+  }
+}

public/styles/elements/_dt.scss

@@ -0,0 +1,25 @@
+/*
+ *  DT, DL, DD
+ *    Base Definition List Settings
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/11
+ */
+dt {
+  font-weight: bold;
+}
+
+dl {
+
+}
+
+dd {
+  margin-left: 2em;
+}
+
+dt ~ dt,
+dl ~ dt {
+  margin-top: 1em;
+}

public/styles/elements/_p.scss

@@ -0,0 +1,11 @@
+/*
+ *  P
+ *    Base P/Paragraph Seettings
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/11
+ */
+p {
+}

public/styles/index.scss

@@ -32,8 +32,10 @@
 @import './elements/_a.scss';
 @import './elements/_body.scss';
 @import './elements/_button.scss';
+@import './elements/_dt.scss';
 @import './elements/_headings.scss';
 @import './elements/_html.scss';
+@import './elements/_p.scss';
 @import './elements/_table.scss';
 
 //Objects
@@ -47,11 +49,14 @@
 @import './components/_menu.scss';
 @import './components/_navbar.scss';
 @import './components/_page.scss';
+@import './components/_page--style-about.scss';
 @import './components/_page--style-contact.scss';
+@import './components/_page--style-index.scss';
 @import './components/_section.scss';
 @import './components/_section--style-blank-promo.scss';
 @import './components/_section--style-body.scss';
 @import './components/_section--style-poly.scss';
+@import './components/_section--style-split.scss';
 @import './components/_section--style-three.scss';
 
 //Utilities