kcc-gem-theme-original 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: c73dc1e3cc4c4a1e759fc34c09cdacda1dad3ad677eada5e586aa70d2261b0c6
+  data.tar.gz: dc82f00004b6ce1852cc14cae4350e5af49c3d7d3c3ff47cb464cd7c93ff77c2
+SHA512:
+  metadata.gz: 78bad7fa890c9000e1d3ef12b2ff3c28b282e79bcb6c7f15328204c6885df68ab25149bbce0a660376c5fca675b2cdb3bd649df6e8c4097e41642a57fe2564c6
+  data.tar.gz: f70d617a3a289c10e9263c3b0761874aece30c30faa7ac9958ec648b08c9bc5621b8d9ef9472fa2caa2264973e69eac7bfbf4585433a5a0c862c2706c249bd0d

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 wdzajicek
+
+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.

data/README.md

@@ -0,0 +1,142 @@
+# kcc-gem-theme-original
+
+> A Jekyll theme for KCC sites
+
+<!-- [![Gem Version](https://badge.fury.io/rb/kcc-gem-theme.svg)](https://badge.fury.io/rb/kcc-gem-theme) -->
+
+-----
+
+<br>
+
+## Overview
+
+A Gem based Jekyll theme for KCC websites. This is our older theme used for KCC subdomain websites.
+
+-----
+
+<br>
+
+## Install the Gem in a Jekyll Project
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "kcc-gem-theme-original"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: kcc-gem-theme-original
+```
+
+-----
+
+<br>
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/hello. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+-----
+
+<br>
+
+## Development
+
+1. Run the command below to work on development of the theme and live preview it at http://localhost:3000.
+
+```bash
+$ npm run dev
+
+# A convenient alias:
+alias npm-d="npm run dev"
+```
+
+2. Once satisfied with the changes run a production build and look at the preview (localhost:3000) to make sure everything is ok.
+
+```bash
+$ npm run production
+
+# A convenient alias:
+alias npm-p="npm run production"
+```
+
+1. You must release a new version of the gem to use the updates in a project with the gem installed.
+
+**Note:** _Releasing a new gem version is a one-time thing. **You cannot modify the gem once pushed to rubygems.org**
+for this reason you should be thoroughly sure your updates are ready for release. **If you release a bad gem your only option is to yank it (`gem yank` command) which cannot be undone!**_
+
+Bump the gem version by incrementing the appropriate major, minor, or patch version number:
+
+```bash
+### Example .gemspec file ###
+# frozen_string_literal: true
+
+Gem::Specification.new do |spec|
+  spec.name          = "kcc-gem-theme-original"
+  spec.version       = "1.0.1" # increase the appropriate number following semantic versioning
+# ...
+### Remainder of .gemspec file omitted. ###
+```
+
+4. Push the changes to GitHub.
+
+```bash
+git add .
+git commit -m "<your commit message>"
+git push -u origin master
+```
+
+5. Build the gem.
+
+```bash
+$ gem build kcc-gem-theme-original.gemspec
+
+# should return something like:
+Successfully built RubyGem
+Name: kcc-gem-theme-original
+Version: 1.0.1
+File: kcc-gem-theme-original-1.0.1.gem
+```
+
+6. Push the resulting gem to RubyGems.
+
+```bash
+gem push kcc-gem-theme-original-1.0.1.gem
+
+# should return something like:
+Pushing gem to https://rubygems.org...
+Successfully registered gem: kcc-gem-theme-original (1.0.1)
+```
+
+7. Install the new version of the gem.
+
+```bash
+gem i kcc-gem-theme-original
+```
+
+8. Update projects using the gem.
+
+```bash
+<username> @ <computername> in ~repositories/kcc-startup-template
+$ bundle update kcc-gem-theme-original
+Fetching gem metadata from https://rubygems.org/...........
+Fetching gem metadata from https://rubygems.org/.
+# ...
+```
+
+On your next build you should see any new changes to gem theme.
+
+When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
+To add a custom directory to your theme-gem, please edit the regexp in `kcc-gem-theme.gemspec` accordingly.
+
+-----
+
+<br>
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+-----

data/_data/navigation.yml

@@ -0,0 +1,154 @@
+- link_text: Academics
+  link_href: 'academics'
+  image:
+    source: 'assets/img/e-tech_a-roberts_mar2016_D41_6690.jpg'
+    alt: 'Student working in an electrical technology lab'
+  dropdown:
+    - text: Class Schedule
+      href: 'schedule'
+    - text: Academic Calendar
+      href: 'calendar'
+    - text: Continuing Education
+      href: 'https://continuinged.kcc.edu/'
+    - text: High School Equivalency (GED/HiSET)
+      href: 'https://adulted.kcc.edu/programs/ged/'
+    - text: Commencement
+      href: 'commencement'
+    - text: Final Exam Schedule
+      href: 'final-exams'
+    - text: Register for Classes
+      href: 'register'
+    - text: Academic Catalog
+      href: 'https://kcc.smartcatalogiq.com/current/Academic-Catalog'
+- link_text:  Admissions
+  link_href: admissions
+  image:
+    source: 'assets/img/admissions-navigation-menu.jpg'
+    alt: "Student posing in front of the metal sculpture in KCC's courtyard"
+  dropdown:
+    - text: Placement Testing
+      href: 'testing'
+    - text: Apply
+      href: 'https://kccedu.force.com/portal/TX_SiteLogin?startURL=%2Fportal%2FTargetX_Base__Portal'
+    - text: Request Information
+      href: 'https://info.kcc.edu/'
+    - text: Visit/Explore
+      href: 'https://visit.kcc.edu'
+    - text: Cav Day
+      href: 'cav-day'
+    - text: 'Start in High School'
+      href: 'high-school'
+    - text: Request KCC Transcripts
+      href: '#request-your-transcript'
+    - text: 'Veterans Services'
+      href: 'veterans'
+- link_text:  Tuition & Aid
+  link_href: 'tuition-and-aid'
+  image:
+    source: 'assets/img/fafsa-early-bird-banner-18.jpg'
+    alt: 'The early bird gets the money. FAFSA available Oct. 1. Apply at fafsa.gov. More details and workshop info at www.kcc.edu/finaid'
+  dropdown:
+    - text: Financial Aid
+      href: 'financial-aid'
+    - text: Net Price Calculator
+      href: 'net-price-calculator'
+    - text: 'Cost to Attend KCC'
+      href: '#cost-to-attend'
+    - text: 'Tuition Payment & Deadlines'
+      href: '#tuition-payment-and-deadlines'
+    - text: 'Financial Aid Forms'
+      href: 'financial-aid/#financial-aid-forms'
+    - text: 'Student Employment'
+      href: 'financial-aid/#student-employment'
+- link_text: Student Resources
+  link_href: 'student-resources'
+  image:
+    source: 'assets/img/DSC_5650_helpful.jpg'
+    alt: 'Receptionist answering the phone'
+  dropdown:
+    - text: Bookstore
+      href: 'http://books.kcc.edu'
+    - text: Clubs & Organizations
+      href: 'clubs'
+    - text: 'Center for Equity, Diversity & Inclusion'
+      href: 'edi'
+    - text: Fitness Center
+      href: 'https://athletics.kcc.edu/facilities/fitness-center'
+    - text: Advising
+      href: 'advising'
+    - text: Transfer Services
+      href: 'transfer'
+    - text: 'Counseling & Referral Services'
+      href: 'counseling-and-referral-services'
+    - text: Disability Services
+      href: 'disability-services'
+    - text: Student Representatives
+      href: 'student-representatives'
+    - text: Student Complaint Policy
+      href: 'student-complaint-policy'
+    - text: Start the Semester Right
+      href: 'welcome'
+    - text: KCC Food Pantry
+      href: 'food-pantry'
+    - text: Tutoring
+      href: 'https://library.kcc.edu/tutoring/'
+    - text: TRIO Student Support Services
+      href: 'trio'
+    - text: Career Services
+      href: 'https://continuinged.kcc.edu/career-services/'
+    - text: Food Services
+      href: 'food-services'
+    - text: Workforce Services
+      href: 'https://wioa.kcc.edu/'
+- link_text: Community
+  link_href: 'community'
+  image:
+    source: 'assets/img/go_cavs_20171002_193828-web.jpg'
+    alt: 'Group photo of students holding Cavalier signs'
+  dropdown:
+    - text: Adult & Community Education
+      href: 'https://adulted.kcc.edu/'
+    - text: Continuing Education
+      href: 'https://continuinged.kcc.edu'
+    - text: Sustainability
+      href: 'sustainability'
+    - text: Arts & Culture
+      href: 'arts-and-culture'
+    - text: Workforce Services
+      href: 'https://wioa.kcc.edu/'
+- link_text: About KCC
+  link_href: 'about'
+  image:
+    source: 'assets/img/ATEC-DSC_1033.jpeg'
+    alt: 'The new Advanced Technology Education Center building'
+  dropdown:
+    - text: Newsroom
+      href: 'https://news.kcc.edu'
+    - text: Leadership
+      href: 'leadership'
+    - text: Board of Trustees
+      href: board-of-trustees
+    - text: Human Resources
+      href: 'human-resources'
+    - text: Job Openings
+      href: 'human-resources/job-openings'
+    - text: Directories
+      href: 'directories'
+    - text: Information Technology Services
+      href: 'its'
+    - text: Marketing
+      href: 'marketing'
+    - text: 'Institutional Effectiveness'
+      href: 'institutional-effectiveness'
+    - text: 'Police & Safety'
+      href: 'police-and-safety'
+    - text: 'Student Code of Conduct'
+      href: 'code-of-conduct'
+    - text: 'Title IX'
+      href: 'title-ix'
+    - text: 'Contact Us'
+      href: 'contact-us'
+    - text: Web Services
+      href: 'marketing/web-services'
+    - text: Consumer Info and Disclosures
+      href: 'consumer-info'

data/_includes/accordion.html

@@ -0,0 +1,36 @@
+<div class="row editor-link">
+  <div class="col editor-link mb-3">
+    <a href="cloudcannon:collections/_accordions/" class="btn btn-success editor-button">Edit Accordions Collection</a>
+  </div>
+</div>
+<div id="accordion" class="accordion pt-2 pb-3 mb-3">
+  {% assign page_title = page.title %}
+  {% assign accordion_collection = site.accordions | where: "accordion_page", page_title | sort: "order" %}
+  {% for item in accordion_collection %}
+  {% assign this_accordion_id = item.card_heading | downcase | remove: '-' | replace: '&', 'and' | replace: ' ', '-' | remove: "'" | replace: "/", "-" | replace: 'é', 'e' | remove: '’' | remove: '0' | remove: '1' | remove: '2' | remove: '3' | remove: '4' | remove: '5' | remove: '6' | remove: '7' | remove: '8' | remove: '9' | remove: '?' | remove: '!' | remove: '#' | remove: '$'  | remove: '.' | remove: ',' | remove: '(' | remove: ')' | remove: '®' | remove: '©' %}
+  <div class="card">
+    <div class="card-header px-0" id="card-header-{{ this_accordion_id }}">
+      <h2 class="mb-0 accordion__typography--card-header accordion__typography--hover">
+        <button
+          class="btn btn-link buttons__no-decoration accordion__button{% if forloop.first != true %} collapsed{% endif %}{% if forloop.first == true and page.accordion_expanded == false %} collapsed{% endif %}"
+          type="button" data-bs-target="#{{ this_accordion_id }}" data-bs-toggle="collapse"
+          aria-expanded="{% if forloop.first == true and page.accordion_expanded != false %}true{% else %}false{% endif %}"
+          aria-controls="{{ this_accordion_id }}">
+          {{ item.card_heading }}
+        </button>
+      </h2>
+    </div>
+    <div id="{{ this_accordion_id }}"
+      class="collapse links__offset{% if forloop.first == true and page.accordion_expanded != false %} show{% endif %}"
+      aria-labelledby="card-header-{{ this_accordion_id }}">
+      <div class="card-body">
+        <!-- Editor Link -->
+        <a href="cloudcannon:collections/{{ item.path }}" class="btn btn-success mb-4 editor-button">Edit This Accordion
+          Item</a>
+
+        {{ item.content }}
+      </div>
+    </div>
+  </div>
+  {% endfor %}
+</div>

data/_includes/accordion_path-sorting.html

@@ -0,0 +1,29 @@
+<div class="row editor-link">
+  <div class="col editor-link mb-3">
+    <a href="cloudcannon:collections/_accordions/" class="btn btn-success editor-button">Edit Accordions Collection</a>
+  </div>
+</div>
+<div id="accordion" class="accordion">
+  {% assign page_title = page.title | downcase | replace: ' ', '-' | replace: '&', 'and' %}
+  {% assign accordion_collection = site.accordions | where_exp: "item", "item.path contains page_title" %}
+  {% for item in accordion_collection | sort: 'order' %}
+  {% assign this_accordion_id = item.card_heading | downcase | remove: '-' | replace: '&', 'and' | replace: ' ', '-' | remove: "'" | replace: "/", "-" | remove: '0' | remove: '1' | remove: '2' | remove: '3' | remove: '4' | remove: '5' | remove: '6' | remove: '7' | remove: '8' | remove: '9' | remove: '?' | remove: '!' | remove: '#' | remove: '$'  | remove: '.' | remove: ',' | remove: '(' | remove: ')' | remove: '®' | remove: '©' %}
+  <div class="card">
+    <div class="card-header accordion__padding-left" id="card-header-{{ this_accordion_id }}">
+        <h2 class="mb-0 accordion__typography--card-header accordion__typography--hover">
+          <button class="btn btn-link buttons__no-decoration accordion__button{% if forloop.first != true %} collapsed{% endif %}{% if forloop.first == true and page.accordion_expanded == false %} collapsed{% endif %}" type="button" data-target="#{{ this_accordion_id }}" data-toggle="collapse" aria-expanded="{% if forloop.first == true and page.accordion_expanded != false %}true{% else %}false{% endif %}" aria-controls="{{ this_accordion_id }}">
+            {{ item.card_heading }}
+          </button>
+        </h2>
+    </div>
+    <div id="{{ this_accordion_id }}" class="collapse{% if forloop.first == true and page.accordion_expanded != false %} show{% endif %}" aria-labelledby="card-header-{{ this_accordion_id }}">
+        <div class="card-body">
+          <!-- Editor Link -->
+          <a href="cloudcannon:collections/{{ item.path }}" class="btn btn-success mb-4 editor-button">Edit This Accordion Item</a>
+
+          {{ item.content }}
+        </div>
+    </div>
+  </div>
+  {% endfor %}
+</div>

data/_includes/body.html

@@ -0,0 +1,5 @@
+    <!-- Custom CSS Stylesheet for CloudCannon -->
+    <link rel="stylesheet" href="{{page.baseurl}}assets/css/content.css">
+  </head>
+  <body{% if page.homepage == true %} id="homePage"{% endif %} data-bs-no-jquery>
+    <h1 class="visually-hidden">{%- if page.outline_title -%}{{ page.outline_title }}{% else %}{{ page.title }}{%- endif -%}</h1>

data/_includes/breadcrumbs.html

@@ -0,0 +1,44 @@
+
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb breadcrumbs">
+  {% if site.core_root == true %}  
+    <li class="breadcrumb-item">Home</li>
+  {% else %}
+    {% if page.url == "/" %}
+    <li class="breadcrumb-item">
+      <a href="../">
+        <svg id="home-icon" role="image" class="breadcrumbs--home" height="24px" width="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="home-icon-title">
+          <title lang="en" id="home-icon-title">Home</title>
+          <path class="breadcrumbs--home--border" d="M0,0h24v24H0V0z"/>
+          <polygon class="breadcrumbs--home--house" points="14.5,19.5 14.5,13.5 9.5,13.5 
+          9.5,19.5 5.5,19.5 5.5,11.5 3.3,11.5 12,3.7 20.7,11.5 18.5,11.5 18.5,19.5 "/>
+        </svg>
+      </a>
+    </li>
+    <li class="breadcrumb-item active" aria-current="page">{{ page.title }}</li>
+    {% else %}
+    {% assign url_arr = page.url | split: "/" %}
+    <li class="breadcrumb-item">
+      <a href="../{{ page.baseurl }}">
+        <svg id="home-icon" role="image" class="breadcrumbs--home" height="24px" width="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="home-icon-title">
+          <title lang="en" id="home-icon-title">Home</title>
+          <path class="breadcrumbs--home--border" d="M0,0h24v24H0V0z"/>
+          <polygon class="breadcrumbs--home--house" points="14.5,19.5 14.5,13.5 9.5,13.5 
+          9.5,19.5 5.5,19.5 5.5,11.5 3.3,11.5 12,3.7 20.7,11.5 18.5,11.5 18.5,19.5 "/>
+        </svg>
+      </a>
+    </li>
+    <li class="breadcrumb-item"><a href="{{ page.baseurl }}">{{ site.site_name }}</a></li>
+    {% for item in url_arr %}
+    {% if item != '' %}
+      {% if forloop.last %}
+    <li class="breadcrumb-item active" aria-current="page">{{ page.title }}</li>
+      {% else %}
+    <li class="breadcrumb-item"><a href="../">{{ item | capitalize }}</a></li>
+      {% endif %}
+    {% endif %}
+    {% endfor %}
+    {% endif %}
+  {% endif %}
+  </ol>
+</nav>

data/_includes/card-section.html

@@ -0,0 +1,26 @@
+      <section>
+        <div class="container">
+          <div class="row">
+            <div class="col margins__col--top section__heading-underline">
+              <h3 class="typography__section--heading margins__heading--btm">{{ page.card_section }}</h3>
+            </div>
+          </div>
+          <div class="row">{% for card in page.cards %}
+            <div class="col-md-6 col-lg-4 text-center mx-auto card-section__col--margin-btm">
+              <div class="mb-3">
+                <a href="{{ card.link }}" class="links__block"><img alt="{{ card.thumb_alt_text }}" class="img-fluid rounded-circle w-50 img__shadow--border" src="{{ page.baseurl }}assets/img/kcc-placeholder-square.png" data-src="{{ page.baseurl }}{{ card.thumb }}" /></a>
+              </div>
+              <a class="links__no-underline" href="{{ card.link }}">
+                <h4 class="typography__orange-h4">{{ card.name }}</h4>
+              </a>
+              <div class="row card-section__text-wrapper">
+                <div class="col align-self-start">
+                  <p class="typography__p--bold">{{ card.description }}</p>
+                </div>
+              </div>
+                <a href="{{ card.link }}" class="btn btn-primary">{{ card.button_text }}</a>
+            </div>
+            {%- endfor -%}
+          </div>
+        </div>
+      </section>

data/_includes/chat-now.html

@@ -0,0 +1,8 @@
+<div class="row">
+  <div class="col">
+    <div class="editable">
+      <h4 class="typography__h4">Need help?</h4>
+      <a href="https://direct.lc.chat/9258945/" class="btn btn-primary" target="_blank" rel="noopener noreferrer">Chat now</a>&nbsp;with a Student Services representative or call <a href="tel:+18158028500">815-802-8500</a>.
+    </div>
+  </div>
+</div>

data/_includes/contacts-tan.html

@@ -0,0 +1,94 @@
+{%- assign sorted_contacts = site.contacts | sort: "display_order" -%}
+<section>
+  <div class="container">
+    <div class="row">
+      <div class="col mt-1 home__col--heading-underline home__col--heading-underline-tan">
+        <h3 id="contact" class="typography__section--heading margins__heading--btm links__offset">Contacts</h3>
+      </div>
+    </div>
+  </div>
+  <div class="container contacts__padding-top background__color--tan">
+    <div class="row editor-link">
+      <div class="col editor-link mb-3">
+        <a href="cloudcannon:collections/_contacts/" class="btn btn-success editor-button">Edit Contacts</a>
+      </div>
+    </div>
+    <div class="row">
+      {%- for contact in sorted_contacts -%}
+      {%- assign contact_name = contact.name | split: " " -%}
+      {%- assign first = contact_name[0] -%}
+      {%- assign last = contact_name[1] -%}
+      {% if contact.portrait_image != "For departments with no contact photos, do not change this field." %}
+      <div class="col-md-6 contacts__col-bottom-margin">
+        <div class="row">
+          <div class="col-4 contacts__col--img">
+            {% if contact.portrait_image != 'none' %}<img
+              src="{{ page.baseurl }}assets/img/placeholder_square.jpg"
+              height="150px"
+              width="150px"
+              data-src="{{ page.baseurl }}{{ contact.portrait_image }}"
+              alt="Photo of {{ contact.name }}"
+              class="img-fluid contacts__portrait"
+            />{% endif %}
+          </div>
+          <div class="col-8 float-right">
+            <h5 class="typography__contacts--name notranslate">{{ contact.name }}</h5>
+            {% if contact.contacts_title %}<h6 class="typography__contacts--title">{{ contact.contacts_title }}</h6>{% endif %}
+            <p class="notranslate">
+              {% if contact.phone %}<a href="tel:1{{ contact.phone | remove: '-' }}" class="links__darker-link">{{ contact.phone }}</a><br>{% endif %}
+              {% if contact.email %}<a class="links__darker-link" target="_blank" href="https://secure.jotform.com/90435102482954?to[first]={{ first }}&amp;to[last]={{ last }}&amp;submitEmail={{ contact.email | remove: '@kcc.edu' }}%40kcc.edu">Email</a><br>{% endif %}
+              {%- if contact.fax -%}Fax: {{ contact.fax }}{% endif %}
+              {%- if contact.bio == true -%}<button type="button" class="btn btn-primary mt-2" data-toggle="modal" data-target="#{{ contact.name | downcase | replace: ' ', '-' | remove: '.' | remove: '/' | remove: "'" | remove: '’' }}">View Bio</button>{% endif %}
+            </p>
+          </div>
+        </div>
+      </div>
+      {% else %}
+      <div class="col-sm-6 col-md-4 mb-3">
+        <h5 class="typography__contacts--name notranslate">{{ contact.name }}</h5>
+        {% if contact.contacts_title %}<h6 class="typography__contacts--title">{{ contact.contacts_title }}</h6>{% endif %}
+        <p class="notranslate">
+          {% if contact.phone %}<a href="tel:1{{ contact.phone | remove: '-' }}" class="links__darker-link">{{ contact.phone }}</a><br>{% endif %}
+          {% if contact.email %}<a class="links__darker-link" target="_blank" href="https://secure.jotform.com/90435102482954?to[first]={{ first }}&amp;to[last]={{ last }}&amp;submitEmail={{ contact.email | remove: '@kcc.edu' }}%40kcc.edu">Email</a><br>{% endif %}
+          {% if contact.fax %}Fax: {{ contact.fax }}{% endif %}
+          {% if contact.bio == true %}<button type="button" class="btn btn-primary mt-2" data-toggle="modal" data-target="#{{ contact.name | downcase | replace: ' ', '-' | remove: '.' | remove: '/' | remove: "'" | remove: '’' }}">View Bio</button>{% endif %}
+        </p>
+      </div>
+      {%- endif -%}
+      {%- endfor -%}
+    </div>
+  </div>
+</section>
+{% for contact in sorted_contacts %}
+{%- if contact.bio == true -%}
+<!-- Modal -->
+<div class="modal fade" id="{{ contact.name | downcase | replace: ' ', '-' | remove: '.' | remove: '/' | remove: "'" | remove: '’' }}" tabindex="-1" aria-labelledby="{{ contact.name | downcase | replace: ' ', '-' | remove: '.' | remove: '/' | remove: "'" | remove: '’' }}-label" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="typography__h6" id="{{ contact.name | downcase | replace: ' ', '-' | remove: '.' | remove: '/' | remove: "'" | remove: '’' }}-label">{{ contact.name }} Bio</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        {% if contact.portrait_image != 'For departments with no contact photos, do not change this field.' and contact.portrait_image != 'none' %}<img
+          src="{{ page.baseurl }}assets/img/placeholder_square.jpg"
+          height="150px"
+          width="150px"
+          data-src="{{ page.baseurl }}{{ contact.portrait_image }}"
+          class="img-fluid float-left mr-2 mb-2"
+          alt="Photo of {{ contact.name }} KCC's {{ contact.contacts_title }}"
+        >{% endif %}
+        <h5 class="typography__contacts--name notranslate">{{ contact.name }}</h5>
+        {% if contact.contacts_title %}<h6 class="typography__contacts--title">{{ contact.contacts_title }}</h6>{% endif %}
+        {{ contact.content }}
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+{%- endif -%}
+{% endfor %}