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 %}

  • {{ post.title }}

    {% include post-title.html post=post %}
    {{ post.excerpt }}
    Read More
    • {% endfor %} ================================================ FILE: _includes/navigation.html ================================================ ================================================ FILE: _includes/post-title.html ================================================

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

    ================================================ 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" %} {% when "Instagram" %} {% when "LinkedIn" %} {% when "Pinterest" %} {% when "Tumblr" %} {% when "Twitter" %} {% when "YouTube" %} {% when "RSS" %} {% when "Email" %} {% endcase %} ================================================ FILE: _layouts/archive.html ================================================ --- 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.

    ================================================ FILE: _layouts/default.html ================================================ {% seo %} {% feed_meta %} {% if jekyll.environment == 'production' and site.google_analytics_key != '' %} {% endif %}
    {% include navigation.html %}

    ✎ Edit navigation

    {{ content }} ================================================ FILE: _layouts/page.html ================================================ --- layout: default ---

    {{ page.title }}

    {{ page.description }}

    {{ content }} ================================================ FILE: _layouts/post.html ================================================ --- 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 %}
    ================================================ 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: | // 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; } ================================================ 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 ---

    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 %}
    ================================================ FILE: blog/index.html ================================================ --- 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 %}
    ================================================ 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 ---

    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

    ================================================ 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 ---

    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
    ================================================ 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