|
|
| Line 1: |
Line 1: |
| − | {{Freiburg/Javascript}}
| |
| − |
| |
| | <html> | | <html> |
| | | | |
| − | <style> | + | <script type="text/javascript"> |
| | | | |
| | + | //============ Accordion ================= |
| | | | |
| − | | + | $(document).ready(function() { |
| − | /* =================== CSS Navigation =================== */
| + | function close_accordion_section() { |
| − | /* Resetting css coming from wiki itself
| + | $('.accordion .accordion-section-title').removeClass('active'); |
| − | /* Clearing DokuWiki elements
| + | $('.accordion .accordion-section-content').slideUp(300).removeClass('open'); |
| − | /* Declare Fonts for non-Windows machines
| + | |
| − | /* CSS for Menubar
| + | |
| − | /* Important Site setup
| + | |
| − | /* Background
| + | |
| − | /* Text Styling
| + | |
| − | /* Full Width Banners
| + | |
| − | /* Footer
| + | |
| − | /* Accordion - Ausklappmenues
| + | |
| − | /* Lightbox
| + | |
| − | /*
| + | |
| − | /* Flipcard-CSS for the members-section: inline in https://2015.igem.org/Team:Freiburg/Team
| + | |
| − | /* CSS-slider: inline for the respective pages. e.g. https://2015.igem.org/wiki/index.php?title=Team:Freiburg/PaP/ScienceFair
| + | |
| − | /* CSS classes and ids for Human Practice
| + | |
| − | /* CSS for back-button
| + | |
| − | /* CSS for the upwards-blob: on wiki_content_start
| + | |
| − | /* =================== END: CSS Navigation =================== */
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* ============= Resetting css coming from wiki itself ============= */
| + | |
| − | body {
| + | |
| − | font: sans-serif;
| + | |
| − | color: #000;
| + | |
| − | margin: 0px;
| + | |
| − | padding: 0px;
| + | |
| − | background-color: #FCFCFC;
| + | |
| − | line-height: 1.8;
| + | |
| − | }
| + | |
| − | | + | |
| − | a {
| + | |
| − | color: #002BB8;
| + | |
| − | text-decoration: none;
| + | |
| − | background: transparent none repeat scroll 0% 0%;
| + | |
| − | }
| + | |
| − | | + | |
| − | p {
| + | |
| − | margin: 0.4em 0px 0.5em;
| + | |
| − | line-height: 1.5em;
| + | |
| − | }
| + | |
| − | | + | |
| − | #globalWrapper {
| + | |
| − | position: absolute;
| + | |
| − | font-size: 150%;
| + | |
| − | width: 100%;
| + | |
| − | margin: 0px;
| + | |
| − | padding: 0px 0px 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #mainContainer {
| + | |
| − | margin: 0;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | #top_menu_under {
| + | |
| − | position: relative;
| + | |
| − | width: 100%;
| + | |
| − | height: 16px;
| + | |
| − | border-bottom: 2px solid #000;
| + | |
| − | }
| + | |
| − | | + | |
| − | #top_menu_14 {
| + | |
| − | position: fixed;
| + | |
| − | width: 100%;
| + | |
| − | top: 0px;
| + | |
| − | left: 0px;
| + | |
| − | height: 16px;
| + | |
| − | background-color: #383838;
| + | |
| − | border-bottom: 2px solid #000;
| + | |
| − | z-index: 9999;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | #top_menu_inside {
| + | |
| − | display: block;
| + | |
| − | position: relative;
| + | |
| − | width: 900px;
| + | |
| − | height: 100%;
| + | |
| − | margin: 0px auto;
| + | |
| − | padding: 0px 10px;
| + | |
| − | border-left: 1px solid #C8C8C8;
| + | |
| − | border-right: 1px solid #C8C8C8;
| + | |
| − | font-family: "arial",sans-serif;
| + | |
| − | font-size: 12px;
| + | |
| − | font-weight: 400;
| + | |
| − | color: #FFF;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | #content {
| + | |
| − | position: relative;
| + | |
| − | width: 100%;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | background: #FFF none repeat scroll 0% 0%;
| + | |
| − | color: #000;
| + | |
| − | border-left: 0;
| + | |
| − | border-right: 0;
| + | |
| − | /* line-height: 0; */
| + | |
| − | z-index: 2;
| + | |
| − | | + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | .visualClear {
| + | |
| − | clear: both;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* removes URL from current site from the top of the window */
| + | |
| − | .firstHeading{
| + | |
| − | font-size: 0;
| + | |
| − | border: 0;
| + | |
| − | margin-bottom: -8px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* ============= END: Resetting css coming from wiki itself ============= */
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* ============= Clearing DokuWiki elements ============= */
| + | |
| − | | + | |
| − | .tags{
| + | |
| − | /* remove tags from bottom */
| + | |
| − | font-size: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | acronym{
| + | |
| − | /* remove text-decoration from acronyms*/
| + | |
| − | border-bottom: none;
| + | |
| − | text-decoration: none;
| + | |
| − | cursor: auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | .urlextern {
| + | |
| − | background: none !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .link-https {
| + | |
| − | background: none !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* ============= END: Clearing DokuWiki elements ============= */
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* ============= Declaring Fonts ============= */
| + | |
| − | | + | |
| − | @font-face {
| + | |
| − | font-family: Candara;
| + | |
| − | src: url(https://static.igem.org/mediawiki/2015/d/dd/Freiburg_Candara.eot);
| + | |
| − | src: url(https://static.igem.org/mediawiki/2015/6/6c/Freiburg_Candara.ttf) format('truetype');
| + | |
| − | | + | |
| − | }
| + | |
| − | @font-face {
| + | |
| − | font-family: Candara;
| + | |
| − | src: url(https://static.igem.org/mediawiki/2015/8/89/Freiburg_Candarab.ttf) format('truetype');
| + | |
| − | font-weight: bold;
| + | |
| − | font-style: normal;
| + | |
| − | }
| + | |
| − | @font-face {
| + | |
| − | font-family: Candara; | + | |
| − | src: url(https://static.igem.org/mediawiki/2015/3/3e/Freiburg_Candarai.ttf) format('truetype');
| + | |
| − | font-weight: normal;
| + | |
| − | font-style: italic;
| + | |
| − | }
| + | |
| − | | + | |
| − | @font-face {
| + | |
| − | font-family: Roboto;
| + | |
| − | src: url(https://static.igem.org/mediawiki/2015/e/ee/Freiburg_Roboto-Regular.eot);
| + | |
| − | src: url(https://static.igem.org/mediawiki/2015/b/bf/Freiburg_Roboto-Regular-webfont.woff) format('woff'),
| + | |
| − | url(https://static.igem.org/mediawiki/2015/c/c3/Freiburg_Roboto-Regular.ttf) format('truetype'),
| + | |
| − | url('https://static.igem.org/mediawiki/2015/3/38/Freiburg_Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
| + | |
| − | }
| + | |
| − | @font-face {
| + | |
| − | font-family: Roboto;
| + | |
| − | src: url(https://static.igem.org/mediawiki/2015/7/7f/Freiburg_Roboto-Light.eot);
| + | |
| − | src: url(https://static.igem.org/mediawiki/2015/2/28/Freiburg_Roboto-Light-webfont.woff) format('woff'),
| + | |
| − | url(https://static.igem.org/mediawiki/2015/6/64/Freiburg_Roboto-Light.ttf) format('truetype'),
| + | |
| − | url('https://static.igem.org/mediawiki/2015/8/87/Freiburg_Roboto-Light-webfont.svg#RobotoLight') format('svg');
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 300;
| + | |
| − |
| + | |
| − | }
| + | |
| − | @font-face {
| + | |
| − | font-family: Roboto;
| + | |
| − | src: url(https://static.igem.org/mediawiki/2015/4/40/Freiburg_Roboto-Bold.eot);
| + | |
| − | src: url(https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Roboto-Bold-webfont.woff) format('woff'),
| + | |
| − | url(https://static.igem.org/mediawiki/2015/b/b9/Freiburg_Roboto-Bold.ttf) format('truetype'),
| + | |
| − | url('https://static.igem.org/mediawiki/2015/4/40/Freiburg_Roboto-Bold-webfont.svg#RobotoBold') format('svg');
| + | |
| − | font-weight: bold;
| + | |
| − | font-style: normal;
| + | |
| − | }
| + | |
| − | @font-face {
| + | |
| − | font-family: Roboto;
| + | |
| − | src: url(https://static.igem.org/mediawiki/2015/0/0f/Freiburg_Roboto-Italic.eot);
| + | |
| − | src: url(https://static.igem.org/mediawiki/2015/6/6f/Freiburg_Roboto-Italic-webfont.woff) format('woff'), url(https://static.igem.org/mediawiki/2015/2/2e/Freiburg_Roboto-Italic.ttf) format('truetype'),
| + | |
| − | url('https://static.igem.org/mediawiki/2015/8/8f/Freiburg_Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
| + | |
| − | font-weight: normal;
| + | |
| − | font-style: italic;
| + | |
| − | }
| + | |
| − | @font-face {
| + | |
| − | font-family: Roboto;
| + | |
| − | src: url(https://static.igem.org/mediawiki/2015/c/ce/Freiburg_Roboto-BoldItalic.eot);
| + | |
| − | src: url(https://static.igem.org/mediawiki/2015/8/89/Freiburg_Roboto-BoldItalic-webfont.woff) format('woff'),
| + | |
| − | url(https://static.igem.org/mediawiki/2015/2/2f/Freiburg_Roboto-BoldItalic.ttf) format('truetype'),
| + | |
| − | url('https://static.igem.org/mediawiki/2015/a/ac/Freiburg_Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg');
| + | |
| − | font-weight: bold;
| + | |
| − | font-style: italic;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* ============= END: Declaring Fonts ============= */
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* ============= CSS for Menubar ============= */
| + | |
| − | | + | |
| − | #menubar {
| + | |
| − | font-size: 16px;
| + | |
| − | background-color: #5781bd;
| + | |
| − | display: table;
| + | |
| − | width: 100%;
| + | |
| − | height: 70px;
| + | |
| − | border-collapse: collapse;
| + | |
| − | border: none;
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | /*The sub (and subsubs) items of the menu*/
| + | |
| − | #menubar ul li ul li{
| + | |
| − | width: 200px;
| + | |
| − | height: 30px;
| + | |
| − | margin-top: 2px;
| + | |
| − | }
| + | |
| − | /*The first (horizontal) line of menu items*/
| + | |
| − | #menubar > ul{
| + | |
| − | | + | |
| − | position: relative;
| + | |
| − | margin-top: 25;
| + | |
| − | left: 50%;
| + | |
| − | display: block;
| + | |
| − | transform: translate(-50%,0%);
| + | |
| − | }
| + | |
| − | | + | |
| − | #menubar ul ul {
| + | |
| − | background-color: #5781bd;
| + | |
| − | display: none;
| + | |
| − | position: absolute;
| + | |
| − | margin-left: 0px;
| + | |
| − | float: left;
| + | |
| − | margin-top:0px;
| + | |
| − | }
| + | |
| − | #menubar ul ul li{
| + | |
| − | display: block;
| + | |
| − | margin-left: 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #menubar ul li {
| + | |
| − | width: 100px;
| + | |
| − | display: table-cell;
| + | |
| − | font-family: "Roboto",sans-serif;
| + | |
| − | }
| + | |
| − | | + | |
| − | #menubar ul a{
| + | |
| − | text-decoration: none;
| + | |
| − | color: #FFFFFF;
| + | |
| − | font-style: bold;
| + | |
| − | text-align: left;
| + | |
| − | }
| + | |
| − | | + | |
| − | #menubar ul a:visited{
| + | |
| − | display: block;
| + | |
| − | text-decoration: none;
| + | |
| − | color: #FFFFFF;
| + | |
| − | font-style: bold;
| + | |
| − | }
| + | |
| − | #menubar ul li:hover > ul{
| + | |
| − | color: #EEEE00;
| + | |
| − | display: block;
| + | |
| − | padding-top: 0px;
| + | |
| − | padding-left: 20px;
| + | |
| − | }
| + | |
| − | #menubar ul li:hover{
| + | |
| − | color: #EEEE00;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* ============= END: CSS for Menubar ============= */
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* ============= Important Site setup ============= */
| + | |
| − | | + | |
| − | | + | |
| − | /* avoid dotted outline after clicking on links */
| + | |
| − | a {
| + | |
| − | outline: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* properties for central text box */
| + | |
| − | .bodyContent{
| + | |
| − | overflow: hidden;
| + | |
| − | box-sizing: border-box;
| + | |
| − | /* REMOVE WITH NEW NAVIGATION */
| + | |
| − | /* Avoid layout damage due to old navigation */
| + | |
| − | clear: both;
| + | |
| − | }
| + | |
| − | /*adds padding on topside - necessary for attached menubar: mauri*/
| + | |
| − | .content_background_wrapper{
| + | |
| − | padding-top: 100px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* flows around all the content in the center of the screen */
| + | |
| − | .page_content{
| + | |
| − | margin: 20px 5px;
| + | |
| − | box-sizing: border-box; /* allows for efficient paositioning of the elements within */
| + | |
| − | }
| + | |
| − | | + | |
| − | /* flows around text in the page_content */
| + | |
| − | .content_box{
| + | |
| − | border-radius: 30px 60px;
| + | |
| − | overflow: hidden;
| + | |
| − | padding: 4%;
| + | |
| − | margin: 2em 0;
| + | |
| − | margin-bottom: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* flexbox: contains the whole dokuwiki image part and renders it readable
| + | |
| − | /* flexbox images are placed in one row and break the text.
| + | |
| − | /* allow placing of several images including caption in one row */
| + | |
| − | .flexbox .thumb2 .thumbinner .thumbcaption { /*circumvents the iGEM tag thumbcaption*/
| + | |
| − | font-size: 70%;
| + | |
| − | padding: 0 10px;
| + | |
| − | text-align: justify;
| + | |
| − | }
| + | |
| − | | + | |
| − | .image_box .thumb2 .thumbinner img{
| + | |
| − | max-width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* see: https://css-tricks.com/snippets/css/a-guide-to-flexbox/*/
| + | |
| − | .flexbox{
| + | |
| − | display: flex;
| + | |
| − | margin: 5% 0;
| + | |
| − | justify-content: space-around;
| + | |
| − | flex-wrap: wrap;
| + | |
| − | align-content: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* for DokuWiki image boxes this prevents a zickzack positioning of the flexbox childs when wrap occurs */
| + | |
| − | a.media{
| + | |
| − | margin: 0 auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* contains images where text shall float around */
| + | |
| − | .image_box{
| + | |
| − | margin: 0.4em 0;
| + | |
| − | overflow: hidden;
| + | |
| − | font-size: 70%;
| + | |
| − | text-align: justify;
| + | |
| − | }
| + | |
| − | | + | |
| − | .image_box.left{
| + | |
| − | float: left;
| + | |
| − | margin-right: 3%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .image_box.right{
| + | |
| − | float: right;
| + | |
| − | margin-left: 3%
| + | |
| − | }
| + | |
| − | | + | |
| − | /* prevents the floating of images out of the DokuWiki-sections */
| + | |
| − | .level1,
| + | |
| − | .level2{
| + | |
| − | overflow: hidden;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* references coming from DokuWiki */
| + | |
| − | .footnotes{
| + | |
| − | width: 90%;
| + | |
| − | margin: 2em auto 0 auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | .fn_top{
| + | |
| − | font-size: 70%
| + | |
| − | }
| + | |
| − | | + | |
| − | /* styling tables coming from dokuwiki */
| + | |
| − | .content_box .table{
| + | |
| − | margin: 2em 5%;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* the element that can be used to style the table */
| + | |
| − | .content_box .table .inline{
| + | |
| − | font-size: 90%;
| + | |
| − | width: 100%;
| + | |
| − | border-collapse: collapse;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* grey background for the header line */
| + | |
| − | .content_box .table th{
| + | |
| − | background-color: #DDD;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* greyish background for every second row */
| + | |
| − | .content_box .table tr:nth-child(odd){
| + | |
| − | background-color: #EEE;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* move text away from cell borders */
| + | |
| − | .content_box .table td,
| + | |
| − | .content_box .table th{
| + | |
| − | padding: 0 10px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* hovering efects */
| + | |
| − | .content_box .table tr:hover{
| + | |
| − | background-color: #D2D4F3;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* === content_box2 for brick layout === */
| + | |
| − | | + | |
| − | /* two content boxes in same line (sb) */
| + | |
| − | .content_box2_parent {
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | .content_box2_child {
| + | |
| − | border-radius: 30px 60px;
| + | |
| − | display: inline-block;
| + | |
| − | background-color: #FFFFFF;
| + | |
| − | text-align: justify;
| + | |
| − | vertical-align: middle;
| + | |
| − | box-shadow: 1px 1px 10px #888;
| + | |
| − | -webkit-box-shadow: 1px 1px 10px #888;
| + | |
| − | -moz-box-shadow: 1px 1px 10px #888;
| + | |
| − | padding: 4%;
| + | |
| − | min-height: 430px;
| + | |
| − | }
| + | |
| − | | + | |
| − | @media screen and (min-width: 601px){
| + | |
| − | .content_box2_child{
| + | |
| − | margin: 2em 1em 2em 1em;
| + | |
| − | width: 35%;
| + | |
| | } | | } |
| − | }
| |
| | | | |
| − | @media screen and (max-width: 600px){
| + | $('.accordion-section-title').click(function(e) { |
| − | .content_box2_child{ | + | // Grab current anchor value |
| − | margin: 1em 0 0;
| + | var currentAttrValue = $(this).attr('href'); |
| − | width: auto;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /* === Floatboxes for two column layout === */
| + | |
| − | | + | |
| − | .floatbox{
| + | |
| − | width: 48%; /* 100% - 2*48% = 4% padding*/
| + | |
| − | }
| + | |
| − | | + | |
| − | @media screen and (min-width: 601px){
| + | |
| − | .floatbox.left{
| + | |
| − | float: left;
| + | |
| − | }
| + | |
| − | | + | |
| − | .floatbox.right{
| + | |
| − | float: right;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @media screen and (max-width: 600px){
| + | |
| − | .floatbox{
| + | |
| − | float: none;
| + | |
| − | width: auto;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /* ============= END: Important Site setup ============= */
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* ============= Text Styling ============= */
| + | |
| − | | + | |
| − | .page_content{
| + | |
| − | color: #666666;
| + | |
| − | font-family: 'Roboto',sans-serif;
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: 300;
| + | |
| − | font-size: 120%;
| + | |
| − | text-align: justify;
| + | |
| − | }
| + | |
| − | | + | |
| − | .page_content p{ | + | |
| − | line-height: 1.8em;
| + | |
| − | margin-bottom: 2em; /*move next paragraph away vertically */
| + | |
| − | }
| + | |
| − | | + | |
| − | h1, h2, h3{
| + | |
| − | | + | |
| − | font-family: "Roboto", sans-serif;
| + | |
| − | color: #C5162F;
| + | |
| − | font-size: 25px;
| + | |
| − | clear: both;
| + | |
| − | font-weight: 400;
| + | |
| − | line-height: 1.2;
| + | |
| − | border-bottom: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* flows around text in the page_content */
| + | |
| − | .content_box{
| + | |
| − | background-color: #FFFFFF;
| + | |
| − | text-align: justify;
| + | |
| − | box-shadow: 1px 1px 10px #888;
| + | |
| − | -webkit-box-shadow: 1px 1px 10px #888;
| + | |
| − | -moz-box-shadow: 1px 1px 10px #888;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* properties for central text box */
| + | |
| − | #bodyContent{
| + | |
| − | /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+13,0051a2+100 */
| + | |
| − | background: rgb(252,252,252); /* Old browsers */
| + | |
| − | background: -moz-linear-gradient(-45deg, rgba(252,252,252,1) 13%, rgba(0,81,162,1) 100%); /* FF3.6+ */
| + | |
| − | background: -webkit-gradient(linear, left top, right bottom, color-stop(13%,rgba(252,252,252,1)), color-stop(100%,rgba(0,81,162,1))); /* Chrome,Safari4+ */
| + | |
| − | background: -webkit-linear-gradient(-45deg, rgba(252,252,252,1) 13%,rgba(0,81,162,1) 100%); /* Chrome10+,Safari5.1+ */
| + | |
| − | background: -o-linear-gradient(-45deg, rgba(252,252,252,1) 13%,rgba(0,81,162,1) 100%); /* Opera 11.10+ */
| + | |
| − | background: -ms-linear-gradient(-45deg, rgba(252,252,252,1) 13%,rgba(0,81,162,1) 100%); /* IE10+ */
| + | |
| − | background: linear-gradient(135deg, rgba(252,252,252,1) 13%,rgba(0,81,162,1) 100%); /* W3C */
| + | |
| − | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#0051a2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
| + | |
| − | }
| + | |
| − | | + | |
| − | /* references coming from DokuWiki */
| + | |
| − | .footnotes{ | + | |
| − | font-size: 80%;
| + | |
| − | font-style: italic;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* KOMMENTARFUNKTION */
| + | |
| − | .kommentar{
| + | |
| − | background-color: red;
| + | |
| − | color: black;
| + | |
| − | border: 2px solid black;
| + | |
| − | width: 100%;
| + | |
| − | clear: both;
| + | |
| − | }
| + | |
| − | .kommentar_stefan{
| + | |
| − | background-color: #ff1493;
| + | |
| − | color: black;
| + | |
| − | font-size: 14px;
| + | |
| − | font-family: "Comic Sans MS";
| + | |
| − | border: 2px solid black;
| + | |
| − | width: 100%;
| + | |
| − | clear: both;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Links */
| + | |
| − | #red_link {
| + | |
| − | color: #C5162F;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* ============= END: Text Styling ============= */
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* ============= Background ============= */
| + | |
| − | | + | |
| − | /* use central position as anchor for the vertical position of the side images */
| + | |
| − | .central_position_wrap{
| + | |
| − | position: relative;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* define width and positioning of side images */
| + | |
| − | .background_image_left,
| + | |
| − | .background_image_right{
| + | |
| − | width: 150px;
| + | |
| − | position: absolute;
| + | |
| − | }
| + | |
| − | | + | |
| − | .background_image_left{
| + | |
| − | left:0;
| + | |
| − | bottom: -20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .background_image_right{
| + | |
| − | top: 120px;
| + | |
| − | right:0;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* float the right image to the right s.t. it fits to the window border */
| + | |
| − | .background_image_right img{
| + | |
| − | float: right;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* === Background: Responsive Design === */
| + | |
| − | | + | |
| − | /* hide side images if screen is too small */
| + | |
| − | @media only screen and (max-width: 1320px){
| + | |
| − | .background_image_left,
| + | |
| − | .background_image_right{
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /* adapt box width s.t. it fits the screen but has a maximum width of 1000px --jb*/
| + | |
| − | @media only screen and (min-width: 1021px){
| + | |
| − | /* style for browsers wider than 1000px */
| + | |
| − | /* the 20px come from the scrollbar */
| + | |
| − | .page_content{
| + | |
| − | width: 1000px; | + | |
| − | margin-left: auto;
| + | |
| − | margin-right: auto;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @media only screen and (max-width: 1020px){
| + | |
| − | /* style for browsers smaller than 1000px */
| + | |
| − | .page_content{
| + | |
| − | width: intrinsic; | + | |
| − | width: moz-fit-content;
| + | |
| − | width: -webkit-fit-content;
| + | |
| − | width: fit-content;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /* === END: Background: Responsive Design === */
| + | |
| − | | + | |
| − | /* ============= END: Background ============= */
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* ============= Full Width Banners ============= */
| + | |
| − | #banner_home{
| + | |
| − | margin:0;
| + | |
| − | padding: 0px;
| + | |
| − | background-image: url("../wiki/images/8/89/Freiburg_frontpage_banner.jpg");
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | background-size: cover;
| + | |
| − | width: 100%;
| + | |
| − | height: 400px;
| + | |
| − | }
| + | |
| − | #banner_team{
| + | |
| − | margin:0;
| + | |
| − | padding: 0px;
| + | |
| − | background-image: url("../wiki/images/e/e7/FreiburgTeam2015.jpg");
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | background-size: cover;
| + | |
| − | width: 100%;
| + | |
| − | height: 400px;
| + | |
| − | }
| + | |
| − | #banner_labjournal{
| + | |
| − | margin:0;
| + | |
| − | padding: 0px;
| + | |
| − | background-image: url("https://static.igem.org/mediawiki/2015/d/dc/Labjournal.jpg");
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | background-size: cover;
| + | |
| − | width: 100%;
| + | |
| − | height: 400px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* ============= END: Full Width Banners ============= */
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* =================== Footer =================== */
| + | |
| − | | + | |
| − | .content_footer{
| + | |
| − | background: #0051A2 scroll;
| + | |
| − | width: 100%;
| + | |
| − | height: 75px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .contacts{
| + | |
| − | width: 320px;
| + | |
| − | margin: 0 auto;
| + | |
| − | display: flex;
| + | |
| − | justify-content: space-around;
| + | |
| − | display: -webkit-flex; /*Safari*/
| + | |
| − | -webkit-justify-content: space-around; /* Safari 6.1+ */
| + | |
| − | }
| + | |
| − | | + | |
| − | #uni a img,
| + | |
| − | #bioss a img,
| + | |
| − | #facebook a img,
| + | |
| − | #email a img{
| + | |
| − | max-height: 40px
| + | |
| − | }
| + | |
| − | | + | |
| − | #uni,
| + | |
| − | #bioss,
| + | |
| − | #facebook,
| + | |
| − | #email{
| + | |
| − | padding-top: 15px;
| + | |
| − | padding-right:10px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* gap between social links and uni links */
| + | |
| − | #facebook{
| + | |
| − | padding-right: 40px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* The html for the footer is included in wiki_content-end! */
| + | |
| − | | + | |
| − | /* =================== END: Footer =================== */
| + | |
| − | | + | |
| − | /* =================== Accordion =====================*/
| + | |
| − | /*----- Accordion -----*/
| + | |
| − | .accordion, .accordion * {
| + | |
| − | -webkit-box-sizing:border-box;
| + | |
| − | -moz-box-sizing:border-box;
| + | |
| − | box-sizing:border-box;
| + | |
| − | }
| + | |
| | | | |
| − | .accordion { | + | if($(e.target).is('.active')) { |
| − | overflow:hidden;
| + | close_accordion_section(); |
| − | box-shadow:0px 1px 3px rgba(0,0,0,0.25);
| + | }else { |
| − | border-radius:20px;
| + | close_accordion_section(); |
| − | background:#EEE;
| + | |
| − | }
| + | |
| | | | |
| − | /*----- Section Titles -----*/ | + | // Add active class to section title |
| − | .accordion-section-title {
| + | $(this).addClass('active'); |
| − | width:100%;
| + | // Open up the hidden content panel |
| − | padding:15px;
| + | $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); |
| − | display:inline-block;
| + | } |
| − | border-bottom:1px solid #1a1a1a;
| + | |
| − | background:#0051a2;
| + | |
| − | transition:all linear 0.15s;
| + | |
| − | /* Type */
| + | |
| − | font-size:1.200em;
| + | |
| − | text-shadow:0px 1px 0px #1a1a1a;
| + | |
| − | color:#fff;
| + | |
| − | } | + | |
| | | | |
| − | .accordion-section-title.active, .accordion-section-title:hover { | + | e.preventDefault(); |
| − | background:#72A6DB;
| + | }); |
| − | /* Type */ | + | }); |
| − | text-decoration:none;
| + | |
| − | } | + | |
| − |
| + | |
| − | .accordion-section:last-child .accordion-section-title {
| + | |
| − | border-bottom:none;
| + | |
| − | } | + | |
| − | }
| + | |
| − |
| + | |
| − | /*----- Section Content -----*/
| + | |
| − | .accordion-section-content {
| + | |
| − | padding:15px;
| + | |
| − | display:none;
| + | |
| − | }
| + | |
| | | | |
| − | /* ================= END: Accordion =================*/ | + | // ======================== upwards blob =================== |
| | | | |
| − | /* =============== LIghtbox =========================*/ | + | // The upwards-blob div is defined in Freiburg/CSS as its absolute position should be initialized on the top of the page |
| | | | |
| − | /* from http://webdesign.tutsplus.com/articles/super-simple-lightbox-with-css-and-jquery--webdesign-3528 */
| + | $(document).ready(function(){ |
| | + | var $blob = $("#upwards_blob"), |
| | + | $window = $(window), |
| | + | $doc_heighttop = $(document).height() - $window.height(); |
| | | | |
| − | #lightbox {
| + | //console.log('windowwidth:'+$window.width()); |
| − | position:fixed; /* keeps the lightbox window in the current viewport */ | + | //console.log('windowheight:'+$window.height()); |
| − | top:0;
| + | if ($window.width() > 1144) { |
| − | left:0;
| + | console.log('window is wide enough for upwards-blob') |
| − | width:100%;
| + | $(window).scroll(function(event) { |
| − | height:100%;
| + | |
| − | background: rgba(0,0,0,.7);
| + | |
| − | text-align:center;
| + | |
| − | z-index: 9999;
| + | |
| − | }
| + | |
| | | | |
| − | #lightbox p {
| + | // y is scroll progress (distance from top) |
| − | text-align:right;
| + | // top is about bottomline of window |
| − | color:#fff;
| + | var y = $(this).scrollTop(), |
| − | margin-right:20px;
| + | top = $(this).scrollTop() + $window.height() -100; |
| − | font-size:12px;
| + | //console.log($(this).scrollTop()+' doc_heighttop:'+$doc_heighttop+' top:'+top); |
| − | }
| + | |
| | | | |
| − | #lightbox img {
| + | // use CSS transform to move button into view when user scrolls down |
| − | box-shadow:0 0 25px #111;
| + | if (y > 60 ) { |
| − | -webkit-box-shadow:0 0 25px #111;
| + | console.log('blob inside'); |
| − | -moz-box-shadow:0 0 25px #111;
| + | $blob.css({"display":"inline", "transform": "translateY(0)"}); // = 30 px inside right |
| − | max-width:940px;
| + | } |
| − | max-height: 800px;
| + | |
| − | } | + | |
| | | | |
| − | /* =============== END: Lightbox =========================*/ | + | // move blob out of view when page is scrolled up again |
| | + | if (y < 60) { |
| | + | console.log('blob outside'); |
| | + | $blob.css({"transform": "translateY(130px)"}); // = 100 px outside |
| | + | } |
| | | | |
| − | #head {
| + | $blob.css({"top": top }); |
| − | height: 0px;
| + | }); |
| − | } | + | } else { |
| | + | $blob.css({"display": "none"}) |
| | + | } |
| | + | }); |
| | | | |
| − | /* ============== BEGIN:CSS classes and ids for Human Practice =============*/ | + | // =========================== Lightbox =========================== |
| − | #recipe {
| + | |
| − | width: 80%;
| + | |
| − | }
| + | |
| − | /* ============== END:CSS classes and ids for Human Practice =============*/ | + | |
| − | | + | |
| − | | + | |
| − | /* ============== BEGIN:CSS for back-button =============*/
| + | |
| − | .button_back {
| + | |
| − | margin-left: -14%;
| + | |
| − | margin-top: 5%;
| + | |
| − | padding: 3px 5px 5px 0px;
| + | |
| − | width: 10%;
| + | |
| − | line-height: 1.5em;
| + | |
| − | text-align: center;
| + | |
| − | background-color: #0051A2;
| + | |
| − | border-radius: 30px 15px 15px 30px;
| + | |
| − | border: 1px groove #004081;
| + | |
| − | float: left;
| + | |
| − | }
| + | |
| − | | + | |
| − | .white_link {
| + | |
| − | color: #FFF;
| + | |
| − | }
| + | |
| − | /* ============== END:CSS for back-button =============*/
| + | |
| − | | + | |
| − | </style>
| + | |
| − | | + | |
| − | <!-- INITIALIZE UPWARDS BLOB, SO ITS TOP REFERENCES TO DOCUMENT TOP -->
| + | |
| − | | + | |
| − | <style>
| + | |
| − | | + | |
| − | /* upwards navigation blob */
| + | |
| − | | + | |
| − | #upwards_blob{
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* min-width is chosen so the blob does just not interfere with the content box */
| + | |
| − | /* 1021 content_box-width + 46 blob-width + 20 scrollbar + some buffer space */
| + | |
| − | @media screen and (min-width: 1144px){
| + | |
| − | #upwards_blob{
| + | |
| − | transition: transform 0.5s ease;
| + | |
| − | display: inline;
| + | |
| − | position: absolute;
| + | |
| − | top: 900px;
| + | |
| − | right: 30px;
| + | |
| − | z-index: 1000;
| + | |
| − | transform: translateY(130px);
| + | |
| − | }
| + | |
| − | }
| + | |
| | | | |
| − | </style> | + | $(document).ready(function(){ |
| | + | $('.lightbox_trigger').click(function(event) { |
| | + | |
| | + | //prevent default action (hyperlink) |
| | + | event.preventDefault(); |
| | + | |
| | + | //Get clicked link href |
| | + | var image_href = $(this).attr("href"); |
| | + | console.log(image_href) |
| | + | |
| | + | /* |
| | + | If the lightbox window HTML already exists in document, |
| | + | change the img src to to match the href of whatever link was clicked |
| | + | |
| | + | If the lightbox window HTML doesn't exists, create it and insert it. |
| | + | (This will only happen the first time around) |
| | + | */ |
| | + | |
| | + | if ($('#lightbox').length > 0) { // #lightbox exists |
| | + | |
| | + | //place href as img src value |
| | + | $('#lightboxcontent').html('<img src="' + image_href + '" />'); |
| | + | |
| | + | //show lightbox window - you could use .show('fast') for a transition |
| | + | $('#lightbox').show('fast'); |
| | + | } |
| | + | |
| | + | else { //#lightbox does not exist - create and insert (runs 1st time only) |
| | + | |
| | + | //create HTML markup for lightbox window |
| | + | var lightbox = |
| | + | '<div id="lightbox">' + |
| | + | '<p>Click to close</p>' + |
| | + | '<div id="lightboxcontent">' + //insert clicked link's href into img src |
| | + | '<img src="' + image_href +'" />' + |
| | + | '</div>' + |
| | + | '</div>'; |
| | + | |
| | + | //insert lightbox HTML into page |
| | + | $('body').append(lightbox); |
| | + | } |
| | + | |
| | + | }); |
| | + | |
| | + | //Click anywhere on the page to get rid of lightbox window |
| | + | $('body').on('click', '#lightbox', function() { //must use live, as the lightbox element is inserted into the DOM |
| | + | // as live is deprecated, use on |
| | + | $('#lightbox').hide(); |
| | + | }); |
| | | | |
| − | <div id="upwards_blob"><a href="#globalWrapper"><img src="https://static.igem.org/mediawiki/2015/9/93/Freiburg_upwards_blob.png"></a></div>
| + | }); |
| | | | |
| | + | </script> |
| | | | |
| | </html> | | </html> |