diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..7a73a41 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,2 @@ +{ +} \ No newline at end of file diff --git a/data.yml b/data.yml index 703a234..89f1237 100644 --- a/data.yml +++ b/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 + diff --git a/src/font/Camber-Rg.eot b/src/font/Camber-Rg.eot new file mode 100644 index 0000000..3b8747b Binary files /dev/null and b/src/font/Camber-Rg.eot differ diff --git a/src/font/Camber-Rg.ttf b/src/font/Camber-Rg.ttf new file mode 100644 index 0000000..518b3e0 Binary files /dev/null and b/src/font/Camber-Rg.ttf differ diff --git a/src/font/Camber-Rg.woff b/src/font/Camber-Rg.woff new file mode 100644 index 0000000..edea602 Binary files /dev/null and b/src/font/Camber-Rg.woff differ diff --git a/src/font/Camber-Sb.eot b/src/font/Camber-Sb.eot new file mode 100644 index 0000000..548e5c5 Binary files /dev/null and b/src/font/Camber-Sb.eot differ diff --git a/src/font/Camber-Sb.ttf b/src/font/Camber-Sb.ttf new file mode 100644 index 0000000..7b0dd33 Binary files /dev/null and b/src/font/Camber-Sb.ttf differ diff --git a/src/font/Camber-Sb.woff b/src/font/Camber-Sb.woff new file mode 100644 index 0000000..95917cf Binary files /dev/null and b/src/font/Camber-Sb.woff differ diff --git a/src/font/KeplerStd-Medium.otf b/src/font/KeplerStd-Medium.otf new file mode 100644 index 0000000..5d0bf14 Binary files /dev/null and b/src/font/KeplerStd-Medium.otf differ diff --git a/src/font/KeplerStd-Regular.otf b/src/font/KeplerStd-Regular.otf new file mode 100644 index 0000000..b3b6070 Binary files /dev/null and b/src/font/KeplerStd-Regular.otf differ diff --git a/src/img/.DS_Store b/src/img/.DS_Store new file mode 100644 index 0000000..06c65a4 Binary files /dev/null and b/src/img/.DS_Store differ diff --git a/src/img/cows.jpg b/src/img/cows.jpg new file mode 100644 index 0000000..04f9f4b Binary files /dev/null and b/src/img/cows.jpg differ diff --git a/src/img/team/athena.jpeg b/src/img/team/athena.jpeg new file mode 100644 index 0000000..7efee30 Binary files /dev/null and b/src/img/team/athena.jpeg differ diff --git a/src/img/team/dan.jpg b/src/img/team/dan.jpg new file mode 100644 index 0000000..d04ca04 Binary files /dev/null and b/src/img/team/dan.jpg differ diff --git a/src/img/team/hannah.jpeg b/src/img/team/hannah.jpeg new file mode 100644 index 0000000..3995eb4 Binary files /dev/null and b/src/img/team/hannah.jpeg differ diff --git a/src/img/team/harry.jpg b/src/img/team/harry.jpg new file mode 100644 index 0000000..3e9228d Binary files /dev/null and b/src/img/team/harry.jpg differ diff --git a/src/img/team/jenna.jpeg b/src/img/team/jenna.jpeg new file mode 100644 index 0000000..a527788 Binary files /dev/null and b/src/img/team/jenna.jpeg differ diff --git a/src/img/team/mackenzie.jpeg b/src/img/team/mackenzie.jpeg new file mode 100644 index 0000000..1db1c2f Binary files /dev/null and b/src/img/team/mackenzie.jpeg differ diff --git a/src/img/team/maya.jpeg b/src/img/team/maya.jpeg new file mode 100644 index 0000000..6744224 Binary files /dev/null and b/src/img/team/maya.jpeg differ diff --git a/src/img/team/nathalyn.jpg b/src/img/team/nathalyn.jpg new file mode 100644 index 0000000..1bd1dfd Binary files /dev/null and b/src/img/team/nathalyn.jpg differ diff --git a/src/img/team/nina.jpg b/src/img/team/nina.jpg new file mode 100644 index 0000000..eece568 Binary files /dev/null and b/src/img/team/nina.jpg differ diff --git a/src/img/team/tena.jpeg b/src/img/team/tena.jpeg new file mode 100644 index 0000000..f0efc11 Binary files /dev/null and b/src/img/team/tena.jpeg differ diff --git a/src/img/team/uzuma.jpg b/src/img/team/uzuma.jpg new file mode 100644 index 0000000..dd9219e Binary files /dev/null and b/src/img/team/uzuma.jpg differ diff --git a/src/js/sections.js b/src/js/sections.js new file mode 100644 index 0000000..6f074ba --- /dev/null +++ b/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); diff --git a/src/partials/.DS_Store b/src/partials/.DS_Store new file mode 100644 index 0000000..815cfa0 Binary files /dev/null and b/src/partials/.DS_Store differ diff --git a/src/partials/base.hbs b/src/partials/base.hbs index f8e7118..3ab7d3f 100644 --- a/src/partials/base.hbs +++ b/src/partials/base.hbs @@ -9,6 +9,7 @@ + {{#block "headmeta"}}{{/block}} diff --git a/src/partials/svg/interact-logo.svg.hbs b/src/partials/svg/interact-logo.svg.hbs new file mode 100644 index 0000000..1c3aa36 --- /dev/null +++ b/src/partials/svg/interact-logo.svg.hbs @@ -0,0 +1 @@ +interact-brand-logotype-black diff --git a/src/sass/_agtech.scss b/src/sass/_agtech.scss new file mode 100644 index 0000000..a3d5540 --- /dev/null +++ b/src/sass/_agtech.scss @@ -0,0 +1,169 @@ +.blocks { + display: flex; + padding: 3rem 0 6rem; + max-width: $content-width; + align-items: center;; +} + +.content-block { + flex: 2; + padding-right: 3rem; +} + +.team-list .team-member .image-wrapper::after, .companion-block::after { + transition: 0.5s ease border-color; +} + +.in-section-agtech-hero { + .companion-block::after { + border-left-color: $light-red; + border-top-color: $light-red; + } + .team-list .team-member .image-wrapper::after { + border-right-color: $light-red; + border-bottom-color: $light-red; + } +} + +.in-section-agtech-team, +.in-section-agtech-footer { + .companion-block::after { + border-left-color: $off-white; + border-top-color: $off-white; + } + .team-list .team-member .image-wrapper::after { + border-right-color: $off-white; + border-bottom-color: $off-white; + } +} + +.companion-block { + flex: 1; + border-radius: 8px; + position: relative; + + &::before { + content: ' '; + position: absolute; + left: 0; + top: 0; + width: 4rem; + height: 4rem; + border-top-left-radius: 8px; + z-index: 10;; + border-top: 2px dashed $dark-green; + border-left: 2px dashed $dark-green; + } + + &::after { + content: ' '; + position: absolute; + left: 0; + top: 0; + z-index: 9; + border-left: 2.25rem solid $light-red; + border-top: 2.25rem solid $light-red; + border-bottom: 2.25rem solid transparent; + border-right: 2.25rem solid transparent; + } + + i { + display: block; + border-radius: 8px; + width: 100%; + padding-bottom: 100%; + height: 0; + background-position: center; + background-size: cover;; + } +} + +header { + max-width: 40rem; +} + +footer { + margin: 6rem 0 0; + padding: 6rem 0; + background-color: $light-red; +} + +.team-list { + display: flex; + flex-wrap: wrap; + margin: 0 -1.5rem; + padding: 9rem 0; + + .team-member { + width: 25%; + padding: 0 1.5rem; + margin-top: -6rem; + + &:nth-child(4n+2) { + padding-top: 3rem; + } + + &:nth-child(4n+3) { + padding-top: 6rem; + } + + &:nth-child(4n+4) { + padding-top: 9rem; + } + + h3 { + margin: 0.5rem 0; + } + + .image-wrapper { + position: relative; + + &::after { + content: ' '; + position: absolute; + right: 0; + bottom: 0; + z-index: 9; + border-right: 1.5rem solid $off-white; + border-bottom: 1.5rem solid $off-white; + border-top: 1.5rem solid transparent; + border-left: 1.5rem solid transparent; + } + + &::before { + content: ' '; + position: absolute; + right: 0; + bottom: 0; + width: 2.75rem; + height: 2.75rem; + border-bottom-right-radius: 8px; + z-index: 10;; + border-right: 2px dashed $dark-green; + border-bottom: 2px dashed $dark-green; + } + } + + img { + width: 100%; + border-radius: 8px; + display: block; + } + + } +} + +.button { + background-color: $dark-green; + padding: 0.5rem 1.5rem; + display: inline-block; + margin: 1.5rem 0; + color: $off-white; + border-radius: 4px; + transition: 0.3s ease opacity; + + &:hover { + opacity: 0.8; + color: $off-white; + } +} diff --git a/src/sass/_base.scss b/src/sass/_base.scss index f917e48..ce361a9 100755 --- a/src/sass/_base.scss +++ b/src/sass/_base.scss @@ -1,9 +1,9 @@ html, body { - background-color: $white; - color: $black; + background-color: $light-red; + color: $dark-green; font-family: $sans; font-size: 16px; - font-weight: $light; + font-weight: $regular; height: 100%; line-height: 1.5; position: relative; diff --git a/src/sass/_colors.scss b/src/sass/_colors.scss index aaf206d..7524cda 100755 --- a/src/sass/_colors.scss +++ b/src/sass/_colors.scss @@ -1,3 +1,6 @@ $black: #222222; $white: #FFFFFF; +$off-white: #E0F5F0; +$light-red: #FDE4E6; +$dark-green: #004C38; $transparent: rgba(0, 0, 0, 0); diff --git a/src/sass/_layout.scss b/src/sass/_layout.scss index ce42c86..28e6b53 100644 --- a/src/sass/_layout.scss +++ b/src/sass/_layout.scss @@ -1,20 +1,20 @@ -$content-width: 58.75rem; +$content-width: 72rem; .content { margin: 0 auto; max-width: $content-width; - padding: 0 0.625rem; - width: 90%; + padding: 0 1.5rem; + width: 100%; } -@media screen and (max-width: $phone-landscape-max) { - .content { - padding: 0; - width: 100%; - } +section { + margin: 3rem 0; + padding: 3rem 0; - section { - padding-left: 2.5rem; - padding-right: 2.5rem; + &.white { + background-color: $off-white; } } + +@media screen and (max-width: $phone-landscape-max) { +} diff --git a/src/sass/_nav.scss b/src/sass/_nav.scss new file mode 100644 index 0000000..d63098f --- /dev/null +++ b/src/sass/_nav.scss @@ -0,0 +1,23 @@ +@import 'typography'; + +nav { + padding: 2.25rem 0; +} + +.nav-items { + display: flex; + + .nav-item { + @extend %h5; + height: 2rem; + } + + .spacer { + flex: 1; + } + + svg { + display: block; + height: 1.5rem; + } +} diff --git a/src/sass/_responsive.scss b/src/sass/_responsive.scss index d3bf5ec..b4cfd1c 100644 --- a/src/sass/_responsive.scss +++ b/src/sass/_responsive.scss @@ -6,19 +6,19 @@ @media screen and (max-width: $xl-desktop-max) { html, body { - font-size: 18px; + font-size: 16px; } } @media screen and (max-width: $desktop-max) { html, body { - font-size: 16px; + font-size: 14px; } } @media screen and (max-width: $tablet-landscape-max) { html, body { - font-size: 15px; + font-size: 14px; } } diff --git a/src/sass/_sections.scss b/src/sass/_sections.scss new file mode 100644 index 0000000..aedfa8b --- /dev/null +++ b/src/sass/_sections.scss @@ -0,0 +1,246 @@ +/////////////////////////////////////////////////////////////////////////////// +// Adding a new page: +// +// 1. Add entries to @mixin color-backgrounds +// 2. Add entry to body.page- for the overscroll +// 3. Add the new project to $projects +// 4. Add a new variable called $-sections and list out the sections +// on that page, IN ORDER +// 5. Add your new $-sections variable to $sections +// 6. Define your new section content styles in @mixin section +// +/////////////////////////////////////////////////////////////////////////////// + +///////////////// +// Backgrounds // +///////////////// + +// @mixin color-backgrounds +// +// Controls the background color of sections. This is defined as a mixin so +// that it can be used to both style the animated backgrounds, and the sections +// themselves (on mobile). +@mixin color-backgrounds($prefix) { + display: block; + + // Agtech Hero + .#{$prefix}-agtech-hero { background-color: $light-red; } + .#{$prefix}-agtech-footer, + .#{$prefix}-agtech-team { background-color: $off-white; } +} + +.backgrounds { + @include color-backgrounds('background'); + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 0; + + li { + height: 100%; + left: 0; + opacity: 0; + position: absolute; + top: 0; + transition: 0.5s ease opacity;; + width: 100%; + z-index: 0; + } +} + +[class*='page-'] .backgrounds .background-agtech-hero { + opacity: 0; +} + +[class*='in-section'] .backgrounds li { + opacity: 1; +} + +///////////////////// +// Body Overscroll // +///////////////////// + +// Set the body background color at the top and +// bottom of each page, so that overscrolls look good. +body { + + // Top + background-color: $light-red; + + // Bottom + &.in-section-work-identities, + &.in-section-home-footer, { + background-color: $light-red; + } +} + +////////////// +// Sections // +////////////// + +// List of sections on each page, IN ORDER + +$agtech-sections: 'agtech-hero', 'agtech-team', 'agtech-footer'; + +// List of all sets of sections +$sections: $agtech-sections; + +.sections { + position: relative; + transition: 0.5s ease opacity; + z-index: 2; + + .animated-section { + overflow: hidden; + transition: 0.5s ease opacity; + } +} + +// Ensure that if we are changing a property on scroll, +// we are transitioning between values. +.sc-text, .sc-accent { + color: $white; + transition: 0.5s ease color; +} + +.sbg-text, .sbg-accent { + background-color: $white; + transition: 0.5s ease background-color; +} + +.sbd-accent { + border-color: $white; + transition: 0.5s ease border-color; +} + +// @mixin section-style +// +// Defines what will change about the content of a section. This mixin is +// applied to every possible section setup, with different text/accent colors. +@mixin section-style($text, $accent, $background) { + + // Scroll color + .sc-text { + color: $text; + } + + .sc-accent { + color: $accent; + } + + .sc-h-children-accent:hover .sc-text { + color: $accent; + } + + // Scroll background-color + .sbg-accent { + background-color: $accent; + } + + .sbg-text { + background-color: $text; + } + + // Scroll border-color + .sbd-accent { + border-color: $accent; + } + + // Scroll SVG fill color + .sf-svg-accent path, .sf-svg-accent rect { + fill: $accent; + } + + .sf-svg-text path, .sf-svg-text rect { + fill: $text; + } +} + +// @mixin section +// +// This mixin will include some variation of @mixin section-style, depending on +// the passed ID. Different IDs will result in different text/accent colors. +@mixin section($id) { + @if contains(('agtech-hero'), $id) { + @include section-style($dark-green, $dark-green, $light-red); + + } @else if contains(('agtech-team', 'agtech-footer'), $id) { + @include section-style($dark-green, $dark-green, $off-white); + } +} + + +/////////////////////////////// +// Section Style Application // +/////////////////////////////// + +// Used below. By extending instead of just including `opacity: 0;` directly, +// SCSS will combine the rules, auto-merging them all. +%hidden { opacity: 0; } +%visible { opacity: 1; } + +@each $page in $sections { + // If you're in $current-section, that section, and the sections above and + // below it, should all be styled like %section-#{$current-section} + @each $current-section in $page { + // Compute the current index + $index: index($page, $current-section); + + .in-section-#{$current-section} { + + // Previous section + @if ($index > 1) { + .section-#{nth($page, $index - 1)} { + @include section($current-section); + } + } + + // Current Section + .section-#{$current-section} { + @include section($current-section); + } + + // Next section + @if ($index < length($page)) { + .section-#{nth($page, $index + 1)} { + @include section($current-section); + } + } + + // All backgrounds after the current section should be invisible. + .backgrounds .background-#{$current-section} ~ li { + @extend %hidden; + } + } + } +} + +.is-mobile { + .sc-text, .sc-accent, + .sbg-text, .sbg-accent, + .sbd-accent, + .sf-svg-accent path, + .sf-svg-accent rect, + .sf-svg-text path, + .sf-svg-text rect, + .backgrounds li { + transition: none !important; + } +} + + +@media screen and (max-width: $tablet-landscape-max) { + .sections { + @include color-backgrounds('section'); + } + + @each $page in $sections { + @each $current-section in $page { + .section-#{$current-section} { + @include section($current-section); + } + } + } +} diff --git a/src/sass/_typography.scss b/src/sass/_typography.scss index 2d76f4d..02a0387 100644 --- a/src/sass/_typography.scss +++ b/src/sass/_typography.scss @@ -5,25 +5,53 @@ $medium: 500; $regular: 400; $light: 300; -$sans: 'Helvetica Neue', Helvetica, Arial, sans-serif; +@font-face { + font-family: 'Camber'; + font-weight: $regular; + src: url('/font/Camber-Rg.eot?') format('eot'), + url('/font/Camber-Rg.woff') format('woff'), + url('/font/Camber-Rg.ttf') format('truetype'); +} + +@font-face { + font-family: 'Camber'; + font-weight: $medium; + src: url('/font/Camber-Sb.eot?') format('eot'), + url('/font/Camber-Sb.woff') format('woff'), + url('/font/Camber-Sb.ttf') format('truetype'); +} + +@font-face { + font-family: 'Kepler Std'; + font-weight: $regular; + src: url('/font/KeplerStd-Regular.otf') format('otf'); +} + +@font-face { + font-family: 'Kepler Std'; + font-weight: $medium; + src: url('/font/KeplerStd-Medium.otf') format('otf'); +} + +$sans: 'Camber', 'Helvetica Neue', Helvetica, Arial, sans-serif; +$serif: 'Kepler Std', Georgia, serif; h1, %h1 { - font-size: 2.25rem; - font-weight: $light; - letter-spacing: 0.5px; - margin-bottom: 2.5rem; + font-family: $serif; + font-size: 3rem; + font-weight: $regular; + margin-bottom: 0; } h2, %h2 { - font-size: 1rem; - font-weight: $medium; - letter-spacing: 4px; - line-height: 1; - text-align: center; - text-transform: uppercase; + font-family: $serif; + font-size: 2.5rem; + font-weight: $regular; + margin-bottom: 0; } h3, %h3 { + font-family: $serif; font-size: 1.5rem; letter-spacing: 0.5px; } @@ -34,7 +62,10 @@ h4, %h4 { } h5, %h5 { - font-size: 0.75rem; + font-size: 1.125rem; + font-weight: $medium; + letter-spacing: 1.5px; + line-height: 1rem; text-transform: uppercase; } diff --git a/src/sass/style.scss b/src/sass/style.scss index f8c218a..999d760 100644 --- a/src/sass/style.scss +++ b/src/sass/style.scss @@ -5,3 +5,6 @@ @import 'base'; @import 'layout'; @import 'responsive'; +@import 'agtech'; +@import 'nav'; +@import 'sections'; diff --git a/src/templates/agtech/index.hbs b/src/templates/agtech/index.hbs new file mode 100644 index 0000000..c43f858 --- /dev/null +++ b/src/templates/agtech/index.hbs @@ -0,0 +1,71 @@ +{{#extend "base"}} +{{#content "main" mode="prepend"}} +
    +
  • +
  • + +
+
    +
  • + +
    +
    +
    +
    +

    Exploring the intersection of agriculture and technology.

    +

    Research grant funded by Interact, a nonprofit fellowship.

    +
    +
    +
    + +
    +
    +
    +
    • +
  • +
    +

    Members

    +
      + {{#each team}} +
    • +
      + +
      +

      {{ this.name }}

      +
      • + {{/each}} +
    +
    +
    • +
  • +
    +

    Get in touch

    + agtech@joininteract.com +
    +
    +
    +

    © 2020 Interact

    +
    +
    +
    • +
+ + +{{/content}} +{{/extend}} diff --git a/src/templates/index.hbs b/src/templates/index.hbs index f5438a9..8975a5b 100644 --- a/src/templates/index.hbs +++ b/src/templates/index.hbs @@ -1,5 +1,5 @@ {{#extend "base"}} -{{#content "main" mode="prepend"}} -Hello World! +{{#content "headmeta" mode="prepend"}} + {{/content}} {{/extend}}