Add about js and styles

website/static/css/style.css

@@ -35,6 +35,9 @@ body {
     padding-top: 50px;
 }
 
+.clip{
+    overflow: hidden;
+}
 .title{
     text-align: center;
     font-size: 50px;
@@ -133,19 +136,70 @@ ul.ui-autocomplete {
 	position: fixed;
 	top: 51px;
 	bottom: 0;
-	z-index: 3;
+	z-index: 10;
 	display: none;
+	overflow-y: scroll;
 }
 #info-name {
 	font-size: 22px;
 	margin-bottom: 5px;
 }
-#info-close {
+#info-close, #about-close {
     position: absolute;
     right: 0;
     padding: 6px 19px 19px 19px;
     cursor: pointer;
     z-index: 10;
+    opacity: 0.4;
+}
+#about-close-nav {
+    opacity: 0.5;
+    padding: 2px 15px 0px 15px;
+    display: none;
+}
+#info-close:hover, #about-close:hover, #about-close-nav:hover {
+    opacity: 1;
+}
+#about-body{
+    position: fixed;
+    z-index: 1040;
+    top: 51px;
+    width: 100%;
+    bottom: 0;
+    overflow: scroll;
+}
+#about-container {  
+    width: 100%;
+    overflow-y: auto;
+}
+.about-content {
+    background-color: #FFF;
+    padding-bottom: 20px;
+}
+#about-example{
+    background-color: rgba(255,255,255,0.4);
+}
+.about-top-p{
+    margin-top: 20px;
+}
+#about-link{
+    cursor: pointer;
+}
+.grid-blur{
+    opacity: 0.54;
+    -webkit-filter: blur(3px); 
+    -moz-filter: blur(3px); 
+    -o-filter: blur(3px); 
+    -ms-filter: blur(3px); 
+    filter: blur(3px);
+}
+.main-container{
+    /* Transitions for .grid-blur */
+    -webkit-transition: opacity 356ms ease-in-out, -webkit-filter 356ms ease-in-out;
+    -moz-transition: opacity 356ms ease-in-out, -moz-filter 356ms ease-in-out;;
+    -o-transition: opacity 356ms ease-in-out, -o-filter 356ms ease-in-out;;
+    -ms-transition: opacity 356ms ease-in-out, -ms-filter 356ms ease-in-out;
+    transition: opacity 356ms ease-in-out, "filter" 356ms ease-in-out;
 }
 /* Custom Responsive Classes */
 /* xs */
@@ -190,6 +244,16 @@ ul.ui-autocomplete {
     #info-close {
         display: none;
     }
+    #about-close {
+        display: none;
+    }
+    #about-body {
+        bottom: 100px;
+    }
+    .navbar-nav li{
+        margin-left: 10px;
+        margin-right: 10px;
+    }
 }
 /* lg */
 @media (min-width: 1200px) {

website/static/js/about.js

+$(document).ready(function(){
+    $('#about-link').click(function(){
+         $(this).parent().toggleClass('active');
+         $('#about-body').slideToggle(356);
+         $('.main-container').toggleClass('grid-blur');
+         // Prevent body from scolling when about section is active
+         $('body').toggleClass('clip');
+         $('#about-link-text, #about-close-nav').toggle();
+    });
+    $('#about-close').click(function(){
+         $('#about-link').parent().removeClass('active');
+         $('#about-body').slideUp(356);
+         $('.main-container').removeClass('grid-blur');
+         $('body').removeClass('clip');
+         $('#about-link-text').show();
+         $('#about-close-nav').hide();
+    });
+});

whats_open/templates/base.html

@@ -12,6 +12,7 @@
         <script src="{{ STATIC_URL }}js/grid.js"></script>
         <script src="{{ STATIC_URL }}js/typeAhead.js"></script>
         <script src="{{ STATIC_URL }}js/info.js"></script>
+        <script src="{{ STATIC_URL }}js/about.js"></script>
         <link rel="icon" href="{{ STATIC_URL }}/img/gmu-logo.ico">
         {% block title %}
         <title>