Full Code of CloudCannon/frisco-jekyll-template for AI

Repository: CloudCannon/frisco-jekyll-template
Branch: main
Commit: f2d8e656f110
Files: 51
Total size: 63.4 KB

Directory structure:
gitextract_xf_o25ns/

├── .cloudcannon/
│   └── initial-site-settings.json
├── .gitignore
├── 404.html
├── Gemfile
├── LICENSE
├── README.md
├── _config.yml
├── _data/
│   ├── footer.yml
│   └── navigation.yml
├── _includes/
│   ├── list-posts.html
│   ├── navigation.html
│   ├── post-title.html
│   ├── relative-src.html
│   └── social-icon.html
├── _layouts/
│   ├── archive.html
│   ├── default.html
│   ├── page.html
│   └── post.html
├── _posts/
│   ├── 2016-07-20-what-is-a-friend.md
│   ├── 2016-07-28-psychology-of-friendship.md
│   ├── 2016-08-02-life-cycle.md
│   ├── 2016-08-06-development-issues.md
│   ├── 2016-08-12-health.md
│   └── _defaults.md
├── _sass/
│   ├── blog.scss
│   ├── contact.scss
│   ├── elements.scss
│   ├── footer.scss
│   ├── forms.scss
│   ├── landing-page.scss
│   ├── layout.scss
│   ├── mixins/
│   │   ├── columns.scss
│   │   └── flexbox.scss
│   ├── navigation.scss
│   ├── staff.scss
│   └── variables.scss
├── _staff_members/
│   ├── _defaults.md
│   ├── anna.md
│   ├── betty.md
│   ├── gerald.md
│   ├── james.md
│   ├── robin.md
│   └── tom.md
├── about.html
├── blog/
│   └── index.html
├── contact-success.html
├── contact.html
├── css/
│   └── screen.scss
├── index.html
├── js/
│   └── main.js
└── robots.txt

================================================
FILE CONTENTS
================================================

================================================
FILE: .cloudcannon/initial-site-settings.json
================================================
{
    "ssg": "jekyll",
    "build_configuration": {
        "preserved_paths": "",
        "environment_variables": [],
        "jekyll_environment": "production",
		"drafts": false,
		"use_local_bundle": true,
		"enable_bundle_cache": true
    }
}

================================================
FILE: .gitignore
================================================
_site/
.sass-cache/
.jekyll-metadata


================================================
FILE: 404.html
================================================
---
title: Not Found
description: This page doesn't exist!
image: https://source.unsplash.com/BcoGknSqlDc/2000x1322?a=.png
permalink: /404.html
layout: page
---


================================================
FILE: Gemfile
================================================
source 'https://rubygems.org'

gem 'jekyll', '3.8.4'

group :jekyll_plugins do
  gem 'jekyll-archives', '2.1.1'
  gem 'jekyll-feed', '0.11.0'
  gem 'jekyll-paginate', '1.1.0'
  gem 'jekyll-seo-tag', '2.5.0'
  gem 'jekyll-sitemap', '1.2.0'
end


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2016 CloudCannon

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
# Frisco

App promotion themed template for Jekyll. Browse through a [live demo](https://brave-submarine.cloudvent.net/).
Increase the web presence of a App with this configurable theme.

![Frisco template screenshot](images/_screenshot.jpg)

Frisco was made by [CloudCannon](http://cloudcannon.com/), the Cloud CMS for Jekyll.

Find more templates, themes and step-by-step Jekyll tutorials at [CloudCannon Academy](https://learn.cloudcannon.com/).

[![Deploy to CloudCannon](https://buttons.cloudcannon.com/deploy.svg)](https://app.cloudcannon.com/register#sites/connect/github/CloudCannon/frisco-jekyll-template)

## Features

* Contact form
* Pre-built pages
* Pre-styled components
* Blog with pagination
* Post category pages
* Disqus comments for posts
* Staff and author system
* Configurable footer
* Optimised for editing in [CloudCannon](http://cloudcannon.com/)
* RSS/Atom feed
* SEO tags
* Google Analytics

## Setup

1. Add your site and author details in `_config.yml`.
2. Add your Google Analytics and Disqus keys to `_config.yml`.
3. Get a workflow going to see your site's output (with [CloudCannon](https://app.cloudcannon.com/) or Jekyll locally).

## Develop

Frisco was built with [Jekyll](http://jekyllrb.com/) version 3.3.1, but should support newer versions as well.

Install the dependencies with [Bundler](http://bundler.io/):

~~~bash
$ bundle install
~~~

Run `jekyll` commands through Bundler to ensure you're using the right versions:

~~~bash
$ bundle exec jekyll serve
~~~

## Editing

Frisco is already optimised for adding, updating and removing pages, staff, advice, company details and footer elements in CloudCannon.

### Posts

* Add, update or remove a post in the *Posts* collection.
* The **Staff Author** field links to members in the **Staff Members** collection.
* Documentation pages are organised in the navigation by category, with URLs based on the path inside the `_docs` folder.
* Change the defaults when new posts are created in `_posts/_defaults.md`.

### Contact Form

* Preconfigured to work with CloudCannon, but easily changed to another provider (e.g. [FormSpree](https://formspree.io/)).

### Staff

* Reused around the site to save multiple editing locations.

### Footer

* Exposed as a data file to give clients better access.
* Set in the *Data* / *Navigation* section.

### Footer

* Exposed as a data file to give clients better access.
* Set in the *Data* / *Footer* section.


================================================
FILE: _config.yml
================================================
# ----
# Site

title: Frisco Template
url: "https://brave-submarine.cloudvent.net"
baseurl:
google_analytics_key:
google_maps_javascript_api_key:
disqus_shortname:

# Values for the jekyll-seo-tag gem (https://github.com/jekyll/jekyll-seo-tag)
logo: /siteicon.png
description: App marketing template for Jekyll.
author:
  name:
  email:
  twitter: # twitter username without the @ symbol
social:
  name: Frisco Template
  links:
    - https://github.com/CloudCannon/frisco-jekyll-template

# -----
# Build

timezone: Etc/UTC

permalink: pretty

plugins:
  - jekyll-sitemap
  - jekyll-seo-tag
  - jekyll-feed
  - jekyll-paginate
  - jekyll-archives

exclude:
  - Gemfile
  - Gemfile.lock
  - README.md
  - LICENCE

collections:
  staff_members:
    _hide_content: true
    _icon: account_circle

paginate: 10
paginate_path: "/blog/:num/"

jekyll-archives:
  enabled: ['categories']

defaults:
  -
    scope:
      path: ""
      type: "staff_members"
    values:
      _options:
        image_path:
          width: 440
          height: 440
          uploads_dir: "/images/staff_members"
  -
    scope:
      path: ""
    values:
      layout: "default"
  -
    scope:
      type: "posts"
    values:
      layout: "post"
      _options:
        image:
          width: 2000
          height: 1322
          resize_style: cover
          uploads_dir: "/images/post_uploads"
        content:
          width: 1500
          height: 2000
          uploads_dir: "/images/post_uploads"
  -
    scope:
      path: "contact-success.html"
    values:
      layout: "page"
  -
    scope:
      path: ""
      type: "pages"
    values:
      image:
        width: 2000
        height: 1322
        resize_style: cover
      bottom_image:
        width: 2000
        height: 1322
        resize_style: cover

# -----------
# CloudCannon

social_icons:
  - Facebook
  - Google Plus
  - Instagram
  - LinkedIn
  - Pinterest
  - Tumblr
  - Twitter
  - YouTube
  - Email
  - RSS

_comments:
  description: Text shown when sharing on social media
  blurb: Short bio or description of this person


================================================
FILE: _data/footer.yml
================================================
left_links:
  - name: Blog
    link: /blog/
  - name: About
    link: /about/
  - name: Contact
    link: /contact/
right_links:
  - name:
    link: https://facebook.com/cloudcannon
    new_window: true
    social_icon: Facebook
  - name:
    link: https://twitter.com/cloudcannon
    social_icon: Twitter
    new_window: true
  - name:
    link: https://youtube.com/c/cloudcannon
    social_icon: YouTube
    new_window: true
  - name:
    link: https://instagram.com/
    social_icon: Instagram
    new_window: true
  - name:
    link: /feed.xml
    social_icon: RSS


================================================
FILE: _data/navigation.yml
================================================
- name: Blog
  link: /blog/
- name: About
  link: /about/
- name: Contact
  link: /contact/


================================================
FILE: _includes/list-posts.html
================================================
{% for post in include.posts %}
	<li class="blog-post">
		<h2><a href="{% include relative-src.html src=post.url %}">{{ post.title }}</a></h2>
		{% include post-title.html post=post %}
		<div class="post-content">
			{{ post.excerpt }}
			<div class="button"><a href="{% include relative-src.html src=post.url %}">Read More</a></div>
		</div>
	</li>
{% endfor %}


================================================
FILE: _includes/navigation.html
================================================
<nav>
	<a class="nav-toggle" id="open-nav" href="#">&#9776;</a>
	{% for link in site.data.navigation %}
		{% assign class = "" %}
		{% if link.highlight %}
			{% assign class = class | append: " highlight" %}
		{% endif %}

		{% if link.link == page.url %}
			{% assign class = class | append: " active" %}
		{% endif %}
		<a href="{% include relative-src.html src=link.link %}" class="{{ class }}" {% if link.new_window %}target="_blank"{% endif %}>{{ link.name }}</a>
	{% endfor %}
</nav>


================================================
FILE: _includes/post-title.html
================================================
<p class="post-details">
	{% for category in include.post.categories %}
		<span class="blog-filter">
			<a href="{{ site.baseurl }}/category/{{ category | slugify }}/">{{ category | capitalize }}</a>
		</span>
	{% endfor %}
	<span class="post-date">{{ include.post.date | date: "%B %d, %Y" }}</span>
</p>


================================================
FILE: _includes/relative-src.html
================================================
{% assign prefix = include.src | slice: 0, 2 %}{% assign protocol = include.src | slice: 0, 4 %}{% unless protocol == 'http' or prefix == "//" %}{{ site.baseurl }}{% endunless %}{{ include.src }}

================================================
FILE: _includes/social-icon.html
================================================
{% case include.icon %}
	{% when "Facebook" %}
		<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19,4V7H17A1,1 0 0,0 16,8V10H19V13H16V20H13V13H11V10H13V7.5C13,5.56 14.57,4 16.5,4M20,2H4A2,2 0 0,0 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z" /></svg>
	{% when "Instagram" %}
		<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" /></svg>
	{% when "LinkedIn" %}
		<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19,19H16V13.7A1.5,1.5 0 0,0 14.5,12.2A1.5,1.5 0 0,0 13,13.7V19H10V10H13V11.2C13.5,10.36 14.59,9.8 15.5,9.8A3.5,3.5 0 0,1 19,13.3M6.5,8.31C5.5,8.31 4.69,7.5 4.69,6.5A1.81,1.81 0 0,1 6.5,4.69C7.5,4.69 8.31,5.5 8.31,6.5A1.81,1.81 0 0,1 6.5,8.31M8,19H5V10H8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z" /></svg>
	{% when "Pinterest" %}
		<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M13,16.2C12.2,16.2 11.43,15.86 10.88,15.28L9.93,18.5L9.86,18.69L9.83,18.67C9.64,19 9.29,19.2 8.9,19.2C8.29,19.2 7.8,18.71 7.8,18.1C7.8,18.05 7.81,18 7.81,17.95H7.8L7.85,17.77L9.7,12.21C9.7,12.21 9.5,11.59 9.5,10.73C9.5,9 10.42,8.5 11.16,8.5C11.91,8.5 12.58,8.76 12.58,9.81C12.58,11.15 11.69,11.84 11.69,12.81C11.69,13.55 12.29,14.16 13.03,14.16C15.37,14.16 16.2,12.4 16.2,10.75C16.2,8.57 14.32,6.8 12,6.8C9.68,6.8 7.8,8.57 7.8,10.75C7.8,11.42 8,12.09 8.34,12.68C8.43,12.84 8.5,13 8.5,13.2A1,1 0 0,1 7.5,14.2C7.13,14.2 6.79,14 6.62,13.7C6.08,12.81 5.8,11.79 5.8,10.75C5.8,7.47 8.58,4.8 12,4.8C15.42,4.8 18.2,7.47 18.2,10.75C18.2,13.37 16.57,16.2 13,16.2M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z" /></svg>
	{% when "Tumblr" %}
		<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M16,11H13V14.9C13,15.63 13.14,16 14.1,16H16V19C16,19 14.97,19.1 13.9,19.1C11.25,19.1 10,17.5 10,15.7V11H8V8.2C10.41,8 10.62,6.16 10.8,5H13V8H16M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z" /></svg>
	{% when "Twitter" %}
		<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" /></svg>
	{% when "YouTube" %}
		<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z" /></svg>
	{% when "RSS" %}
		<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><circle cx="6.18" cy="17.82" r="2.18"/><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/></svg>
	{% when "Email" %}
		<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
{% endcase %}


================================================
FILE: _layouts/archive.html
================================================
---
layout: default
---

<section class="hero" style="background-image: url(https://source.unsplash.com/MqJX_8EaStM/2000x1322)">
	<div class="inner-hero text-container">
		<div class="hero-text-container">
			<h1>The latest news</h1>
			<p class="subtext">Hear the latest progress on Frisco and tips on making life long friends.</p>
		</div>
	</div>
</section>

<section>
	<div class="text-container">
		<p class="change-category">You're currently looking at advice categorised under <strong>{{ page.title }}</strong>. <a href="{{ site.baseurl }}/blog/">View all posts</a> instead.</p>

		<ul class="blog-posts">
			{% include list-posts.html posts=page.posts %}
		</ul>
	</div>
</section>


================================================
FILE: _layouts/default.html
================================================
<!DOCTYPE html>

<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		{% seo %}
		{% feed_meta %}

		<link rel="apple-touch-icon" href="{{ site.baseurl }}/apple-touch-icon.png">
		<link rel="icon" type="image/png" href="{{ site.baseurl }}/touch-icon.png" sizes="192x192">
		<link rel="icon" type="image/png" href="{{ site.baseurl }}/images/favicon.png">

		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300|Rubik:300">
		<link rel="stylesheet" href="{{ site.baseurl }}/css/screen.css">

		{% if jekyll.environment == 'production' and site.google_analytics_key != '' %}
			<script>
				window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
				ga('create', '{{ site.google_analytics_key }}', 'auto');
				ga('send', 'pageview');
			</script>
			<script async src='https://www.google-analytics.com/analytics.js'></script>
		{% endif %}
	</head>

	<body>
		<header id="mainHeader">
			<div class="container">
				<div class="company-name">
					<a href="{{ site.baseurl }}/">
						<span class="dark-logo"><img width="104" height="38" src="{{ site.baseurl }}/images/logo/dark.svg" alt="dark frisco logo"></span>
						<span class="light-logo"><img width="104" height="38" src="{{ site.baseurl }}/images/logo/light.svg" alt="light frisco logo"></span>
					</a>
				</div>
				{% include navigation.html %}
				<p class="editor-link"><a style="display:inline;" href="cloudcannon:collections/_data/navigation.yml" class="btn"><strong>&#9998;</strong> Edit navigation</a></p>
			</div>
		</header>

		{{ content }}

		<footer>
			<div class="container">
				<p class="editor-link"><a href="cloudcannon:collections/_data/footer.yml" class="btn"><strong>&#9998;</strong> Edit footer</a></p>
				<ul class="footer-left-links">
					{% for link in site.data.footer.left_links %}
						<li>
							<a {% if link.new_window %}target="_blank"{% endif %} href="{% include relative-src.html src=link.link %}" {% if link.social_icon %}class="{{ link.social_icon | slugify }}-icon"{% endif %}>
								{% if link.social_icon %}{% include social-icon.html icon=link.social_icon %}{% endif %}
								{{ link.name }}
							</a>
						</li>
					{% endfor %}
				</ul>
				<ul class="footer-right-links">
					{% for link in site.data.footer.right_links %}
						<li>
							<a {% if link.new_window %}target="_blank"{% endif %} href="{% include relative-src.html src=link.link %}" {% if link.social_icon %}class="{{ link.social_icon | slugify }}-icon"{% endif %}>
								{% if link.social_icon %}{% include social-icon.html icon=link.social_icon %}{% endif %}
								{{ link.name }}
							</a>
						</li>
					{% endfor %}
				</ul>
				<p class="copyright">
					<a href="https://cloudcannon.com/">
						Template by CloudCannon
					</a>
				</p>
			</div>
		</footer>

		<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script src="{{ site.baseurl }}/js/main.js"></script>
	</body>
</html>


================================================
FILE: _layouts/page.html
================================================
---
layout: default
---

<section class="hero" style="background-image: url({% include relative-src.html src=page.image %})">
	<div class="inner-hero text-container">
		<div class="hero-text-container">
			<h1>{{ page.title }}</h1>
			<p class="subtext">{{ page.description }}</p>
		</div>
	</div>
</section>

{{ content }}


================================================
FILE: _layouts/post.html
================================================
---
layout: page
---

<section>
	<div class="blog-post text-container">
		<p class="editor-link"><a href="cloudcannon:collections/{{ page.path }}" class="btn"><strong>&#9998;</strong> Edit Post</a></p>
		{% include post-title.html post=page %}

		<div class="post-content">
			{{ content }}

			<div class="author">
				{% assign author_id = page.author_staff_member | prepend: "/staff_members/" | append: "/" %}
				{% assign author = site.staff_members | where: "url", author_id | first %}
				<div class="square-image" style="background-image: url('{% include relative-src.html src=author.image_path %}')"></div>
				<p class="blurb">{{ author.blurb }}</p>
			</div>

			<div class="blog-navigation">
				{% if page.previous.url %}
					<a class="prev" href="{% include relative-src.html src=page.previous.url %}">&laquo; {{ page.previous.title }}</a>
				{% endif %}
				{% if page.next.url %}
					<a class="next" href="{% include relative-src.html src=page.next.url %}">{{ page.next.title }} &raquo;</a>
				{% endif %}
			</div>


			{% if site.disqus_shortname and page.comments %}
				<div id="disqus_thread"></div>
				<script>
						var disqus_shortname = '{{ site.disqus_shortname }}';
						var disqus_config = function () {
								this.page.url = "{{ page.url | prepend: site.url }}";
								this.page.identifier = "{{ page.id }}";
						};

						(function() {  // DON'T EDIT BELOW THIS LINE
								var d = document, s = d.createElement('script');

								s.src = '//' + disqus_shortname + '.disqus.com/embed.js';

								s.setAttribute('data-timestamp', +new Date());
								(d.head || d.body).appendChild(s);
						})();
				</script>
				<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
			{% endif %}
		</div>
	</div>
</section>


================================================
FILE: _posts/2016-07-20-what-is-a-friend.md
================================================
---
title: What is a friend?
date: 2016-07-20
description: Exploring the mechanics of friendship
categories:
  - friends
image: https://source.unsplash.com/collection/375719/2000x1322?a=.png
author_staff_member: anna
---
Friendship is a relationship of mutual affection between people. Friendship is a stronger form of interpersonal bond than an association. Friendship has been studied in academic fields such as sociology, social psychology, anthropology, and philosophy. Various academic theories of friendship have been proposed, including social exchange theory, equity theory, relational dialectics, and attachment styles. A World Happiness Database study found that people with close friendships are happier.

![Checkmate](https://source.unsplash.com/random/1500x1000)

## Forms of friendship

Although there are many forms of friendship, some of which may vary from place to place, certain characteristics are present in many types of bond. Such characteristics include affection, sympathy, empathy, honesty, altruism, mutual understanding, and compassion, enjoyment of each other's company, trust, and the ability to be oneself, express one's feelings, and make mistakes without fear of judgment from the friend.

While there is no practical limit on what types of people can form a friendship, friends tend to share common backgrounds, occupations, or interests and have similar demographics.

![Raspberries](https://source.unsplash.com/random/1500x1001)


================================================
FILE: _posts/2016-07-28-psychology-of-friendship.md
================================================
---
title: Psychology of friendship
date: 2016-07-28
description: How are our brains wired for friendship?
categories:
  - friendship
  - science
image: https://source.unsplash.com/collection/375719/2000x1322?a=.png
author_staff_member: betty
---

In the typical sequence of an individual's emotional development, friendships come after parental bonding and before pair bonding. In the intervening period between the end of early childhood and the onset of full adulthood, friendships are often the most important relationships in the emotional life of the adolescent, and are often more intense than relationships later in life. The absence of friends can be emotionally damaging.

![Fair](https://source.unsplash.com/random/1500x1000)

## Evolution

The evolutionary psychology approach to human development has led to the theory of Dunbar's number, proposed by British anthropologist Robin Dunbar. He theorized that there is a limit of approximately 150 people with whom a human can maintain stable social relationships.

## Childhood

In childhood, friendships are often based on the sharing of toys, and the enjoyment received from performing activities together. These friendships are maintained through affection, sharing, and creative playtime. While sharing is difficult for children at this age, they are more likely to share with someone they consider to be a friend. As children mature, they become less individualized and are more aware of others.

![Gleise](https://source.unsplash.com/random/1500x1001)

They begin to see their friends' points of view, and enjoy playing in groups. They also experience peer rejection as they move through the middle childhood years. Establishing good friendships at a young age helps a child to be better acclimated in society later on in their life. In a 1975 study, Bigelow and La Gaipa found that expectations for a "best friend" become increasingly complex as a child gets older. The study investigated such criteria in a sample of 480 children between the ages of six and fourteen.

Their findings highlighted three stages of development in friendship expectations. In the first stage, children emphasized shared activities and the importance of geographical closeness. In the second, they emphasized sharing, loyalty, and commitment. In the final stage, they increasingly desired similar attitudes, values, and interests.

## Prize friendships

According to Berndt, children prize friendships that are high in pro-social behavior, intimacy, and other positive features; they are troubled by friendships that are high in conflict, dominance, rivalry, and other negative features. High-quality friendships have often been assumed to have positive effects on many aspects of children's social development. Perceived benefits from such friendships include enhanced social success, but they apparently do not include an effect on children's general self-esteem.

Numerous studies with adults suggest that friendships and other supportive relationships do enhance self-esteem. Other potential benefits of friendship include the opportunity to learn about empathy and problem solving. Coaching from parents can be useful in helping children to make friends. Eileen Kennedy-Moore describes three key ingredients of children's friendship formation: (1) openness, (2) similarity, and (3) shared fun. Parents can also help children understand social guidelines they haven't learned on their own.

Drawing from research by Robert Selman and others, Kennedy-Moore outlines developmental stages in children's friendship, reflecting an increasing capacity to understand others' perspectives: "I Want It My Way", "What's In It For Me?", "By the Rules", "Caring and Sharing", and "Friends Through Thick and Thin."


================================================
FILE: _posts/2016-08-02-life-cycle.md
================================================
---
title: Life cycle of friendships
date: 2016-08-02
description: How do friendships develop?
categories:
  - friendship
image: https://source.unsplash.com/collection/375719/2000x1322?a=.png
author_staff_member: anna
---
Three significant factors make the formation of a friendship possible:

* Proximity – nearness or having a place or places to interact
* Repeated, unplanned interactions
* A setting that encourages people to confide in each other

![Coins](https://source.unsplash.com/random/1500x1000)

## Dissolution
Friendships end for many different reasons. Sometimes friends move away from each other and the relationship wanes due to the distance. Digital technology has however made geographic distance less of an obstacle to maintaining a friendship. Sometimes divorce causes an end to friendships, as people drop one or both of the divorcing people. For young people, friendships may end as a result of acceptance into new social groups.

![American River](https://source.unsplash.com/random/1500x1001)

Friendships may end by fading quietly away or may end suddenly. How and whether to talk about the end of a friendship is a matter of etiquette that depends on the circumstances.


================================================
FILE: _posts/2016-08-06-development-issues.md
================================================
---
title: Development Issues
date: 2016-08-06
description: How do development issues affect friendship?
categories:
  - friendship
  - psychology
image: https://source.unsplash.com/collection/375719/2000x1322?a=.png
author_staff_member: james
---
Children with Attention deficit hyperactivity disorder (ADHD) may not have difficulty forming friendships, though they may have a hard time keeping them, due to impulsive behavior and hyperactivity. Children with Attention deficit disorder (ADD) may not have as much trouble keeping and maintaining friendships, though inattentiveness may complicate the processes.

![Cat](https://source.unsplash.com/random/1500x1000)

Parents of children with ADHD worry about their children's ability to form long-lasting friendships. According to Edelman, "Making and keeping friends requires 'hundreds' of skills – talking, listening, sharing, being empathetic, and so on. These skills do not come naturally to children with ADD". Difficulty listening to others also inhibits children with ADD or ADHD from forming good friendships. Children with these disorders can also drive away others by "blurting out unkind comments". Their disruptive behavior can become too distracting to classmates.

![Lady bugs](https://source.unsplash.com/random/1500x1001)

## Autism
Children with autism spectrum disorders usually have some difficulty forming friendships. Certain symptoms of autism can interfere with the formation of interpersonal relations, such as a preference for routine actions, resistance to change, obsession with particular interests or rituals, and a lack of typical social skills. Children with autism spectrum disorders have been found to be more likely to be close friends of one person, rather than having groups of friends. Additionally, they are more likely to be close friends of other children with some sort of a disability.[26] A sense of parental attachment aids in the quality of friendships in children with autism spectrum disorders; a sense of attachment with one's parents compensates for a lack of social skills that would usually inhibit friendships.

![apricot](https://source.unsplash.com/random/1500x1002)

With time, moderation, and proper instruction, children with autism spectrum disorder are able to form friendships after realizing their own strengths and weaknesses. A study done by Frankel et al. showed that parental intervention and instruction plays an important role in such children developing friendships. Along with parental intervention, school professionals play an important role in teaching social skills and peer interaction. Paraprofessionals, specifically one-on-one aides and classroom aides, are often placed with children with autism spectrum disorders in order to facilitate friendships and guide the child in making and maintaining substantial friendships.

![Marketing](https://source.unsplash.com/random/1500x1003)

Although lessons and training may help peers of children with autism, bullying is still a major concern in social situations. According to Anahad O'Connor of The New York Times, bullying is most likely to occur against autistic children who have the most potential to live independently, such as those with Asperger syndrome. Such children are more at risk because they have as many of the rituals and lack of social skills as children with full autism, but they are more likely to be mainstreamed in school, since they are on the higher-functioning end of the autism spectrum. Children on the autism spectrum have more difficulty picking up on social cues of when they are maliciously being made fun of, so they do not always know when they are being bullied.


================================================
FILE: _posts/2016-08-12-health.md
================================================
---
title: Health effects of friendship
date: 2016-08-12
description: How does friendship play a role in your health?
categories:
  - friendship
  - health
image: https://source.unsplash.com/collection/375719/2000x1322?a=.png
author_staff_member: tom
---

Conventional wisdom suggests that good friendships enhance an individual's sense of happiness and overall well-being. Indeed, a number of studies have found that strong social supports improve a woman's prospects for good health and longevity. Conversely, loneliness and a lack of social supports have been linked to an increased risk of heart disease, viral infections, and cancer, as well as higher mortality rates overall. Two researchers have even termed friendship networks a "behavioral vaccine" that boosts both physical and mental health.

![Man](https://source.unsplash.com/random/1500x1000)

While there is an impressive body of research linking friendship and health, the precise reasons for the connection remain unclear. Most of the studies in this area are large prospective studies that follow people over a period of time, and while there may be a correlation between the two variables (friendship and health status), researchers still do not know if there is a cause and effect relationship, such as the notion that good friendships actually improve health.

![Thai](https://source.unsplash.com/random/1500x1001)

A number of theories have attempted to explain this link. These theories have included that good friends encourage their friends to lead more healthy lifestyles; that good friends encourage their friends to seek help and access services when needed; that good friends enhance their friends' coping skills in dealing with illness and other health problems; and that good friends actually affect physiological pathways that are protective of health.

![lavender flowers](https://source.unsplash.com/random/1500x1002)


================================================
FILE: _posts/_defaults.md
================================================
---
title:
date:
description:
categories:
image:
author_staff_member:
---


================================================
FILE: _sass/blog.scss
================================================
.blog-posts {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 1em;

	li {
		padding: 50px 0;
	}

	.blog-post {
		padding: 18px 0;

		&:first-child {
			padding-top: 50px;
		}

		.post-details {
			padding-top: 15px;

		}
	}
}

.blog-post {

	.author {
		padding: 30px 0 0 0;
		border: 1px solid #eee;
		margin: 30px 0;
		font-size: .8em;

		.square-image {
			width: 125px;
			height: 125px;
		}
		.blurb {
			text-align: center;
		}
	}
	h3 {
		margin: 0;
		a {
			color: #000;
			text-decoration: none;
			font-weight: normal;
			font-size: 1.3em;
		}
	}

	h2 {
		text-align: left;
		font-size: 2.6em;
		margin: 0;
	}

	.post-details {
		border-bottom: 1px solid #eee;
		font-size: .9em;
		margin: 0;
		padding: 40px 0 0 0;

		.blog-filter {
			display: inline-block;
			text-align: left;

			a {
				position: relative;
				top: -5px;
			}
		}

		a {
			text-decoration: none;
		}

		.post-date {
			float: right;
		}

		&:after {
			content: "";
			display: table;
			clear: both;
		}
	}

	.post-content {
		padding: 0 0 40px 0;

		.button {
			margin: 30px 0 0 0;
		}
	}
}

.pagination {
	text-align: center;
}

.blog-filter {
	text-align: center;
	a {
		background: #eee;
    padding: 3px 5px;
    font-size: .8em;
    border-radius: 5px;
    color: #888;
		transition: .2s ease-in-out;

		&:hover {
			color: #555;
			text-decoration: none;
		}
	}
}

.blog-filter.cross a {
	padding-right: 8px;

	&:after {
		content: "x";
		font-size: .5em;
		position: relative;
		bottom: 4px;
		right: -3px;
	}
}

.change-category {
	margin: 0;
	padding: 30px 0;
}

.blog-navigation {
	font-size: 14px;
	display: block;
	width: auto;
	overflow: hidden;
	a {
		display: block;
		width: 50%;
		float: left;
		margin: 1em 0;
	}

	.next {
		text-align: right;
	}
}

.pagination {
	padding: 30px
}


================================================
FILE: _sass/contact.scss
================================================
.map {
	width: 100%;
	height: 440px;
}

.contact-box {
	margin: 0 auto;

	form {
		width: 100%
	}

	p {
		margin: 0;
	}

	.contact-form, .contact-details  {
		@media #{$desktop} {
			-webkit-flex: 1;
			flex: 1;
		}
	}

	.contact-details {
		font-size: .9em;
		margin-top: 60px;
	}
}


================================================
FILE: _sass/elements.scss
================================================
html {
	background: #2b2b40;
}

html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Rubik', sans-serif;
}

a {
	color: #00a4ca;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	max-width: 100%;
}

h1 strong, h2 strong {
	font-weight: 700;
}

h1 {
	font-weight: 300;
	font-size: 3.8em;
	margin: 0;
}

h2 {
	font-weight: 300;
	font-size: 3em;
	margin: 0 0 30px 0;
	line-height: 1.2em;
}

h3 {
	margin: 20px 0 10px 0;
}

h2 a {
	color: #000;

	&:hover {
		text-decoration: none;
	}
}

p, address, ul {
	font-size: 1.38em;
	margin-bottom: 20px;
	font-weight: 300;
	line-height: 1.6em;
	font-family: 'Lato', sans-serif;
}


================================================
FILE: _sass/footer.scss
================================================
footer {
	font-size: .6em;
	position: relative;
	background: #2b2b40;
	color: #fff;

	&,
	a {
		color: #999;
	}

	a {
		text-decoration: none;
		padding: 0 10px;

		&:hover {
			color: #fff;
		}
	}

	ul {
		padding: 0;
		margin: 0;

		&.footer-right-links {
			float: left;
			@media #{$tablet} {
				float: right;
			}
		}

		&.footer-left-links {
			float: left;
		}

		li {
			list-style: none;
			margin: 15px auto;
			display: inline-block;

			a {

				&:hover {
					text-decoration: none;
				}
				svg {
					fill: #999;
					transition: fill 0.2s ease;
					vertical-align: middle;
					width: 18px;
					height: 18px;
				}

				&:hover svg {
					fill: #fff;
				}

				&.twitter-icon:hover svg {
					fill: #55acee;
				}

				&.google-plus-icon:hover svg {
					fill: #db4437;
				}

				&.youtube-icon:hover svg {
					fill: #cd201f;
				}

				&.instagram-icon:hover svg {
					fill: #f167f5;
				}

				&.linkedin-icon:hover svg {
					fill: #0077b5;
				}

				&.pinterest-icon:hover svg {
					fill: #bd081c;
				}

				&.rss-icon:hover svg {
					fill: #f26522;
				}
			}
		}
	}
}

.copyright {
	margin: 15px auto;
	float: left;

	a {
		color: #999;
	}

	@media #{$desktop} {
		text-align: center;
		float: none;
		padding: 16px 0;
		margin: 0;
	}
}


================================================
FILE: _sass/forms.scss
================================================
.button a, input[type=submit] {
	color: $brand-color;
	text-decoration: none;
	border: 2px solid $brand-color;
	transition: .2s ease-in-out;
	display: inline-block;
	padding: 16px 50px;
	background: #fff;
}

.button a:hover, input[type=submit]:hover {
	background: $brand-color;
	color: #fff;
	cursor: pointer;
}

.button.alt a {
	background: rgba(255,255,255,0);
	border: 2px solid rgba(255, 255, 255, 1);
	color: #fff;
}

.button.alt a:hover {
	background: #fff;
	color: $brand-color;
	text-shadow: none;
}

textarea, input, button, select { font-family: inherit; font-size: inherit; }

input[type=submit] {
	margin: 20px 0 0 0;
}

label, input, textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

textarea {
	resize: vertical;
	height: 150px;
}

label {
	margin: 20px 0 5px 0;
}

input, textarea {
	padding: 10px;
	font-size: 1em;
}

input, textarea {
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none;
	border: 1px solid #DDDDDD;
}

input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus {
	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	border: 1px solid rgba(81, 203, 238, 1);
}


================================================
FILE: _sass/landing-page.scss
================================================
.hero {
	color: #ffffff;
	text-align: center;
	height: 100vh;
	min-height: 550px;
	background-color: #333;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;

	&:before {
		content: "";
		background: linear-gradient(to bottom,rgba(0,0,0,.65) 0,rgba(0, 0, 0, 0) 100%);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 300px;
}

	p {
		color: #fff;
	}

	.inner-hero {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.hero-text-container {
		width: 600px;
		text-align: left;

		h1, h2, p, .button {
			text-shadow: 1px 1px 1px rgba(0,0,0,.8);
		}
	}

	.hero-text-right {
		position: absolute;
		right: 0;
	}
}

.image {
	text-align: center;
}

.bottom-cta {
	text-align: center;

	h2 {
		margin-bottom: 12px;
	}
}

@media #{$desktop} {
	.flex {
		@include flexbox;
		align-items: center;
		flex-direction: row;

		.text, .image {
			-webkit-flex: 1;
			flex: 1;
			padding: 0 20px;
		}
	}

	.content section:nth-child(even) .flex {
		flex-direction: row-reverse;
	}
}


================================================
FILE: _sass/layout.scss
================================================
.container, .text-container {
	margin: 0 auto;
	position: relative;
	padding: 0 20px;
}

.text-container {
	max-width: 750px;
}

.container {
	max-width: 1140px;
}

.dark-logo {
	display: none;
}

section {
	background: #fff;
}

.pad {
	padding: 60px 0;
}

header {
	color: #fff;
	padding: 15px 0;
	position: fixed;
	width: 100%;
	z-index: 9999;
	line-height: 0;

	.container {
		line-height: 0;
	}

	&.header-background {
		background-color: rgba(255,255,255,.95);
		color: #333;
		box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
		transition: background-color 0.2s ease;
		text-shadow: none;

		a {
			color: #333;
			@media #{$mid-point} {
				&:hover {
					border-bottom-color: rgba(80, 80, 80,.3);
					border-bottom-width: 5px;
				}
			}
		}

		.dark-logo {
			display: inline;
		}

		.light-logo {
			display: none;
		}
	}

	a {
		color: #fff;
		text-decoration: none;
		z-index: 1;
		position: relative;
		@media #{$mid-point} {
			height: 100%;
		}
		display: block;

		span {
			display: block;
			height: 100%;
		}

		&:hover {
			text-decoration: none;
		}
	}

	.company-name {
		font-size: 1.7em;
		display: inline-block;

		img {
			height: 30px;
			width: auto;
		}
	}
}

.content {
	background: #fff;
}

.info img {
		max-height: 650px;
}

.info {
	padding: 0 0 100px 0;

	&:first-child {
		padding-top: 100px;
	}
}

.subtext {
	margin-top: 10px;
}


.cta {
	margin: 25px 0 0 0;
}

.page h2 {
	text-align: center;
}

blockquote {
	padding: 18px 25px;
	margin: 0;
	quotes: "\201C""\201D""\2018""\2019";
	font-style: italic;

	cite {
		display: block;
		font-weight: bold;
		margin: 10px 0 0 0;
	}

	p {
		display: inline;
	}
}

blockquote:before {
	color: #ccc;
	content: open-quote;
	font-size: 4em;
	line-height: 0.1em;
	margin-right: 0.25em;
	vertical-align: -0.4em;
}

.square-image {
	width: 200px;
	height: 200px;
	border-radius: 200px;
	background-size:cover;
 	background-repeat:no-repeat;
	margin: 0 auto;
}

.page {
	margin-bottom: 0;
	padding-bottom: 80px;
}

.center-text {
	text-align: center;
}

.learn-more {
	position: absolute;
	left: 0;
	bottom: 30px;
	text-align: center;
	font-size: 1.4em;
	width: 100%;

	a {
		text-decoration: none;
		color: #fff;
		opacity: .9;

		&:hover {
			opacity: 1;
		}
	}
	.arrow {
		font-size: .6em;
	}
}

.editor-link {
 	display: none;
	margin-top: 0;
	padding-top: 30px;
	.btn {
		border: 0;
		border-radius: 2px;
		width: 100%;
		max-width: 500px;
		box-sizing: border-box;
		font-size: 2rem;
		text-decoration: none;
		padding: 10px 15px;
		margin: 0;
		font-size: 18px;
		cursor: pointer;
		background-color: #f7e064;
		color: #333;
		box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.2);

		&:hover {
			background-color: #f4d525;
			color: #333;
		}
	}

}

.cms-editor-active .editor-link {
	display: block;
}


================================================
FILE: _sass/mixins/columns.scss
================================================
@mixin columns($value) {
	columns: $value;
	-webkit-columns: $value;
	-moz-columns: $value;
}


================================================
FILE: _sass/mixins/flexbox.scss
================================================
// Flexbox Mixins
// http://philipwalton.github.io/solved-by-flexbox/
// https://github.com/philipwalton/solved-by-flexbox
//
// Copyright (c) 2013 Brian Franco
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
// The above copyright notice and this permission notice shall be included
// in all copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
// This is a set of mixins for those who want to mess around with flexbox
// using the native support of current browsers. For full support table
// check: http://caniuse.com/flexbox
//
// Basically this will use:
//
// * Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
// * Final standards syntax (FF, Safari, Chrome, IE11, Opera)
//
// This was inspired by:
//
// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
//
// With help from:
//
// * http://w3.org/tr/css3-flexbox/
// * http://the-echoplex.net/flexyboxes/
// * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
// * http://css-tricks.com/using-flexbox/
// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
// * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes

//----------------------------------------------------------------------

// Flexbox Containers
//
// The 'flex' value causes an element to generate a block-level flex
// container box.
//
// The 'inline-flex' value causes an element to generate a inline-level
// flex container box.
//
// display: flex | inline-flex
//
// http://w3.org/tr/css3-flexbox/#flex-containers
//
// (Placeholder selectors for each type, for those who rather @extend)

@mixin flexbox {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
}

%flexbox { @include flexbox; }

//----------------------------------

@mixin inline-flex {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
}

%inline-flex { @include inline-flex; }

//----------------------------------------------------------------------

// Flexbox Direction
//
// The 'flex-direction' property specifies how flex items are placed in
// the flex container, by setting the direction of the flex container's
// main axis. This determines the direction that flex items are laid out in.
//
// Values: row | row-reverse | column | column-reverse
// Default: row
//
// http://w3.org/tr/css3-flexbox/#flex-direction-property

@mixin flex-direction($value: row) {
	@if $value == row-reverse {
		-webkit-box-direction: reverse;
		-webkit-box-orient: horizontal;
	} @else if $value == column {
		-webkit-box-direction: normal;
		-webkit-box-orient: vertical;
	} @else if $value == column-reverse {
		-webkit-box-direction: reverse;
		-webkit-box-orient: vertical;
	} @else {
		-webkit-box-direction: normal;
		-webkit-box-orient: horizontal;
	}
	-webkit-flex-direction: $value;
	-moz-flex-direction: $value;
	-ms-flex-direction: $value;
	flex-direction: $value;
}
	// Shorter version:
	@mixin flex-dir($args...) { @include flex-direction($args...); }

//----------------------------------------------------------------------

// Flexbox Wrap
//
// The 'flex-wrap' property controls whether the flex container is single-line
// or multi-line, and the direction of the cross-axis, which determines
// the direction new lines are stacked in.
//
// Values: nowrap | wrap | wrap-reverse
// Default: nowrap
//
// http://w3.org/tr/css3-flexbox/#flex-wrap-property

@mixin flex-wrap($value: nowrap) {
	// No Webkit Box fallback.
	-webkit-flex-wrap: $value;
	-moz-flex-wrap: $value;
	@if $value == nowrap {
		-ms-flex-wrap: none;
	} @else {
		-ms-flex-wrap: $value;
	}
	flex-wrap: $value;
}

//----------------------------------------------------------------------

// Flexbox Flow (shorthand)
//
// The 'flex-flow' property is a shorthand for setting the 'flex-direction'
// and 'flex-wrap' properties, which together define the flex container's
// main and cross axes.
//
// Values: <flex-direction> | <flex-wrap>
// Default: row nowrap
//
// http://w3.org/tr/css3-flexbox/#flex-flow-property

@mixin flex-flow($values: (row nowrap)) {
	// No Webkit Box fallback.
	-webkit-flex-flow: $values;
	-moz-flex-flow: $values;
	-ms-flex-flow: $values;
	flex-flow: $values;
}

//----------------------------------------------------------------------

// Flexbox Order
//
// The 'order' property controls the order in which flex items appear within
// their flex container, by assigning them to ordinal groups.
//
// Default: 0
//
// http://w3.org/tr/css3-flexbox/#order-property

@mixin order($int: 0) {
	-webkit-box-ordinal-group: $int + 1;
	-webkit-order: $int;
	-moz-order: $int;
	-ms-flex-order: $int;
	order: $int;
}

//----------------------------------------------------------------------

// Flexbox Grow
//
// The 'flex-grow' property sets the flex grow factor. Negative numbers
// are invalid.
//
// Default: 0
//
// http://w3.org/tr/css3-flexbox/#flex-grow-property

@mixin flex-grow($int: 0) {
	-webkit-box-flex: $int;
	-webkit-flex-grow: $int;
	-moz-flex-grow: $int;
	-ms-flex-positive: $int;
	flex-grow: $int;
}

//----------------------------------------------------------------------

// Flexbox Shrink
//
// The 'flex-shrink' property sets the flex shrink factor. Negative numbers
// are invalid.
//
// Default: 1
//
// http://w3.org/tr/css3-flexbox/#flex-shrink-property

@mixin flex-shrink($int: 1) {
	-webkit-flex-shrink: $int;
	-moz-flex-shrink: $int;
	-ms-flex-negative: $int;
	flex-shrink: $int;
}

//----------------------------------------------------------------------

// Flexbox Basis
//
// The 'flex-basis' property sets the flex basis. Negative lengths are invalid.
//
// Values: Like "width"
// Default: auto
//
// http://www.w3.org/TR/css3-flexbox/#flex-basis-property

@mixin flex-basis($value: auto) {
	-webkit-flex-basis: $value;
	-moz-flex-basis: $value;
	-ms-flex-preferred-size: $value;
	flex-basis: $value;
}

//----------------------------------------------------------------------

// Flexbox "Flex" (shorthand)
//
// The 'flex' property specifies the components of a flexible length: the
// flex grow factor and flex shrink factor, and the flex basis. When an
// element is a flex item, 'flex' is consulted instead of the main size
// property to determine the main size of the element. If an element is
// not a flex item, 'flex' has no effect.
//
// Values: none | <flex-grow> <flex-shrink> || <flex-basis>
// Default: See individual properties (1 1 0).
//
// http://w3.org/tr/css3-flexbox/#flex-property

@mixin flex($fg: 1, $fs: null, $fb: null) {

	// Set a variable to be used by box-flex properties
	$fg-boxflex: $fg;

	// Box-Flex only supports a flex-grow value so let's grab the
	// first item in the list and just return that.
	@if type-of($fg) == 'list' {
		$fg-boxflex: nth($fg, 1);
	}

	-webkit-box-flex: $fg-boxflex;
	-webkit-flex: $fg $fs $fb;
	-moz-box-flex: $fg-boxflex;
	-moz-flex: $fg $fs $fb;
	-ms-flex: $fg $fs $fb;
	flex: $fg $fs $fb;
}

//----------------------------------------------------------------------

// Flexbox Justify Content
//
// The 'justify-content' property aligns flex items along the main axis
// of the current line of the flex container. This is done after any flexible
// lengths and any auto margins have been resolved. Typically it helps distribute
// extra free space leftover when either all the flex items on a line are
// inflexible, or are flexible but have reached their maximum size. It also
// exerts some control over the alignment of items when they overflow the line.
//
// Note: 'space-*' values not supported in older syntaxes.
//
// Values: flex-start | flex-end | center | space-between | space-around
// Default: flex-start
//
// http://w3.org/tr/css3-flexbox/#justify-content-property

@mixin justify-content($value: flex-start) {
	@if $value == flex-start {
		-webkit-box-pack: start;
		-ms-flex-pack: start;
	} @else if $value == flex-end {
		-webkit-box-pack: end;
		-ms-flex-pack: end;
	} @else if $value == space-between {
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
	} @else if $value == space-around {
		-ms-flex-pack: distribute;
	} @else {
		-webkit-box-pack: $value;
		-ms-flex-pack: $value;
	}
	-webkit-justify-content: $value;
	-moz-justify-content: $value;
	justify-content: $value;
}
	// Shorter version:
	@mixin flex-just($args...) { @include justify-content($args...); }

//----------------------------------------------------------------------

// Flexbox Align Items
//
// Flex items can be aligned in the cross axis of the current line of the
// flex container, similar to 'justify-content' but in the perpendicular
// direction. 'align-items' sets the default alignment for all of the flex
// container's items, including anonymous flex items. 'align-self' allows
// this default alignment to be overridden for individual flex items. (For
// anonymous flex items, 'align-self' always matches the value of 'align-items'
// on their associated flex container.)
//
// Values: flex-start | flex-end | center | baseline | stretch
// Default: stretch
//
// http://w3.org/tr/css3-flexbox/#align-items-property

@mixin align-items($value: stretch) {
	@if $value == flex-start {
		-webkit-box-align: start;
		-ms-flex-align: start;
	} @else if $value == flex-end {
		-webkit-box-align: end;
		-ms-flex-align: end;
	} @else {
		-webkit-box-align: $value;
		-ms-flex-align: $value;
	}
	-webkit-align-items: $value;
	-moz-align-items: $value;
	align-items: $value;
}

//----------------------------------

// Flexbox Align Self
//
// Values: auto | flex-start | flex-end | center | baseline | stretch
// Default: auto

@mixin align-self($value: auto) {
	// No Webkit Box Fallback.
	-webkit-align-self: $value;
	-moz-align-self: $value;
	@if $value == flex-start {
		-ms-flex-item-align: start;
	} @else if $value == flex-end {
		-ms-flex-item-align: end;
	} @else {
		-ms-flex-item-align: $value;
	}
	align-self: $value;
}

//----------------------------------------------------------------------

// Flexbox Align Content
//
// The 'align-content' property aligns a flex container's lines within the
// flex container when there is extra space in the cross-axis, similar to
// how 'justify-content' aligns individual items within the main-axis. Note,
// this property has no effect when the flexbox has only a single line.
//
// Values: flex-start | flex-end | center | space-between | space-around | stretch
// Default: stretch
//
// http://w3.org/tr/css3-flexbox/#align-content-property

@mixin align-content($value: stretch) {
	// No Webkit Box Fallback.
	-webkit-align-content: $value;
	-moz-align-content: $value;
	@if $value == flex-start {
		-ms-flex-line-pack: start;
	} @else if $value == flex-end {
		-ms-flex-line-pack: end;
	} @else {
		-ms-flex-line-pack: $value;
	}
	align-content: $value;
}


================================================
FILE: _sass/navigation.scss
================================================
.nav-open nav {
	border-bottom: 1px dotted rgba(255, 255, 255, .2);
	padding: 10px 0;
	a {
		display: block;
		padding: 30px 0;
	}

	@media #{$mid-point} {
		border: 0;
		padding: 0 20px;

		a {
			display: inline;
		}
	}
}

nav {
	text-transform: uppercase;
	font-size: .8em;
	width: 100%;
	position: relative;
	top: -7px;
	text-shadow: none;

	@media #{$mid-point} {
		padding: 0 20px;
		display: inline;
	}


	a {
		margin: 0 3px;
		padding: 14px 10px;
		border: 0;
		display: none;

		@media #{$mid-point} {
			display: inline;
			border-bottom: 1px solid rgba(255,255,255,0);
			color: rgba(255,255,255,.8);
		}


		&.nav-toggle {
			display: inline;
			position: absolute;
			right: 10px;
			top: -7px;
			font-size: 1.9em;
			border: 0;
			text-shadow: 0;
			padding: 0 !important;
			@media #{$mid-point} {
				display: none;
			}

			&:hover {
				border: 0;
			}
		}
	}

	a.active {
		border-bottom: 5px solid #ffa74d;
	}

}


================================================
FILE: _sass/staff.scss
================================================
.staff {
	padding: 0;
	margin: 0;
	list-style: none;
	@extend %flexbox;
	@include flex-flow(wrap);
	text-align: center;
	li {
		padding: 30px 20px;
		box-sizing: border-box;
		width: 100%;

		@media #{$tablet} {
			@include flex(1, 1, 50%);
		}

		@media #{$desktop} {
			@include flex(1, 1, 33%);
		}

	}

	.name {
		margin-top: 20px;
	}

	.position {
		color: #666;
		font-size: .8em;
	}
}


================================================
FILE: _sass/variables.scss
================================================
$brand-color: #6ba1f3;

// Breakpoints
$tablet: "(min-width: 450px)";
$mid-point: "(min-width: 620px)";
$desktop: "(min-width: 768px)";


================================================
FILE: _staff_members/_defaults.md
================================================
---
name:
position:
image_path:
twitter_username:
blurb:
---


================================================
FILE: _staff_members/anna.md
================================================
---
name: Anna Thompson
position: Marketing
image_path: https://source.unsplash.com/collection/139386/600x600?a=.png
twitter_username: CloudCannon
blurb: Anna likes long walks on the beach and buffet breakfast.
---


================================================
FILE: _staff_members/betty.md
================================================
---
name: Betty Jefferson
position: Developer
image_path: https://source.unsplash.com/collection/139386/601x601?a=.png
twitter_username: CloudCannon
blurb: Betty is a bookworm who will typically have four books on the go.
---


================================================
FILE: _staff_members/gerald.md
================================================
---
name: Gerald Freeman
position: Sales
image_path: https://source.unsplash.com/collection/139386/602x602?a=.png
twitter_username: CloudCannon
blurb: Gerald loves going to bike rides and spending time with his family.
---


================================================
FILE: _staff_members/james.md
================================================
---
name: James Lopez
position: Developer
image_path: https://source.unsplash.com/collection/139386/603x603?a=.png
twitter_username: CloudCannon
blurb: James spends his weekends watching his favourite NBA team - L.A. Clippers.
---


================================================
FILE: _staff_members/robin.md
================================================
---
name: Robin Herrera
position: CEO
image_path: https://source.unsplash.com/collection/139386/604x604?a=.png
twitter_username: CloudCannon
blurb: Robin is often found tending to her majestic vegetable garden.
---


================================================
FILE: _staff_members/tom.md
================================================
---
name: Tom Wilson
position: CTO
image_path: https://source.unsplash.com/collection/139386/605x605?a=.png
twitter_username: CloudCannon
blurb: Tom likes to travel and has visited over 50 countries.
---


================================================
FILE: about.html
================================================
---
title: About
description: We've built an amazing team of developers, marketers, designers and sales people.
image: https://source.unsplash.com/BcoGknSqlDc/2000x1322?a=.png
---

<section class="hero" style="background-image: url({% include relative-src.html src=page.image %})">
	<div class="inner-hero text-container">
		<div class="hero-text-container">
			<h1 class="editable">Our Story</h1>
			<p class="subtext editable">We have an extremely talented team whose sole goal is to bring you closer to the people around you.</p>
		</div>
	</div>
</section>

<section class="pad">
	<div class="container">
		<p class="editor-link"><a href="cloudcannon:collections/_staff_members" class="btn"><strong>&#9998;</strong> Manage Staff Members</a></p>
		<ul class="staff">
			{% for person in site.staff_members %}
				<li>
					<div class="square-image" style="background-image: url({% include relative-src.html src=person.image_path %})"></div>
					<div class="name"><a target="_blank" href="https://twitter.com/{{ person.twitter_username }}">{{ person.name }}</a></div>
					<div class="position">{{ person.position }}</div>
				</li>
			{% endfor %}
		</ul>
	</div>
</section>


================================================
FILE: blog/index.html
================================================
---
title: Blog
description: Keep up with the latest news.
image: https://source.unsplash.com/MqJX_8EaStM/2000x1322?a=.png
---

<section class="hero" style="background-image: url({% include relative-src.html src=page.image %})">
	<div class="inner-hero text-container">
		<div class="hero-text-container">
			<h1 class="editable">The latest news</h1>
			<p class="subtext editable">Hear the latest progress on Frisco and tips on making life long friends.</p>
		</div>
	</div>
</section>

<section>
	<div class="text-container">
		<p class="editor-link"><a href="cloudcannon:collections/_posts" class="btn"><strong>&#9998;</strong> Add Post</a></p>
		<ul class="blog-posts">
			{% include list-posts.html posts=paginator.posts %}
		</ul>

		{% if paginator.total_pages > 1 %}
			<div class="pagination">
				{% if paginator.previous_page %}
					<a href="{{ site.baseurl }}{{ paginator.previous_page_path }}" class="previous btn">&larr; Newer posts</a>
				{% endif %}

				<span class="page_number ">{{ paginator.page }} of {{ paginator.total_pages }}</span>

				{% if paginator.next_page %}
					<a href="{{ site.baseurl }}{{ paginator.next_page_path }}" class="next btn">Older posts &rarr;</a>
				{% endif %}
			</div>
		{% endif %}
	</div>
</section>


================================================
FILE: contact-success.html
================================================
---
title: Contact Success
description: Your message has been sent. We'll be in touch soon.
image: https://source.unsplash.com/WNAO036c6FM/2000x1322?a=.png
---


================================================
FILE: contact.html
================================================
---
title: Contact
description: Send us a message to find out more!
map:
  latitude: -45.8787605
  longitude: 170.5027976
  address: "1 George Street, Dunedin, New Zealand"
  zoom: 13
image: https://source.unsplash.com/WNAO036c6FM/2000x1322?a=.png
---

<section class="hero" style="background-image: url({% include relative-src.html src=page.image %})">
	<div class="inner-hero text-container">
		<div class="hero-text-container">
			<h1 class="editable">Get in touch today</h1>
			<p class="subtext editable">If you have any questions or queries send us a message and we'll get back to you as soon as we can.</p>
		</div>
	</div>
</section>

<section class="pad">
	<div class="text-container contact-box">
		<form action="{{ site.baseurl }}/contact-success/" method="post" class="contact-form">
			<input type="hidden" name="_to" value="support@cloudcannon.com">
			<input type="text" name="_gotcha" style="display: none;">

			<label for="name">Name</label>
			<input type="text" name="name" id="name" placeholder="Enter your name...">

			<label for="email">Email Address</label>
			<input type="email" name="email" id="email" placeholder="Enter your email..." required>

			<label for="message">Message</label>
			<textarea name="message" id="message" placeholder="Enter your message..."></textarea>

			<input type="submit" value="Send Message">
		</form>

		<div class="contact-details">
			<h3>Address</h3>
			<address><a target="_blank" href="https://www.google.com/maps/place/{{ page.map.address | url_encode }}">{{ page.map.address | replace: ", ", ", <br>" }}</a></address>

			<h3>Email</h3>
			<p class="editable"><a href="mailto:support@example.com">support@example.com</a></p>
		</div>
	</div>
</section>

<div class="map" id="map"></div>

<script>
	window.mapData = {{ page.map | jsonify }};

	function initMap() {
		var myOptions = {
			scrollwheel: false,
			draggable: false,
			panControl: false,
			disableDefaultUI: true,
			styles: [{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"color":"#f7f1df"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"color":"#d0e3b4"}]},{"featureType":"landscape.natural.terrain","elementType":"geometry","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi.medical","elementType":"geometry","stylers":[{"color":"#fbd3da"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#bde6ab"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffe15f"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#efd151"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"color":"black"}]},{"featureType":"transit.station.airport","elementType":"geometry.fill","stylers":[{"color":"#cfb2db"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#a2daf2"}]}],
			zoom: window.mapData.zoom,
			maxZoom: window.mapData.zoom,
			minZoom: window.mapData.zoom,
			center: new google.maps.LatLng(window.mapData.latitude, window.mapData.longitude),
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};

		var map = new google.maps.Map(document.getElementById('map'), myOptions);

		var marker = new google.maps.Marker({
			map: map,
			position: new google.maps.LatLng(window.mapData.latitude, window.mapData.longitude)
		});

		google.maps.event.addDomListener(window, 'resize', function() {
			map.setCenter(myOptions.center);
		});
	}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ site.google_maps_javascript_api_key }}&amp;callback=initMap"></script>


================================================
FILE: css/screen.scss
================================================
---
---
@import "mixins/flexbox";
@import "mixins/columns";
@import "variables";
@import "elements";
@import "landing-page";
@import "layout";
@import "staff";
@import "contact";
@import "blog";
@import "forms";
@import "navigation";
@import "footer";


================================================
FILE: index.html
================================================
---
title: Home
description: The latest app to help you find new friends with common interests.
image: https://source.unsplash.com/j5LSbCqB1wA/2000x1322?a=.png
bottom_image: https://unsplash.it/2000/1322?a=.png
---

<section class="hero" style="background-image: url({% include relative-src.html src=page.image %})">
	<div class="inner-hero text-container">
		<div class="hero-text-container">
			<h1 class="editable">Make a new friend today</h1>
			<p class="subtext editable">Frisco helps you find new friends with common interests. Search for a new Tennis partner, find a baking side-kick or befriend a new drinking buddy.</p>
			<div class="cta button alt"><a href="#">Join Now</a></div>
		</div>
	</div>
	<div class="learn-more"><a href="#learn-more">Learn more <span class="arrow">&#x25BC;</span></a></div>
</section>

<div class="content">
	<section class="info" id="learn-more">
		<div class="container flex">
			<div class="text">
				<h2 class="editable">Introduce yourself</h2>
				<p class="editable">Making news friends in the adult world is hard. Frisco is the perfect filter matching you the most interesting people in your area.</p>
			</div>
			<div class="image">
				<img class="editable" src="http://placehold.it/650x1300" alt="Screenshot" />
			</div>
		</div>
	</section>

	<section class="info">
		<div class="container flex">
			<div class="text">
				<h2 class="editable">Pick your interests</h2>
				<p class="editable">The more you tell Frisco the better it gets to know you. Frisco matches you with people who share similar interests with you.</p>
			</div>
			<div class="image">
				<img class="editable" src="http://placehold.it/650x1300" alt="Screenshot" />
			</div>
		</div>
	</section>

	<section class="info">
		<div class="container flex">
			<div class="text">
				<h2 class="editable">Swipe and go</h2>
				<p class="editable">Frisco shows you cards with people who might be a good match for friendship. Swipe left to move to the next card or right to start talking.</p>
			</div>
			<div class="image">
				<img class="editable" src="http://placehold.it/650x1300" alt="Screenshot" />
			</div>
		</div>
	</section>

	<section class="hero" style="background-image: url({% include relative-src.html src=page.bottom_image %})">
		<div class="inner-hero text-container">
			<div class="hero-text-container">
				<h2 class="editable">Find your buddy today</h2>
				<p class="subtext editable">It's free, fun and an exciting way to meet new people.</p>
				<div class="cta button alt"><a href="#">Join Now</a></div>
			</div>
		</div>
	</section>
</div>


================================================
FILE: js/main.js
================================================
(function () {
	var header = document.getElementById("mainHeader");

	function changeHeader() {
		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		header.classList.toggle("header-background", scrollTop >= 50 || document.body.classList.contains("nav-open"));
	}

	var didScroll = false;

	$(window).scroll(function () {
		didScroll = true;
	});

	setInterval(function() {
		if (didScroll) {
			didScroll = false;
			changeHeader();
		}
	}, 100);

	changeHeader();

	document.getElementById("open-nav").addEventListener("click", function (event) {
		event.preventDefault();
		document.body.classList.toggle("nav-open");
		changeHeader();
	});

	$("a[href*=\\#]").on("click", function (event) {
		if(this.pathname === window.location.pathname) {
			event.preventDefault();

			$("html, body").animate({
				scrollTop: $(this.hash).offset().top
			}, 500);
		}
	});
})();


================================================
FILE: robots.txt
================================================
---
layout: null
sitemap: false
---
User-agent: *
Sitemap: {{ site.url }}/sitemap.xml