Difference between revisions of "Template:Main2018"

 
(32 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
 
 
<script>
 
<script>
  
Line 15: Line 14:
 
 
 
//if image_slider exists, activate the automatic rotation slider and functionality
 
//if image_slider exists, activate the automatic rotation slider and functionality
−
if ($("#image_slider").length){
+
if ($("#image_carrousel").length){
 
image_slider_rotation();
 
image_slider_rotation();
 
}
 
}
Line 23: Line 22:
 
highlight_current_page_menu();  
 
highlight_current_page_menu();  
 
});
 
});
 +
 +
 +
$(".collapsible_accordion_access").click(function(){
 +
$(this).toggleClass("displaying_content");
 +
$(this).parent().next().toggleClass("hide_content");
 +
});
 +
 
 
 
});
 
});
Line 275: Line 281:
 
height: 39px;
 
height: 39px;
 
width:100%;  
 
width:100%;  
 +
}
 +
 +
.igem_menu_item.last_item{
 +
margin-bottom:60px;
 
}
 
}
  
Line 471: Line 481:
 
/* general wrapper for the content */
 
/* general wrapper for the content */
 
.igem_content_wrapper {
 
.igem_content_wrapper {
−
width: 88.9%;
+
/*width: 88.9%;*/
 +
width: -webkit-calc(100% -270px);
 +
width:    -moz-calc(100% - 270px);
 +
width:  calc(100% - 270px);
 
display:block;
 
display:block;
 
background-color:white;  
 
background-color:white;  
Line 556: Line 569:
 
.igem_content_wrapper ul {
 
.igem_content_wrapper ul {
 
font-family:Tahoma, Geneva, sans-serif;  
 
font-family:Tahoma, Geneva, sans-serif;  
−
font-size: 115%;
+
font-size: 120%;
 
padding:0px 20px;
 
padding:0px 20px;
 +
list-style: disc;
 
}
 
}
  
 
/*font size specifications for nested lists and other special cases*/
 
/*font size specifications for nested lists and other special cases*/
−
.igem_content_wrapper ul ul li { font-size: 90%; }
 
  
−
.igem_content_wrapper td > ul li,  
+
 
−
.igem_content_wrapper ol ol li {  
+
.igem_content_wrapper td > ul li, .igem_content_wrapper ol ol li, .igem_content_wrapper ul ol li, .igem_content_wrapper ol ul li, .igem_content_wrapper ul ul li  {  
−
font-size: 85%;}
+
font-size: 85%;
 +
}
  
  
Line 657: Line 671:
 
}
 
}
  
 +
 +
/* softer horizontal gray line to divide the page*/
 +
.line_divider.soft {
 +
      border-top: 1px solid #f2f2f2;
 +
}
 +
 +
/*highlight class can be used style divs in multiple combinations*/
 
.highlight {  
 
.highlight {  
 
padding: 15px 20px;
 
padding: 15px 20px;
Line 675: Line 696:
 
.highlight.decoration_dark_top {
 
.highlight.decoration_dark_top {
 
     border-top: 4px solid #542160;
 
     border-top: 4px solid #542160;
 +
}
 +
 +
.highlight.decoration_medium_top {
 +
    border-top: 4px solid #90528f;
 
}
 
}
  
 
.highlight.decoration_light_top {
 
.highlight.decoration_light_top {
 
     border-top: 4px solid #b48cb7;
 
     border-top: 4px solid #b48cb7;
 +
}
 +
 +
.highlight.decoration_red_top {
 +
    border-top: 4px solid #c30000;
 
}
 
}
  
Line 687: Line 716:
 
.highlight.decoration_dark_full {
 
.highlight.decoration_dark_full {
 
     border: 4px solid #542160;
 
     border: 4px solid #542160;
 +
}
 +
 +
.highlight.decoration_medium_full {
 +
    border: 4px solid #90528f;
 
}
 
}
  
 
.highlight.decoration_light_full {
 
.highlight.decoration_light_full {
 
     border: 4px solid #b48cb7;
 
     border: 4px solid #b48cb7;
 +
}
 +
 +
.highlight.decoration_red_full {
 +
    border: 4px solid #c30000;
 
}
 
}
  
Line 700: Line 737:
  
 
/*special image that takes up the entire page*/
 
/*special image that takes up the entire page*/
−
.full_size_image {  width:100%; }  
+
.full_size_image {  width:100%; margin-top: -59px;}  
  
  
Line 779: Line 816:
 
/*used to hide content when it is added to a class */
 
/*used to hide content when it is added to a class */
 
.hide_content,  
 
.hide_content,  
−
.calendar_month_content.hide_content {
+
.collapsible_accordion_content.hide_content {
 
display:none;
 
display:none;
 
}
 
}
Line 793: Line 830:
  
 
.news_date {
 
.news_date {
−
font-style: italic;
+
font-style: italic;
 
     display: inline-block;
 
     display: inline-block;
 
     color: #333333;
 
     color: #333333;
Line 800: Line 837:
 
     padding-right: 15px;
 
     padding-right: 15px;
 
}
 
}
 +
 +
/* icon decorations for the news class*/
 +
 +
.news_item_icon.igemlogo:after {
 +
    background-image: url('https://static.igem.org/mediawiki/igem.org/e/e4/Main_igem_logo.svg');
 +
    background-size: 25px 25px;
 +
    display: inline-block;
 +
    width: 25px;
 +
    height: 25px;
 +
    content:"";
 +
 +
}
 +
 +
.news_item_icon.pinned:after {
 +
    background-image: url('https://static.igem.org/mediawiki/2018/2/25/Icon_news_pinned.svg');
 +
    background-size: 25px 25px;
 +
    display: inline-block;
 +
    width: 25px;
 +
    height: 25px;
 +
    content:"";
 +
 +
}
 +
 +
 +
.news_item_icon.reminder:after {
 +
    background-image: url('https://static.igem.org/mediawiki/2018/a/a2/Icon_news_reminder.svg');
 +
    background-size: 25px 25px;
 +
    display: inline-block;
 +
    width: 25px;
 +
    height: 25px;
 +
    content:"";
 +
}
 +
 +
 +
 +
.news_item_icon.info:after {
 +
    background-image: url('https://static.igem.org/mediawiki/2018/b/b7/Icon_news_info.svg');
 +
    background-size: 25px 25px;
 +
    display: inline-block;
 +
    width: 25px;
 +
    height: 25px;
 +
    content:"";
 +
}
 +
 +
 +
.news_item_icon.announcement:after {
 +
    background-image: url('https://static.igem.org/mediawiki/2018/a/a7/Icon_news_announcement.svg');
 +
    background-size: 25px 25px;
 +
    display: inline-block;
 +
    width: 25px;
 +
    height: 25px;
 +
    content:"";
 +
}
 +
 +
 +
 +
 +
 +
/* center content */
 +
.center_content p,
 +
.center_content h1,
 +
.center_content h2,
 +
.center_content h3,
 +
.center_content h4,
 +
.center_content h5,
 +
.center_content h6 {
 +
text-align:center;
 +
}
 +
 +
 +
  
 
/*Multiple links in a ul */
 
/*Multiple links in a ul */
Line 825: Line 933:
 
     list-style: none;
 
     list-style: none;
 
     margin: 0px;
 
     margin: 0px;
−
     padding: 0px;
+
     padding: 0px 0px 15px 0px;
 
}
 
}
  
Line 842: Line 950:
 
     list-style: none;
 
     list-style: none;
 
margin: auto;
 
margin: auto;
−
     padding: 0;
+
     padding: 0px;
 
    text-align: center;
 
    text-align: center;
 
}
 
}
Line 990: Line 1,098:
  
  
−
/*calendar */
+
/*accordion */
 
/************************************************/
 
/************************************************/
  
 
/*wrapper for each month*/
 
/*wrapper for each month*/
−
.calendar_month {  
+
.collapsible_accordion {  
 
border-bottom: 1px solid #ddd;  
 
border-bottom: 1px solid #ddd;  
 
float: left;  
 
float: left;  
Line 1,001: Line 1,109:
 
}
 
}
  
−
/*contains all the deadlines for the month*/
+
/*content to show/hide*/
−
.calendar_month_content {
+
.collapsible_accordion_content {
 
display:block;
 
display:block;
 
margin-top:30px;
 
margin-top:30px;
 
}
 
}
 +
 +
 +
/* button controling the show/hide of the month's events*/
 +
.collapsible_accordion_access{
 +
background-color: #90528f;
 +
border: 2px solid #90528f;
 +
border-radius: 14%;
 +
color: #fff !important;
 +
float: right;
 +
margin-top: -5px;
 +
text-align: center;
 +
padding: 6px 5px;
 +
width: 25px;
 +
}
 +
 +
/*when hovering on the show/hide month content button*/
 +
.collapsible_accordion_access:hover {
 +
background-color:#542160;
 +
border: 2px solid #542160;
 +
cursor:pointer;
 +
}
 +
 +
 +
/*calendar*/
 +
/************************************************/
  
 
/*deadline's date*/
 
/*deadline's date*/
Line 1,011: Line 1,144:
 
     border: 2px solid #ddd;
 
     border: 2px solid #ddd;
 
border-radius: 5%;
 
border-radius: 5%;
−
color: #989898;
+
color: #000;
 
float: left;
 
float: left;
 
    font-size: 155%;
 
    font-size: 155%;
Line 1,028: Line 1,161:
 
}
 
}
  
−
/* button controling the show/hide of the month's events*/
+
/*controlled image size*/
−
.calendar_month_access{
+
−
background-color: #90528f;
+
−
border: 2px solid #90528f;
+
−
border-radius: 14%;
+
−
color: #fff !important;
+
−
float: right;
+
−
margin-top: -5px;
+
−
text-align: center;
+
−
padding: 6px 5px;
+
−
width: 25px;
+
−
}
+
−
 
+
−
/*when hovering on the show/hide month content button*/
+
−
.calendar_month_access:hover {
+
−
background-color:#542160;
+
−
border: 2px solid #542160;
+
−
cursor:pointer;
+
−
}
+
  
 +
.controlled_size_image{
 +
max-width: 300px;
 +
}
  
 
/*mobile*/
 
/*mobile*/
Line 1,053: Line 1,171:
  
  
−
/* 2000px  */
+
/* 1784px */
−
/************************************************/
+
−
@media only screen and (max-width: 2000px) {
+
−
.igem_content_wrapper { width: 86.6%;}
+
−
}
+
−
 
+
−
/* 1800px  */
+
−
/************************************************/
+
−
@media only screen and (max-width: 1800px) {
+
−
.igem_content_wrapper { width: 85.4%;}
+
−
}
+
−
 
+
−
/* 1700px */
+
 
/************************************************/
 
/************************************************/
−
@media only screen and (max-width: 1700px) {
+
@media only screen and (max-width: 1784px) {
−
.igem_content_wrapper { width: 85%;}
+
.igem_content_wrapper { width:85%;}
−
.hub_title{ font-size: 115%;}
+
 
}
 
}
  
−
/* 1550px */
+
/* 1602px */
 
/************************************************/
 
/************************************************/
−
@media only screen and (max-width: 1550px) {
+
@media only screen and (max-width: 1602px) {
 
.hub_title{ font-size: 105%;}
 
.hub_title{ font-size: 105%;}
 
}
 
}
Line 1,113: Line 1,218:
 
@media only screen and (max-width: 885px) {
 
@media only screen and (max-width: 885px) {
 
.igem_content_wrapper {width:100%; margin-left:0px;}
 
.igem_content_wrapper {width:100%; margin-left:0px;}
−
.half_size, .two_thirds_size, .third_size, .three_quarters_size, .quarter_size {width:100%; }
+
.half_size, .two_thirds_size, .third_size, .three_quarter_size, .quarter_size {width:100%; }
 
.column img { width: 96%; padding: 2% 0px;}
 
.column img { width: 96%; padding: 2% 0px;}
 
.highlight {padding:15px 5px;}
 
.highlight {padding:15px 5px;}
Line 1,188: Line 1,293:
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
−
 
−
</html>
 

Latest revision as of 18:23, 20 July 2018

Loading...