Difference between revisions of "Template:Main2018"

Line 10: Line 10:
  
  
 +
 +
 +
 
var page_url="https://2018.igem.org/";
 
var page_url="https://2018.igem.org/";
 
$( "#load_menu_here" ).load( "https://2018.igem.org/HQ:Menu #load_menu_content" , function() {
 
$( "#load_menu_here" ).load( "https://2018.igem.org/HQ:Menu #load_menu_content" , function() {
Line 86: Line 89:
 
$(this).next().fadeToggle(400);
 
$(this).next().fadeToggle(400);
 
});
 
});
 +
 +
 
});
 
});
 +
 +
 +
  
 
});
 
});
Line 629: Line 637:
 
display: none;
 
display: none;
 
float:left;  
 
float:left;  
 +
}
 +
 +
 +
/*hiding and showing content */
 +
/************************************************/
 +
 +
/*content for buttons showing/hiding content */
 +
.content_control::before { content: "+"; }
 +
.content_control.displaying_content::before { content: "-"; }
 +
 +
/*used to hide content when it is added to a class */
 +
.hide_content,
 +
.calendar_month_content.hide_content {
 +
display:none;
 
}
 
}
  
Line 648: Line 670:
 
     padding-right: 15px;
 
     padding-right: 15px;
 
}
 
}
−
 
  
 
/*Multiple links in a ul */
 
/*Multiple links in a ul */
Line 660: Line 681:
 
}
 
}
  
−
 
+
/*Make text red and bold*/
 +
/************************************************/
 +
.red_text {
 +
color: red;
 +
font-weight:bold;
 +
}
  
 
/*Image slider/
 
/*Image slider/
Line 767: Line 793:
 
/*calendar */
 
/*calendar */
 
/************************************************/
 
/************************************************/
−
.vertical_line {
+
 
−
  position: absolute;
+
/*wrapper for each month*/
−
  width: 5px;
+
.calendar_month_test {  
−
  background-color: #ccc;
+
border-bottom: 1px solid #ddd;  
−
  left: 20px;
+
float: left;  
−
  height: 100%;
+
padding: 30px 0px 20px 0px;
−
  z-index: -1;
+
width:100%;  
 
}
 
}
  
−
.left_column {
+
/*contains all the deadlines for the month*/
−
width: 12%;
+
.calendar_month_content {
−
    border: 4px solid #d3d3d3;
+
display:block;
−
    text-align: center;
+
margin-top:30px;
−
    font-size: 25px;
+
−
    float: left;
+
−
    border-radius: 10px;
+
−
    color: #666666;
+
−
    padding: 4% 0;
+
−
font-weight: bold;
+
 
}
 
}
  
 +
/*deadline's date*/
 +
.deadline_date {
 +
    border: 2px solid #ddd;
 +
border-radius: 5%;
 +
color: #989898;
 +
float: left;
 +
    font-size: 155%;
 +
font-weight:bold;
 +
margin-right: 5%;
 +
max-width: 100px;
 +
    padding: 30px 0px;
 +
    text-align: center;
 +
width: 15%;
 +
}
  
−
.left_column.month_access{
+
/* description of the deadline*/
−
  border: 4px solid #00bdcd;
+
.deadline_content {
−
    color: #10996a
+
float: left;  
−
    font-size: 40px;
+
width:75%;
−
    font-weight: bold;
+
−
    cursor: pointer;
+
 
}
 
}
  
−
.left_column.month_access::before {
+
/* button controling the show/hide of the month's events*/
−
content: "-";  
+
.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;
 
}
 
}
  
−
.left_column.month_access.plus::before {
+
/*when hovering on the show/hide month content button*/
−
content: "+";  
+
.calendar_month_access:hover {
−
}
+
background-color:#542160;
 +
border: 2px solid #542160;
 +
cursor:pointer;  
 +
}
  
  
−
.left_column.month_access:hover {
+
</style>
−
background-color: #10996a;
+
−
color: white;
+
−
-webkit-transition: all 0.4s ease;
+
−
-moz-transition: all 0.4s ease;
+
−
-ms-transition: all 0.4s ease;
+
−
-o-transition: all 0.4s ease;
+
−
transition: all 0.4s ease;
+
−
}
+
  
  
−
.right_column  h1{
 
−
font-size: 40px;
 
−
padding: 15px 10px;
 
−
}
 
  
−
.right_column {
 
−
    padding: 10px 0px 15px 0px;
 
−
    float: left;
 
−
width: 80%;
 
−
}
 
  
−
.right_column.event_content {
 
−
border-top:  1px solid #d3d3d3;
 
−
}
 
  
  

Revision as of 19:34, 23 January 2018

/*support classes*/ /**************************************************************************************************************************************************************************************************/ /* 2000px */ /************************************************/ @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) { .igem_content_wrapper { width: 85%;} .hub_title{ font-size: 115%;} } /* 1550px */ /************************************************/ @media only screen and (max-width: 1550px) { .hub_title{ font-size: 105%;} } /* 1450px */ /************************************************/ @media only screen and (max-width: 1450px) { .hub_title{ font-size: 90%;} .submenu_item {font-size:85%;} .subsubmenu_item {font-size:80%;} } /* 1200px */ /************************************************/ @media only screen and (max-width: 1200px) { #content {width:100%; } .igem_menu_wrapper {width:15%; right:0%;} .load_menu_here, .menu_icon {display:none;} ul.image_slider { padding:0px; width: 100%; margin: auto;} .hub_icon{ display:none;} .hub_title{ width: 77%; padding-left: 7%; padding-right:0; font-size:80%;} .submenu_item{ padding-left: 16%; padding-right:0; font-size:75% } .submenu_item.with_subsub_menu{ width:68%;} .subsubmenu_item {font-size:70%;} } /* 1100px */ /************************************************/ @media only screen and (max-width: 1100px) { .hub_title{ font-size: 80%;} } /* 885px */ /************************************************/ @media only screen and (max-width: 885px) { .igem_content_wrapper {width:100%; margin-left:0px;} .half_size, .two_thirds_size, .third_size, .three_quarters_size, .quarter_size {width:100%; } .column img { width: 96%; padding: 2% 0px;} .highlight {padding:15px 5px;} .igem_menu { width: 100%; float: left; position: relative; max-width: 100%;} .igem_mobile_menu_bar {display:block;} .hub_icon{ display:block;} .hub_title{ width: 68%; padding-left:0%} .igem_menu, .igem_menu_logo {display:none;} }

Loading...