update main.scss: + variables, wrapper -> body-wrapper, content -> body-wrapper__content

src/style/main.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 * {
   margin: 0;
   padding: 0;
@@ -8,32 +10,32 @@ html, body {
 }
 
 body {
-  font-family: "PT Sans", Arial, sans-serif;
+  font-family: $text-font;
   min-width: 320px;
 }
 
-.wrapper {
+.body-wrapper {
   display: flex;
   min-height: 100%;
   flex-direction: column;
 }
 
-.content {
+.body-wrapper__content {
   flex: 1;
   margin: 41px auto 0;
 }
 
 a {
-  color: #3f9cea;
+  color: $blue-color;
   text-decoration: none;
-  border-bottom: 1px solid rgba(63, 156, 234, 0.25);
+  border-bottom: 1px solid lighten($blue-color, 25%);
 
   &:hover {
-    border-bottom: 1px solid rgba(63, 156, 234, 0.5);
+    border-bottom: 1px solid lighten($blue-color, 10%);
   }
 
   &:active {
-    border-bottom: 1px solid rgb(63, 156, 234);
+    border-bottom: 1px solid $blue-color;
   }
 
   &.invisible {
@@ -54,23 +56,3 @@ h3 a {
     border-bottom: 1px solid #000000;
   }
 }
-
-ul.submenu {
-  list-style: none;
-  display: inline-block;
-  margin: 0 auto;
-  width: 70%;
-  text-align: center;
-
-  li {
-    display: inline-block;
-    vertical-align: top;
-    margin: 0 30px 0 0;
-
-    p {
-      margin: 2px 0 0;
-      font-size: 0.75em;
-      color: #999;
-    }
-  }
-}

src/templates/main.html

@@ -45,12 +45,12 @@
     </script>
 </head>
 <body>
-<div class="wrapper" ng-controller="AppController">
+<div class="body-wrapper" ng-controller="AppController">
     <header>
         <main-menu items="menuProvider"></main-menu>
     </header>
 
-    <div class="content">
+    <div class="body-wrapper__content">
         <div class="page {{pageClass}}" ng-view autoscroll="true"></div>
     </div>