Baller SRCT jumbotron logo

- thanks flexbox
- also begin work on images on homepage

srctweb/_includes/jumbotron.html

@@ -2,13 +2,9 @@
 
 <div class="jumbotron jumbostyle">
   <div class="container">
-    <div class="row">
-      <div class="col-lg-offset-3 col-lg-2 col-md-offset-3 col-md-3 col-sm-offset-2 col-sm-3 col-xs-offset-2 col-xs-4">
-        <img src="/assets/img/SRCT_sq_white_shadow.png" class="img-responsive" alt="SRCT's logo"/>
-      </div>
-      <div class="col-md-5">
-        <p class="xolonium srct-title">Student-Run<br />Computing&nbsp;+<br />Technology</p>
-      </div>
+    <div class="d-flex justify-content-center flex-wrap" id="srct-logo-home">
+      <img src="/assets/img/SRCT_sq_white_shadow.png" class="srct-logo" alt="SRCT's logo"/>
+      <p class="xolonium srct-title">Student-Run<br />Computing&nbsp;+<br />Technology</p>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>

srctweb/_layouts/default.html

@@ -17,9 +17,9 @@
     <div class="container">
       {{ content }}
     </div>
-
-    <div id="footer">
-      {% include footer.html %}
-    </div>
   </body>
+
+  <div id="footer">
+    {% include footer.html %}
+  </div>
 </html>

srctweb/_pages/home.html

@@ -34,9 +34,6 @@ jumbotron: true
 <div class="row smidge">
   <legend><i class="fa fa-child fa-fw"></i>&nbsp;<strong>Initiatives</strong></legend>
 
-  <div class="col-lg-3 col-lg-push-9 col-md-offset-0 col-md-4 col-md-push-8 col-sm-offset-3 col-sm-6 col-xs-offset-3 col-xs-6 smidge">
-    <img src="/assets/img/openhatch.jpg" alt="Renfred and Daniel assist Heather, a student attending our Openhatch workshop in 2014." class="img-circle img-responsive center-block">
-  </div>
   <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
@@ -65,15 +62,9 @@ jumbotron: true
          your idea to fruition and deployment.</p>
   </div>
 
-  <div class="col-xs-offset-2 col-xs-8 smidge">
-    <hr />
-  </div>
-  <div class="col-xs-2">
-  </div>
-
-  <div class="col-lg-3 col-lg-push-9 col-md-offset-0 col-md-4 col-md-push-8 col-sm-offset-3 col-sm-6 col-xs-offset-3 col-xs-6 smidge">
-    <img src="/assets/img/bitcamp.jpg" alt="Michel and Ben compete at Bitcamp, a hackathon held at the university of Maryland, in 2014." class="img-circle img-responsive center-block">
-  </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">
+  
   <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>
       <p>We work to offer opportunities for Mason students to strengthen their skills and
@@ -99,15 +90,9 @@ jumbotron: true
          or to the next release.</p>
   </div>
 
-  <div class="col-xs-offset-2 col-xs-8 smidge">
-    <hr />
-  </div>
-  <div class="col-xs-2">
-  </div>
-
-  <div class="col-lg-3 col-lg-push-9 col-md-offset-0 col-md-4 col-md-push-8 col-sm-offset-3 col-sm-6 col-xs-offset-3 col-xs-6 smidge">
-    <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="img-circle img-responsive center-block">
-  </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">
+  
   <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>
       <p>We believe in returning the skills we've learned together back to our community.
@@ -131,6 +116,9 @@ jumbotron: true
          possible. Women and students from minority groups are welcomed and encouraged to
          participate and join. And if you're in CS 101, come say hello!</p>
   </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">
 </div>
 
 <div class="row smidge">

srctweb/assets/css/style.css

@@ -29,11 +29,19 @@ a[name] {
 .xolonium {
   font-family: Xolonium;
 }
+#srct-logo-home {
+  padding-top: 1rem;  
+}
+.srct-logo {
+  height: 10rem;
+  width: 10rem;  
+}
 .srct-title {
   color: white;
-  font-size: 1.72em;
-  text-shadow: 1px 1px 6px #333;
-}
+  font-size: 2rem;
+  padding-top: 0.35rem;
+  padding-left: 0.5rem;
+  text-shadow: 1px 1px 6px #333;}
 .jumbostyle {
   background: url(/assets/img/meeting.jpg) no-repeat;
   background-size: cover;
@@ -41,6 +49,7 @@ a[name] {
   box-shadow: inset 0px 0px 20px #333;
   padding-top: 100px;
   padding-bottom: 100px;
+  border-radius: unset;
 }
 .srctlogo {
   width: 10px;
@@ -67,6 +76,12 @@ a[name] {
     padding-left:15px;
   }
 }
+
+.index-image {
+  border-radius: 50%;
+  height: 15rem;
+}
+
 /**
 * A cool little hack I found to try to allow a responsive Google Cal:
 * http://themeloom.com/2013/02/tips-embed-google-maps-and-calendars-in-a-responsive-wordpress-theme/