Advertisement
Guest User

Untitled

a guest
Feb 18th, 2016
111
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.26 KB | None | 0 0
  1. CSS:
  2. `
  3. @import ''_palette'';
  4. $body-bg:                           #505050;
  5. $navbar-inverse-bg:                 $color-primary-0;
  6. $navbar-inverse-link-active-color:  lighten($color-primary-1, 15%); //Active link
  7. $navbar-inverse-link-color:         $color-primary-1;
  8. $link-color:                        $color-secondary-2-0;
  9. $link-hover-color:                  lighten($link-color, 15%);
  10. $text-color:                        $color-secondary-2-2;
  11. $headings-color:                    $color-secondary-2-3; //h1, h2, h3...
  12. @import ''{reywood:bootstrap3-sass}/bootstrap'';
  13.  
  14. body {
  15.   padding-top: 50px;
  16. }
  17. #wrap{
  18.     padding: 40px 15px;
  19.     min-height: 100%;
  20.     height: auto !important;
  21.     height: 100%;
  22.     /* Negative indent footer by its height */
  23.     margin: 0 auto -60px;
  24.     /* Pad bottom by footer height */
  25.     padding: 0 0 60px;
  26. }
  27.  
  28. .container {
  29.     text-align: center;
  30. }
  31.  
  32. #player-btns {
  33.     padding-top: 1.5%;
  34. }
  35. /* Set the fixed height of the footer here */
  36. #footer {
  37.     position: absolute;
  38.     bottom: 0;
  39.     width: 100%;
  40.     height: 60px;
  41.     padding-left: 15px;
  42.     padding-right: 15px;
  43.     text-align: center;
  44.     background: $body-bg;
  45. }
  46. `
  47. Footer:
  48. `
  49. <template name="Footer">
  50.     <div class="container" id="footer">
  51.         <div class="container-fluid">
  52.             <div class="row">
  53.                 <div class="col-md-1"></div>
  54.                 <div class="col-md-3"></div>
  55.                 <div class="col-md-4 " id="player-btns" >
  56.                     <!-- <div class="col-xs-4"><i class="fa fa-fast-backward fa-2x"></i></div> -->
  57.                     {{#if isTime}}
  58.                     <!--Only displays if it's between 9PM-12AM on Saturday -->
  59.                     <div id="play-btn" class="col-xs-12">
  60.                     <i id='icon' class="fa fa-play fa-2x"></i>
  61.                     <audio id= "source" src="http://wrek.org" ></audio>
  62.                     </div>
  63.                     {{else}}
  64.                     <p>Check back Saturday between 9PM-midnight!</p>
  65.                     {{/if}}
  66.                     <!-- <div class="col-xd-4"><i class="fa fa-fast-forward fa-2x"></i></div> -->
  67.                 </div>
  68.                 <div class="col-md-3">
  69.                     <div id="vol"></div>
  70.                 </div>
  71.                 <div class="col-xs-1"></div>
  72.             </div>
  73.         </div>
  74.     </div>
  75. </template>
  76. `
  77.  
  78. Relevant part of the main template:
  79. `
  80. <template name="frame">
  81.     <head>
  82.         <meta charset="utf-8">
  83.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  84.         <meta name="viewport" content="width=device-width, initial-scale=1">
  85.         <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  86.         <title>EDMSS: {{title}}</title>
  87.         ...
  88.         <!-- Site -->
  89.         <div class="container">
  90.  
  91.           <div class="starter-template">
  92.             {{>yield}}
  93.           </div>
  94.  
  95.         </div><!-- /.container -->
  96.         {{>Footer}}
  97.  
  98.         <!-- Bootstrap core JavaScript
  99.        ================================================== -->
  100.         <!-- Placed at the end of the document so the pages load faster -->
  101.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  102.     </body>
  103. </template>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement