first draft

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

data.yml

@@ -9,3 +9,28 @@ meta:
   url: ""  # https://minimill.co
   google_analytics_id: "" # UA-66637918-1
   theme_color: "" # #FFFFFF
+
+team:
+- name: Athena Kan
+  profile: /img/team/athena.jpeg
+- name: Dan Schlosser
+  profile: /img/team/dan.jpg
+- name: Hannah Kerner
+  profile: /img/team/hannah.jpeg
+- name: Harry Bleyan
+  profile: /img/team/harry.jpg
+- name: Jenna Fahle
+  profile: /img/team/jenna.jpeg
+- name: Mackenzie Burnett
+  profile: /img/team/mackenzie.jpeg
+- name: Maya Caddle
+  profile: /img/team/maya.jpeg
+- name: Nathalyn Nunoo
+  profile: /img/team/nathalyn.jpg
+- name: Nina Lu
+  profile: /img/team/nina.jpg
+- name: Tena Nevidal
+  profile: /img/team/tena.jpeg
+- name: Uzoma Ayogu
+  profile: /img/team/uzuma.jpg
+

src/js/sections.js

@@ -0,0 +1,195 @@
+(function (global) {
+  "use strict";
+
+  function Sections(options) {
+    var opts = options || {};
+
+    this.settings = {
+      bodyClassPrefix: opts.bodyClassPrefix || "in-section-",
+      sectionClass: opts.sectionClass || "animated-section",
+      mobileWidth: opts.mobileWidth || 640,
+    };
+
+    this.sectionElements = document.getElementsByClassName(
+      this.settings.sectionClass
+    );
+    if (!this.sectionElements) {
+      console.error(
+        'Could not find any elements with the class "' +
+          this.settings.sectionClass +
+          '".'
+      );
+    }
+
+    this.scrollingEnabled = false;
+    this.lastWindowHeight = window.innerHeight;
+    this.inRAF = false;
+    this.shouldResize = false;
+    this.lastYOffset = window.pageYOffset;
+    this.sectionMap = this._computeSectionMap();
+    this._onScroll();
+
+    return this;
+  }
+
+  Sections.prototype._computeSectionMap = function () {
+    var sectionMap = [];
+
+    [].forEach.call(
+      this.sectionElements,
+      function (sectionElement) {
+        sectionMap.push({
+          element: sectionElement,
+          begin: Math.max(
+            sectionElement.offsetTop - this.lastWindowHeight / 2,
+            0
+          ),
+          end:
+            sectionElement.offsetTop -
+            this.lastWindowHeight / 2 +
+            sectionElement.clientHeight,
+          sectionId: sectionElement.dataset.sectionId,
+        });
+      }.bind(this)
+    );
+
+    return sectionMap;
+  };
+
+  Sections.prototype._setBodySectionClass = function (newSectionClass) {
+    var newBodyClassName = document.body.className;
+
+    // Remove other section classes
+    var re = new RegExp(this.settings.bodyClassPrefix + "[^ ]+ ", "g");
+    newBodyClassName = newBodyClassName.replace(re, "");
+    newBodyClassName = newBodyClassName.replace(/($ |[ ]+)/, " ");
+
+    // Add new section class
+    newBodyClassName += " " + newSectionClass + " ";
+
+    // Set body class name
+    document.body.className = newBodyClassName;
+  };
+
+  Sections.prototype._onScroll = function () {
+    for (var i = 0; i < this.sectionMap.length; i++) {
+      if (
+        this.lastYOffset >= this.sectionMap[i].begin &&
+        this.lastYOffset < this.sectionMap[i].end
+      ) {
+        var newSectionClass =
+          this.settings.bodyClassPrefix + this.sectionMap[i].sectionId;
+        this._setBodySectionClass(newSectionClass);
+      }
+    }
+
+    this.inRAF = false;
+  };
+
+  Sections.prototype._getOnScroll = function () {
+    var _this = this;
+
+    var onScroll = function () {
+      _this.lastYOffset = window.pageYOffset;
+
+      // If we should resize, and entering the requestAnimationFrame would
+      // cause us to set _this._inRAF = true and block from resizing, we should
+      // just do a resize (which will itself call _this._onScroll).
+      if (_this.shouldResize) {
+        _this._onResize();
+      } else if (!_this.inRAF) {
+        _this.inRAF = true;
+        window.requestAnimationFrame(_this._onScroll.bind(_this));
+      }
+    };
+
+    return onScroll;
+  };
+
+  Sections.prototype._onResize = function () {
+    if (
+      this.scrollingEnabled &&
+      window.innerWidth <= this.settings.mobileWidth
+    ) {
+      this._disableScrolling();
+    } else if (
+      !this.scrollingEnabled &&
+      window.innerWidth > this.settings.mobileWidth
+    ) {
+      this._enableScrolling();
+    }
+
+    if (this.scrollingEnabled) {
+      this.sectionMap = this._computeSectionMap();
+      this._onScroll();
+    }
+
+    this.inRAF = false;
+    this.shouldResize = false;
+  };
+
+  Sections.prototype._getOnResize = function () {
+    var _this = this;
+
+    var onResize = function () {
+      _this.shouldResize = true;
+      _this.lastWindowHeight = window.innerHeight;
+      _this.lastYOffset = window.pageYOffset;
+
+      if (!_this.inRAF) {
+        _this.inRAF = true;
+        window.requestAnimationFrame(_this._onResize.bind(_this));
+      }
+    };
+
+    return onResize;
+  };
+
+  Sections.prototype._enableScrolling = function () {
+    window.addEventListener("scroll", this.onScroll);
+    this.scrollingEnabled = true;
+    setTimeout(function () {
+      document.body.className = document.body.className.replace(
+        "is-mobile",
+        ""
+      );
+    }, 400);
+  };
+
+  Sections.prototype._disableScrolling = function () {
+    window.removeEventListener("scroll", this.onScroll);
+    this.scrollingEnabled = false;
+    this._setBodySectionClass("is-mobile");
+  };
+
+  Sections.prototype.enable = function () {
+    this.onResize = this._getOnResize();
+    this.onScroll = this._getOnScroll();
+    window.addEventListener("resize", this.onResize);
+    window.addEventListener("orientationchange", this.onResize);
+
+    // Recompute our sectionMap once all of the images on the page have loaded.
+    window.addEventListener("load", this.onResize);
+
+    if (window.innerWidth > this.settings.mobileWidth) {
+      this._enableScrolling();
+    } else {
+      this._disableScrolling();
+    }
+  };
+
+  Sections.prototype.disable = function () {
+    this._disableScrolling();
+    window.removeEventListener("orientationchange", this.onResize);
+    window.removeEventListener("resize", this.onResize);
+    window.removeEventListener("load", this.onResize);
+  };
+
+  if (typeof define === "function" && define.amd) {
+    define(Sections);
+  } else if (typeof module !== "undefined" && module.exports) {
+    module.exports = Sections;
+  } else {
+    global.Sections = Sections;
+  }
+})(this);

src/partials/base.hbs

@@ -9,6 +9,7 @@
     <meta itemprop="name" content="{{ meta.title }}">
     <meta itemprop="description" content="{{ meta.description }}">
     <meta itemprop="image" content="{{ meta.image }}">
+    {{#block "headmeta"}}{{/block}}
     <!-- Twitter Card data -->
     <meta name="twitter:card" content="summary">
     <meta name="twitter:site" content="{{ meta.twitter_handle }}">

src/partials/svg/interact-logo.svg.hbs

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 457.13 81.37"><defs><style>.cls-1{fill:#004C38;}</style></defs><title>interact-brand-logotype-black</title><path class="cls-1" d="M17.33,80H0V0H17.33Z"/><path class="cls-1" d="M32.49,80V18.74H47l1,8c3.42-5.94,10.26-9.37,18.13-9.37,13.34,0,21.77,9,21.77,23.89V80H71.48V45.37c0-7.54-2.17-13.37-10.6-13.37-9.35,0-12,6.17-12,14.51V80Z"/><path class="cls-1" d="M136.34,80h-9c-19.72,0-23.14-8.8-23.14-20.46v-28h-8V19h8V3.66h16.3V19H135.2V31.54H120.5V58.4c0,5.6,2.17,7.77,9.46,7.77h6.38Z"/><path class="cls-1" d="M171.57,81.37c-22.34,0-27.7-13-27.7-25V42.4c0-11.89,6.16-25,27.47-25,20.75,0,26.79,13.14,26.79,24.91V53.83H160.05v4.23c0,5.94,2.62,10.86,11.4,10.86s10.83-3.77,10.83-7.43v-.8h15.28v1.26C197.56,70.06,193.46,81.37,171.57,81.37ZM160.05,42.51h22.23V39.89c0-4.91-2.62-10.29-11.06-10.29-8.78,0-11.17,5.37-11.17,10.29Z"/><path class="cls-1" d="M209.53,80V18.74H224l1.14,9.37c3.53-6.51,10.72-10.4,21.43-10.4V33.26H243.5c-12.54,0-17.56,5.94-17.56,16V80Z"/><path class="cls-1" d="M288.76,73.6c-2.74,4.69-8.44,7.77-17.67,7.77-15.16,0-20.52-8-20.52-18.63,0-12.91,8.32-18.63,21.89-18.63h15.28V40c0-5.6-2.39-9.83-9.92-9.83-6.38,0-10,2.63-10,6.74v.91H252.39v-.91c0-10.51,7.64-19.54,25.88-19.54,19.61,0,25.88,10.06,25.88,23.31V80H289.56Zm-1-15.66v-2.4H275.08c-5,0-8,1.71-8,6.63,0,3.89,2.28,6.51,8.55,6.51C283.63,68.69,287.73,64.34,287.73,57.94Z"/><path class="cls-1" d="M369.58,56.91v1.14c0,11.09-7.07,23.31-26.56,23.31-21.43,0-27.59-13.14-27.59-25V42.4c0-11.89,6.16-25,27.59-25,20.18,0,26.33,12.23,26.33,23.31v1.26H353.28V40.46c0-4.57-2.51-9.6-10.26-9.6-8.66,0-11.17,5.83-11.17,11.31V56.34c0,5.49,2.51,11.43,11.17,11.43,7.75,0,10.26-5,10.26-9.71V56.91Z"/><path class="cls-1" d="M415.75,80h-9C387,80,383.6,71.2,383.6,59.54v-28h-8V19h8V3.66h16.3V19h14.71V31.54H399.91V58.4c0,5.6,2.17,7.77,9.46,7.77h6.38Z"/><path class="cls-1" d="M457.13,66.17V80H429.55V66.17Z"/></svg>