Difference between revisions of "Template:Main2017"

 
(9 intermediate revisions by the same user not shown)
Line 195: Line 195:
 
/* Wrapper for the menu */
 
/* Wrapper for the menu */
 
.igem_menu_wrapper {  
 
.igem_menu_wrapper {  
−
width: 15%;
 
−
height:100vh;
 
−
position:fixed;
 
−
padding:0px;
 
−
float:right;
 
 
background-color:#dddddd;  
 
background-color:#dddddd;  
−
text-align:left;
+
float:right;  
−
right:0%;
+
height:100vh;
 +
max-width: 270px;
 
overflow-y: auto;
 
overflow-y: auto;
 
overflow-x: hidden;
 
overflow-x: hidden;
 +
padding:0px;
 +
position:fixed;
 +
right:0%;
 +
text-align:left;
 +
width: 15%;
 
}
 
}
  
Line 368: Line 369:
 
/* Wrapper for the content */
 
/* Wrapper for the content */
 
.igem_content_wrapper {
 
.igem_content_wrapper {
−
width: 81%;
+
/*width: 88.9%;*/
−
float:left;  
+
width: -webkit-calc(100% -270px);
 +
width:    -moz-calc(100% - 270px);
 +
width:  calc(100% - 270px);
 +
display:block;
 
background-color:white;  
 
background-color:white;  
−
margin: 2%;
 
−
display:block;
 
 
}
 
}
 +
 +
 +
 +
/* subwrapper to center content */
 +
.igem_column_wrapper {
 +
margin:auto;
 +
max-width: 1400px;
 +
width:90%;
 +
}
 +
 +
  
 
/* class for when the menu is not shown and the content occupies the whole screen */
 
/* class for when the menu is not shown and the content occupies the whole screen */
Line 388: Line 401:
  
  
−
 
+
/*main layout class */
−
.full_size {
+
.column  {  
−
width:100%;  
+
float:left;
 +
margin: 1% 2%;
 +
padding: 0px;
 
}
 
}
  
−
.full_size img {  
+
/* 100% */
−
padding: 10px 15px;
+
.full_size { width:96%; }
−
width:97.5%;  
+
/* 66% */
−
}
+
.two_thirds_size { width: 62.6%; }
 +
/* 33% */
 +
.third_size { width: 29.3%; }
 +
/* 75% */
 +
.three_quarter_size {  width: 71%; }
 +
/* 50% */
 +
.half_size {  width: 46%; }
 +
/* 25% */
 +
.fourth_size { width: 21%; }
  
−
.half_size {
+
/*styling for all images*/
−
width: 50%;
+
.full_size img,
−
}
+
.half_size img,
−
 
+
.two_thirds_size img,
−
.half_size img {
+
.third_size img, 
−
padding: 10px 15px;
+
.three_quarters_size img,
−
width: 93%;
+
−
}
+
−
 
+
−
 
+
−
.third_size {
+
−
width: 33.3%;
+
−
}
+
−
.third_size img {
+
−
padding: 10px 15px;
+
−
width: 92%;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
.fourth_size {
+
−
width: 25%;
+
−
}
+
 
.fourth_size img {  
 
.fourth_size img {  
−
padding: 10px 15px;
+
margin-bottom: 15px;
−
width: 92%;  
+
width: 100%;  
 
}
 
}
−
 
−
 
  
  
Line 844: Line 848:
  
  
−
.full_size_image { margin-top:-55px; width:85%; }  
+
.full_size_image { margin-top:-55px; width: calc(100% - 270px); }  
  
  
Line 851: Line 855:
  
 
/********************************* RESPONSIVE STYLING ********************************/
 
/********************************* RESPONSIVE STYLING ********************************/
 +
 +
 +
/* 1784px  */
 +
/************************************************/
 +
@media only screen and (max-width: 1784px) {
 +
.igem_content_wrapper { width:85%;}
 +
.full_size_image {  width:85%;}
 +
 +
 +
}
 +
 +
 +
  
 
/* IF THE SCREEN IS LESS THAN 1400PX */
 
/* IF THE SCREEN IS LESS THAN 1400PX */
Line 856: Line 873:
 
.long_menu_name { font-size: 10px;}
 
.long_menu_name { font-size: 10px;}
 
}
 
}
 +
 +
 +
 +
 +
 +
  
  
Line 876: Line 899:
  
  
−
/* IF THE SCREEN IS LESS THAN 800PX */
+
/* IF THE SCREEN IS LESS THAN 885PX */
  
−
@media only screen and (max-width: 800px) {
+
@media only screen and (max-width: 885px) {
  
 
.collapsable_menu_control, .menu_icon, .submenu_access { display:block;}
 
.collapsable_menu_control, .menu_icon, .submenu_access { display:block;}
Line 953: Line 976:
 
<div class="igem_content_wrapper">
 
<div class="igem_content_wrapper">
  
 +
<div class=" igem_column_wrapper">
  
 
</html>
 
</html>

Latest revision as of 19:03, 5 September 2018

MENU
Loading...