jekyll-agency 1.0.5 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: afdde2469c1ee3a989457b7c4c06e527c28e93ee8efdb3dbb177258d82be7d71
-  data.tar.gz: 2336991e520e32ed25c47946a124023b2e1f6d0385fe10f58b6a5a18fcef22d3
+  metadata.gz: 106bcaa5271f7d88b493d141f724feb61fb618eb228a05ffb1505821bfcae200
+  data.tar.gz: 64dda193213710ebc9a4c826c56dfb829daa9b6e12676cb39eb87fd494a507a3
 SHA512:
-  metadata.gz: 1b036db72d07bc90b215c2f9db36b6c34af403a241331de0864003c12405d905fbbd381f6ae37135d510b01035d972eec978cc2ced8a962da59525224922d57d
-  data.tar.gz: 7e6ca5a042a6f7d530430245677b5322cd854a4b1e3de824cb84ee2e2fcc069b7dfcc22ceede72f04583f7e6be4689422859b1726773224dc7d7952097dff170
+  metadata.gz: 648f6e57084b0739f3fc083cc00b309d82498daf52f328a8785a515d3d5e584d77b0f9a6bab727dd305c6d60db0e1cae4ad575449ffae866b0abfadc99b9b757
+  data.tar.gz: 52888845ef31d67422093a86035513e629bd4de01a8ad68c6ac1185bfe279bec209c81cd2745b61079342c70b9ba2b8df4d92d80236045a3d0420a3d6764557d

data/README.md

@@ -1,34 +1,43 @@
-[Creating Gem Based Themes For Jekyll](https://www.chrisanthropic.com/blog/2016/creating-gem-based-themes-for-jekyll/)
-
-# [Agency Jekyll Theme](https://raviriley.github.io/agency-jekyll-theme) - Work in Progress
-
+# [Agency Jekyll Theme](https://raviriley.github.io/agency-jekyll-theme)
+[![RubyGems Downloads](https://img.shields.io/gem/dt/jekyll-agency.svg)](https://rubygems.org/gems/jekyll-agency)
 [![LICENSE](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://github.com/raviriley/agency-jekyll-theme/blob/master/LICENSE.txt)
 [![Tip Me via PayPal](https://img.shields.io/badge/PayPal-tip%20me-green.svg?logo=paypal)](https://www.paypal.me/raviriley)
+[![template button](https://img.shields.io/badge/-Create%20repository%20from%20template-brightgreen)](https://github.com/raviriley/agency-jekyll-theme-starter/generate)
+
+<!--[![Featured on Jekyll-Themes.com](https://img.shields.io/badge/featured%20on-JT-red.svg)](https://jekyll-themes.com)-->
 
-This is the [Agency Bootstrap theme](https://startbootstrap.com/themes/agency/) converted to a gem-based Jekyll theme. While this had been done before, ([here](https://github.com/y7kim/agency-jekyll-theme), [here](https://github.com/SotiriosVrachas/jekyll-theme-startbootstrap-agency), and [here](https://github.com/laklau/agency-jekyll-theme/)), these are outdated and have not been updated or maintained for years. I built this theme from the most recent Bootstrap source. I also added a lot of new features that go beyond the original theme's capabilities:
+![screenshot](https://raw.githubusercontent.com/raviriley/agency-jekyll-theme/master/screenshot.PNG)
 
+This is the [Agency Bootstrap theme](https://startbootstrap.com/themes/agency/) converted to a gem-based Jekyll theme with GitHub Pages support. While this had been done before, ([here](https://github.com/y7kim/agency-jekyll-theme), [here](https://github.com/SotiriosVrachas/jekyll-theme-startbootstrap-agency), and [here](https://github.com/laklau/agency-jekyll-theme/)), these are outdated and have not been updated or maintained for years. I built this theme from the most recent Bootstrap source. I also added a lot of new features that go beyond the original theme's capabilities:
+
+- GitHub Pages support
+- [template repo][template] to get up and running in minutes
+- contact form functionality powered by [Formspree.io](https://formspree.io)
 - custom pages
 - 404 page
 - legal/Privacy Policy page
 - Google Analytics support
 - Markdown support
 - custom images
-- logo support (instead of just text)
+- logo support (instead of just title text)
 - automatically updating copyright years
-- custom navigation bar, even without the header images
-- about section (not the timeline)
-- custom footer
-- portfolio carousel (coming soon)
+- custom navigation bar, even without the header image(s)
+- customizable footer
+- custom accent color and dark/light colors
+- horizontal scrolling support for client section
+<!-- 
 - custom colors with automatic gradient generation (coming soon)
 - site title logo text font customization (coming soon)
+- horizontal scrolling support for portfolio section (coming soon)
+- about section (different from the timeline) -->
 
 The Jekyll structure of this theme includes:
 
-- `_projects` files - what generate the portfolio grid, YAML front matter handles all the details
+- `_portfolio` files - what generate the portfolio grid. YAML front matter handles all the details
 - the `page` layout allows custom pages, as seen in the legal and 404 pages
 - `sitetext.yml` enables complete customization of all site text
-- `nav.yml` enables fully customizable navigation
-- `style.yml` enables fully customizable colors and background images
+- `navigation.yml` enables fully customizable navigation
+- `style.yml` enables fully customizable colors, background images, and other style-related things
 
 
 **If you enjoy this theme, please consider [supporting me](https://www.paypal.me/raviriley) to continue developing and maintaining it.**
@@ -36,6 +45,12 @@ The Jekyll structure of this theme includes:
 [![Support via PayPal](https://cdn.rawgit.com/twolfson/paypal-github-button/1.0.0/dist/button.svg)](https://www.paypal.me/raviriley)
 
 ## Installation
+There are three ways to install this theme:
+1. As a gem-based theme
+2. Use the [starter template][template]  (best for GitHub Pages)
+3. As a remote theme
+
+#### 1. Gem-based Theme Installation
 
 Add this line to your Jekyll site's `Gemfile`:
 
@@ -43,28 +58,44 @@ Add this line to your Jekyll site's `Gemfile`:
 gem "jekyll-agency"
 ```
 
-And add this line to your Jekyll site's `_config.yml`:
-
-```yaml
-theme: jekyll-agency
-```
+Then, replace the contents of your `_config.yml` file with [this](https://github.com/raviriley/agency-jekyll-theme/blob/master/_config.yml).
 
 And then execute:
 
     $ bundle
 
-Or install it yourself as:
+Or, install it yourself as:
 
     $ gem install jekyll-agency
 
-Then, replace the contents of your `_config.yml` file with [this](https://github.com/raviriley/agency-jekyll-theme/blob/master/_config.yml).
+#### 2. Using the [Starter Template][template]
+This is the fastest and easiest way to get up and running on GitHub Pages.
+Simply generate your own repository by clicking the button below, then replace the sample content with your own and configure for your needs.
+
+[![template button](https://img.shields.io/badge/-Create%20repository%20from%20template-brightgreen)](https://github.com/raviriley/agency-jekyll-theme-starter/generate)
 
-## Usage
+#### 3. Remote Theme Installation
 
-TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
+Replace the contents of your `_config.yml` file with [this](https://raw.githubusercontent.com/raviriley/agency-jekyll-theme-starter/master/_config.yml) and your `Gemfile` with [this](https://raw.githubusercontent.com/raviriley/agency-jekyll-theme-starter/master/Gemfile). Then execute:
+
+    $ bundle
+
+
+[template]: https://github.com/raviriley/agency-jekyll-theme-starter
+
+<!--
+## Documentation and Usage
+
+**TODO:** Write usage instructions here. Describe available layouts, includes, or assets.
 
 navheader is used only for the home page. nav is used everywhere else.
 
+Layouts:
+
+Includes:
+
+-->
+
 ## Contributing
 
 This project is intended to be a welcoming space for collaboration. If you have an idea, suggestion, feature request, etc., feel free to open an issue or pull request.
@@ -73,11 +104,12 @@ For bug reports, follow the provided template.
 #### Improvements - Up for Grabs
 
 - multiple language support
-- custom background images
+- customizable background coloring for each section
+- ~~custom background images~~
 
 ## Development
 
-To set up your environment to develop this theme, clone this repo, then run `bundle install`. To test the theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. Add pages, documents, data, etc. like normal to test the theme's contents. As you make modifications, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+To set up your environment to develop this theme, [clone this repo](https://github.com/raviriley/agency-jekyll-theme.git), then run `bundle install`. To test the theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. Add pages, documents, data, etc. like normal to test the theme's contents. As you make modifications, your site will regenerate and you should see the changes in the browser after a refresh.
 
 ## License
 

data/_data/navigation.yml

@@ -14,5 +14,5 @@ nav:
   - title: "Contact"
     section: contact
 
-  - title: "External"
-    url: https://raviriley.github.io
+  - title: "Theme Source"
+    url: https://github.com/raviriley/agency-jekyll-theme/

data/_data/sitetext.yml

@@ -63,6 +63,8 @@ about:
 
 clients:
     section: clients
+    max-height: 100px
+    horizontal-scrolling: "" #"yes/no"
     list:
       - title: "envato"
         url: https://github.com/raviriley/agency-jekyll-theme
@@ -85,7 +87,7 @@ team:
     people:
       - name: "Kay Garland"
         role: "Lead Designer"
-        image: assets/img/team/1.jpg
+        image: assets/img/team/500x500.jpg
         social:
           - url: https://twitter.com
             icon: fab fa-twitter
@@ -105,7 +107,7 @@ team:
             icon: fab fa-linkedin-in
       - name: "Diana Perterson"
         role: "Lead Developer"
-        image: assets/img/team/3.jpg
+        image: assets/img/team/500x500.jpg
         social:
           - url: https://twitter.com
             icon: fab fa-twitter
@@ -128,7 +130,7 @@ footer:
         icon: "fab fa-facebook-f"
       - url: https://linkedin.com
         icon: "fab fa-linkedin-in"
-      - url: https://github.com/raviriley
+      - url: https://github.com/raviriley/agency-jekyll-theme
         icon: "fab fa-github"
       - url: https://instagram.com
         icon: "fab fa-instagram"

data/_data/style.yml

@@ -1,8 +1,11 @@
 #Color Customization
 #highlight: "#54bfff"
 #white: "#FF0000"
-black: "#000"
+#black: "#000"
 
 #Image Customization
-header-image: "../img/header-bg.jpg"
-contact-image: "../img/map-image.png"
+header-image: "../img/header.png"
+contact-image: "../img/contact.png"
+
+#Font Awesome icon for portfolio grid when an item is hovered over
+#portfolio-icon: fas fa-expand-arrows-alt fa-3x #default: fas fa-plus fa-3x

data/_includes/about.html

@@ -1,9 +1,9 @@
 <!-- About -->
-  <section class="page-section" id="{{ site.data.sitetext.about.section | default: about }}">
+  <section class="page-section" id="{{ site.data.sitetext.about.section | default: "about" }}">
     <div class="container">
       <div class="row">
         <div class="col-lg-12 text-center">
-          <h2 class="section-heading text-uppercase">{{ site.data.sitetext.about.title | default: About Us }}</h2>
+          <h2 class="section-heading text-uppercase">{{ site.data.sitetext.about.title | default: "About Us" }}</h2>
           <h3 class="section-subheading text-muted">{{ site.data.sitetext.about.text | default: "" }}</h3>
         </div>
       </div>

data/_includes/clients.html

@@ -1,11 +1,11 @@
 <!-- Clients -->
-  <section class="py-5" id=""{{ site.data.sitetext.clients.section | default: clients }}>
+  <section class="py-5" id="{{ site.data.sitetext.clients.section | default: "clients" }}">
     <div class="container">
-      <div class="row">
+      <div class="row" {% if site.data.sitetext.clients.horizontal-scrolling == "yes" %} id="scrolling-clients" {% endif %}>
 	  {% for client in site.data.sitetext.clients.list %}
         <div class="col-md-3 col-sm-6">
           <a href="{{ client.url }}">
-            <img class="img-fluid d-block mx-auto" src="{{ client.logo }}" alt="{{ client.title }}">
+            <img class="img-fluid d-block mx-auto" src="{{ client.logo }}" alt="{{ client.title }}" style="max-height: {{ site.data.sitetext.clients.max-height | default: "100px" }}">
           </a>
         </div>
 	  {% endfor %}

data/_includes/contact.html

@@ -1,5 +1,5 @@
 <!-- Contact -->
-  <section class="page-section" id="{{ site.data.sitetext.contact.section | default: contact }}">
+  <section class="page-section" id="{{ site.data.sitetext.contact.section | default: "contact" }}">
     <div class="container">
       <div class="row">
         <div class="col-lg-12 text-center">
@@ -9,7 +9,8 @@
       </div>
       <div class="row">
         <div class="col-lg-12">
-          <form id="contactForm" name="sentMessage" novalidate="novalidate" method="POST" action="https://formspree.io/{{ site.email }}">
+          <form id="contactForm" action="https://formspree.io/{{ site.email }}" novalidate="novalidate" method="POST">
+		  <!--name="sentMessage"--> 
             <div class="row">
               <div class="col-md-6">
                 <div class="form-group">
@@ -37,6 +38,8 @@
                 <div id="success"></div>
                 <button id="sendMessageButton" class="btn btn-primary btn-xl text-uppercase" type="submit">Send Message</button>
               </div>
+			  <input type="text" name="_gotcha" style="display:none">
+			  <input type="hidden" name="_next" value="#"/>
             </div>
           </form>
         </div>

data/_includes/footer.html

@@ -23,7 +23,7 @@
         <div class="col-md-4">
           <ul class="list-inline quicklinks">
             <li class="list-inline-item">
-              <a href="legal">{{ site.data.sitetext.footer.legal | default: Privacy Policy }}</a>
+              <a href="legal">{{ site.data.sitetext.footer.legal | default: "Privacy Policy" }}</a>
             </li>
           </ul>
         </div>

data/_includes/modals.html

@@ -0,0 +1,31 @@
+<!-- Portfolio Modals -->
+{% for project in site.portfolio %}
+  <div class="portfolio-modal modal fade" id="p{{ forloop.index }}" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="close-modal" data-dismiss="modal">
+          <div class="lr">
+            <div class="rl"></div>
+          </div>
+        </div>
+        <div class="container">
+          <div class="row">
+            <div class="col-lg-8 mx-auto">
+              <div class="modal-body">
+                <!-- Project Details Go Here -->
+                <h2 class="text-uppercase">{{ project.title }}</h2>
+                <p class="item-intro text-muted">{{ project.subtitle }}</p>
+                <img class="img-fluid d-block mx-auto" src="{{ project.image }}" alt="{{ project.alt }}">
+				<p>{{ project.content }}</p>		
+                <button class="btn btn-primary" data-dismiss="modal" type="button">
+                  <i class="fas fa-times"></i>
+                  Close Project</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endfor %}
+<!-- End Portfolio Modals -->

data/_includes/nav.html

@@ -1,7 +1,7 @@
 <!-- Navigation -->
   <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav" style="background-color:#212529">
     <div class="container">
-	  <a class="navbar-brand js-scroll-trigger" href="../#">
+	  <a class="navbar-brand js-scroll-trigger" href="{{ site.baseurl }}/#">
           {%- if site.logo -%}
             <img height="{{ site.logo.height | default: 52 }}" src="{{ site.logo.path }}"/>
           {%- else -%}
@@ -19,7 +19,7 @@
 		  {%- if link.url -%}
 		    <a class="nav-link js-scroll-trigger" href="{{ link.url }}">{{ link.title }}</a>
 		  {%- else if link.section -%}
-		    <a class="nav-link js-scroll-trigger" href="../#{{ link.section }}">{{ link.title }}</a>
+		    <a class="nav-link js-scroll-trigger" href="{{ site.baseurl }}/#{{ link.section }}">{{ link.title }}</a>
 		  {%- else -%}
 		    <a class="nav-link js-scroll-trigger" href="#">{{ link.title }}</a>
 		  {%- endif -%}

data/_includes/navheader.html

@@ -1,5 +1,5 @@
   <!-- Navigation -->
-  <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"">
+  <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
     <div class="container">
 	  <a class="navbar-brand js-scroll-trigger" href="#page-top">
           {%- if site.logo -%}
@@ -36,9 +36,15 @@
   <header class="masthead">
     <div class="container">
       <div class="intro-text">
+	  {%- if site.data.sitetext.header.title -%}
         <div class="intro-lead-in">{{ site.data.sitetext.header.title | markdownify }}</div>
+	  {%- endif -%}
+	  {%- if site.data.sitetext.header.text -%}
         <div class="intro-heading text-uppercase">{{ site.data.sitetext.header.text | markdownify }}</div>
+	  {%- endif -%}
+	  {%- if site.data.sitetext.header.button -%}
         <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="{{ site.data.sitetext.header.buttonlink }}">{{ site.data.sitetext.header.button }}</a>
+	  {%- endif -%}
       </div>
     </div>
   </header>

data/_includes/portfolio_grid.html

@@ -1,19 +1,19 @@
 <!-- Portfolio Grid -->
-<section class="bg-light page-section" id="{{ site.data.sitetext.portfolio.section | default: portfolio }}">
+<section class="bg-light page-section" id="{{ site.data.sitetext.portfolio.section | default: "portfolio" }}">
   <div class="container">
     <div class="row">
       <div class="col-lg-12 text-center">
-        <h2 class="section-heading text-uppercase">{{ site.data.sitetext.portfolio.title | markdownify | default: Portfolio }}</h2>
+        <h2 class="section-heading text-uppercase">{{ site.data.sitetext.portfolio.title | markdownify | default: "Portfolio" }}</h2>
         <h3 class="section-subheading text-muted">{{ site.data.sitetext.portfolio.text | markdownify }}</h3>
       </div>
     </div>
     <div class="row">
 	{% for project in site.portfolio %}
       <div class="col-md-4 col-sm-6 portfolio-item">
-        <a class="portfolio-link" data-toggle="modal" href="#{{ project.link }}">
+        <a class="portfolio-link" data-toggle="modal" href="#p{{ forloop.index }}">
           <div class="portfolio-hover">
             <div class="portfolio-hover-content">
-              <i class="fas fa-plus fa-3x"></i>
+              <i class="{{ site.data.style.portfolio-icon | default: "fas fa-plus fa-3x" }}"></i>
             </div>
           </div>
           <img class="img-fluid" src="{{ project.caption.thumbnail }}" alt="">
@@ -27,34 +27,4 @@
     </div>
   </div>
 </section>
-
-<!-- Portfolio Modals -->
-{% for project in site.projects %}
-  <div class="portfolio-modal modal fade" id="{{ project.link }}" tabindex="-1" role="dialog" aria-hidden="true">
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="close-modal" data-dismiss="modal">
-          <div class="lr">
-            <div class="rl"></div>
-          </div>
-        </div>
-        <div class="container">
-          <div class="row">
-            <div class="col-lg-8 mx-auto">
-              <div class="modal-body">
-                <!-- Project Details Go Here -->
-                <h2 class="text-uppercase">{{ project.title }}</h2>
-                <p class="item-intro text-muted">{{ project.subtitle }}</p>
-                <img class="img-fluid d-block mx-auto" src="{{ project.image }}" alt="{{ project.alt }}">
-				<p>{{ project.content }}</p>		
-                <button class="btn btn-primary" data-dismiss="modal" type="button">
-                  <i class="fas fa-times"></i>
-                  Close Project</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-{% endfor %}
+{% include modals.html %}

data/_includes/services.html

@@ -1,10 +1,10 @@
 <!-- Services -->
-  <section class="page-section" id="{{ site.data.sitetext.services.section | default: services }}">
+  <section class="page-section" id="{{ site.data.sitetext.services.section | default: "services" }}">
     <div class="container">
 	
       <div class="row">
         <div class="col-lg-12 text-center">
-          <h2 class="section-heading text-uppercase">{{ site.data.sitetext.services.title | default: Services }}</h2>
+          <h2 class="section-heading text-uppercase">{{ site.data.sitetext.services.title | default: "Services" }}</h2>
           {% if site.data.sitetext.services.text %}
 		  <h3 class="section-subheading text-muted">{{ site.data.sitetext.services.text }}</h3>
 		  {% endif %}
@@ -16,7 +16,7 @@
         <div class="col-md-4">
           <span class="fa-stack fa-4x">
             <i class="fas fa-circle fa-stack-2x text-primary"></i>
-            <i class="{{ service.icon | default: fas fa-shopping-cart }} fa-stack-1x fa-inverse"></i>
+            <i class="{{ service.icon | default: "fas fa-shopping-cart" }} fa-stack-1x fa-inverse"></i>
           </span>
           <h4 class="service-heading">{{ service.title | markdownify }}</h4>
           {% if service.desc %}<div class="text-muted">{{ service.desc | markdownify }}</div>{% endif %}

data/_includes/team.html

@@ -1,5 +1,5 @@
 <!-- Team -->
-<section class="bg-light page-section" id="{{ site.data.sitetext.team.section | default: team }}">
+<section class="bg-light page-section" id="{{ site.data.sitetext.team.section | default: "team" }}">
 <div class="container">
   <div class="row">
 	<div class="col-lg-12 text-center">

data/_includes/timeline.html

@@ -1,10 +1,10 @@
 <!-- About -->
-  <section class="page-section" id="{{ site.data.sitetext.timeline.section | default: about }}">
+  <section class="page-section" id="{{ site.data.sitetext.timeline.section | default: "about" }}">
     <div class="container">
       <div class="row">
         <div class="col-lg-12 text-center">
-          <h2 class="section-heading text-uppercase">{{ site.data.sitetext.timeline.title | markdownify | default: About }}</h2>
-          <h3 class="section-subheading text-muted">{{ site.data.sitetext.timeline.text | default: timeline}}</h3>
+          <h2 class="section-heading text-uppercase">{{ site.data.sitetext.timeline.title | markdownify | default: "About" }}</h2>
+          <h3 class="section-subheading text-muted">{{ site.data.sitetext.timeline.text | default: "timeline"}}</h3>
         </div>
       </div>
       <div class="row">