Difference between revisions of "Template:Washington"

 
(134 intermediate revisions by the same user not shown)
Line 30: Line 30:
 
/* page background color*/
 
/* page background color*/
 
body {  
 
body {  
−
background-color: #683f49;
+
background-color: #77525B;
 
                 text-align: center;
 
                 text-align: center;
 
}
 
}
Line 43: Line 43:
 
border-bottom: 6px solid #b48a27;
 
border-bottom: 6px solid #b48a27;
 
                                 font-family: "Open Sans", Helvetica, sans-serif;
 
                                 font-family: "Open Sans", Helvetica, sans-serif;
 +
 
}
 
}
 +
 +
                        #main {
 +
                                background-image:url("https://static.igem.org/mediawiki/2015/2/2d/Huskyigemtrans.png");
 +
                                background-repeat:no-repeat;
 +
                                background-position: 20% 6%;
 +
                                background-size: 707.25px 636.75px;
 +
}
  
 
/* Creates the container for the menu */
 
/* Creates the container for the menu */
Line 49: Line 57:
 
width: 100%;
 
width: 100%;
 
background-color: #EEEDEA;
 
background-color: #EEEDEA;
−
height: 60px;
+
height: auto;
 
border-bottom: 6px solid #b48a27;
 
border-bottom: 6px solid #b48a27;
 
font-family: "Open Sans", Helvetica, sans-serif;
 
font-family: "Open Sans", Helvetica, sans-serif;
Line 56: Line 64:
 
/* Creates the container for the content */
 
/* Creates the container for the content */
 
#contentContainer {
 
#contentContainer {
−
background-color: #EEEDEA;
 
−
width: 724px;
 
−
                                max-width: 980px;
 
 
                                 margin: 0 auto;
 
                                 margin: 0 auto;
 
                                 height: auto;
 
                                 height: auto;
Line 64: Line 69:
 
padding: 10px;
 
padding: 10px;
 
                                 padding-right:24px;
 
                                 padding-right:24px;
 +
                                color: white;
 
}
 
}
  
Line 70: Line 76:
 
#bannerContainer {
 
#bannerContainer {
 
height:0;
 
height:0;
−
                                 padding-top:39%;
+
                                 padding-top:32%;
 
                                 //background-image: url("https://static.igem.org/mediawiki/2015/6/69/Igem_front_page_UW.png");
 
                                 //background-image: url("https://static.igem.org/mediawiki/2015/6/69/Igem_front_page_UW.png");
−
                                  background-image: url("https://static.igem.org/mediawiki/2015/7/7b/Igem_skyline_seattle.png");
+
                                //background-image: url("https://static.igem.org/mediawiki/2015/7/7b/Igem_skyline_seattle.png");
 +
                                  background-image: url("https://static.igem.org/mediawiki/2015/d/d6/Igem_banner.jpg");
 
                                 background-repeat: no-repeat;
 
                                 background-repeat: no-repeat;
 
                                 background-size: 100%;
 
                                 background-size: 100%;
Line 79: Line 86:
 
text-align:center;
 
text-align:center;
 
}
 
}
−
            #wrapper{
+
 
−
               
+
                        #wrapper{
−
                width: 960px;
+
                                width: 960px;
−
                margin:0 auto:
+
                                margin:0 auto:
−
                    text-align:center;
+
                                text-align:center;
−
            }
+
                        }
  
 
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
 
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
Line 90: Line 97:
  
 
/*Change the styling of text for everything inside main container*/
 
/*Change the styling of text for everything inside main container*/
−
#mainContainer p {  
+
#mainContainer p, p2 {  
 
font-family: "Open Sans", Helvetica, sans-serif;
 
font-family: "Open Sans", Helvetica, sans-serif;
 
font-size: 12px;
 
font-size: 12px;
 
color: #0e232f;
 
color: #0e232f;
 
                                 width: 95%;
 
                                 width: 95%;
 +
                                line-height: 200%;
 +
                                line-spacing: 10px;
 
}
 
}
 
 
 
/*This changes the color and font family */
 
/*This changes the color and font family */
−
#contentContainer h1, h2, h3, h4, h5, h6 {  
+
#contentContainer h2, h3, h4, h5, h6 {  
 
font-family: "Uni Sans", Helvetica, sans-serif;
 
font-family: "Uni Sans", Helvetica, sans-serif;
−
color: #0e232f;
+
color: white;
 +
                                line-spacing: 5px;
 +
border-bottom: none;
 +
font-weight: bold;
 +
                                font-size: 25px;
 +
                                line-height:100%;
 +
                                padding-top: 1em;
 +
                                padding-bottom: 1em;
 +
                                text-align: center;
 +
                                margin-right: 20%;
 +
                                margin-left: 20%;
 +
                               
 +
}
 +
 
 +
#contentContainer h1 {
 +
font-family: "Uni Sans", Helvetica, sans-serif;
 +
color: white;
 +
                                line-spacing: 5px;
 +
border-bottom: none;
 +
font-weight: bold;
 +
                                font-size: 25px;
 +
                                line-height:100%;
 +
                                padding-top: 1em;
 +
                                padding-bottom: 1em;
 +
                                margin-right: 20%;
 +
                                margin-left: 20%;
 +
                               
 +
}
 +
 
 +
                        #contentContainer p {
 +
                                margin-right: 15%;
 +
                                margin-left: 15%;
 +
font-family: "Uni Sans", Helvetica, sans-serif;
 +
color: white;
 
                                 line-spacing: 5px;
 
                                 line-spacing: 5px;
 
border-bottom: none;
 
border-bottom: none;
 
font-weight: normal;
 
font-weight: normal;
 +
                                line-height: 200%;
 +
                                font-size: 15.5px;
 
}
 
}
 +
 +
                        #contentContainer p1 {
 +
font-family: "Uni Sans", Helvetica, sans-serif;
 +
color: white;
 +
                                line-spacing: 5px;
 +
border-bottom: none;
 +
font-weight: normal;
 +
                                line-height: 200%;
 +
                                font-size: 15.5px;
 +
}
 +
                        #contentContainer p2 {
 +
                                margin-right: 30%;
 +
                                margin-left: 30%;
 +
font-family: "Uni Sans", Helvetica, sans-serif;
 +
color: white;
 +
                                line-spacing: 5px;
 +
border-bottom: none;
 +
font-weight: normal;
 +
                                line-height: 200%;
 +
                                font-size: 15.5px;
 +
}
 +
  
 
/*Style of the links - links are different inside the menu */
 
/*Style of the links - links are different inside the menu */
 
#contentContainer a {  
 
#contentContainer a {  
−
                font-family: "Open Sans", sans-serif;
+
                                font-family: "Open Sans", sans-serif;
 
font-weight: bold;
 
font-weight: bold;
 
color: #85754d;
 
color: #85754d;
 
}
 
}
  
−
  /* Styling links on hover- links are different inside the menu */
+
/* Styling links on hover- links are different inside the menu */
 
#contentContainer a:hover{
 
#contentContainer a:hover{
 
color: #85754d;
 
color: #85754d;
Line 148: Line 214:
 
     }
 
     }
 
              
 
              
−
                #links {
+
                        #links {
−
                    display: inline-block;
+
                              display: inline-block;
−
                    position: relative;
+
                              position: relative;
−
                    width: 450px;
+
                              width: 450px;
−
                    height: 450px;
+
                              height: 450px;
−
                    float: inherit;
+
                              float: inherit;
−
                }
+
                        }
 
              
 
              
−
                #links p {
+
                        #links p {
−
                    text-align: right;
+
                              text-align: right;
−
                    padding-top: 10px;
+
                              padding-top: 10px;
−
                    padding-bottom: 10px;
+
                              padding-bottom: 10px;
−
                }
+
                        }
 
              
 
              
−
                #links a {
+
                        #links a {
−
                    font-size: 24px;
+
                              font-size: 24px;
−
                    font-weight: bold;
+
                              font-weight: bold;
−
                    font-family: "Encode Sans Normal";
+
                              font-family: "Encode Sans Normal";
−
                    color: #4b2e83;
+
                              color: #4b2e83;
−
                    text-decoration: none;
+
                              text-decoration: none;
−
                }
+
                        }
 
              
 
              
−
                #links a:hover {
+
                        #links a:hover {
−
                    font-size: 36px;
+
                              font-size: 36px;
−
                }
+
                        }
 +
                       
 +
                        img {
 +
                              float: center;
 +
                              margin: 0px 0px 15px 20px;
 +
}
  
  
Line 191: Line 262:
 
                                 margin-right: auto;
 
                                 margin-right: auto;
 
                                 margin-bottom: 0px;
 
                                 margin-bottom: 0px;
−
                                 margin-top: -20px;
+
                                 margin-top: -7px;
 
                                 padding-left: 0px;
 
                                 padding-left: 0px;
 
                                 padding-right: 0px;
 
                                 padding-right: 0px;
 
                                 text-align: center;
 
                                 text-align: center;
 
                                 z-index: 1;
 
                                 z-index: 1;
−
                                 width: 800px;
+
                                 width: auto;
−
                                 height: 60px;
+
                                max-width: 950px;
 +
                                 height: auto;
 
                                 background: #ffffff;
 
                                 background: #ffffff;
 
                                 font-style: bold;
 
                                 font-style: bold;
Line 272: Line 344:
 
                 /* side bar css */
 
                 /* side bar css */
 
#sidebar {
 
#sidebar {
−
     width:300px;
+
     width:200px;
 
float:right;
 
float:right;
 
}
 
}
Line 286: Line 358:
  
 
nav.stick {
 
nav.stick {
−
     position: left;
+
     position: fixed;
−
     top: 0;
+
     top: 12px;
 
     z-index: 10000;
 
     z-index: 10000;
 
     margin-top:12px;
 
     margin-top:12px;
Line 295: Line 367:
 
     margin:0;
 
     margin:0;
 
     padding:0;
 
     padding:0;
−
none
+
list-style-image:url("https://static.igem.org/mediawiki/2015/e/e9/Replace_pixel_washington.png");
−
  list-style-image:default;
+
 
}
 
}
  
Line 304: Line 375:
  
 
nav li a {
 
nav li a {
 +
 
     color:rgb(50,50,50);
 
     color:rgb(50,50,50);
 
     font-weight:700;
 
     font-weight:700;
 +
    color: #000;
 
float: left;
 
float: left;
 
}
 
}
Line 313: Line 386:
 
}
 
}
  
−
 
+
      ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; margin-right: 20%; margin-left: 20%; }
 +
      ul#tabs li { display: inline; }
 +
      ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; font-size: 17px; }
 +
      ul#tabs li a:hover { background-color: #f1f0ee; }
 +
      ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-size: 18px; padding: 0.7em 0.3em 0.38em 0.3em; }
 +
      div.tabContent { border: 1px solid #c9c3ba; padding: 1.5em; background-color: #b7a57a; font-size: 16px; line-height:1.5em; margin-right: 20%; margin-left: 20%;}
 +
      div.tabContent.hide { display: none; }
  
 
</style>
 
</style>
 
     <!-- End of CSS -->
 
     <!-- End of CSS -->
 
     <head>
 
     <head>
−
  <script data-require="jquery-cookie@1.3.1" data-semver="1.3.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.js"></script>
+
        <script data-require="jquery-cookie@1.3.1" data-semver="1.3.1" src="https://2015.igem.org/Template:Washington_jquary?action=raw&ctype=text/javascript" type="text/javascript"></script>
−
   
+
        <script type="text/javascript">
−
<script type="text/javascript">
+
 
$(document).ready(function () {
 
$(document).ready(function () {
 
     // Read the cookie and if it's defined scroll to id
 
     // Read the cookie and if it's defined scroll to id
Line 327: Line 405:
 
         scrollToID(scroll, 1000);
 
         scrollToID(scroll, 1000);
 
         $.removeCookie('scroll');
 
         $.removeCookie('scroll');
 +
 +
 +
 +
 
     }
 
     }
  
Line 349: Line 431:
 
         $('html,body').animate({ scrollTop: targetOffset }, speed);
 
         $('html,body').animate({ scrollTop: targetOffset }, speed);
 
     }
 
     }
 +
    $(window).scroll(function(){
 +
        var window_top = $(window).scrollTop() + 12; // the "12" should equal the margin-top value for nav.stick
 +
        var div_top = $('#nav-anchor').offset().top;
 +
            if (window_top > div_top) {
 +
                $('nav').addClass('stick');
 +
            } else {
 +
                $('nav').removeClass('stick');
 +
            }
 +
    });
 +
 
});
 
});
  
Line 356: Line 448:
 
     $('html,body').animate({scrollTop:$(n).offset().top}, 1000);
 
     $('html,body').animate({scrollTop:$(n).offset().top}, 1000);
 
});
 
});
 +
 +
 +
/* to make the sidebar anchor*/
 +
 +
 +
  var tabLinks = new Array();
 +
    var contentDivs = new Array();
 +
 +
    function init() {
 +
 +
      // Grab the tab links and content divs from the page
 +
      var tabListItems = document.getElementById('tabs').childNodes;
 +
      for ( var i = 0; i < tabListItems.length; i++ ) {
 +
        if ( tabListItems[i].nodeName == "LI" ) {
 +
          var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
 +
          var id = getHash( tabLink.getAttribute('href') );
 +
          tabLinks[id] = tabLink;
 +
          contentDivs[id] = document.getElementById( id );
 +
        }
 +
      }
 +
 +
      // Assign onclick events to the tab links, and
 +
      // highlight the first tab
 +
      var i = 0;
 +
 +
      for ( var id in tabLinks ) {
 +
        tabLinks[id].onclick = showTab;
 +
        tabLinks[id].onfocus = function() { this.blur() };
 +
        if ( i == 0 ) tabLinks[id].className = 'selected';
 +
        i++;
 +
      }
 +
 +
      // Hide all content divs except the first
 +
      var i = 0;
 +
 +
      for ( var id in contentDivs ) {
 +
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
 +
        i++;
 +
      }
 +
    }
 +
 +
    function showTab() {
 +
      var selectedId = getHash( this.getAttribute('href') );
 +
 +
      // Highlight the selected tab, and dim all others.
 +
      // Also show the selected content div, and hide all others.
 +
      for ( var id in contentDivs ) {
 +
        if ( id == selectedId ) {
 +
          tabLinks[id].className = 'selected';
 +
          contentDivs[id].className = 'tabContent';
 +
        } else {
 +
          tabLinks[id].className = '';
 +
          contentDivs[id].className = 'tabContent hide';
 +
        }
 +
      }
 +
 +
      // Stop the browser following the link
 +
      return false;
 +
    }
 +
 +
    function getFirstChildWithTagName( element, tagName ) {
 +
      for ( var i = 0; i < element.childNodes.length; i++ ) {
 +
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
 +
      }
 +
    }
 +
 +
    function getHash( url ) {
 +
      var hashPos = url.lastIndexOf ( '#' );
 +
      return url.substring( hashPos + 1 );
 +
    }
  
  
 
</script>
 
</script>
−
</head>
+
    </head>
−
        <!-- Start of the template html elements. -->
+
    <!-- Start of the template html elements. -->
−
        <div id ="mainContainer">
+
    <div id ="mainContainer">
−
            <!--This div will close on the page.-->
+
        <!--This div will close on the page.-->
−
            <div id="bannerContainer">
+
        <div id="bannerContainer">
 +
            <br>
 
                 <br>
 
                 <br>
−
                    <br>
+
                </div>
−
                    </div>
+
            </div>
−
</div>
+
            <!-- Start of menu -->
−
                    <!-- Start of menu -->
+
            <!-- End of menu  -->
−
               
+
            <!-- Start of content -->
−
                    <!-- End of menu  -->
+
        </html>
−
                    <!-- Start of content -->
+
−
               
+
−
                    </html>
+

Latest revision as of 22:39, 18 September 2015