diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..5c91b60c0 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +_site/ +.sass-cache/ +.jekyll-metadata diff --git a/404.html b/404.html new file mode 100644 index 000000000..40028a689 --- /dev/null +++ b/404.html @@ -0,0 +1,7 @@ +--- +title: Not Found +description: This page doesn't exist! +image: https://source.unsplash.com/BcoGknSqlDc/2000x1322?a=.png +permalink: /404.html +layout: page +--- diff --git a/Gemfile b/Gemfile new file mode 100644 index 000000000..8a80c234d --- /dev/null +++ b/Gemfile @@ -0,0 +1,11 @@ +source 'https://rubygems.org' + +gem 'jekyll', '3.3.1' + +group :jekyll_plugins do + gem 'jekyll-feed', '0.8.0' + gem 'jekyll-seo-tag', '2.1.0' + gem 'jekyll-paginate', '1.1.0' + gem 'jekyll-archives', '2.1.1' + gem 'jekyll-sitemap', '0.12.0' +end diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100644 index 000000000..82f4db3cb --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,61 @@ +GEM + remote: https://rubygems.org/ + specs: + addressable (2.5.0) + public_suffix (~> 2.0, >= 2.0.2) + colorator (1.1.0) + ffi (1.9.14) + forwardable-extended (2.6.0) + jekyll (3.3.1) + addressable (~> 2.4) + colorator (~> 1.0) + jekyll-sass-converter (~> 1.0) + jekyll-watch (~> 1.1) + kramdown (~> 1.3) + liquid (~> 3.0) + mercenary (~> 0.3.3) + pathutil (~> 0.9) + rouge (~> 1.7) + safe_yaml (~> 1.0) + jekyll-archives (2.1.1) + jekyll (>= 2.4) + jekyll-feed (0.8.0) + jekyll (~> 3.3) + jekyll-paginate (1.1.0) + jekyll-sass-converter (1.5.0) + sass (~> 3.4) + jekyll-seo-tag (2.1.0) + jekyll (~> 3.3) + jekyll-sitemap (0.12.0) + jekyll (~> 3.3) + jekyll-watch (1.5.0) + listen (~> 3.0, < 3.1) + kramdown (1.13.0) + liquid (3.0.6) + listen (3.0.8) + rb-fsevent (~> 0.9, >= 0.9.4) + rb-inotify (~> 0.9, >= 0.9.7) + mercenary (0.3.6) + pathutil (0.14.0) + forwardable-extended (~> 2.6) + public_suffix (2.0.4) + rb-fsevent (0.9.8) + rb-inotify (0.9.7) + ffi (>= 0.5.0) + rouge (1.11.1) + safe_yaml (1.0.4) + sass (3.4.22) + +PLATFORMS + ruby + +DEPENDENCIES + jekyll (= 3.3.1) + jekyll-archives (= 2.1.1) + jekyll-feed (= 0.8.0) + jekyll-paginate (= 1.1.0) + jekyll-seo-tag (= 2.1.0) + jekyll-sitemap (= 0.12.0) + +BUNDLED WITH + 1.12.5 diff --git a/LICENSE b/LICENSE new file mode 100644 index 000000000..452333a21 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +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. diff --git a/README.md b/README.md new file mode 100644 index 000000000..57a0f6e05 --- /dev/null +++ b/README.md @@ -0,0 +1,77 @@ +# 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 and themes at [Jekyll Tips](http://jekyll.tips/templates/). + +Learn Jekyll with step-by-step tutorials and videos at [Jekyll Tips](http://jekyll.tips/). + +## 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. diff --git a/_config.yml b/_config.yml new file mode 100644 index 000000000..9b29153d4 --- /dev/null +++ b/_config.yml @@ -0,0 +1,84 @@ +# ---- +# Site + +title: Frisco Template +url: "https://brave-submarine.cloudvent.net" +baseurl: +google_analytics_key: +google_maps_javascript_api_key: + +# 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 + +permalink: pretty + +gems: + - jekyll-sitemap + - jekyll-seo-tag + - jekyll-feed + - jekyll-paginate + - jekyll-archives + +exclude: + - Gemfile + - Gemfile.lock + - README.md + - LICENCE + +collections: + staff_members: + _hide_content: true + +paginate: 10 +paginate_path: "/blog/:num/" + +jekyll-archives: + enabled: ['categories'] + +defaults: + - + scope: + path: "" + values: + layout: "default" + - + scope: + type: "posts" + values: + layout: "post" + - + scope: + path: "contact-success.html" + values: + layout: "page" + +# ----------- +# 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 \ No newline at end of file diff --git a/_data/footer.yml b/_data/footer.yml new file mode 100644 index 000000000..015322c42 --- /dev/null +++ b/_data/footer.yml @@ -0,0 +1,27 @@ +left_links: + - name: Blog + link: /blog/ + - name: About + link: /about/ + - name: Contact + link: /contact/ +right_links: + - name: + link: https://facebook.com/ + new_window: true + social_icon: Facebook + - name: + link: https://twitter.com/ + social_icon: Twitter + new_window: true + - name: + link: https://youtube.com/ + social_icon: YouTube + new_window: true + - name: + link: https://plus.google.com/ + social_icon: Google Plus + new_window: true + - name: + link: /feed.xml + social_icon: RSS diff --git a/_data/navigation.yml b/_data/navigation.yml new file mode 100644 index 000000000..7e59f4ff3 --- /dev/null +++ b/_data/navigation.yml @@ -0,0 +1,6 @@ +- name: Blog + link: /blog/ +- name: About + link: /about/ +- name: Contact + link: /contact/ diff --git a/_includes/list-posts.html b/_includes/list-posts.html new file mode 100644 index 000000000..91f46f0f4 --- /dev/null +++ b/_includes/list-posts.html @@ -0,0 +1,10 @@ +{% for post in include.posts %} +
  • +

    {{ post.title }}

    + {% include post-title.html post=post %} +
    + {{ post.excerpt }} +
    Read More
    +
    +
    • +{% endfor %} diff --git a/_includes/navigation.html b/_includes/navigation.html new file mode 100644 index 000000000..b2e5cb9b3 --- /dev/null +++ b/_includes/navigation.html @@ -0,0 +1,14 @@ + diff --git a/_includes/post-title.html b/_includes/post-title.html new file mode 100644 index 000000000..1f2ff3aa2 --- /dev/null +++ b/_includes/post-title.html @@ -0,0 +1,8 @@ +

    + {% for category in include.post.categories %} + + {{ category | capitalize }} + + {% endfor %} + {{ include.post.date | date: "%B %d, %Y" }} +

    diff --git a/_includes/relative-src.html b/_includes/relative-src.html new file mode 100644 index 000000000..45354481d --- /dev/null +++ b/_includes/relative-src.html @@ -0,0 +1 @@ +{% assign prefix = include.src | slice: 0, 2 %}{% assign protocol = include.src | slice: 0, 4 %}{% unless protocol == 'http' or prefix == "//" %}{{ site.baseurl }}{% endunless %}{{ include.src }} \ No newline at end of file diff --git a/_includes/social-icon.html b/_includes/social-icon.html new file mode 100644 index 000000000..9909216b8 --- /dev/null +++ b/_includes/social-icon.html @@ -0,0 +1,22 @@ +{% case include.icon %} + {% when "Facebook" %} + + {% when "Google Plus" %} + + {% when "Instagram" %} + + {% when "LinkedIn" %} + + {% when "Pinterest" %} + + {% when "Tumblr" %} + + {% when "Twitter" %} + + {% when "YouTube" %} + + {% when "RSS" %} + + {% when "Email" %} + +{% endcase %} \ No newline at end of file diff --git a/_layouts/archive.html b/_layouts/archive.html new file mode 100644 index 000000000..dcd4e441d --- /dev/null +++ b/_layouts/archive.html @@ -0,0 +1,22 @@ +--- +layout: default +--- + +
    +
    +
    +

    The latest news

    +

    Hear the latest progress on Frisco and tips on making life long friends.

    +
    +
    +
    + +
    +
    +

    You're currently looking at advice categorised under {{ page.title }}. View all posts instead.

    + + +
    +
    diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 000000000..5bc29c25a --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + {% seo %} + {% feed_meta %} + + {% if jekyll.environment == 'production' and site.google_analytics_key != '' %} + + {% endif %} + + + +
    +
    +
    + + + + +
    + {% include navigation.html %} +

    ✎ Edit navigation

    +
    +
    + + {{ content }} + + + + + + + diff --git a/_layouts/page.html b/_layouts/page.html new file mode 100644 index 000000000..6a8d32117 --- /dev/null +++ b/_layouts/page.html @@ -0,0 +1,14 @@ +--- +layout: default +--- + +
    +
    +
    +

    {{ page.title }}

    +

    {{ page.description }}

    +
    +
    +
    + +{{ content }} diff --git a/_layouts/post.html b/_layouts/post.html new file mode 100644 index 000000000..86489f4bc --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,52 @@ +--- +layout: page +--- + +
    +
    +

    ✎ Edit Post

    + {% include post-title.html post=page %} + +
    + {{ content }} + +
    + {% assign author_id = page.author_staff_member | prepend: "/staff_members/" | append: "/" %} + {% assign author = site.staff_members | where: "url", author_id | first %} +
    +

    {{ author.blurb }}

    +
    + +
    + {% if page.previous.url %} + + {% endif %} + {% if page.next.url %} + + {% endif %} +
    + + + {% if site.disqus_shortname and page.comments %} +
    + + + {% endif %} +
    +
    +
    diff --git a/_posts/2016-07-20-what-is-a-friend.md b/_posts/2016-07-20-what-is-a-friend.md new file mode 100644 index 000000000..7bde9c056 --- /dev/null +++ b/_posts/2016-07-20-what-is-a-friend.md @@ -0,0 +1,20 @@ +--- +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) diff --git a/_posts/2016-07-28-psychology-of-friendship.md b/_posts/2016-07-28-psychology-of-friendship.md new file mode 100644 index 000000000..0511d6da8 --- /dev/null +++ b/_posts/2016-07-28-psychology-of-friendship.md @@ -0,0 +1,36 @@ +--- +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." diff --git a/_posts/2016-08-02-life-cycle.md b/_posts/2016-08-02-life-cycle.md new file mode 100644 index 000000000..99c0dfa9f --- /dev/null +++ b/_posts/2016-08-02-life-cycle.md @@ -0,0 +1,23 @@ +--- +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. diff --git a/_posts/2016-08-06-development-issues.md b/_posts/2016-08-06-development-issues.md new file mode 100644 index 000000000..d19165693 --- /dev/null +++ b/_posts/2016-08-06-development-issues.md @@ -0,0 +1,28 @@ +--- +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. diff --git a/_posts/2016-08-12-health.md b/_posts/2016-08-12-health.md new file mode 100644 index 000000000..2d5c86f0f --- /dev/null +++ b/_posts/2016-08-12-health.md @@ -0,0 +1,22 @@ +--- +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) diff --git a/_posts/_defaults.md b/_posts/_defaults.md new file mode 100644 index 000000000..6b8aaece8 --- /dev/null +++ b/_posts/_defaults.md @@ -0,0 +1,8 @@ +--- +title: +date: +description: +categories: +image: +author_staff_member: +--- diff --git a/_sass/blog.scss b/_sass/blog.scss new file mode 100644 index 000000000..847ad3726 --- /dev/null +++ b/_sass/blog.scss @@ -0,0 +1,154 @@ +.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 +} diff --git a/_sass/contact.scss b/_sass/contact.scss new file mode 100644 index 000000000..041ad4433 --- /dev/null +++ b/_sass/contact.scss @@ -0,0 +1,28 @@ +.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; + } +} diff --git a/_sass/elements.scss b/_sass/elements.scss new file mode 100644 index 000000000..ffb8cfaad --- /dev/null +++ b/_sass/elements.scss @@ -0,0 +1,62 @@ +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; +} diff --git a/_sass/footer.scss b/_sass/footer.scss new file mode 100644 index 000000000..e05a1c6c6 --- /dev/null +++ b/_sass/footer.scss @@ -0,0 +1,104 @@ +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; + } +} diff --git a/_sass/forms.scss b/_sass/forms.scss new file mode 100644 index 000000000..2174ad76d --- /dev/null +++ b/_sass/forms.scss @@ -0,0 +1,67 @@ +.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); +} diff --git a/_sass/landing-page.scss b/_sass/landing-page.scss new file mode 100644 index 000000000..36b0b39e5 --- /dev/null +++ b/_sass/landing-page.scss @@ -0,0 +1,74 @@ +.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; + } +} diff --git a/_sass/layout.scss b/_sass/layout.scss new file mode 100644 index 000000000..b0c839156 --- /dev/null +++ b/_sass/layout.scss @@ -0,0 +1,221 @@ +.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; +} diff --git a/_sass/mixins/columns.scss b/_sass/mixins/columns.scss new file mode 100644 index 000000000..010eae984 --- /dev/null +++ b/_sass/mixins/columns.scss @@ -0,0 +1,5 @@ +@mixin columns($value) { + columns: $value; + -webkit-columns: $value; + -moz-columns: $value; +} diff --git a/_sass/mixins/flexbox.scss b/_sass/mixins/flexbox.scss new file mode 100644 index 000000000..92a03fd2b --- /dev/null +++ b/_sass/mixins/flexbox.scss @@ -0,0 +1,394 @@ +// 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: | +// 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 | || +// 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; +} diff --git a/_sass/navigation.scss b/_sass/navigation.scss new file mode 100644 index 000000000..51e7054fe --- /dev/null +++ b/_sass/navigation.scss @@ -0,0 +1,69 @@ +.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; + } + +} diff --git a/_sass/staff.scss b/_sass/staff.scss new file mode 100644 index 000000000..2c3b5ee5f --- /dev/null +++ b/_sass/staff.scss @@ -0,0 +1,31 @@ +.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; + } +} diff --git a/_sass/variables.scss b/_sass/variables.scss new file mode 100644 index 000000000..7e88ecd16 --- /dev/null +++ b/_sass/variables.scss @@ -0,0 +1,6 @@ +$brand-color: #6ba1f3; + +// Breakpoints +$tablet: "(min-width: 450px)"; +$mid-point: "(min-width: 620px)"; +$desktop: "(min-width: 768px)"; diff --git a/_staff_members/_defaults.md b/_staff_members/_defaults.md new file mode 100644 index 000000000..ff00fafdd --- /dev/null +++ b/_staff_members/_defaults.md @@ -0,0 +1,7 @@ +--- +name: +position: +image_path: +twitter_username: +blurb: +--- diff --git a/_staff_members/anna.md b/_staff_members/anna.md new file mode 100644 index 000000000..582dfed2d --- /dev/null +++ b/_staff_members/anna.md @@ -0,0 +1,7 @@ +--- +name: Anna Thompson +position: Marketing +image_path: https://source.unsplash.com/collection/139386/600x600?a=.png +twitter_username: CloudCannonApp +blurb: Anna likes long walks on the beach and buffet breakfast. +--- diff --git a/_staff_members/betty.md b/_staff_members/betty.md new file mode 100644 index 000000000..14f766c7d --- /dev/null +++ b/_staff_members/betty.md @@ -0,0 +1,7 @@ +--- +name: Betty Jefferson +position: Developer +image_path: https://source.unsplash.com/collection/139386/601x601?a=.png +twitter_username: CloudCannonApp +blurb: Betty is a bookworm who will typically have four books on the go. +--- diff --git a/_staff_members/gerald.md b/_staff_members/gerald.md new file mode 100644 index 000000000..2454c35be --- /dev/null +++ b/_staff_members/gerald.md @@ -0,0 +1,7 @@ +--- +name: Gerald Freeman +position: Sales +image_path: https://source.unsplash.com/collection/139386/602x602?a=.png +twitter_username: CloudCannonApp +blurb: Gerald loves going to bike rides and spending time with his family. +--- diff --git a/_staff_members/james.md b/_staff_members/james.md new file mode 100644 index 000000000..e3c740c28 --- /dev/null +++ b/_staff_members/james.md @@ -0,0 +1,7 @@ +--- +name: James Lopez +position: Developer +image_path: https://source.unsplash.com/collection/139386/603x603?a=.png +twitter_username: CloudCannonApp +blurb: James spends his weekends watching his favourite NBA team - L.A. Clippers. +--- diff --git a/_staff_members/robin.md b/_staff_members/robin.md new file mode 100644 index 000000000..ca9051672 --- /dev/null +++ b/_staff_members/robin.md @@ -0,0 +1,7 @@ +--- +name: Robin Herrera +position: CEO +image_path: https://source.unsplash.com/collection/139386/604x604?a=.png +twitter_username: CloudCannonApp +blurb: Robin is often found tending to her majestic vegetable garden. +--- diff --git a/_staff_members/tom.md b/_staff_members/tom.md new file mode 100644 index 000000000..e5eb9e718 --- /dev/null +++ b/_staff_members/tom.md @@ -0,0 +1,7 @@ +--- +name: Tom Wilson +position: CTO +image_path: https://source.unsplash.com/collection/139386/605x605?a=.png +twitter_username: CloudCannonApp +blurb: Tom likes to travel and has visited over 50 countries. +--- diff --git a/about.html b/about.html new file mode 100644 index 000000000..8eab6617d --- /dev/null +++ b/about.html @@ -0,0 +1,29 @@ +--- +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 +--- + +
    +
    +
    +

    Our Story

    +

    We have an extremely talented team whose sole goal is to bring you closer to the people around you.

    +
    +
    +
    + +
    +
    +

    ✎ Manage Staff Members

    +
      + {% for person in site.staff_members %} +
    • +
      +
      {{ person.name }}
      +
      {{ person.position }}
      +
      • + {% endfor %} +
    +
    +
    diff --git a/apple-touch-icon.png b/apple-touch-icon.png new file mode 100644 index 000000000..5b87d1fa8 Binary files /dev/null and b/apple-touch-icon.png differ diff --git a/blog/index.html b/blog/index.html new file mode 100644 index 000000000..3e9d3424d --- /dev/null +++ b/blog/index.html @@ -0,0 +1,37 @@ +--- +title: Blog +description: Keep up with the latest news. +image: https://source.unsplash.com/MqJX_8EaStM/2000x1322?a=.png +--- + +
    +
    +
    +

    The latest news

    +

    Hear the latest progress on Frisco and tips on making life long friends.

    +
    +
    +
    + +
    +
    +

    ✎ Add Post

    +
      + {% include list-posts.html posts=paginator.posts %} +
    + + {% if paginator.total_pages > 1 %} + + {% endif %} +
    +
    diff --git a/contact-success.html b/contact-success.html new file mode 100644 index 000000000..a160d6902 --- /dev/null +++ b/contact-success.html @@ -0,0 +1,5 @@ +--- +title: Contact Success +description: Your message has been sent. We'll be in touch soon. +image: https://source.unsplash.com/WNAO036c6FM/2000x1322?a=.png +--- diff --git a/contact.html b/contact.html new file mode 100644 index 000000000..765f1d5a8 --- /dev/null +++ b/contact.html @@ -0,0 +1,80 @@ +--- +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 +--- + +
    +
    +
    +

    Get in touch today

    +

    If you have any questions or queries send us a message and we'll get back to you as soon as we can.

    +
    +
    +
    + +
    +
    +
    + + + + + + + + + + + + + +
    + +
    +

    Address

    +
    {{ page.map.address | replace: ", ", ",
    " }}
    + +

    Email

    +

    support@example.com

    +
    +
    +
    + +
    + + + diff --git a/css/screen.scss b/css/screen.scss new file mode 100644 index 000000000..61d87d962 --- /dev/null +++ b/css/screen.scss @@ -0,0 +1,14 @@ +--- +--- +@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"; diff --git a/images/_screenshot.jpg b/images/_screenshot.jpg new file mode 100644 index 000000000..fb8493703 Binary files /dev/null and b/images/_screenshot.jpg differ diff --git a/images/favicon.png b/images/favicon.png new file mode 100644 index 000000000..ee609f0e5 Binary files /dev/null and b/images/favicon.png differ diff --git a/images/logo/dark.svg b/images/logo/dark.svg new file mode 100644 index 000000000..1d6da6d4f --- /dev/null +++ b/images/logo/dark.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/images/logo/light.svg b/images/logo/light.svg new file mode 100644 index 000000000..4a4ca3add --- /dev/null +++ b/images/logo/light.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/images/screenshot-buttons.svg b/images/screenshot-buttons.svg new file mode 100644 index 000000000..0797d823e --- /dev/null +++ b/images/screenshot-buttons.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/index.html b/index.html new file mode 100644 index 000000000..f7c14a37e --- /dev/null +++ b/index.html @@ -0,0 +1,65 @@ +--- +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://source.unsplash.com/S_VbdMTsdiA/2000x1322?a=.png +--- + +
    +
    +
    +

    Make a new friend today

    +

    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.

    +
    Join Now
    +
    +
    +
    Learn more ▼
    +
    + +
    +
    +
    +
    +

    Introduce yourself

    +

    Making news friends in the adult world is hard. Frisco is the perfect filter matching you the most interesting people in your area.

    +
    +
    + Screenshot +
    +
    +
    + +
    +
    +
    +

    Pick your interests

    +

    The more you tell Frisco the better it gets to know you. Frisco matches you with people who share similar interests with you.

    +
    +
    + Screenshot +
    +
    +
    + +
    +
    +
    +

    Swipe and go

    +

    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.

    +
    +
    + Screenshot +
    +
    +
    + +
    +
    +
    +

    Find your buddy today

    +

    It's free, fun and an exciting way to meet new people.

    +
    Join Now
    +
    +
    +
    +
    diff --git a/js/main.js b/js/main.js new file mode 100644 index 000000000..24d11de41 --- /dev/null +++ b/js/main.js @@ -0,0 +1,37 @@ +(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) { + event.preventDefault(); + + $("html, body").animate({ + scrollTop: $(this.hash).offset().top + }, 500); + }); +})(); diff --git a/robots.txt b/robots.txt new file mode 100644 index 000000000..780b5a3da --- /dev/null +++ b/robots.txt @@ -0,0 +1,6 @@ +--- +layout: null +sitemap: false +--- +User-agent: * +Sitemap: {{ site.url }}/sitemap.xml \ No newline at end of file diff --git a/siteicon.png b/siteicon.png new file mode 100644 index 000000000..86426b8d1 Binary files /dev/null and b/siteicon.png differ diff --git a/touch-icon.png b/touch-icon.png new file mode 100644 index 000000000..12d08d5ec Binary files /dev/null and b/touch-icon.png differ