(Prototype team template page) |
JacquesHille (Talk | contribs) |
||
(62 intermediate revisions by 6 users not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | ||
<script> | <script> | ||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
Line 7: | Line 8: | ||
$("#HQ_page").attr('id',''); | $("#HQ_page").attr('id',''); | ||
− | |||
//highlight current page on the menu | //highlight current page on the menu | ||
highlight_current_page_menu(); | highlight_current_page_menu(); | ||
Line 21: | Line 21: | ||
$(this).next().toggleClass("displaying_menu"); | $(this).next().toggleClass("displaying_menu"); | ||
}); | }); | ||
− | + | ||
}); | }); | ||
Line 43: | Line 43: | ||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | document.addEventListener('DOMContentLoaded', function() { | ||
+ | var elems = document.querySelectorAll('.modal'); | ||
+ | var instances = M.Modal.init(elems, options); | ||
+ | }); | ||
− | + | // Or with jQuery | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | $(document).ready(function(){ | |
+ | $('.modal').modal(); | ||
+ | }); | ||
+ | </script> | ||
− | + | <style> | |
− | + | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
− | + | @import url("https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif") | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | /**************************************************************************************************************************************************************************************************/ | |
− | + | /* DEFAULT WIKI SETTINGS */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | /* | + | |
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
− | + | #home_logo, #sideMenu { display:none; } | |
− | + | #sideMenu, #top_title, .patrollink {display:none;} | |
− | + | #content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;} | |
− | + | body {background-color:white; margin: 0px} | |
− | + | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2%; width: 92%;} | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
Line 217: | Line 85: | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
− | + | /* general wrapper for the content */ | |
− | + | .igem_2018_team_content { | |
− | + | background-color:white; | |
− | + | display:block; | |
− | + | width: 100%; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | /* subwrapper to center content */ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper { | ||
+ | margin:auto; | ||
+ | max-width: 1400px; | ||
+ | width:65%; | ||
+ | } | ||
Line 236: | Line 103: | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper h1 { font-size: 210%;} | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper h2 { font-size: 190%;} | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper h3 { font-size: 170%;} | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper h4 { font-size: 150%;} | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper h5 { font-size: 140%;} | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper h6 { font-size: 130%;} | |
− | + | /* styling for the titles h1, h2*/ | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper h1, .igem_2018_team_content .igem_2018_team_column_wrapper h2 { | |
− | + | border-bottom:0px; | |
− | + | color: #83CF38; | |
− | + | font-family: Raleway, "Noto Sans", Helvetica, "Arial Black", Gadget, sans-serif; | |
− | + | padding: 10px 0px; | |
− | + | } | |
− | + | /* styling for the titles h3, h3, h5, h6 */ | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper h3, | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper h4, | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper h5, | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper h6 { | |
− | + | border-bottom:0px; | |
− | + | color: #83CF38; | |
− | + | font-family: Raleway, "Noto Sans", Helvetica, "Arial Black", Gadget, sans-serif; | |
− | + | padding: 5px 0px; | |
− | + | } | |
− | + | /* text */ | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper p { | |
− | + | font-family: Raleway, "Noto Sans", Helvetica, "Arial Black", Gadget, sans-serif; | |
− | + | padding: 5px 0px; | |
− | + | text-align: justify; | |
− | + | color: #484848; | |
− | + | } | |
− | + | ||
− | + | /* Links */ | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper a { | |
− | + | color: #5bc7d8; | |
− | + | font-weight: bold; | |
− | + | text-decoration: underline; | |
− | + | text-decoration-color:#5bc7d8; | |
− | + | transition: all 0.4s ease; | |
− | + | -webkit-transition: all 0.4s ease; | |
− | + | -moz-transition: all 0.4s ease; | |
− | + | -ms-transition: all 0.4s ease; | |
− | + | -o-transition: all 0.4s ease; | |
− | + | } | |
− | + | /* hover for the links */ | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper a:hover { | |
− | + | color: #f8b732; | |
− | + | text-decoration:none; | |
− | + | } | |
− | + | /* Table */ | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper table { | |
− | + | border: 1px solid #928b8b; | |
− | + | border-collapse: collapse; | |
− | + | width: 100%; | |
− | + | } | |
− | + | ||
− | + | /* table cells */ | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper td { | |
− | + | border: 1px solid #c4baba; | |
− | + | border-collapse: collapse; | |
− | + | font-size: 100%; | |
− | + | padding: 10px; | |
− | + | vertical-align: text-top; | |
− | + | } | |
− | + | /* table headers */ | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper th p { | |
− | + | background-color:#c4baba; | |
− | + | border: 1px solid #928b8b; | |
− | + | border-collapse: collapse; | |
− | + | font-size: 100%; | |
− | + | padding: 10px; | |
− | + | vertical-align: text-top; | |
− | + | } | |
+ | .igem_2018_team_content .igem_2018_team_column_wrapper tr:nth-child(even) { | ||
+ | background-color: #95F2A0; | ||
+ | } | ||
− | + | /* non numbered lists */ | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper ul p, .igem_2018_team_content .igem_2018_team_column_wrapper ol p { | |
− | + | font-size: 100%; | |
− | + | font-family: Arial, Helvetica, sans-serif; | |
− | + | padding:0px 20px; | |
− | + | } | |
+ | |||
+ | .collapsible-header { | ||
+ | font-size:130%; | ||
+ | } | ||
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ul ul li, | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper ul ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ul ol li, | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ul li, | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper ol ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ol li, | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper ol ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ol ul li, | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper ol ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ul ol li{ font-size: 100%; } | |
Line 341: | Line 213: | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
− | + | /*main layout class */ | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .column { | |
− | + | float:left; | |
− | + | margin: 1% 2%; | |
− | + | padding: 0px; | |
− | + | } | |
− | + | /* 100% */ | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size { width:96%; } | |
− | + | /* 66% */ | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size { width: 62.6%; } | |
− | + | /* 33% */ | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size { width: 29.3%; } | |
− | + | /*styling for all images*/ | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size img, | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size img, | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size img { | |
− | + | margin-bottom: 15px; | |
− | + | width: 100%; | |
− | + | } | |
− | + | /* page break */ | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .clear { | |
− | + | clear:both; | |
− | + | } | |
− | + | /*add extra space to page break with clear class*/ | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .clear.extra_space { | |
− | + | height: 30px; | |
− | } | + | } |
+ | |||
+ | /* horizontal line to divide the page*/ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .line_divider { | ||
+ | border-top: 1px solid #c4baba; | ||
+ | margin: auto; | ||
+ | width: 98%; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
/*support classes*/ | /*support classes*/ | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
− | + | /*Button */ | |
− | + | /************************************************/ | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .button_link { | |
− | + | font-size: 130%; | |
− | + | margin: 30px auto; | |
− | + | text-align: center; | |
− | + | } | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .button_link a { | |
− | + | background-color: #5bc7d8; | |
− | + | color: #635d5d; | |
− | + | font-weight: bold; | |
− | + | margin: auto; | |
− | + | text-decoration: none; | |
− | + | padding: 10px 15px; | |
− | + | } | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .button_link a:hover { | |
− | + | background-color: #f8b732; | |
− | + | } | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight { | |
− | + | padding: 15px 20px; | |
− | + | } | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight p, | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h1, | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h2, | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h3, | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h4, | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h5, | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h6 { | |
− | + | padding: 5px 15px; | |
− | + | } | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_background { | |
− | + | background-color: #e4dede; | |
− | + | } | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_top { | |
− | + | border-top: 4px solid #5bc7d8; | |
− | + | } | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_full { | |
− | + | border: 4px solid #5bc7d8; | |
− | + | } | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_top { | |
− | + | border-top: 4px solid #f8b732 | |
− | + | } | |
− | + | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_full { | |
− | + | border: 4px solid #f8b732; | |
− | + | } | |
+ | |||
+ | |||
+ | img.portrait_photo { | ||
+ | border-radius:50%; | ||
+ | } | ||
Line 458: | Line 335: | ||
− | + | /* 1800px */ | |
− | + | /************************************************/ | |
− | + | @media only screen and (max-width: 1800px) { | |
− | + | ||
− | + | ||
} | } | ||
− | + | /* 1400px */ | |
− | + | /************************************************/ | |
− | + | @media only screen and (max-width: 1400px) { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | } | |
− | + | ||
− | + | ||
− | + | @media only screen and (max-width: 1001px) { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | } | |
+ | /* 1000px */ | ||
+ | /************************************************/ | ||
+ | @media only screen and (max-width: 1000px) { | ||
+ | .igem_2018_team_content {width:100%; margin-left:0px;} | ||
+ | .igem_2018_team_mobile_bar {display:block;} | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size, .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size,.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size {width:96%; } | ||
− | + | } | |
− | + | ||
− | + | ||
+ | @media only screen and (max-width: 500px) { | ||
+ | |||
+ | } | ||
Line 496: | Line 369: | ||
+ | </style> | ||
+ | <style> | ||
+ | <!---OWN STYLE---> | ||
+ | <style> | ||
+ | #scrollBtn { | ||
+ | display: none; | ||
+ | position: fixed; | ||
+ | bottom: 20px; | ||
+ | right: 30px; | ||
+ | z-index: 99; | ||
+ | font-size: 18px; | ||
+ | border: none; | ||
+ | outline: none; | ||
+ | background-color: red; | ||
+ | color: white; | ||
+ | cursor: pointer; | ||
+ | padding: 15px; | ||
+ | border-radius: 4px; | ||
+ | } | ||
+ | #scrollBtn:hover { | ||
+ | background-color: #555; | ||
+ | } | ||
</style> | </style> | ||
− | |||
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | <!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | ||
Line 512: | Line 406: | ||
</head> | </head> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− |
Latest revision as of 09:43, 17 October 2018