Difference between revisions of "Template:Washington2"

Line 394: Line 394:
 
       div.tabContent.hide { display: none; }
 
       div.tabContent.hide { display: none; }
  
 +
html * {
 +
  -webkit-font-smoothing: antialiased;
 +
  -moz-osx-font-smoothing: grayscale;
 +
}
 +
 +
*, *:after, *:before {
 +
  -webkit-box-sizing: border-box;
 +
  -moz-box-sizing: border-box;
 +
  box-sizing: border-box;
 +
}
 +
 +
body {
 +
  font-size: 100%;
 +
  font-family: "Droid Serif", serif;
 +
  color: #333;
 +
  background-color: #fff;
 +
  /* prevent ie from showing the horizontal scrollbar */
 +
  overflow-x: hidden;
 +
}
 +
body.overflow-hidden {
 +
  /* when author bio is visible, the out-of-focus content won't scroll */
 +
  overflow: hidden;
 +
}
 +
 +
a {
 +
  color: #f25f5c;
 +
  text-decoration: none;
 +
}
 +
 +
img {
 +
  max-width: 100%;
 +
}
 +
 +
/* --------------------------------
 +
 +
Modules - reusable parts of our design
 +
 +
-------------------------------- */
 +
.cd-container {
 +
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
 +
  width: 90%;
 +
  max-width: 1200px;
 +
  margin: 0 auto;
 +
}
 +
.cd-container::after {
 +
  /* clearfix */
 +
  content: '';
 +
  display: table;
 +
  clear: both;
 +
}
 +
 +
/* --------------------------------
 +
 +
xnugget info
  
 +
-------------------------------- */
 
.cd-nugget-info {
 
.cd-nugget-info {
 
   text-align: center;
 
   text-align: center;
Line 429: Line 484:
 
}
 
}
  
 +
/* --------------------------------
 +
 +
xcarbonads
 +
 +
-------------------------------- */
 +
#carbonads-container,
 +
#ui8ads-container {
 +
  position: fixed;
 +
  right: 40px;
 +
  top: 30px;
 +
  width: 180px;
 +
  display: none;
 +
}
 +
#carbonads-container .close-carbon-adv,
 +
#carbonads-container .close-ui8-adv,
 +
#ui8ads-container .close-carbon-adv,
 +
#ui8ads-container .close-ui8-adv {
 +
  display: inline-block;
 +
  position: absolute;
 +
  top: 0;
 +
  right: 100%;
 +
  background: rgba(0, 0, 0, 0.6);
 +
  text-indent: 100%;
 +
  overflow: hidden;
 +
  width: 32px;
 +
  height: 32px;
 +
  border-radius: 3px 0 0 3px;
 +
}
 +
#carbonads-container .close-carbon-adv:hover,
 +
#carbonads-container .close-ui8-adv:hover,
 +
#ui8ads-container .close-carbon-adv:hover,
 +
#ui8ads-container .close-ui8-adv:hover {
 +
  background: black;
 +
}
 +
#carbonads-container .close-carbon-adv::after, #carbonads-container .close-carbon-adv::before,
 +
#carbonads-container .close-ui8-adv::after,
 +
#carbonads-container .close-ui8-adv::before,
 +
#ui8ads-container .close-carbon-adv::after,
 +
#ui8ads-container .close-carbon-adv::before,
 +
#ui8ads-container .close-ui8-adv::after,
 +
#ui8ads-container .close-ui8-adv::before {
 +
  content: '';
 +
  background-color: #fff;
 +
  height: 2px;
 +
  width: 14px;
 +
  position: absolute;
 +
  top: 14px;
 +
  left: 9px;
 +
}
 +
#carbonads-container .close-carbon-adv::after,
 +
#carbonads-container .close-ui8-adv::after,
 +
#ui8ads-container .close-carbon-adv::after,
 +
#ui8ads-container .close-ui8-adv::after {
 +
  -webkit-transform: rotate(45deg);
 +
  -moz-transform: rotate(45deg);
 +
  -ms-transform: rotate(45deg);
 +
  -o-transform: rotate(45deg);
 +
  transform: rotate(45deg);
 +
}
 +
#carbonads-container .close-carbon-adv::before,
 +
#carbonads-container .close-ui8-adv::before,
 +
#ui8ads-container .close-carbon-adv::before,
 +
#ui8ads-container .close-ui8-adv::before {
 +
  -webkit-transform: rotate(-45deg);
 +
  -moz-transform: rotate(-45deg);
 +
  -ms-transform: rotate(-45deg);
 +
  -o-transform: rotate(-45deg);
 +
  transform: rotate(-45deg);
 +
}
 +
#carbonads-container .carbonad,
 +
#carbonads-container .ui8ad,
 +
#ui8ads-container .carbonad,
 +
#ui8ads-container .ui8ad {
 +
  background: rgba(255, 255, 255, 0.9);
 +
  border: none;
 +
  width: 100%;
 +
  height: auto;
 +
  padding: 14px;
 +
  text-align: center;
 +
  border-radius: 0 3px 3px 3px;
 +
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
 +
}
 +
#carbonads-container .carbonad .carbonad-image img,
 +
#carbonads-container .carbonad .ui8ad-image img,
 +
#carbonads-container .ui8ad .carbonad-image img,
 +
#carbonads-container .ui8ad .ui8ad-image img,
 +
#ui8ads-container .carbonad .carbonad-image img,
 +
#ui8ads-container .carbonad .ui8ad-image img,
 +
#ui8ads-container .ui8ad .carbonad-image img,
 +
#ui8ads-container .ui8ad .ui8ad-image img {
 +
  width: 130px;
 +
}
 +
#carbonads-container .carbonad .carbonad-image img,
 +
#carbonads-container .ui8ad .carbonad-image img,
 +
#ui8ads-container .carbonad .carbonad-image img,
 +
#ui8ads-container .ui8ad .carbonad-image img {
 +
  margin: 0 0 10px 10px;
 +
}
 +
#carbonads-container .carbonad .ui8ad-image img,
 +
#carbonads-container .carbonad .carbon-img img,
 +
#carbonads-container .ui8ad .ui8ad-image img,
 +
#carbonads-container .ui8ad .carbon-img img,
 +
#ui8ads-container .carbonad .ui8ad-image img,
 +
#ui8ads-container .carbonad .carbon-img img,
 +
#ui8ads-container .ui8ad .ui8ad-image img,
 +
#ui8ads-container .ui8ad .carbon-img img {
 +
  margin: 0 10px 10px;
 +
  width: 130px;
 +
}
 +
#carbonads-container .carbonad .carbon-text, #carbonads-container .carbonad .carbonad-tag,
 +
#carbonads-container .carbonad .carbon-poweredby,
 +
#carbonads-container .carbonad .ui8ad-text, #carbonads-container .carbonad .ui8ad-tag,
 +
#carbonads-container .ui8ad .carbon-text,
 +
#carbonads-container .ui8ad .carbonad-tag,
 +
#carbonads-container .ui8ad .carbon-poweredby,
 +
#carbonads-container .ui8ad .ui8ad-text,
 +
#carbonads-container .ui8ad .ui8ad-tag,
 +
#ui8ads-container .carbonad .carbon-text,
 +
#ui8ads-container .carbonad .carbonad-tag,
 +
#ui8ads-container .carbonad .carbon-poweredby,
 +
#ui8ads-container .carbonad .ui8ad-text,
 +
#ui8ads-container .carbonad .ui8ad-tag,
 +
#ui8ads-container .ui8ad .carbon-text,
 +
#ui8ads-container .ui8ad .carbonad-tag,
 +
#ui8ads-container .ui8ad .carbon-poweredby,
 +
#ui8ads-container .ui8ad .ui8ad-text,
 +
#ui8ads-container .ui8ad .ui8ad-tag {
 +
  font-family: 'Helvetica Neue', Arial, sans-serif;
 +
}
 +
#carbonads-container .carbonad .carbon-wrap,
 +
#carbonads-container .carbonad .ui8ad-text,
 +
#carbonads-container .ui8ad .carbon-wrap,
 +
#carbonads-container .ui8ad .ui8ad-text,
 +
#ui8ads-container .carbonad .carbon-wrap,
 +
#ui8ads-container .carbonad .ui8ad-text,
 +
#ui8ads-container .ui8ad .carbon-wrap,
 +
#ui8ads-container .ui8ad .ui8ad-text {
 +
  display: block;
 +
  width: 100%;
 +
  padding: 0;
 +
}
 +
#carbonads-container .carbonad .carbon-wrap a,
 +
#carbonads-container .carbonad .ui8ad-text a,
 +
#carbonads-container .ui8ad .carbon-wrap a,
 +
#carbonads-container .ui8ad .ui8ad-text a,
 +
#ui8ads-container .carbonad .carbon-wrap a,
 +
#ui8ads-container .carbonad .ui8ad-text a,
 +
#ui8ads-container .ui8ad .carbon-wrap a,
 +
#ui8ads-container .ui8ad .ui8ad-text a {
 +
  color: #f25f5c;
 +
  font-size: 13px;
 +
  font-weight: bold;
 +
}
 +
.no-touch #carbonads-container .carbonad .carbon-wrap a:hover, .no-touch
 +
#carbonads-container .carbonad .ui8ad-text a:hover, .no-touch
 +
#carbonads-container .ui8ad .carbon-wrap a:hover, .no-touch
 +
#carbonads-container .ui8ad .ui8ad-text a:hover, .no-touch
 +
#ui8ads-container .carbonad .carbon-wrap a:hover, .no-touch
 +
#ui8ads-container .carbonad .ui8ad-text a:hover, .no-touch
 +
#ui8ads-container .ui8ad .carbon-wrap a:hover, .no-touch
 +
#ui8ads-container .ui8ad .ui8ad-text a:hover {
 +
  text-decoration: underline;
 +
}
 +
#carbonads-container .carbonad .carbonad-tag,
 +
#carbonads-container .carbonad .carbon-poweredby,
 +
#carbonads-container .carbonad .ui8ad-tag,
 +
#carbonads-container .ui8ad .carbonad-tag,
 +
#carbonads-container .ui8ad .carbon-poweredby,
 +
#carbonads-container .ui8ad .ui8ad-tag,
 +
#ui8ads-container .carbonad .carbonad-tag,
 +
#ui8ads-container .carbonad .carbon-poweredby,
 +
#ui8ads-container .carbonad .ui8ad-tag,
 +
#ui8ads-container .ui8ad .carbonad-tag,
 +
#ui8ads-container .ui8ad .carbon-poweredby,
 +
#ui8ads-container .ui8ad .ui8ad-tag {
 +
  margin-top: 5px;
 +
  color: #8abeb2;
 +
}
 +
#carbonads-container .carbonad .carbonad-tag a,
 +
#carbonads-container .carbonad .carbon-poweredby a,
 +
#carbonads-container .carbonad .ui8ad-tag a,
 +
#carbonads-container .ui8ad .carbonad-tag a,
 +
#carbonads-container .ui8ad .carbon-poweredby a,
 +
#carbonads-container .ui8ad .ui8ad-tag a,
 +
#ui8ads-container .carbonad .carbonad-tag a,
 +
#ui8ads-container .carbonad .carbon-poweredby a,
 +
#ui8ads-container .carbonad .ui8ad-tag a,
 +
#ui8ads-container .ui8ad .carbonad-tag a,
 +
#ui8ads-container .ui8ad .carbon-poweredby a,
 +
#ui8ads-container .ui8ad .ui8ad-tag a {
 +
  color: #8abeb2;
 +
}
 +
#carbonads-container .carbonad .carbonad-tag a:hover,
 +
#carbonads-container .carbonad .carbon-poweredby a:hover,
 +
#carbonads-container .carbonad .ui8ad-tag a:hover,
 +
#carbonads-container .ui8ad .carbonad-tag a:hover,
 +
#carbonads-container .ui8ad .carbon-poweredby a:hover,
 +
#carbonads-container .ui8ad .ui8ad-tag a:hover,
 +
#ui8ads-container .carbonad .carbonad-tag a:hover,
 +
#ui8ads-container .carbonad .carbon-poweredby a:hover,
 +
#ui8ads-container .carbonad .ui8ad-tag a:hover,
 +
#ui8ads-container .ui8ad .carbonad-tag a:hover,
 +
#ui8ads-container .ui8ad .carbon-poweredby a:hover,
 +
#ui8ads-container .ui8ad .ui8ad-tag a:hover {
 +
  color: #f25f5c;
 +
}
 +
#carbonads-container .carbonad .ui8ad-tag,
 +
#carbonads-container .carbonad .carbon-poweredby,
 +
#carbonads-container .ui8ad .ui8ad-tag,
 +
#carbonads-container .ui8ad .carbon-poweredby,
 +
#ui8ads-container .carbonad .ui8ad-tag,
 +
#ui8ads-container .carbonad .carbon-poweredby,
 +
#ui8ads-container .ui8ad .ui8ad-tag,
 +
#ui8ads-container .ui8ad .carbon-poweredby {
 +
  display: inline-block;
 +
  font-size: 11px;
 +
  line-height: 15px;
 +
}
 +
@media only screen and (min-width: 1200px) {
 +
  #carbonads-container,
 +
  #ui8ads-container {
 +
    display: block;
 +
  }
 +
}
 +
 +
/* --------------------------------
 +
 +
Main components
  
 +
-------------------------------- */
 
main {
 
main {
 
   position: relative;
 
   position: relative;
Line 795: Line 1,079:
 
}
 
}
  
 +
/* --------------------------------
  
 +
xkeyframes
  
−
 
+
-------------------------------- */
−
 
+
−
 
+
−
 
+
−
 
+
−
</style>
+
−
    <!-- End of CSS -->
+
−
    <head>
+
−
        <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">
+
−
$(document).ready(function () {
+
−
    // Read the cookie and if it's defined scroll to id
+
−
    var scroll = $.cookie('scroll');
+
−
    if(scroll){
+
−
        scrollToID(scroll, 1000);
+
−
        $.removeCookie('scroll');
+
−
 
+
−
 
+
−
 
+
−
 
+
−
    }
+
−
 
+
−
    // Handle event onclick, setting the cookie when the href != #
+
−
    $('.nav a').click(function (e) {
+
−
        e.preventDefault();
+
−
        var id = $(this).data('id');
+
−
        var href = $(this).attr('href');
+
−
        if(href === '#'){
+
−
            scrollToID(id, 1000);
+
−
        }else{
+
−
            $.cookie('scroll', id);
+
−
            window.location.href = href;
+
−
        }
+
−
    });
+
−
 
+
−
    // scrollToID function
+
−
    function scrollToID(id, speed) {
+
−
        var offSet = 70;
+
−
        var obj = $('#' + id).offset();
+
−
        var targetOffset = obj.top - offSet;
+
−
        $('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');
+
−
            }
+
−
    });
+
−
 
+
−
});
+
−
 
+
−
$(document).ready(function(e){ 
+
−
    var str= location.hash;
+
−
    var n=str.replace("_temp","");
+
−
    $('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 );
+
−
    }
+
−
 
+
 
@-webkit-keyframes cd-fade-in {
 
@-webkit-keyframes cd-fade-in {
 
   0% {
 
   0% {

Revision as of 21:34, 18 September 2015