Difference between revisions of "Template:Copenhagen-Header"

 
(101 intermediate revisions by 2 users not shown)
Line 23: Line 23:
  
 
   /***************************************************** CUSTOM WIKI SETTINGS  ****************************************************/
 
   /***************************************************** CUSTOM WIKI SETTINGS  ****************************************************/
 +
 +
#bodyContent a[href ^="https://"], .link-https {
 +
    padding-right: 16px;
 +
    color: white; !important!
 +
}
 +
 +
a:hover {
 +
    color: white;
 +
    text-decoration: underline;
 +
}
 +
 +
a {
 +
    color: white;
 +
    text-decoration: none;
 +
}
 +
 +
#bodyContent a[href ^="http://"], #bodyContent a[href ^="gopher://"] {
 +
    text-decoration: underline;
 +
}
 +
 +
#bodyContent a[href ^="https://"], .link-https {
 +
    padding-right: 16px;
 +
    color: white;
 +
}
 +
 +
a:visited {
 +
    color: white;
 +
text-decoration: underline;
 +
}
  
 
b, strong {
 
b, strong {
Line 116: Line 145:
  
 
.intro-header4 {
 
.intro-header4 {
−
     padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
+
     padding-top: 50px;
 
     padding-bottom: 50px;
 
     padding-bottom: 50px;
−
     text-align: center;
+
     /* text-align: center; */
 
     color: white;
 
     color: white;
−
     background-image: url("https://static.igem.org/mediawiki/2017/3/3e/UCopenhagen_Wallpaper1_narrow.png");
+
     background-image: url(https://static.igem.org/mediawiki/2017/3/3e/UCopenhagen_Wallpaper1_narrow.png);
−
     background-repeat;
+
     font-family: Helvetica;
 +
    font-weight: 200;
 +
    font-size: 12px;
 
}
 
}
  
Line 386: Line 417:
  
 
.img-responsive1{
 
.img-responsive1{
−
     width:400px;
+
align-content: center;
−
     height:100px;
+
     width:300px;
 +
     height:495px;
 
}
 
}
  
 
.img-responsive2{
 
.img-responsive2{
−
    width:500px;
+
align-content: center;
−
     height:350px;
+
  width:400px;
 +
     height:400px;
 +
transform: rotate(90deg);
 
}
 
}
  
 
.img-responsive3{
 
.img-responsive3{
−
     width:350px;
+
     width:500px;
−
     height:300px;
+
     height:350px;
 
}
 
}
  
Line 545: Line 579:
  
 
/* Some left and right padding inside the container */
 
/* Some left and right padding inside the container */
−
.container {
+
.container{
 
     padding: 0 16px;
 
     padding: 0 16px;
 
}
 
}
Line 597: Line 631:
 
.team-img {
 
.team-img {
 
width:400px;
 
width:400px;
−
     height:500px;
+
     height:400px;
 
}
 
}
  
Line 626: Line 660:
 
}
 
}
  
−
@import "bourbon";
+
#HQ_page td {
 +
    padding: 10px;
 +
    border: 1px solid #ccc;
 +
    border-collapse: collapse;
 +
    vertical-align: text-top;
 +
    background-color: white;
 +
    font-family: Helvetica;
 +
    font-weight: 300;
 +
}
  
−
// Breakpoints
+
#HQ_page th {
−
$bp-maggie: 15em;  
+
    background-color: #f2f2f2;
−
$bp-lisa: 30em;
+
    padding: 10px;
−
$bp-bart: 48em;
+
    color: black;
−
$bp-marge: 62em;
+
    border: 1px solid #ccc;
−
$bp-homer: 75em;
+
    border-collapse: collapse;
 +
    vertical-align: text-top;
 +
    font-family: Helvetica;
 +
    font-weight: 501;
 +
}
  
−
// Styles
+
button, input, select, textarea {
−
* {
+
    font-family: Helvetica;
−
@include box-sizing(border-box);
+
    font-size: inherit;
−
+
    background-color: black;
−
&:before,
+
    line-height: inherit;
−
&:after {
+
−
  @include box-sizing(border-box);
+
−
}
+
 
}
 
}
  
−
body {
+
caption {
−
  font-family: $helvetica;
+
    padding-top: 8px;
−
  color: rgba(94,93,82,1);
+
    padding-bottom: 8px;
 +
    color: white;
 +
    text-align: left;
 
}
 
}
  
−
a {
+
/** LIGHTBOX MARKUP **/
−
  color: rgba(51,122,168,1);
+
 
−
 
+
.lightbox {
−
  &:hover,
+
/** Default lightbox to hidden */
−
  &:focus {
+
display: none;
−
    color: rgba(75,138,178,1);  
+
 
−
  }
+
/** Position and style */
 +
position: fixed;
 +
z-index: 999;
 +
width: 100%;
 +
height: 100%;
 +
text-align: center;
 +
top: 0;
 +
left: 0;
 +
background: rgba(0,0,0,0.8);
 
}
 
}
  
−
.container {
+
.lightbox img {
−
  margin: 5% 3%;
+
/** Pad the lightbox image */
−
 
+
max-width: 90%;
−
  @media (min-width: $bp-bart) {
+
max-height: 80%;
−
    margin: 2%;  
+
margin-top: 5%;
−
  }
+
−
 
+
−
  @media (min-width: $bp-homer) {
+
−
    margin: 2em auto;
+
−
    max-width: $bp-homer;
+
−
  }
+
 
}
 
}
  
−
.responsive-table {
+
.lightbox:target {
−
  width: 100%;
+
/** Remove default browser outline */
−
  margin-bottom: 1.5em;
+
outline: none;
−
 
+
 
−
  @media (min-width: $bp-bart) {
+
/** Unhide lightbox **/
−
    font-size: .9em;
+
display: block;
−
  }
+
}
−
 
+
 
−
  @media (min-width: $bp-marge) {
+
.fblogo {
−
    font-size: 1em;
+
     display: inline-block;
−
  }
+
     margin-left: auto;
−
 
+
     margin-right: auto;
−
  thead {
+
     height: 200px;  
−
    // Accessibly hide <thead> on narrow viewports
+
}
−
    position: absolute;
+
 
−
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+
#images{
−
    clip: rect(1px, 1px, 1px, 1px);
+
     text-align:center;
−
    padding: 0;
+
}
−
    border: 0;
+
 
−
    height: 1px;
+
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
−
    width: 1px;
+
    color: #fff;
−
    overflow: hidden;
+
     background-color: #083F54;
−
   
+
}
−
    @media (min-width: $bp-bart) {
+
 
−
      // Unhide <thead> on wide viewports
+
#sidebar {
−
      position: relative;
+
   width: 190px;  
−
      clip: auto;
+
  position: fixed;  
−
      height: auto;
+
  margin-right: 410px;  
−
      width: auto;
+
}
−
      overflow: auto;
+
 
−
    }
+
      .ui-widget {
−
   
+
            border: 1px solid black;
−
    th {
+
 
−
      background-color: rgba(29,150,178,1);
+
        }
−
      border: 1px solid rgba(29,150,178,1);
+
 
−
      font-weight: normal;
+
        .ui-tooltip, .arrow:after {
−
      text-align: center;
+
            background: white;
−
      color: white;
+
            border: 1px solid white;
−
     
+
        }
−
      &:first-of-type {
+
        .ui-tooltip {
−
        text-align: left;
+
            padding: 10px 20px;
−
      }
+
            color: black;
−
    }
+
            border-radius: 2px;
−
  }
+
            font: bold 14px "Helvetica Neue", Sans-Serif;
−
 
+
            text-transform: uppercase;
−
  // Set these items to display: block for narrow viewports
+
            box-shadow: 0 0 1px black;
−
  tbody,
+
            border: 1px solid white !important;
−
  tr,
+
−
  th,
+
−
  td {
+
−
     display: block;
+
−
     padding: 0;
+
−
     text-align: left;
+
−
     white-space: normal;
+
−
  }
+
−
 
+
−
  tr {  
+
−
     @media (min-width: $bp-bart) {
+
−
      // Undo display: block
+
−
      display: table-row;  
+
−
    }
+
−
  }
+
−
 
+
−
  th,
+
−
  td {
+
−
    padding: .5em;
+
−
    vertical-align: middle;
+
−
   
+
−
    @media (min-width: $bp-lisa) {
+
−
      padding: .75em .5em;
+
−
    }
+
−
   
+
−
    @media (min-width: $bp-bart) {
+
−
      // Undo display: block
+
−
      display: table-cell;
+
−
      padding: .5em;
+
−
    }
+
−
   
+
−
    @media (min-width: $bp-marge) {
+
−
      padding: .75em .5em;  
+
−
     }
+
−
   
+
−
    @media (min-width: $bp-homer) {
+
−
      padding: .75em;  
+
−
    }
+
−
  }
+
−
 
+
−
   caption {
+
−
    margin-bottom: 1em;
+
−
    font-size: 1em;
+
−
    font-weight: bold;
+
−
    text-align: center;
+
−
   
+
−
    @media (min-width: $bp-bart) {
+
−
      font-size: 1.5em;
+
−
    }
+
−
  }
+
−
 
+
−
  tfoot {
+
−
    font-size: .8em;
+
−
    font-style: italic;
+
−
   
+
−
    @media (min-width: $bp-marge) {
+
−
      font-size: .9em;
+
−
    }
+
−
  }
+
−
 
+
−
  tbody {
+
−
    @media (min-width: $bp-bart) {
+
−
      // Undo display: block
+
−
      display: table-row-group;  
+
−
    }
+
−
   
+
−
    tr {
+
−
      margin-bottom: 1em;
+
−
      border: 2px solid rgba(29,150,178,1);
+
−
     
+
−
      @media (min-width: $bp-bart) {
+
−
        // Undo display: block
+
−
        display: table-row;
+
−
        border-width: 1px;
+
−
      }
+
−
     
+
−
      &:last-of-type {
+
−
        margin-bottom: 0;  
+
−
      }
+
−
     
+
−
      &:nth-of-type(even) {
+
−
        @media (min-width: $bp-bart) {
+
−
          background-color: rgba(94,93,82,.1);
+
 
         }
 
         }
−
      }
+
        .arrow {
−
    }
+
            width: 70px;
−
   
+
            height: 16px;
−
    th[scope="row"] {
+
            overflow: hidden;
−
      background-color: rgba(29,150,178,1);
+
            position: absolute;
−
      color: white;
+
            left: 50%;
−
     
+
            margin-left: -35px;
−
      @media (min-width: $bp-bart) {
+
            bottom: -17px;
−
        background-color: transparent;
+
        }
−
        color: rgba(94,93,82,1);
+
        .arrow.top {
−
        text-align: left;
+
            top: -17px;
−
      }
+
            bottom: auto;
−
    }
+
        }
−
   
+
        .arrow.left {
−
    td {
+
            left: 20%;
−
      text-align: right;
+
        }
−
     
+
        .arrow:after {
−
      @media (min-width: $bp-lisa) {
+
            content: "";
−
        border-bottom: 1px solid  rgba(29,150,178,1);
+
            position: absolute;
−
      }
+
            left: 20px;
−
     
+
            top: -20px;
−
      @media (min-width: $bp-bart) {
+
            width: 25px;
−
        text-align: center;  
+
            height: 25px;
−
      }
+
            box-shadow: 0 0 1px black;
−
    }
+
            -webkit-transform: rotate(45deg);
−
   
+
            -moz-transform: rotate(45deg);
−
    td[data-type=currency] {
+
            -ms-transform: rotate(45deg);
−
      text-align: right;  
+
            -o-transform: rotate(45deg);
−
    }
+
            transform: rotate(45deg);
−
   
+
        }
−
    td[data-title]:before {
+
        .arrow.top:after {
−
      content: attr(data-title);
+
            bottom: -20px;
−
      float: left;
+
            top: auto;
−
      font-size: .8em;
+
        }
−
      color: rgba(94,93,82,.75);
+
        .hidden {
−
     
+
            visibility: hidden;
−
      @media (min-width: $bp-lisa) {
+
         }
−
        font-size: .9em;  
+
 
−
      }
+
         .fireTip {
−
     
+
            margin-left: 0px;
−
      @media (min-width: $bp-bart) {
+
        }
−
         // Don’t show data-title labels
+
 
−
         content: none;  
+
.cart {
−
      }
+
     overflow:hidden;
−
     }
+
    padding:10px 3px;
−
  }
+
    background: yellow;
 
}
 
}
 +
 
     </style>
 
     </style>
  
Line 886: Line 851:
 
     $(".navbar-collapse").collapse('hide');
 
     $(".navbar-collapse").collapse('hide');
 
});
 
});
 +
 +
function showhide(id) {
 +
      var e = document.getElementById(id);
 +
      e.style.display = (e.style.display == 'block') ? 'none' : 'block';
 +
    }
 +
 +
$(function() {
 +
 +
    var $sidebar  = $("#sidebar"),
 +
        $window    = $(window),
 +
        offset    = $sidebar.offset(),
 +
        topPadding = 15;
 +
 +
    $window.scroll(function() {
 +
        if ($window.scrollTop() > offset.top) {
 +
            $sidebar.stop().animate({
 +
                marginTop: $window.scrollTop() - offset.top + topPadding
 +
            });
 +
        } else {
 +
            $sidebar.stop().animate({
 +
                marginTop: 0
 +
            });
 +
        }
 +
    });
 +
   
 +
});
 +
$(window).load(function() {
 +
$('li.notebook').addClass('active');
 +
$('li.n_over').addClass('active');
 +
 +
$(".affix").css("width", $("#parent").width());
 +
});
 +
 +
$(window).scroll(function() {
 +
$(".affix").css("width", $("#parent").width());
 +
});
 +
 +
$(window).resize(function() {
 +
$(".affix").css("width", $("#parent").width());
 +
});
 +
 +
 +
$(function() {
 +
            $( document ).tooltip({
 +
                items: "input",
 +
                content: function() {
 +
                    return $('.myPopover').html();
 +
                },
 +
                position: {
 +
                    my: "center bottom-20",
 +
                    at: "center top",
 +
                    using: function( position, feedback ) {
 +
                        $( this ).css( position );
 +
                        $( "<div>" )
 +
                                .addClass( "arrow" )
 +
                                .addClass( feedback.vertical )
 +
                                .addClass( feedback.horizontal )
 +
                                .appendTo( this );
 +
                    }
 +
                }
 +
            });
 +
 +
            $('.fireTip').click(function () {
 +
                if(!$(this).hasClass('open')) {
 +
                    $('#age').trigger('mouseover');
 +
                    $(this).addClass('open');
 +
                } else {
 +
                    $('#age').trigger('mouseout');
 +
                    $(this).removeClass('open');
 +
                }
 +
 +
            })
 +
 +
        });
 +
 +
$(document).ready(function(){
 +
$("#masterclass-popover").popover({
 +
    html : true,
 +
placement: 'bottom',
 +
    title: $("#masterclass-popover-head").html(),
 +
    content: $("#masterclass-popover-content").html()
 +
    });
 +
 +
$("small.download-notice a").click(function(e) {
 +
    e.preventDefault();
 +
});
 +
});
 +
 +
$(document).on("click", ".tooltip", function() {
 +
    $(this).tooltip(
 +
        {
 +
            items: ".tooltip",
 +
            content: function(){
 +
                return $(this).data('description');
 +
            },
 +
            close: function( event, ui ) {
 +
                var me = this;
 +
                ui.tooltip.hover(
 +
                    function () {
 +
                        $(this).stop(true).fadeTo(400, 1);
 +
                    },
 +
                    function () {
 +
                        $(this).fadeOut("400", function(){
 +
                            $(this).remove();
 +
                        });
 +
                    }
 +
                );
 +
                ui.tooltip.on("remove", function(){
 +
                    $(me).tooltip("destroy");
 +
                });
 +
          },
 +
        }
 +
    );
 +
    $(this).tooltip("open");
 +
});
 +
 
</script>
 
</script>
  
Line 924: Line 1,005:
 
                     <li>
 
                     <li>
 
                         <div class="dropdown">
 
                         <div class="dropdown">
−
                             <a href="https://2017.igem.org/Team:UCopenhagen/Safety"><button class="dropbtn">Safety</button></a>
+
                             <a href="https://2017.igem.org/Team:UCopenhagen/Safety"><button class="dropbtn">Safety & Labnotes</button></a>
 
                             <div class="dropdown-content">
 
                             <div class="dropdown-content">
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/Safety">Safety</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/Safety">Safety</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/Notebook">Notebook</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/Notebook">Notebook</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/Protocols">Protocols</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/Protocols">Protocols</a>
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/Improve">Improve</a>
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
Line 947: Line 1,029:
 
                             <div class="dropdown-content">
 
                             <div class="dropdown-content">
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/HP/Silver">Overview</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/HP/Silver">Overview</a>
−
                                <a href="https://2017.igem.org/Team:UCopenhagen/HP/Gold_Integrated">Integrated</a>
 
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/HP/Ethics">Ethics</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/HP/Ethics">Ethics</a>
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/HP/Gold_Integrated">Integrated</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/HP/Events">Events</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/HP/Events">Events</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/HP/Media">Media</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/HP/Media">Media</a>
 
                             </div>
 
                             </div>
−
                        </div>
 
−
                    </li>
 
−
<li>
 
−
                        <div class="dropdown">
 
−
                            <a href="https://2017.igem.org/Team:UCopenhagen/Next"><button href="https://2017.igem.org/Team:UCopenhagen/Project" class="dropbtn">What's next?</button></a>
 
−
                            <div class="dropdown-content">
 
−
                                <a href="https://2017.igem.org/Team:UCopenhagen/Next">Next steps</a>
 
−
                                <a href="https://2017.igem.org/Team:UCopenhagen/Limitations">Limitations</a>
 
−
                                <a href="https://2017.igem.org/Team:UCopenhagen/Ethical-concerns">Ethical concerns</a>
 
−
                                <a href="https://2017.igem.org/Team:UCopenhagen/Final">Final words</a>
 
 
                         </div>
 
                         </div>
 
                     </li>
 
                     </li>

Latest revision as of 03:57, 2 November 2017