Master

_includes/css/opensmc.css

@@ -89,18 +89,36 @@ table h3 {
 
 /* Carousel base class */
 .carousel {
-  height: 425px;
-  background-image: url({{site.baseurl}}/images/bay-discovery-site-1280.jpg);
-  background-size: cover;
-  background-position: center bottom;
-  margin-bottom: 60px;
+  height: 360px;
+  width: 100%;
+/*  background-image: url({{site.baseurl}}/images/MontaraLighthouseView.png); */
+  background-size: 100%;
+  background-position: bottom; /*Some photos appear mostly blank in the large size*/
+  margin-bottom: 4em;
   color: #fff;
 }
-/* Since positioning the image, we need to help out the caption */
+
+
+/* hide the carousel indicators so that they don't overlap with the button*/
+.carousel-indicators {
+  visibility: hidden;
+}
+
 .carousel-caption {
-  z-index: 10;
+  top: 50%;
+  bottom: initial;
+-webkit-transform-style: preserve-3d;
+-moz-transform-style: preserve-3d;
+transform-style: preserve-3d;
 }
 
+cite {
+  font-size: 0.6em;
+}
+
+.carousel-credit {
+  font-style: italic;
+}
 /* Declare heights because of positioning of img element */
 
 .carousel-inner {
@@ -112,7 +130,7 @@ table h3 {
   this comment for the reason Bootstrap used hidden:
   https://github.com/twbs/bootstrap/issues/6091#issuecomment-10923509
   */
-  overflow-y: auto;
+  overflow-x: auto;
 }
 .carousel-inner > .item > img {
   position: absolute;
@@ -791,14 +809,15 @@ left: -999em;
 /* CUSTOMIZE THE CAROUSEL NDOCH
 -------------------------------------------------- */
 
-.banner_ndoch {
-  height: 400px;
-  background-image: url({{site.baseurl}}/images/bay-discovery-site-1280.jpg);
+/*.banner_ndoch {
+  height: 240px;
+  background-image: url({{site.baseurl}}/images/MontaraLighthouseView.png);
   background-size: cover;
   background-position: center bottom;
   margin-bottom: 20px;
   color: #fff;
 }
+*/
 
 
 .navp {

_includes/footer.html

@@ -5,7 +5,7 @@
       <a href="http://github.com/opensmc" rel="me"><i class="fa fa-github-square fa-2x"></i></a>
       <span class="pull-right">© OpenSMC 2016 | <a href="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/opensmc/opensmc.github.io"><i class="icon-github"> </i>Pull requests welcome!</a></span>
     </p>
-    <p class="text-center">Header photo: <a href="https://en.wikipedia.org/wiki/File:Mount_Diablo_from_SF_Bay_Discovery_Site_10-2-2011_4-24-09_PM.JPG">Mt. Diablo from SF Bay Discovery Site</a> by user Sanfranman59 on Wikimedia Commons</p>
+    <!--<p class="text-center">Photo credits: </p> -->
   </div>
 </div><!-- /.container -->
 <!-- Bootstrap core JavaScript

_includes/header.html

@@ -74,14 +74,60 @@
          ================================================== -->
          <div id="banner" class="carousel slide" data-ride="carousel" data-interval="10000">
            <!-- Indicators -->
-           <!-- <ol class="carousel-indicators">
+             <ol class="carousel-indicators">
              <li data-target="#banner" data-slide-to="0" class="active"></li>
              <li data-target="#banner" data-slide-to="1"></li>
-           </ol> -->
+             <li data-target="#banner" data-slide-to="2"></li>
+             <li data-target="#banner" data-slide-to="3"></li>
+             <li data-target="#banner" data-slide-to="4"></li>
+             <li data-target="#banner" data-slide-to="5"></li>
+             <li data-target="#banner" data-slide-to="6"></li>
+           </ol>
 
            <div class="carousel-inner">
-
+            <div class="item">
+              <img src="{{site.baseurl}}/images/MontaraLighthouseView.png" alt="Montero Lighthouse View">
+              <div class="carousel-caption">
+                <cite>Montero Lighthouse View <span class="carousel-credit">photo Anonymous</span></cite>
+              </div>
+            </div>
             <div class="item active">
+              <img src="{{site.baseurl}}/images/SSFbyASutanto.png" alt="South San Francisco">
+              <div class="carousel-caption">
+                <cite>South San Francisco <span class="carousel-credit">photo A Sutanto</span></cite>
+              </div>
+            </div>
+            <div class="item">
+              <img src="{{site.baseurl}}/images/PidgeonPoint.png" alt="Pidgeon Point Lighthouse">
+              <div class="carousel-caption">
+                <cite>Pidgeon Point Lighthouse <span class="carousel-credit">photo Peter Leupold</span></cite>
+              </div>
+            </div>
+            <div class="item">
+              <img src="{{site.baseurl}}/images/MetroCenter.png" alt="Metro Center in Foster City">
+              <div class="carousel-caption">
+                <cite>Metro Center in Foster City <span class="carousel-credit">photo Seismic_2000</span></cite>
+              </div>
+            </div>
+            <div class="item">
+              <img src="{{site.baseurl}}/images/SanBrunoMtbyTerenceChang.jpg" alt="San Bruno Mountain by Terence Chang">
+              <div class="carousel-caption">
+                <cite>San Bruno Mountain <span class="carousel-credit">photo Terence Chang</span></cite>
+              </div>
+            </div>
+            <div class="item">
+              <img src="{{site.baseurl}}/images/SanMateoSunset.jpg" alt="San Mateo Sunset">
+              <div class="carousel-caption">
+                <cite>San Mateo Sunset <span class="carousel-credit">photo Justin MacMillan</span></cite>
+              </div>
+            </div>
+            <div class="item">
+              <img src="{{site.baseurl}}/images/MilbraeCaltrain.jpg" alt="Milbrae Caltrain">
+              <div class="carousel-caption">
+                <cite>Milbrae Caltrain <span class="carousel-credit">photo Anonymous</span></cite>
+              </div>
+            </div>
+
               <div class="container">
                 <div class="jumbotron col-md-12">
                   <h1>We are OpenSMC</h1>
@@ -95,13 +141,13 @@ <h1>We are OpenSMC</h1>
               </div>
             </div>
 
-          </div>
-          <!-- <a class="left carousel-control" href="#banner" data-slide="prev">
+
+         <a class="left carousel-control" href="#banner" data-slide="prev">
             <span class="glyphicon glyphicon-chevron-left"></span>
           </a>
           <a class="right carousel-control" href="#banner" data-slide="next">
             <span class="glyphicon glyphicon-chevron-right"></span>
-          </a> -->
+          </a>
         </div><!-- /.carousel -->
 
         {% elsif page.is_ndoch %}