(Prototype team template page) |
|||
Line 92: | Line 92: | ||
+ | /***************************************************** DEFAULT WIKI SETTINGS ****************************************************/ | ||
− | + | /* Clear the default wiki settings */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #home_logo, #sideMenu { | |
− | + | display: none; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #sideMenu, #top_title, .patrollink { | |
− | + | display: none; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | #content { | ||
+ | width: 100%; | ||
+ | padding: 0px; | ||
+ | margin-top: -7px; | ||
+ | margin-left: 0px; | ||
+ | } | ||
− | + | body { | |
− | + | background-color: white; | |
− | + | } | |
− | + | ||
− | + | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { | |
− | + | margin-bottom: 0px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | /**************************************************************** MENU ***************************************************************/ | ||
+ | /* Wrapper for the menu */ | ||
+ | .igem_2017_menu_wrapper { | ||
+ | width: 15%; | ||
+ | height: 100vh; | ||
+ | position: fixed; | ||
+ | right: 0%; | ||
+ | padding: 0px; | ||
+ | float: right; | ||
+ | border-left: 1px solid #d3d3d3; | ||
+ | background-color: #dddddd; | ||
+ | text-align: left; | ||
+ | font-family: Tahoma, Geneva, sans-serif; | ||
+ | overflow-y: auto; | ||
+ | overflow-x: hidden; | ||
+ | } | ||
− | + | /* this hides the scrollbar to keep view consistency */ | |
− | + | .igem_2017_menu_wrappe::-webkit-scrollbar { | |
− | + | display: none; | |
− | + | } | |
− | + | ||
− | + | /* styling for links in the menu, removes the line under text */ | |
− | + | .igem_2017_menu_wrapper a { | |
− | + | text-decoration: none; | |
+ | } | ||
+ | /* styling for the images in the menu */ | ||
+ | .igem_2017_menu_wrapper img { | ||
+ | width: 100%; | ||
+ | } | ||
− | + | /* styling for the menu buttons */ | |
− | + | .igem_2017_menu_wrapper .menu_button { | |
− | + | width: 100%; | |
− | + | padding: 10px 0px 10px 15px; | |
+ | float: left; | ||
+ | border-bottom: 1px solid #d3d3d3; | ||
+ | font-size: 12px; | ||
+ | font-weight: bold; | ||
+ | color: #5e5f5f; | ||
+ | cursor: pointer; | ||
+ | } | ||
− | + | .igem_2017_menu_wrapper .menu_bottom_padding { | |
− | + | width: 100%; | |
− | + | height: 30px; | |
− | + | float: left; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .menu_button.direct_to_page { | |
− | + | padding-left: 36px; | |
− | + | } | |
− | + | ||
− | + | ||
+ | .igem_2017_menu_wrapper .menu_button .expand_collapse_icon { | ||
+ | width: 10%; | ||
+ | float: left; | ||
+ | } | ||
− | + | .igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before { | |
− | + | content: "+"; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .igem_2017_menu_wrapper .open::before { | |
− | + | content: "-" !important; | |
− | + | } | |
− | + | ||
− | + | /* styling for the menu buttons on hover */ | |
− | + | .igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover, .submenu_button.current_page:hover { | |
− | + | background-color: var(--tint-color); | |
− | + | text-decoration: none; | |
− | + | color: #ffffff; | |
− | + | } | |
− | /* | + | /* styling for the menu button when it is the current page */ |
+ | .current_page { | ||
+ | background-color: #7fc1f7 !important; | ||
+ | color: #5e5f5f !important; | ||
+ | } | ||
− | + | /* styling for the submenu buttons */ | |
− | + | .igem_2017_menu_wrapper .submenu_button { | |
− | + | width: 100%; | |
− | + | padding: 10px 0px 10px 34px; | |
− | + | float: left; | |
− | + | background-color: #f2f2f2; | |
− | + | border-bottom: 1px solid #d3d3d3; | |
− | + | font-size: 12px; | |
− | + | color: #5e5f5f; | |
+ | cursor: pointer; | ||
+ | } | ||
+ | /* wrapper for the submenu items, they are hidden by default*/ | ||
+ | .igem_2017_menu_wrapper .submenu_wrapper { | ||
+ | display: none; | ||
+ | } | ||
− | /* | + | /* when the page size is bigger than 800px, this show/hide control is hidden by default */ |
+ | .igem_2017_menu_wrapper #display_menu_control { | ||
+ | display: none; | ||
+ | text-align: center; | ||
+ | } | ||
− | + | /***************************************************** CONTENT OF THE PAGE ****************************************************/ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | /* Wrapper for the content */ | ||
+ | .igem_2017_content_wrapper { | ||
+ | width: 81%; | ||
+ | margin: 2%; | ||
+ | display: block; | ||
+ | float: left; | ||
+ | background-color: white; | ||
+ | } | ||
− | + | /********************************* HTML STYLING *********************************/ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | /* styling for the titles h1 h2 */ | ||
+ | .igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 { | ||
+ | padding: 15px; | ||
+ | /*background-color: var(--tint-color); | ||
+ | color: white; | ||
+ | border-radius: 0 20px 20px 20px; | ||
+ | display: inline-block; */ | ||
+ | border-bottom: 0; | ||
+ | margin-bottom: 10px !important; | ||
+ | color: var(--tint-color); | ||
+ | font-weight: 100; !important; | ||
+ | font-size: 250%; | ||
+ | letter-spacing: 1.5px; | ||
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | /* styling for the titles h3 h4 h5 h6*/ | |
− | + | .igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 { | |
− | + | padding: 15px; | |
− | + | border-bottom: 0px; | |
− | + | color: var(--tint-color); | |
− | + | letter-spacing: 3px; | |
− | + | font-weight: 200 !important; | |
− | + | padding-bottom: 3%; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | /* font and text */ | |
− | + | .igem_2017_content_wrapper p { | |
− | + | padding: 0px 15px; | |
− | + | font-size: 13px; | |
− | + | } | |
− | + | ||
− | + | /* Links */ | |
− | + | .igem_2017_content_wrapper a { | |
− | + | text-decoration: underline; | |
− | + | text-decoration-color: var(--tint-color); | |
− | + | color: var(--tint-color); | |
− | + | -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; | ||
+ | } | ||
− | + | /* hover for the links */ | |
− | + | .igem_2017_content_wrapper a:hover { | |
− | + | text-decoration: none; | |
− | + | color: #000000; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | /* non numbered lists */ | |
− | + | .igem_2017_content_wrapper ul { | |
− | + | padding: 0px 20px; | |
− | + | font-size: 13px; | |
− | + | font-family: Tahoma, Geneva, sans-serif; | |
− | + | } | |
− | + | ||
− | + | /* numbered lists */ | |
− | + | .igem_2017_content_wrapper ol { | |
− | + | padding: 0px; | |
− | + | font-size: 13px; | |
− | + | font-family: Tahoma, Geneva, sans-serif; | |
− | + | } | |
− | + | ||
− | + | ||
+ | /* Table */ | ||
+ | .igem_2017_content_wrapper table { | ||
+ | width: 97%; | ||
+ | margin: 15px 10px; | ||
+ | border: 1px solid #d3d3d3; | ||
+ | border-collapse: collapse; | ||
+ | } | ||
− | /* | + | /* table cells */ |
+ | .igem_2017_content_wrapper td { | ||
+ | padding: 10px; | ||
+ | vertical-align: text-top; | ||
+ | border: 1px solid #d3d3d3; | ||
+ | border-collapse: collapse; | ||
+ | } | ||
− | + | /* table headers */ | |
− | + | .igem_2017_content_wrapper th { | |
− | + | padding: 10px; | |
− | + | vertical-align: text-top; | |
− | + | border: 1px solid #d3d3d3; | |
+ | border-collapse: collapse; | ||
+ | background-color: #f2f2f2; | ||
+ | } | ||
− | + | /**********************************LAYOUT CLASSES **********************************/ | |
− | + | ||
− | + | ||
− | + | ||
− | + | /* general class for column divs */ | |
− | + | .igem_2017_content_wrapper .column { | |
− | + | padding: 10px 0px; | |
− | + | float: left; | |
− | + | } | |
− | + | /* class for a full width column */ | |
− | + | .column .full_size { | |
− | + | width: 100%; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | /* styling for images in a full width column*/ | ||
+ | .column.full_size img { | ||
+ | width: 97%; | ||
+ | padding: 10px 15px; | ||
+ | } | ||
+ | /* class for a half width column */ | ||
+ | .column.half_size { | ||
+ | width: 50%; | ||
+ | } | ||
+ | /* styling for images in a half width column*/ | ||
+ | .column.half_size img { | ||
+ | width: 94.5%; | ||
+ | padding: 10px 15px; | ||
+ | } | ||
− | /********************************* SUPPORT CLASSES ********************************/ | + | /********************************* SUPPORT CLASSES ********************************/ |
− | + | /* class that clears content below*/ | |
− | + | .igem_2017_content_wrapper .clear { | |
− | + | clear: both; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | /* adds extra spacing when clearing content */ | ||
+ | .igem_2017_content_wrapper .clear.extra_space { | ||
+ | height: 30px; | ||
+ | } | ||
− | + | /* highlight class, makes content slightly smaller */ | |
− | + | .igem_2017_content_wrapper .highlight { | |
− | + | margin: 0px 15px; | |
− | + | padding: 15px 0px; | |
− | + | } | |
+ | /* highlight class, adds a gray background */ | ||
+ | .igem_2017_content_wrapper .highlight.gray { | ||
+ | background-color: #f2f2f2; | ||
+ | } | ||
− | + | /* highlight with decoration blue line on top */ | |
− | + | .igem_2017_content_wrapper .highlight.blue_top { | |
− | + | border-top: 4px solid var(--tint-color); | |
− | + | } | |
− | + | /* highlight with a full blue border decoration */ | |
− | + | .igem_2017_content_wrapper .highlight.blue_border { | |
− | + | border: 4px solid var(--tint-color); | |
− | + | } | |
− | + | /* button class */ | |
− | + | .igem_2017_content_wrapper .button { | |
− | + | max-width: 35%; | |
− | + | margin: 30px auto; | |
+ | padding: 12px 10px; | ||
+ | background-color: var(--tint-color); | ||
+ | text-align: center; | ||
+ | color: #ffffff; | ||
+ | -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; | ||
+ | } | ||
+ | /* styling for button on hover */ | ||
+ | .igem_2017_content_wrapper .button:hover { | ||
+ | background-color: var(--tint-color); | ||
+ | color: #000000; | ||
+ | } | ||
− | + | /***************************************************** RESPONSIVE STYLING ****************************************************/ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | /* IF THE SCREEN IS LESS THAN 1200PX */ | |
− | + | @media only screen and (max-width: 1200px) { | |
− | + | ||
− | + | ||
− | + | ||
+ | #content { | ||
+ | width: 100%; | ||
+ | } | ||
+ | .igem_2017_menu_wrapper { | ||
+ | width: 15%; | ||
+ | right: 0; | ||
+ | } | ||
+ | .highlight { | ||
+ | padding: 10px 0px; | ||
+ | } | ||
− | + | .igem_2017_menu_wrapper #display_menu_control { | |
+ | display: none; | ||
+ | } | ||
− | + | #menu_content { | |
− | + | display: block; | |
+ | } | ||
− | + | .menu_button.direct_to_page { | |
− | + | padding-left: 17px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | } | |
− | + | ||
− | + | /* IF THE SCREEN IS LESS THAN 800PX */ | |
− | + | @media only screen and (max-width: 800px) { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | .igem_2017_menu_wrapper { | ||
+ | width: 100%; | ||
+ | height: 15%; | ||
+ | position: relative; | ||
+ | left: 0%; | ||
+ | } | ||
− | + | .igem_2017_content_wrapper { | |
− | + | width: 100%; | |
− | + | margin-left: 0px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | .column.half_size { | ||
+ | width: 100%; | ||
+ | } | ||
− | + | .column.full_size img, .column.half_size img { | |
+ | width: 100%; | ||
+ | padding: 10px 0px; | ||
+ | } | ||
+ | .highlight { | ||
+ | padding: 15px 5px; | ||
+ | } | ||
+ | .igem_2017_menu_wrapper #display_menu_control { | ||
+ | display: block; | ||
+ | } | ||
− | + | #menu_content { | |
+ | display: none; | ||
+ | } | ||
− | + | .igem_2017_menu_wrapper .menu_button .expand_collapse_icon { | |
− | + | width: 5%; | |
+ | } | ||
− | + | .menu_bottom_padding { | |
+ | display: none; | ||
+ | } | ||
+ | .menu_button.direct_to_page { | ||
+ | padding-left: 36px; | ||
+ | } | ||
+ | } | ||
+ | /* special class that the system uses to make sure the team wants a page to be evaluated */ | ||
+ | .judges-will-not-evaluate { | ||
+ | width: 96.6%; | ||
+ | margin: 5px 15px; | ||
+ | display: block; | ||
+ | border: 4px solid var(--tint-color); | ||
+ | font-weight: bold; | ||
+ | } | ||
− | < | + | </style> |
+ | <link rel="stylesheet" type="text/css" | ||
+ | href="https://2017.igem.org/Template:Franconia/CSS?action=raw&ctype=text/css" /> | ||
+ | <script type="text/javascript" src="https://2017.igem.org/Template:Franconia/Javascript? | ||
+ | action=raw&ctype=text/javascript"></script> | ||
+ | <!--- THIS IS WHERE THE HTML BEGINS ---> | ||
− | |||
− | |||
− | |||
− | + | <head> | |
− | + | ||
− | + | ||
− | + | ||
− | < | + | <!-- This tells the browser that your page is responsive --> |
− | + | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
+ | </head> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <nav class="navbar navbar-default navbar-fixed-top"> | |
− | + | <div class="container"> | |
− | + | <div class="navbar-header"> | |
− | + | <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" | |
− | < | + | aria-expanded="false" aria-controls="navbar"> |
− | + | <span class="sr-only">Toggle navigation</span> | |
− | + | <span class="icon-bar"></span> | |
− | + | <span class="icon-bar"></span> | |
− | + | <span class="icon-bar"></span> | |
− | + | </button> | |
− | + | <a class="navbar-brand" href="/index.php"></a> | |
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | </a> | + | |
− | + | ||
− | + | ||
</div> | </div> | ||
− | + | <div id="navbar" class="navbar-collapse collapse"> | |
− | + | <ul class="nav navbar-nav"> | |
− | + | <li><a href="/index.php">Home</a></li> | |
− | + | <li class="disabled"><a href="/timeline.php">Notebook</a></li> | |
− | + | <li class="disabled"><a href="#">Project</a></li> | |
− | <div | + | <li class="disabled"><a href="#">Parts</a></li> |
− | + | <li class="disabled"><a href="#">Human Practices</a></li> | |
− | + | <li class="disabled"><a href="#">Safety</a></li> | |
− | + | <li class="disabled"><a href="/team.php">Team</a> | |
− | + | <li class="disabled"><a href="#">Awards</a></li> | |
− | + | </ul> | |
− | + | </div><!--/.nav-collapse --> | |
− | < | + | |
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </div> | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
− | + | </nav> | |
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
Line 748: | Line 550: | ||
<!-- start of content --> | <!-- start of content --> | ||
<div class="igem_2017_content_wrapper"> | <div class="igem_2017_content_wrapper"> | ||
− |
Revision as of 19:46, 10 July 2017