Finish conversion of the homepage

- change class names
- responsive images

docker-compose.yml

 srctweb:
-    image: jekyll/jekyll
-    command: jekyll serve -s './srctweb' -d './srctweb/_site' --trace --watch --incremental
-    ports:
-        - 4000:4000
-    volumes:
-        - .:/srv/jekyll
+  image: jekyll/jekyll
+  command: jekyll serve -s './srctweb' -d './srctweb/_site' --trace --watch --incremental
+  ports:
+    - 4000:4000
+  volumes:
+    - .:/srv/jekyll

srctweb/_includes/banner.html

 <div id="banner">
   <div class="container">
     <div class="row">
-      <div class="col-lg-12 page-header">
+      <div class="col-lg-12">
         <h1><strong>{{ page.title }}</strong></h1>
-        <p class="lead">{{ page.description }}</p>
+        <p class="text-muted">{{ page.description }}</p>
       </div>
     </div>
   </div>

srctweb/_includes/footer.html

@@ -33,8 +33,4 @@
       </div>
     </div>
   </small>
-</div>
-
-<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+</div>
\ No newline at end of file

srctweb/_pages/contact.html

@@ -4,9 +4,6 @@ description: "Drop us a line!"
 permalink: /contact/
 ---
 
-<h4><p>SRCT communicates through mailing lists, our <a href="Slack team"></a>, IRC on <a href="http://freenode.net/">freenode</a> (#srct), and via our
-<a href="https://facebook.com/groups/gmu.srct">private Facebook group</a>--
-just request to be added.</p></h4>
 
 <legend><i class="fa fa-envelope-o fa-fw"></i>&nbsp;<strong>Mailing Lists</strong></legend>
 

srctweb/_pages/documents/terms_of_service.html

@@ -54,7 +54,7 @@ permalink: /documents/terms_of_service/
   
       <div class="col-md-12">
         <h2>Your account, privacy, and rights</h2>
-        <p><strong>A full Mason account</strong></p>
+        <p><strong>A Full Mason Account</strong></p>
 	<p>Your account is based off of your Mason student account, including
 	your Mason password. We strongly encourage you,
 	<a href="http://tsd.gmu.edu/services/strongpassword/">just like

srctweb/_pages/home.html

@@ -9,10 +9,9 @@ jumbotron: true
 <div class="row smidge">
   <div class="col-md-12 text-center">
     <h4>
-      <span class="label label-default">
-        <i class="fa fa-gavel fa-fw"></i>&nbsp;<strong>Next Meeting</strong>
-       </span>&nbsp;&nbsp;
-       <span id="meetingDate">Please wait while we fetch the upcoming meeting information...</span>
+      <i class="fa fa-gavel fa-fw"></i>&nbsp;<strong>Next Meeting</strong>
+      &nbsp;
+      <span id="meetingDate">Please wait while we fetch the upcoming meeting information...</span>
     </h4>
   </div>
 </div>
@@ -34,6 +33,9 @@ jumbotron: true
 <div class="row smidge">
   <legend><i class="fa fa-child fa-fw"></i>&nbsp;<strong>Initiatives</strong></legend>
 
+  <!-- Projects & Infrastructure Responsive Image -->
+  <img src="/assets/img/openhatch.jpg" alt="Renfred and Daniel assist Heather, a student attending our Openhatch workshop in 2014." class="index-image d-md-none d-flex mx-auto">  
+  
   <div class="col-lg-9 col-lg-pull-3 col-md-8 col-md-pull-4 col-sm-12 col-xs-12 smidge">
     <h4><strong>Projects & Infrastructure</strong></h4>
       <p>Our primary purpose is improving life at Mason by developing and hosting
@@ -63,7 +65,10 @@ jumbotron: true
   </div>
 
   <!-- Projects & Infrastructure Image -->
-  <img src="/assets/img/openhatch.jpg" alt="Renfred and Daniel assist Heather, a student attending our Openhatch workshop in 2014." class="index-image">
+  <img src="/assets/img/openhatch.jpg" alt="Renfred and Daniel assist Heather, a student attending our Openhatch workshop in 2014." class="index-image d-none d-lg-block">
+
+  <!-- Events & Workshops Responsive Image -->
+  <img src="/assets/img/bitcamp.jpg" alt="Michel and Ben compete at Bitcamp, a hackathon held at the university of Maryland, in 2014." class="index-image d-md-none d-flex mx-auto">
   
   <div class="col-lg-9 col-lg-pull-3 col-md-8 col-md-pull-4 col-sm-12 col-xs-12 smidge">
     <h4><strong>Events & Workshops</strong></h4>
@@ -91,7 +96,10 @@ jumbotron: true
   </div>
 
   <!-- Events & Workshops Image -->
-  <img src="/assets/img/bitcamp.jpg" alt="Michel and Ben compete at Bitcamp, a hackathon held at the university of Maryland, in 2014." class="index-image">
+  <img src="/assets/img/bitcamp.jpg" alt="Michel and Ben compete at Bitcamp, a hackathon held at the university of Maryland, in 2014." class="index-image d-none d-lg-block">
+
+  <!-- Outreach & Community Responsive Image -->
+  <img src="/assets/img/org-fair.jpg" alt="Chris, Melissa, and Luca  stand at our table for Student Involvement's Get Connected student org fair in the beginning of fall 2014." class="index-image d-md-none d-flex mx-auto">
   
   <div class="col-lg-9 col-lg-pull-3 col-md-8 col-md-pull-4 col-sm-12 col-xs-12 smidge">
     <h4><strong>Outreach & Community</strong></h4>
@@ -118,17 +126,18 @@ jumbotron: true
   </div>
 
   <!-- Outreach & Community Image -->
-  <img src="/assets/img/org-fair.jpg" alt="Chris, Melissa, and Luca  stand at our table for Student Involvement's Get Connected student org fair in the beginning of fall 2014." class="index-image">
+  <img src="/assets/img/org-fair.jpg" alt="Chris, Melissa, and Luca  stand at our table for Student Involvement's Get Connected student org fair in the beginning of fall 2014." class="index-image d-none d-lg-block">
 </div>
 
 <div class="row smidge">
   <legend><i class="fa fa-laptop fa-fw"></i>&nbsp;<strong>Getting Involved</strong></legend>
+
   <div class="col-lg-4">
-    <div class="panel panel-primary">
-      <div class="panel-heading">
-        <h3 class="panel-title text-center"><i class="fa fa-comments-o fa-fw"></i> Get In Touch</h3>
+    <div class="card border-primary index-card">
+      <div class="card-header text-white bg-primary">
+        <h4 class="card-title text-center"><i class="fa fa-comments-o fa-fw"></i> Get In Touch</h4>
       </div>
-      <div class="panel-body">
+      <div class="card-body">
         <p>
           We communicate and organize primarily on <a href="https://slack.com/is">Slack</a>.
           Slack is a communication app for teams. If you've used
@@ -158,11 +167,11 @@ jumbotron: true
   </div>
 
   <div class="col-lg-4">
-    <div class="panel panel-primary">
-      <div class="panel-heading">
-        <h3 class="panel-title text-center"><i class="fa fa-heart-o fa-fw"></i> Stop On By</h3>
+    <div class="card border-primary index-card">
+      <div class="card-header text-white bg-primary">
+        <h4 class="card-title text-center"><i class="fa fa-heart-o fa-fw"></i> Stop On By</h4>
       </div>
-      <div class="panel-body">
+      <div class="card-body">
         <p>
           There are a couple of opportunities to come and say hello. During the semester,
           we hold weekly meetings, where we run
@@ -191,24 +200,28 @@ jumbotron: true
   </div>
 
   <div class="col-lg-4">
-    <div class="panel panel-primary">
-      <div class="panel-heading">
-        <h3 class="panel-title text-center"><i class="fa fa-files-o fa-fw"></i> Additional Resources</h3>
+    <div class="card border-primary index-card">
+      <div class="card-header text-white bg-primary">
+        <h4 class="card-title text-center"><i class="fa fa-files-o fa-fw"></i> Additional Resources</h4>
       </div>
       <div class="panel-body">
-        <ul class="nav nav-pills nav-justified smidgen small" role="tablist">
-          <li role="presentation" class="active">
-            <a href="#code" aria-controls="code" role="tab" data-toggle="tab"><strong>Code</strong></a>
-          </li>
-          <li role="presentation">
-            <a href="#design" aria-controls="design" role="tab" data-toggle="tab"><strong>Design</strong></a>
-          </li>
-          <li role="presentation">
-            <a href="#infra" aria-controls="infra" role="tab" data-toggle="tab"><strong>Infrastructure</strong></a>
-          </li>
-        </ul>
-        <div class="tab-content">
-          <div role="tabpanel" class="tab-pane fade in active" id="code">
+        <br />
+        <div class="row d-flex">
+          <ul class="nav nav-pills mx-auto">
+            <li role="presentation" class="nav-item">
+              <a class="nav-link active" href="#code" aria-controls="code" role="tab" data-toggle="pill"><strong>Code</strong></a>
+            </li>
+            <li role="presentation" class="nav-item">
+              <a class="nav-link" href="#design" aria-controls="design" role="tab" data-toggle="pill"><strong>Design</strong></a>
+            </li>
+            <li role="presentation" class="nav-item">
+              <a class="nav-link" href="#infra" aria-controls="infra" role="tab" data-toggle="pill"><strong>Infrastructure</strong></a>
+            </li>
+          </ul>
+        </div>
+        <br />        
+        <div class="tab-content container">
+          <div role="tabpanel" class="tab-pane fade show active" id="code">
             <p>
               Version control lets developers keep an organized history of their changes.
               This means you can fearlessly try out your ideas and allows multiple people

srctweb/assets/css/style.css

@@ -77,9 +77,14 @@ a[name] {
   }
 }
 
+.index-card {
+  margin-bottom: 1rem;
+}
+
 .index-image {
   border-radius: 50%;
   height: 15rem;
+  margin-bottom: 1rem;
 }
 
 /**
@@ -122,7 +127,7 @@ a[name] {
 }
 .project-link:hover, .project-link:active, .project-link:focus {
   text-decoration: none;
-  outline:0;
+  outline: 0;
 }
 .project-icon-stacked {
   font-size:55px;
@@ -142,12 +147,11 @@ a[name] {
   padding-bottom:15px;
 }
 #banner {
-  /*background:#FBFCCA;*/
+  padding-top: 5rem;
   background: #e4e6d7;
-  /*background: #ffcc33;*/
-  /*background: #27AE60;*/
   width: 100%;
   margin-bottom: 15px;
+  font-size: 22.5px;
 }
 .page-header {
   margin-top:0;