Difference between revisions of "Template:Main2019"

Line 6: Line 6:
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
−
 
+
#home_logo, #sideMenu, #sideMenu, #top_title, .patrollink {display:none;}
−
#home_logo, #sideMenu { display:none; }
+
#content {margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
−
#sideMenu, #top_title, .patrollink {display:none;}
+
body {background-color:white;}
−
#content {   margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {margin-bottom: 0px;}
−
body {background-color:white; }
+
#bodyContent a[href ^="https://"], .link-https {padding-right:0px;}
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
−
 
+
−
/*#top_menu_under, #top_menu_14 { display:none;}*/
+
−
 
+
−
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
+
  
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
Line 58: Line 53:
  
 
#all_menu_items{ display:block;}
 
#all_menu_items{ display:block;}
 +
 +
  
 
/*menu item styling // layer one*/
 
/*menu item styling // layer one*/
Line 140: Line 137:
 
}
 
}
  
 +
 +
 +
 
/*submenu item styling // layer two*/
 
/*submenu item styling // layer two*/
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
Line 172: Line 172:
 
/* submenu access styling if its inside a submenu */
 
/* submenu access styling if its inside a submenu */
 
.igem_submenu > .submenu_access {
 
.igem_submenu > .submenu_access {
−
    background-color: #e8e8e8;
+
background-color: #e8e8e8;
−
    border-bottom: 1px solid #dcdcdc;
+
    border-bottom: 1px solid #dcdcdc;
−
    padding: 8.5px 3% 11.5px 3%;
+
    padding: 8.5px 3% 11.5px 3%;
−
 
+
 
}
 
}
  
Line 202: Line 201:
 
}
 
}
  
 +
 
.submenu_item.subsection_title:hover{
 
.submenu_item.subsection_title:hover{
 
background-color:#e8e8e8;
 
background-color:#e8e8e8;
Line 216: Line 216:
 
display:none;
 
display:none;
 
}
 
}
−
 
  
 
.subsubmenu_item {
 
.subsubmenu_item {
Line 233: Line 232:
 
}
 
}
  
 +
 +
 
/*mobile menu bar styling*/
 
/*mobile menu bar styling*/
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
Line 245: Line 246:
 
margin-top: 0;
 
margin-top: 0;
 
padding: 5px 0;
 
padding: 5px 0;
−
width:100%;
 
 
position:fixed;
 
position:fixed;
 +
width:100%;
 
}
 
}
  
Line 271: Line 272:
 
}
 
}
  
 +
  
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
Line 276: Line 278:
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
 +
 +
 
/* general wrapper for the content */
 
/* general wrapper for the content */
 
.igem_content_wrapper {
 
.igem_content_wrapper {
−
/*width: 88.9%;*/
 
−
width: -webkit-calc(100% -270px);
 
−
width:    -moz-calc(100% - 270px);
 
−
width:  calc(100% - 270px);
 
−
display:block;
 
 
background-color:white;  
 
background-color:white;  
 +
display:block;
 +
width:-webkit-calc(100% -270px);
 +
width:-moz-calc(100% - 270px);
 +
width:calc(100% - 270px);
 +
 
}
 
}
  
Line 297: Line 301:
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
−
 
−
/*STYLING */
 
  
 
/*font sizes for all the h titles*/
 
/*font sizes for all the h titles*/
Line 325: Line 327:
 
color: #00a19c;
 
color: #00a19c;
 
font-family: Freeroad_Bold;
 
font-family: Freeroad_Bold;
−
padding: 5px 0px;
 
 
line-height: initial;
 
line-height: initial;
 +
padding: 5px 0px;
 
}
 
}
  
Line 334: Line 336:
 
color: #212223;   
 
color: #212223;   
 
font-family: Freeroad_Regular;
 
font-family: Freeroad_Regular;
−
padding: 5px 0px;
 
 
line-height: initial;
 
line-height: initial;
 +
padding: 5px 0px;
 
}
 
}
  
Line 369: Line 371:
 
font-family:Arial;  
 
font-family:Arial;  
 
font-size: 130%;
 
font-size: 130%;
 +
list-style: disc;
 
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 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  {  
 
.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: 75%;
 
font-size: 75%;
Line 383: Line 383:
 
/* numbered lists */
 
/* numbered lists */
 
.igem_content_wrapper ol {
 
.igem_content_wrapper ol {
−
padding:0px;
 
 
font-family:Arial;  
 
font-family:Arial;  
 
font-size: 130%;
 
font-size: 130%;
 +
padding:0px;
 
}
 
}
  
Line 414: Line 414:
 
vertical-align: text-top;  
 
vertical-align: text-top;  
 
}
 
}
−
 
−
/*hide patrollink */
 
−
.patrollink {display:none;}
 
−
 
  
  
Line 458: Line 454:
 
clear:both;
 
clear:both;
 
}
 
}
 +
 
/*add extra space to page break with clear class*/
 
/*add extra space to page break with clear class*/
 
.clear.extra_space {
 
.clear.extra_space {
Line 465: Line 462:
 
/* horizontal gray line to divide the page*/
 
/* horizontal gray line to divide the page*/
 
.line_divider {
 
.line_divider {
−
    border-top: 1px solid #848484;
+
    border-top: 1px solid #848484;
 
  margin: auto;
 
  margin: auto;
 
   width: 98%;
 
   width: 98%;
Line 477: Line 474:
 
/* softer horizontal gray line to divide the page*/
 
/* softer horizontal gray line to divide the page*/
 
.line_divider.soft {
 
.line_divider.soft {
−
      border-top: 1px solid #c1c1c1;
+
border-top: 1px solid #c1c1c1;
 
}
 
}
 
 
Line 492: Line 489:
 
background-color: #f2f2f2;  
 
background-color: #f2f2f2;  
 
}
 
}
−
 
  
 
.highlight.decoration_top {
 
.highlight.decoration_top {
Line 498: Line 494:
 
}
 
}
  
−
 
 
.highlight.decoration_red_top, .highlight.post_item.decoration_red_top {
 
.highlight.decoration_red_top, .highlight.post_item.decoration_red_top {
 
     border-top: 4px solid #F42534;
 
     border-top: 4px solid #F42534;
Line 519: Line 514:
  
 
/*special image that takes up the entire page*/
 
/*special image that takes up the entire page*/
−
.full_size_image {  width:100%; margin-top: -60px;}
+
.full_size_image {   
−
 
+
width:100%;  
 +
margin-top: -60px;
 +
}
  
  
Line 605: Line 602:
 
/************************************************/
 
/************************************************/
  
−
.igem_content_wrapper p.image_caption {
+
.igem_content_wrapper p.image_caption {
−
    margin-top: -10px;
+
font-size: 100%;
−
    padding-top: 0;
+
    margin-top: -10px;
−
    font-size: 100%;
+
    padding-top: 0;
−
}
+
}
 +
 +
 
/*Post items*/
 
/*Post items*/
 
/************************************************/
 
/************************************************/
−
 
 
.highlight.post_item {
 
.highlight.post_item {
 
border: 1px solid #6f7173;
 
border: 1px solid #6f7173;
Line 644: Line 642:
 
border-bottom: 0px;
 
border-bottom: 0px;
 
color: #212223;
 
color: #212223;
−
font-size: 150%;
 
−
font-family: Freeroad_Regular;
 
 
float:left;
 
float:left;
 +
font-family: Freeroad_Regular;
 +
font-size: 150%;
 
}
 
}
 
 
 
.highlight.post_item  > .details > .date {
 
.highlight.post_item  > .details > .date {
 +
color: #6f7173;
 +
float: right;
 
font-family: Freeroad_Regular;
 
font-family: Freeroad_Regular;
−
  font-style: italic;
 
−
  color: #6f7173;
 
 
font-size: 150%;
 
font-size: 150%;
−
    float: right;
+
    font-style: italic;
 
}
 
}
 
 
 
.highlight.post_item  > .details > .icon {
 
.highlight.post_item  > .details > .icon {
 
   float: left;
 
   float: left;
−
  width: 30px;
 
−
  margin-top: -7px;
 
 
   margin-left: -4px;
 
   margin-left: -4px;
 +
  margin-top: -7px;
 +
width: 30px;
 
}
 
}
  
Line 735: Line 733:
  
  
−
/*on this page */
+
/*on this page */
 
.on_page::after{
 
.on_page::after{
 
background-image:url('https://static.igem.org/mediawiki/2019/9/9b/Igem_page.svg');
 
background-image:url('https://static.igem.org/mediawiki/2019/9/9b/Igem_page.svg');
Line 745: Line 743:
 
}
 
}
  
−
/*REVIEW THIS ANA*/
+
 
 
/* center content */
 
/* center content */
 
.center_content p,
 
.center_content p,
Line 775: Line 773:
 
}
 
}
  
 +
 +
 
/*Image slider/
 
/*Image slider/
 
/************************************************/
 
/************************************************/
Line 856: Line 856:
  
  
−
/* REVIEW THIS ANA*/
+
 
 
/*Navigation support/
 
/*Navigation support/
 
/************************************************/
 
/************************************************/
  
  
−
.navigation_support_title {
+
.navigation_support_title {
 
     width: 200px;
 
     width: 200px;
 
     float: left;
 
     float: left;
Line 874: Line 874:
 
     font-weight: bold;
 
     font-weight: bold;
 
     font-size: 120%;
 
     font-size: 120%;
−
}
+
}
  
  
Line 925: Line 925:
  
 
 
−
.track_navigation{
 
−
width:8.33%;
 
−
float:left;
 
−
}
 
  
−
.track_navigation> img {
 
−
  opacity: 1.0;
 
−
}
 
−
 
−
 
−
.track_navigation> img:hover{
 
−
  opacity: 0.5;
 
−
}
 
  
 
/*REVIEW THIS ANA*/
 
/*REVIEW THIS ANA*/
Line 969: Line 957:
  
  
 +
/*track navigation */
 +
/************************************************/
 +
 +
.track_navigation{
 +
width:8.33%;
 +
float:left;
 +
}
 +
 +
.track_navigation> img {
 +
  opacity: 1.0;
 +
}
 +
 +
 +
.track_navigation> img:hover{
 +
  opacity: 0.5;
 +
}
 +
 +
 
/*accordion */
 
/*accordion */
 
/************************************************/
 
/************************************************/
Line 1,038: Line 1,044:
 
}
 
}
  
 +
 +
 
/*mobile*/
 
/*mobile*/
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
Line 1,058: Line 1,066:
 
/************************************************/
 
/************************************************/
 
@media only screen and (max-width: 1450px) {
 
@media only screen and (max-width: 1450px) {
 +
 
.hub_title{ font-size: 90%;}
 
.hub_title{ font-size: 90%;}
 
.submenu_item {font-size:85%;}
 
.submenu_item {font-size:85%;}
 
.subsubmenu_item {font-size:80%;}
 
.subsubmenu_item {font-size:80%;}
 +
 
}
 
}
  
 +
 
/* 1200px  */
 
/* 1200px  */
 
/************************************************/
 
/************************************************/
−
 
 
@media only screen and (max-width: 1200px) {
 
@media only screen and (max-width: 1200px) {
−
#content {width:100%; }
+
 +
#content {width:100%;}
 
.igem_menu_wrapper {width:15%; right:0%;}
 
.igem_menu_wrapper {width:15%; right:0%;}
−
.load_menu_here, .menu_icon {display:none;}
+
.load_menu_here, .menu_icon, .hub_icon {display:none;}
−
ul.image_slider { padding:0px; width: 100%; margin: auto;}
+
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%;}  
 
.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{ padding-left: 16%; padding-right:0; font-size:75% }
 
.submenu_item.with_subsub_menu{ width:68%;}   
 
.submenu_item.with_subsub_menu{ width:68%;}   
 
.subsubmenu_item {font-size:70%;}
 
.subsubmenu_item {font-size:70%;}
 +
 
}
 
}
  
 +
 
/* 1100px  */
 
/* 1100px  */
 
/************************************************/
 
/************************************************/
 
@media only screen and (max-width: 1100px) {
 
@media only screen and (max-width: 1100px) {
 +
 
.igem_content_wrapper {width:100%; margin-left:0px;}
 
.igem_content_wrapper {width:100%; margin-left:0px;}
−
.half_size, .two_thirds_size, .third_size, .three_quarter_size, .quarter_size {width:100%; }
+
−
.column.full_size > .highlight.news_item > .column.quarter_size, .column.full_size > .highlight.news_item > .column.three_quarter_size {width:100%;}
+
.half_size, .two_thirds_size, .third_size, .three_quarter_size, .quarter_size,
−
.column.full_size > .highlight.post_item > .column.quarter_size, .column.full_size > .highlight.post_item > .column.three_quarter_size {width:100%;}
+
.column.full_size > .highlight.news_item > .column.quarter_size,  
 +
.column.full_size > .highlight.news_item > .column.three_quarter_size,
 +
.column.full_size > .highlight.post_item > .column.quarter_size,  
 +
.column.full_size > .highlight.post_item > .column.three_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;}
 
.igem_menu { width: 100%; float: left; position: relative; max-width: 100%;}
 
.igem_menu { width: 100%; float: left; position: relative; max-width: 100%;}
−
.igem_mobile_menu_bar {display:block;}
+
.igem_mobile_menu_bar, .hub_icon {display:block;}
−
.hub_icon{ display:block;}
+
 
 
.hub_title{ width: 68%; padding-left:0%}  
 
.hub_title{ width: 68%; padding-left:0%}  
 
.igem_menu, .igem_menu_logo {display:none;}
 
.igem_menu, .igem_menu_logo {display:none;}
Line 1,095: Line 1,112:
 
.highlight.post_item {padding:0px;}
 
.highlight.post_item {padding:0px;}
 
.highlight.post_item > .details { clear: both; max-height: 80px; padding:15px; width: 89%;}
 
.highlight.post_item > .details { clear: both; max-height: 80px; padding:15px; width: 89%;}
−
.highlight.post_item > .details > .icon { clear: both; }
+
.highlight.post_item > .details > .icon, .highlight.post_item  > .details > .title {clear: both;}
−
.highlight.post_item  > .details > .title {clear: both; }
+
.highlight.post_item > .details > .date {clear: both; float:left;}
−
.highlight.post_item > .details > .date {clear: both; float:left;}
+
 
.highlight.post_item img { padding: 2%; margin: auto;}
 
.highlight.post_item img { padding: 2%; margin: auto;}
  
Line 1,104: Line 1,120:
  
 
}
 
}
−
 
+
 +
/* 800px  */
 +
/************************************************/
 
@media only screen and (max-width: 800px) {
 
@media only screen and (max-width: 800px) {
 
.igem_menu{  width: 50%;}
 
.igem_menu{  width: 50%;}
 
}
 
}
−
 
+
 +
/* 600px  */
 +
/************************************************/
 
@media only screen and (max-width: 600px) {
 
@media only screen and (max-width: 600px) {
 
.igem_menu{  width: 60%;}
 
.igem_menu{  width: 60%;}
 
}
 
}
  
 +
 +
 
</style>
 
</style>
 +
 +
 +
  
  

Revision as of 19:59, 1 March 2019

Loading...