Converted some objects to components.

public/App.jsx

@@ -46,7 +46,7 @@ class App extends React.Component {
   }
 
   render() {
-    let clazz = "o-app";
+    let clazz = "c-app";
     if(this.props.menuOpen) clazz += " is-menu-open "
 
     return (

public/nav/menu/HamburgerMenu.jsx

@@ -28,10 +28,9 @@ import Language from './../../language/Language';
 import * as MenuActions from './../../actions/MenuActions';
 
 const HamburerMenuItem = function(props) {
-  console.log(props);
   return (
-    <li className="o-hamburger-menu__link">
+    <li className="c-hamburger-menu__link">
-      <NavLink to={ props.to } className="o-hamburger-menu__link-link">
+      <NavLink to={ props.to } className="c-hamburger-menu__link-link">
         { Language.get(props.lang) }
       </NavLink>
     </li>
@@ -44,7 +43,7 @@ class HamburgerMenu extends React.Component {
   }
 
   render() {
-    let clazz = "o-hamburger-menu";
+    let clazz = "c-hamburger-menu";
     if(this.props.open) clazz += " is-open";
     if(this.props.className) clazz += " " + this.props.className;
 
@@ -52,17 +51,17 @@ class HamburgerMenu extends React.Component {
       <div className={clazz}>
         <button
           type="button"
-          className="o-hamburger-menu__button"
+          className="c-hamburger-menu__button"
           onClick={this.props.toggleMenu}
         >
           <img
             src={ require('./../../images/icons/hamburger.svg') }
-            className="o-hamburger-menu__icon"
+            className="c-hamburger-menu__icon"
           />
         </button>
 
-        <div className="o-hamburger-menu__menu">
+        <div className="c-hamburger-menu__menu">
-          <ul className="o-hamburger-menu__links">
+          <ul className="c-hamburger-menu__links">
             <HamburerMenuItem to="/" lang="navbar.home" />
             <HamburerMenuItem to="/about" lang="navbar.about" />
             <HamburerMenuItem to="/contact" lang="navbar.contact" />

public/nav/navbar/Navbar.jsx

@@ -31,7 +31,7 @@ import HamburgerMenu from './../menu/HamburgerMenu';
 
 const NavbarLink = function(props) {
   return (
-    <NavLink to={ props.to } className="o-navbar__link" activeClassName="is-active" exact={props.exact}>
+    <NavLink to={ props.to } className="c-navbar__link" activeClassName="is-active" exact={props.exact}>
       { Language.get("navbar." + props.title) }
     </NavLink>
   );
@@ -45,15 +45,15 @@ class Navbar extends React.Component {
 
   render() {
     return (
-      <section className="o-navbar is-stuck">
+      <section className="c-navbar is-stuck">
         <PageBoundary>
-          <nav className="o-navbar__nav">
+          <nav className="c-navbar__nav">
 
             {/* Logo */}
-            <NavLink to="/" className="o-navbar__logo-container" activeClassName="is-active">
+            <NavLink to="/" className="c-navbar__logo-container" activeClassName="is-active">
               <img
                 src={ require('./../../images/logo.svg') }
-                className="o-navbar__logo"
+                className="c-navbar__logo"
                 alt={ Language.get("site.name") }
               />
             </NavLink>
@@ -64,7 +64,7 @@ class Navbar extends React.Component {
             <NavbarLink to="/contact" title="contact" exact />
 
             {/* Hamburger Menu for smaller screens */}
-            <HamburgerMenu className="o-navbar__hamburger" />
+            <HamburgerMenu className="c-navbar__hamburger" />
           </nav>
         </PageBoundary>
       </section>

public/page/Routes.jsx

@@ -41,7 +41,7 @@ const RouteWrapper = (props) => {
     <Route {...props} render={() => {
         let CustomTag = props.page;
         return (
-          <main className="o-main">
+          <main className="c-main">
             <CustomTag />
             <Footer />
           </main>

public/styles/components/_app.scss

@@ -8,7 +8,7 @@
  *  Version:
  *    1.0.0 - 2018/05/03
  */
-.o-app {
+.c-app {
   position: relative;
   height: 100vh;
   width: 100%;

public/styles/components/_hamburger-menu.scss

@@ -10,20 +10,20 @@
  *  Version:
  *    1.0.0 - 2018/06/12
  */
-$o-hamburger-menu--max: 200%;
+$c-hamburger-menu--max: 200%;
-$o-hamburger-menu--pos-x: 100%;
+$c-hamburger-menu--pos-x: 100%;
-$o-hamburger-menu--pos-y: 0%;
+$c-hamburger-menu--pos-y: 0%;
-@include t-keyframes(o-hamburger-menu--open) {
+@include t-keyframes(c-hamburger-menu--open) {
-  from { clip-path: circle(0% at $o-hamburger-menu--pos-x $o-hamburger-menu--pos-y); }
+  from { clip-path: circle(0% at $c-hamburger-menu--pos-x $c-hamburger-menu--pos-y); }
-  to { clip-path: circle($o-hamburger-menu--max at $o-hamburger-menu--pos-x $o-hamburger-menu--pos-y); }
+  to { clip-path: circle($c-hamburger-menu--max at $c-hamburger-menu--pos-x $c-hamburger-menu--pos-y); }
 }
 
-@include t-keyframes(o-hamburger-menu--close) {
+@include t-keyframes(c-hamburger-menu--close) {
-  from { clip-path: circle($o-hamburger-menu--max at $o-hamburger-menu--pos-x $o-hamburger-menu--pos-y); }
+  from { clip-path: circle($c-hamburger-menu--max at $c-hamburger-menu--pos-x $c-hamburger-menu--pos-y); }
-  to { clip-path: circle(0% at $o-hamburger-menu--pos-x $o-hamburger-menu--pos-y); }
+  to { clip-path: circle(0% at $c-hamburger-menu--pos-x $c-hamburger-menu--pos-y); }
 }
 
-.o-hamburger-menu {
+.c-hamburger-menu {
 
   &__menu {
     display: none;
@@ -81,16 +81,16 @@ $o-hamburger-menu--pos-y: 0%;
 
 
   &.is-open {
-    .o-hamburger-menu__menu {
+    .c-hamburger-menu__menu {
       display: block;
-      @include t-animation-name(o-hamburger-menu--open);
+      @include t-animation-name(c-hamburger-menu--open);
     }
   }
 
   &.is-closing {
-    .o-hamburger-menu__menu {
+    .c-hamburger-menu__menu {
       display: block;
-      @include t-animation-name(o-hamburger-menu--close);
+      @include t-animation-name(c-hamburger-menu--close);
     }
   }
 }

public/styles/components/_main.scss

@@ -5,7 +5,7 @@
  *  Version:
  *    1.0.0 - 2018/05/07
  */
-.o-main {
+.c-main {
   position: relative;
   min-height: 100vh;
   width: 100%;

public/styles/components/_navbar.scss

@@ -12,9 +12,9 @@
  *  Version:
  *    1.0.0 - 2018/05/03
  */
-$o-navbar--link-thickness: 5px;
+$c-navbar--link-thickness: 5px;
 
-.o-navbar {
+.c-navbar {
   z-index: $s-z--navbar;
 
   &.is-stuck {
@@ -67,7 +67,7 @@ $o-navbar--link-thickness: 5px;
 
     &.is-active:after {
       background: $s-color--navbar__bar-hover;
-      height: $o-navbar--link-thickness;
+      height: $c-navbar--link-thickness;
     }
 
     &:hover {
@@ -75,7 +75,7 @@ $o-navbar--link-thickness: 5px;
 
       &:after {
         background: $s-color--navbar__bar-hover;
-        height: $o-navbar--link-thickness;
+        height: $c-navbar--link-thickness;
       }
     }
   }

public/styles/index.scss

@@ -58,27 +58,27 @@
 @import './elements/_headings.scss';
 
 //Objects
-@import './objects/main.scss';
 
-@import './objects/_app.scss';
 @import './objects/_background.scss';
 @import './objects/_button.scss';
 @import './objects/_element-scroll-fader.scss';
 @import './objects/_floating-content-box.scss';
 @import './objects/_form.scss';
-@import './objects/_hamburger-menu.scss';
 @import './objects/_input.scss';
 @import './objects/_loader.scss';
-@import './objects/_navbar.scss';
 @import './objects/_page-transition.scss';
 @import './objects/_title.scss';
 @import './objects/_video.scss';
 
 //Components
+@import './components/_app.scss';
 @import './components/_body-section.scss';
 @import './components/_clear-section.scss';
 @import './components/_footer.scss';
+@import './components/_hamburger-menu.scss';
 @import './components/_image-section.scss';
+@import './components/_main.scss';
+@import './components/_navbar.scss';
 @import './components/_page.scss';
 @import './components/_section.scss';
 @import './components/_split-section.scss';