site home page updates

source/javascripts/partials/_header.es6

@@ -1,45 +1,43 @@
 /* globals $ */
 
-
 $(() => {
-
   const $header = $('header');
   const $toggle = $('.menu-toggle');
   const $nav = $('.mobile-nav');
   const $dropdownMenu = $('.header-dropdown-menu');
-
-  var setTransparent = () => {
-    $header.removeClass('opaque-background');
-    $header.addClass('transparent-background');
-    $dropdownMenu.removeClass('opaque-background');
-    $dropdownMenu.addClass('transparent-background');
-  }
-
-  var setOpaque = () => {
-    $header.removeClass('transparent-background');
-    $header.addClass('opaque-background');
-    $dropdownMenu.removeClass('transparent-background');
-    $dropdownMenu.addClass('opaque-background');
+  const $headerLogo = $header.find('img');
+
+  var setDark = () => {
+    $header.removeClass('header-dark');
+    $header.addClass('header-light');
+    $dropdownMenu.removeClass('header-dark');
+    $dropdownMenu.addClass('header-light');
+    $headerLogo.attr({'src':'/img/logo-dark.svg', 'alt':'Logo'});
   }
 
-  var setHeaderStyle = () => {
-    setOpaque();
+  var setLight = () => {
+    $header.removeClass('header-light');
+    $header.addClass('header-dark');
+    $dropdownMenu.removeClass('header-light');
+    $dropdownMenu.addClass('header-dark');
+    $headerLogo.attr({'src':'/img/logo-light.svg', 'alt':'Logo'});
   }
 
   if ($('body').innerWidth() <= 783) {
-    setOpaque();
-  } else {
-    setHeaderStyle();
+    setDark();
   }
 
   $(window).resize(() => {
-    if ($('body').innerWidth() > 783) {
-      setHeaderStyle();
-    } else {
-      setOpaque();
+    if ($('body').innerWidth() < 783) {
+      setDark();
     }
   });
 
+  $(window).on("scroll", () => {
+    if ($(window).scrollTop() > 0) setDark();
+    else setLight();
+  });
+
   // Responsive Menu
 
   $toggle.click(function (event) {

source/javascripts/partials/_index.es6

@@ -4,12 +4,11 @@ $(() => {
   const headerHeight = $('header').height()
   const eventType = ((document.ontouchstart !== null) ? 'click' : 'touchstart')
 
-  $('.scrollto').on(eventType, function (event) {
+  $('.scrollto').on(eventType, 'a', function (event) {
     event.preventDefault()
 
     const id = $(this).attr('href')
-    const offset = 2 * headerHeight
-    const target = $(id).offset().top - offset
+    const target = $(id).offset().top - headerHeight
 
     $('html, body').animate({
       scrollTop: target

source/partials/_header.erb

@@ -4,13 +4,13 @@
 <div class="mobile-nav">
   <%= partial "nav" %>
 </div>
-<header class="fixed transparent-background <% if current_resource.data.transparent %>should-be-transparent<% end %>">
+<header class="fixed header-dark">
   <div class="container animated fadeInDown">
-  	<div class="logo">
-	    <a href="/" class="logo-link"><%= image_tag 'logo-dark.svg', alt: 'Codio', class: 'img-logo' %></a>
-  	</div>
+    <div class="logo">
+      <a href="/" class="logo-link"><%= image_tag 'logo-light.svg', alt: 'Codio', class: 'img-logo' %></a>
+    </div>
     <nav>
-    	<%= partial "nav", locals: {pricing: pricingType, surl: signupUrl} %>
+      <%= partial "nav", locals: {pricing: pricingType, surl: signupUrl} %>
     </nav>
   </div>
 </header>

source/partials/_nav.erb

@@ -9,7 +9,7 @@
     <%= link_to 'Log in', '/p/login' %>
   </li>
   <li class='highspot'>
-    <%= link_to 'Free trial', (defined?(surl) && !surl.nil? ? surl : '/start-edu-trial'), class: 'button button-rounded-small' %>
+    <%= link_to 'Free trial', (defined?(surl) && !surl.nil? ? surl : '/start-edu-trial'), class: 'button button-small' %>
   </li>
   <li>
     <%= link_to 'Join Class', '/p/join-class' %>