jekyll-agency 1.0.9 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 20cb1dcce6c13966c2996d70b87853439ef0cb6feb7205fa77b16b7aaa7f783b
-  data.tar.gz: 534a5de4d144a0b68046d790c2fa2eb90cf9610fc11f7f8eea722c03aca67fc1
+  metadata.gz: 106bcaa5271f7d88b493d141f724feb61fb618eb228a05ffb1505821bfcae200
+  data.tar.gz: 64dda193213710ebc9a4c826c56dfb829daa9b6e12676cb39eb87fd494a507a3
 SHA512:
-  metadata.gz: ac6c0d0684836c510575c005bc794c852feed442452df80b5e4de02d7c9507aba69495dc5cf0bff2beed8638a951c7c95d51c4eb7d4ded0f8627e5cc717ed383
-  data.tar.gz: 7d1f5d38db521b34937c43fa25dbbce1a505a2f8da29ea7e3c035c9fcbd7145740d8f2f480f720eb295c19b88daa55d13f16c96d6190fcfe58cb9dd06350aad2
+  metadata.gz: 648f6e57084b0739f3fc083cc00b309d82498daf52f328a8785a515d3d5e584d77b0f9a6bab727dd305c6d60db0e1cae4ad575449ffae866b0abfadc99b9b757
+  data.tar.gz: 52888845ef31d67422093a86035513e629bd4de01a8ad68c6ac1185bfe279bec209c81cd2745b61079342c70b9ba2b8df4d92d80236045a3d0420a3d6764557d

data/README.md

@@ -1,14 +1,17 @@
-<!--[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)
-[![RubyGems Downloads](https://img.shields.io/gem/dt/jekyll-agency.svg)](https://rubygems.org/gems/jekyll-agency)
+[![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)-->
 
+![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. 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:
+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
@@ -16,22 +19,25 @@ This is the [Agency Bootstrap theme](https://startbootstrap.com/themes/agency/)
 - 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 image(s)
-- about section (different from the timeline)
-- custom footer
-<!-- - portfolio carousel (coming soon) -->
+- 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:
 
 - `_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.**
@@ -39,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`:
 
@@ -46,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.
 
-## Usage
+[![template button](https://img.shields.io/badge/-Create%20repository%20from%20template-brightgreen)](https://github.com/raviriley/agency-jekyll-theme-starter/generate)
 
-<!--TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.-->
+#### 3. Remote Theme Installation
+
+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.
@@ -76,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

@@ -6,3 +6,6 @@
 #Image Customization
 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">

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.portfolio %}
-  <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">

data/_sass/components/client-scroll.scss

@@ -0,0 +1,11 @@
+// Styling for the horizontally scrolling clients section
+#scrolling-clients {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+#col-md-3 col-sm-6 {
+  flex: 0 0 auto;
+}

data/assets/css/agency.scss

@@ -20,6 +20,7 @@ $contact-image: "{{ site.data.style.contact-image }}";
 // Components
 @import "components/buttons.scss";
 @import "components/navbar.scss";
+@import "components/client-scroll.scss";
 
 // Layout
 @import "layout/masthead.scss";