starting mobile menu

www/wp-content/themes/ation2016/src/styles/components/_home.scss

@@ -15,6 +15,7 @@ $video-height: $header-height;
 	padding-bottom: 56.25%; /* 16:9 */
 	padding-top: -$header-height;
 	height: 0;
+	border-bottom: 1px solid $light-grey;
 }
 .videoWrapper iframe {
 	position: absolute;

www/wp-content/themes/ation2016/src/styles/components/_mobile-menu.scss

@@ -0,0 +1,96 @@
+$mobile-menu-width: 225px;
+
+.mobile-menu {
+    box-sizing: border-box;
+    position: fixed;
+    top: 0;
+    right: -$mobile-menu-width;
+    width: $mobile-menu-width;
+    min-height: 100%;
+    height: 100%;
+    overflow-y: auto;
+    transition: right 0.2s ease-in;
+    background-color: $grey;
+    text-transform: uppercase;
+    padding: 0 1em;
+    border-left: 1px solid $grey;
+
+    & > ul {
+        padding: 0;
+        margin: 0;
+        list-style-type: none;
+
+        .admin-bar & {
+            margin-top: 32px;
+            @media screen and (max-width: 782px) {
+                margin-top: 46px;
+            }
+        }
+
+        ul {
+            margin: 0 1em;
+            padding: 0;
+            list-style-type: none;
+
+            a:link, a:hover, a:visited {
+                font-size: 0.80em;
+                color: $orange;
+                text-decoration: none;
+                padding: 0 0 10px 10px;
+                line-height: 1.5em;
+            }
+        }
+
+        & > li {
+            font-size: 14px;
+            font-weight: 500;
+
+            &:first-child {
+                // Some height property if doing this
+            }
+
+            a {
+                color: $orange;
+                padding: 10px 10px;
+                display: block;
+                text-decoration: none;
+
+                &:hover {
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+
+    &.mobile-active {
+        right: 0;
+    }
+}
+
+#mobile-menu {
+    right: -$mobile-menu-width;
+
+    &.mobile-active {
+        right: 0;
+        transition: right 0.2s ease-in;
+    }
+}
+
+#page {
+    position: relative;
+    transition: right 0.2s ease-in, opacity 0.2s ease-in;
+    opacity: 1;
+    right: 0;
+
+    &.mobile-active {
+        right: $mobile-menu-width;
+        opacity: 0.4;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+    }
+}
+
+body.mobile-active {
+    overflow: hidden;
+}

www/wp-content/themes/ation2016/src/styles/site.scss

@@ -25,6 +25,7 @@ $header-height-sticky: 70px;
 @import 'components/work';
 @import 'components/services';
 @import 'components/footer';
+@import 'components/mobile-menu';
 
 @import 'utility/buttons';
 @import 'utility/images';

www/wp-content/themes/ation2016/src/styles/utility/_embeds.scss

@@ -1,7 +1,7 @@
 .video-contain {
     position: relative;
-    padding-bottom: 53%;
-    padding-top: 30px;
+    padding-bottom: 54%;
+    padding-top: 25px;
     height: 0;
     overflow: hidden;
 

www/wp-content/themes/ation2016/static/styles/site.css

@@ -5922,7 +5922,8 @@ html, body {
   padding-bottom: 56.25%;
   /* 16:9 */
   padding-top: -100px;
-  height: 0; }
+  height: 0;
+  border-bottom: 1px solid #eeeeee; }
 
 .videoWrapper iframe {
   position: absolute;
@@ -6004,6 +6005,73 @@ html, body {
 footer {
   border-top: 1px solid #eeeeee; }
 
+.mobile-menu {
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  right: -225px;
+  width: 225px;
+  min-height: 100%;
+  height: 100%;
+  overflow-y: auto;
+  transition: right 0.2s ease-in;
+  background-color: #a8a8a8;
+  text-transform: uppercase;
+  padding: 0 1em;
+  border-left: 1px solid #a8a8a8; }
+  .mobile-menu > ul {
+    padding: 0;
+    margin: 0;
+    list-style-type: none; }
+    .admin-bar .mobile-menu > ul {
+      margin-top: 32px; }
+      @media screen and (max-width: 782px) {
+        .admin-bar .mobile-menu > ul {
+          margin-top: 46px; } }
+    .mobile-menu > ul ul {
+      margin: 0 1em;
+      padding: 0;
+      list-style-type: none; }
+      .mobile-menu > ul ul a:link, .mobile-menu > ul ul a:hover, .mobile-menu > ul ul a:visited {
+        font-size: 0.80em;
+        color: #ff7200;
+        text-decoration: none;
+        padding: 0 0 10px 10px;
+        line-height: 1.5em; }
+    .mobile-menu > ul > li {
+      font-size: 14px;
+      font-weight: 500; }
+      .mobile-menu > ul > li a {
+        color: #ff7200;
+        padding: 10px 10px;
+        display: block;
+        text-decoration: none; }
+        .mobile-menu > ul > li a:hover {
+          text-decoration: none; }
+  .mobile-menu.mobile-active {
+    right: 0; }
+
+#mobile-menu {
+  right: -225px; }
+  #mobile-menu.mobile-active {
+    right: 0;
+    transition: right 0.2s ease-in; }
+
+#page {
+  position: relative;
+  transition: right 0.2s ease-in, opacity 0.2s ease-in;
+  opacity: 1;
+  right: 0; }
+  #page.mobile-active {
+    right: 225px;
+    opacity: 0.4;
+    height: 100%;
+    overflow: hidden;
+    width: 100%; }
+
+body.mobile-active {
+  overflow: hidden; }
+
 .ation-btn, form input[type="submit"] {
   border: 3px solid transparent;
   color: white;
@@ -6047,8 +6115,8 @@ img {
 
 .video-contain {
   position: relative;
-  padding-bottom: 53%;
-  padding-top: 30px;
+  padding-bottom: 54%;
+  padding-top: 25px;
   height: 0;
   overflow: hidden; }
   .video-contain iframe {

www/wp-content/themes/ation2016/templates/base.twig

@@ -7,42 +7,47 @@
 {% endblock %}
 
 	<body class="{{body_class}}" data-template="base.twig">
-		<header class="header">
-			<div class="container">
-				{% block header %}
-					<div class="row">
-						<div class="col-xs-12 col-sm-6">
-							<a href="{{ site.link }}" rel="home" class="header-logo">
-								<img src="{{theme.path}}/static/images/ation-logo-02-02.png" alt="ATION Digital Media" />
-							</a>
+		<div id="page">
+			<header class="header">
+				<div class="container">
+					{% block header %}
+						<div class="row">
+							<div class="col-xs-12 col-sm-4 col-md-6">
+								<a href="{{ site.link }}" rel="home" class="header-logo">
+									<img src="{{theme.path}}/static/images/ation-logo-02-02.png" alt="ATION Digital Media" />
+								</a>
+							</div>
+							<nav id="nav-main" class="nav-main col-xs-12 col-sm-8 col-md-6" role="navigation">
+								{% include "menu.twig" with {'menu': menu.get_items} %}
+							</nav><!-- #nav -->
 						</div>
-						<nav id="nav-main" class="nav-main col-xs-12 col-sm-6" role="navigation">
-							{% include "menu.twig" with {'menu': menu.get_items} %}
-						</nav><!-- #nav -->
-					</div>
-				{% endblock %}
-			</div>
-		</header>
+					{% endblock %}
+				</div>
+			</header>
 
-		<section id="content" role="main" class="content-wrapper">
-			{# {% if title %}<h1>{{title}}</h1>{% endif %} #}
-			<div class="wrapper {{sidebar_class}}">
-				{% block content %}
-					Sorry, no content
-				{% endblock %}
-			</div>
-			{% if sidebar %}
-				<aside class="layout-sidebar">
-					{{sidebar}}
-				</aside>
-			{% endif %}
-		</section>
+			<section id="content" role="main" class="content-wrapper">
+				{# {% if title %}<h1>{{title}}</h1>{% endif %} #}
+				<div class="wrapper {{sidebar_class}}">
+					{% block content %}
+						Sorry, no content
+					{% endblock %}
+				</div>
+				{% if sidebar %}
+					<aside class="layout-sidebar">
+						{{sidebar}}
+					</aside>
+				{% endif %}
+			</section>
 
-		{% block footer %}
-			<footer id="footer">
-				{% include 'footer.twig' %}
-			</footer>
-			{{ function('wp_footer') }}
-		{% endblock %}
+			{% block footer %}
+				<footer id="footer">
+					{% include 'footer.twig' %}
+				</footer>
+				<ul id="mobile-menu" class="mobile-menu">
+					{% include "menu.twig" with {'menu': menu.get_items } %}
+				</ul>
+				{{ function('wp_footer') }}
+			{% endblock %}
+		</div>
 	</body>
 </html>

www/wp-content/themes/ation2016/templates/video-embed.twig

@@ -1,6 +1,6 @@
 {% if embed %}
     <div class="row">
-        <div class="col-xs-12 col-sm-8 col-sm-offset-2">
+        <div class="col-xs-12">
             <div class="video-contain">
                 {{ embed }}
             </div>