added caption to carousel image 2 + CSS updates.
authorrsiddharth <rsd@gnu.org>
Tue, 8 Oct 2013 17:31:36 +0000 (23:01 +0530)
committerrsiddharth <rsd@gnu.org>
Tue, 8 Oct 2013 17:31:36 +0000 (23:01 +0530)
Now we have to types of carousel captions -- one that gets put at the
top right (tr) and the other that gets put at bottom left (bl).

2014/assets/css/custom.css
server/staging/lpc14/index.html

index 9c13ba76eccc358329bbb431dc605e2777c0b385..dcb1e08e246af9d7f2d9afde5d627cec92d9279d 100644 (file)
@@ -225,7 +225,7 @@ input[type="checkbox"] {
   display: none;
 }
 
-.carousel-caption {
+.carousel-caption-tr {
   position: absolute;
   top: 5%;
   bottom: auto;
@@ -241,14 +241,36 @@ input[type="checkbox"] {
   border-radius: 8px;
 }
 
+.carousel-caption-bl {
+  position: absolute;
+  top: auto;
+  bottom: 5%;
+  right: 35%;
+  left: 2%;
+  z-index: 10;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  color: #ffffff;
+  text-align: center;
+  background-color: rgba(0, 0, 0,0.4);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+  border-radius: 8px;
+}
+
 @media screen and (min-width: 1280px) {
-  .carousel-caption {
+  .carousel-caption-tr {
     padding-bottom: 10px;
        margin-left: 65px;
        margin-right: auto;
   }
-}
 
+  .carousel-caption-bl {
+    padding-bottom: 10px;
+       margin-left: auto;
+       margin-right: 65px;
+  }
+
+}
 
 a {
   color: #428bca;
index 0d120f867cf2e90bdf02c6f6901962072229af0a..4ad84cd92a2fe4b29a469d2dfa74642859b2e3e1 100644 (file)
                 <li class="item active">
                                  <img src="/2014/i/lp13-expand-the-tent.jpg"
                                           alt="[ The Expanding the Tent panel ]">
-                                 <p class="lead carousel-caption">
+                                 <p class="lead carousel-caption-tr">
                                        Call for proposals now open!
                                        <a class="btn btn-default" href="https://libreplanet.org/2014/proposals">
                                          Propose a session
                 <li class="item">
                                  <img src="/2014/i/lp13-printer.jpg"
                                           alt="[ Aleph Objects' Lulzbot 3D printer ]">
+                                 <p class="lead carousel-caption-tr">
+                                       Volunteers are crucial in planing and staffing LibrePlanet
+                                       <a class="btn btn-default" href="#">
+                                         Volunteer
+                                       </a>
+                                 </p>
                                </li>
                                <li class="item">
                                  <img src="/2014/i/lp13-room-110.jpg"
                                           alt="[ LibrePlanet 2013 discussion ]">
-                                 <p class="lead carousel-caption">
+                                 <p class="lead carousel-caption-bl">
                                        <a class="btn btn-default"
                                           href="https://libreplanet.org/wiki/LibrePlanet:Conference/2014/Conference_brainstorm_page">
                                          Share your ideas