Difference between revisions of "Dev/Judging"

 
(69 intermediate revisions by 2 users not shown)
Line 4: Line 4:
  
 
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head>
 
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head>
 +
  
  
Line 16: Line 17:
 
.logo_2016 {display:none;}
 
.logo_2016 {display:none;}
  
−
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
+
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; background-color: white;}
 
body {background-color:#ffffff; }
 
body {background-color:#ffffff; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
Line 26: Line 27:
 
/* Wrapper for the menu */
 
/* Wrapper for the menu */
 
.menu_wrapper {  
 
.menu_wrapper {  
−
width:20%;
+
width: 220px;
−
height:100vh;
+
−
padding:0px;
+
−
float:right;  
+
 
position: fixed;
 
position: fixed;
−
overflow-y: scroll;
+
top: 20px;
−
left: 80%;
+
left: 1020px;
−
background-color:#f2f2f2;  
+
z-index: 10;
−
text-align:left;
+
background-color: #f2f2f2;
−
top: 0px;
+
text-align: left;
 
}
 
}
  
 
.menu_wrapper ol {
 
.menu_wrapper ol {
−
margin-left: 25px;  
+
margin-left: 35px;  
 
}
 
}
  
Line 74: Line 72:
 
color:#333333;
 
color:#333333;
 
}
 
}
 +
 +
 +
a.menu_controller {   
 +
background-color: #9b004e;
 +
color: white;
 +
height: 19px;
 +
display: block;
 +
text-align: center;
 +
float: left;
 +
padding: 10px 0px;
 +
}
 +
 +
a.menu_controller:hover {
 +
text-decoration: none;
 +
background-color: #f2f2f2;
 +
}
 +
 +
.current_menu { width: 160px;}
 +
 +
.menu_navigation { width:30px;}
  
 
/********************************* CONTENT OF THE PAGE ********************************/
 
/********************************* CONTENT OF THE PAGE ********************************/
Line 96: Line 114:
 
/* Wrapper for the content */
 
/* Wrapper for the content */
 
.content_wrapper {
 
.content_wrapper {
−
width: 80%;
+
width: 980px;
 
padding: 0px;  
 
padding: 0px;  
 
float:left;
 
float:left;
 +
margin-left: 20px;
 
margin-top: -35px;
 
margin-top: -35px;
 
background-color:white;  
 
background-color:white;  
Line 314: Line 333:
  
  
−
a.hub_root  {
 
−
background-color: #f2f2f2;
 
−
padding: 10px;
 
−
margin-top: 20px;
 
−
display: block;
 
−
text-align: center;
 
−
}
 
  
  
−
a.hub_root:hover {
 
−
text-decoration: none;
 
−
background-color: #9b004e;
 
−
color: white;
 
−
}
 
  
 +
/*  MEDIA */
  
  
−
/* MEDIA */
+
 
 +
 
 +
 
 +
.mobile_menu_control {
 +
display:none;
 +
    background-color: #9b004e;
 +
    color: white;
 +
    cursor: pointer;
 +
    font-weight: bold;
 +
    text-align: center;
 +
-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;
 +
}
 +
 
 +
 
 +
.mobile_menu_control:hover {
 +
background-color: #f2f2f2;
 +
color:black;
 +
 
 +
}
 +
 
 +
 
 +
.mobile_menu_control::before { content: "MENU ▤ "; }
 +
 
 +
 
 +
 
 +
 
 +
 
 +
.page_top img { float: left;}
 +
 
 +
.page_top h1 { margin-top: 32px;}
 +
 
  
  
 
@media only screen and (max-width: 680px) {
 
@media only screen and (max-width: 680px) {
−
#sideMenu { top:165px; left:25%; display:none;}
+
.mobile_menu_control {display:block;}
−
.logo_2016 { margin:auto; float: none; width:100px;}
+
.content_wrapper { width: 100%; margin-left: 0px;}  
−
#content p { padding:0px 10px; font-size:12px; text-overflow: ellipsis;}
+
.menu_wrapper {display:none; }
−
#content h1, #content h2,  #content h3, #content h4,  #content h5,  #content h6 { padding:5px 10px;}
+
.oneColumn, .twoColumns,  .threeColumns, #HQ_page .fourColumns {width:100%; padding: 10px 0px; }
−
#firstHeading  { text-align: center;}
+
.pop_up_box { top: 25%; transform: inherit; margin-top: auto; margin-left: auto; left: auto; }
−
#content {width:100%; margin-left:0px;text-overflow: ellipsis; }
+
−
#HQ_page .oneColumn, #HQ_page .twoColumns, #HQ_page .threeColumns, #HQ_page .fourColumns {width:100%; padding: 10px 0px; }
+
  
 
}
 
}
  
  
 +
 +
 +
ul.main_menu_list {
 +
    list-style: none;
 +
    margin-left: 0px;
 +
}
 +
 +
 +
a.main_menu_item { 
 +
 +
    display: block;
 +
    background-color: #f2f2f2;
 +
    padding: 10px 15px;
 +
    border-bottom: 2px solid #d3d3d3;
 +
    color: #333333;
 +
    float: left;
 +
}
 +
 +
 +
a.main_menu_item:hover  { 
 +
text-decoration: none;
 +
color: white;
 +
background-color: #9b004e;
 +
}
 +
 +
a.main_menu_item.title {
 +
    width: 65%;
 +
 +
}
 +
 +
 +
a.main_menu_item.title.full {
 +
width: 86%;
 +
}
 +
 +
a.main_menu_item.collapse_control {
 +
width:6.8%;
 +
    border-left: 2px solid #d3d3d3;
 +
}
 +
 +
 +
 +
a.main_menu_item.collapse_control::before {  content: "▼"; }
 +
 +
 +
ul.submenu {
 +
    display: none;
 +
    list-style: none;
 +
    margin-left: 0px;
 +
clear:both;
 +
}
 +
 +
ul.submenu li {
 +
margin-bottom: 0px;
 +
}
 +
 +
ul.submenu li a{
 +
    display: block;
 +
    border-bottom: 1px solid #d3d3d3;
 +
    padding: 5px 0px 5px 15px;
 +
}
 +
 +
ul.submenu li a:hover {
 +
background-color: #9b004e;
 +
text-decoration: none;
 +
color:white;
 +
}
 +
 +
 +
ol.hubmenu_list {
 +
padding-bottom: 15px;
 +
}
  
 
</style>
 
</style>
  
 +
 +
 +
 +
 +
<div class="menu_wrapper">
 +
 +
 +
<a class="menu_controller menu_navigation  hubmenus" id="switch_between_menus"> ◀ </a>
 +
 +
<a  id="current_hub_menu" class="menu_controller current_menu" href="">  </a>
 +
 +
<a class="menu_controller menu_navigation"> ▶ </a>
 +
 +
<div class="clear"></div>
 +
 +
<ol id="hubmenu_list" class="hubmenu_list"> </ol>
 +
<ul id="main_menu_list" class="main_menu_list"> </ul>
 +
</div>
  
  
Line 364: Line 494:
  
 
<div class="page_top">  
 
<div class="page_top">  
−
 
+
<img src="https://static.igem.org/mediawiki/2016/8/8b/HQ_page_logo.jpg" width="100px">
 
<h1 id="page_name" > </h1>
 
<h1 id="page_name" > </h1>
  
 
</div>
 
</div>
 +
 +
 +
 +
<div class="oneColumn mobile_menu_control">  </div>
  
  
Line 374: Line 508:
  
 
<div class="oneColumn">
 
<div class="oneColumn">
 +
 +
<img src="https://static.igem.org/mediawiki/2016/1/1a/Registry_icons_sharp_plasmids_Plasmids.svg">
 +
 
<h3> Example</h3>
 
<h3> Example</h3>
 
<p>Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus. Vero aperiri sea eu, duo an putent fierent explicari, minimum principes constituam vel ad. Porro persius philosophia duo ea, luptatum insolens vim cu. Id nec falli theophrastus.</p>
 
<p>Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus. Vero aperiri sea eu, duo an putent fierent explicari, minimum principes constituam vel ad. Porro persius philosophia duo ea, luptatum insolens vim cu. Id nec falli theophrastus.</p>
Line 404: Line 541:
 
<a href=""> Default link color </a>
 
<a href=""> Default link color </a>
  
 +
 +
<script>(function(e,t,o,n){var s,c,i;e.SMCX=e.SMCX||[],t.getElementById(n)||(s=t.getElementsByTagName(o),c=s[s.length-1],i=t.createElement(o),i.type="text/javascript",i.async=!0,i.id=n,i.src=["https:"===location.protocol?"https://":"http://","widget.surveymonkey.com/collect/website/js/Y1ojI96L2Yiy6omJUQl1VezvJOLGmzhKEBqV3Q235djLaTyLbBNzl9zuNLeHKlnx.js"].join(""),c.parentNode.insertBefore(i,c))})(window,document,"script","smcx-sdk");</script><a style="font: 12px Helvetica, sans-serif; color: #999; text-decoration: none;" href=https://www.surveymonkey.com/mp/customer-satisfaction-surveys/> Create your own user feedback survey </a>
  
 
</div>
 
</div>
Line 580: Line 719:
  
  
−
<div class="menu_wrapper">
 
−
<div class="collapsable_menu_control"> MENU ▤ </div>
 
−
 
−
<div id="hubmenu_placer">
 
−
<h3> LOADING </h3>
 
−
        </div>
 
−
</div>
 
  
  

Latest revision as of 19:17, 28 July 2016


◀ ▶

loading...

Example

Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus. Vero aperiri sea eu, duo an putent fierent explicari, minimum principes constituam vel ad. Porro persius philosophia duo ea, luptatum insolens vim cu. Id nec falli theophrastus.

Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus.Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus. Vero aperiri sea eu, duo an putent fierent explicari, minimum principes constituam vel ad. Porro persius philosophia duo ea, luptatum insolens vim cu. Id nec falli theophrastus.

text

Links

Default link color Create your own user feedback survey

Buttons

There are three colors available and the size of the button adjusts to the text.



BUTTON


MEDIUM BUTTON


THIS BUTTON IS LARGER

Highlight and border decoration

Example List

Example List

Example text

Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus.

Example text

Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus.

Example text

Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus.

Example text

Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus.

Example text

Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus.

Example text

Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus.

Alert message

Example text

Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus.

News items

Date Month / Day

Title of the item

Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus. Vero aperiri sea eu, duo an putent fierent explicari, minimum principes constituam vel ad. Porro persius philosophia duo ea, luptatum insolens vim cu. Id nec falli theophrastus.

Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus. Vero aperiri sea eu, duo an putent fierent explicari, minimum principes constituam vel ad. Porro persius philosophia duo ea, luptatum insolens vim cu. Id nec falli theophrastus. Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus. Vero aperiri sea eu, duo an putent fierent explicari, minimum principes constituam vel ad. Porro persius philosophia duo ea, luptatum insolens vim cu. Id nec falli theophrastus.

Date Month / Day

Title of the item

Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus. Vero aperiri sea eu, duo an putent fierent explicari, minimum principes constituam vel ad. Porro persius philosophia duo ea, luptatum insolens vim cu. Id nec falli theophrastus.