Difference between revisions of "Team:Greece/human practices"

Line 3: Line 3:
 
<!-- >>>>> Meta <<<<< -->
 
<!-- >>>>> Meta <<<<< -->
  
−
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'  />
  
 
<!-- >>>>> Link References <<<<< -->
 
<!-- >>>>> Link References <<<<< -->
 +
<!--
 +
Responsive stylesheets
 +
DEFAULT PROPERTIES ARE INHERITED FROM 1920px - 1080px RESOLUTION
 +
 +
DEFAULT PROPERTIES ARE INHERITED FROM 1535px WIDTH
 +
 +
< 1024px Resolution Desktop Screen
 +
 +
< 1366px Resolution Desktop Screen
 +
-->
  
 
     <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Greece/CSS?action=raw&ctype=text/css" />
 
     <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Greece/CSS?action=raw&ctype=text/css" />
 +
    <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Greece/xlarge?action=raw&ctype=text/css" />
 +
    <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Greece/large?action=raw&ctype=text/css" />
 +
    <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Greece/medium?action=raw&ctype=text/css" />
  
 
<!-- >>>>> Scripts <<<<< -->
 
<!-- >>>>> Scripts <<<<< -->
−
 
 
     <!-- Call Jquery -->
 
     <!-- Call Jquery -->
 
     <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
 
     <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
−
 
−
    <!-- Plugin -->
 
−
    <script>
 
−
      (function($) {
 
−
          $.fn.goTo = function() {
 
−
            $('html, body').animate({
 
−
                scrollTop: $(this).offset().top + 'px'
 
−
            }, 1000);
 
−
          return this; // for chaining...
 
−
          }
 
−
      })(jQuery);
 
−
    </script>
 
−
 
−
    <!-- Call Template Scrips -->
 
−
    <script type="text/javascript" src="https://2017.igem.org/Template:Greece/Javascript?
 
−
action=raw&ctype=text/javascript"></script>
 
  
 
     <!-- On document.ready -->
 
     <!-- On document.ready -->
Line 45: Line 41:
 
                 // Change color of current link
 
                 // Change color of current link
 
                 $('a[href*="' +window.location.href+'"]').each(function() { $(this).css('color', '#000000'); });
 
                 $('a[href*="' +window.location.href+'"]').each(function() { $(this).css('color', '#000000'); });
 +
 +
                /* Plugin for smooth scroll down */
 +
                (function($) {
 +
                    $.fn.goTo = function() {
 +
                      $('html, body').animate({
 +
                          scrollTop: $(this).offset().top + 'px'}, 1000);
 +
                      return this; // for chaining...
 +
                    }
 +
                  })(jQuery);
 
       });
 
       });
 
     </script>
 
     </script>
  
−
    <!-- Subsection onHover Functionality -->
 
 
     <script>
 
     <script>
 +
      /* Subsection onHover Functionality */
 
function onHoverChanges(idz){
 
function onHoverChanges(idz){
−
$('#'+idz).addClass('opace');
+
                $('#'+idz).css('opacity','1');
 
}
 
}
 
 
 
function onHoverHide(idz){
 
function onHoverHide(idz){
−
$('.circlez').removeClass('opace');
+
                $('.circlez').css('opacity','0.8');
 
}
 
}
 
     </script>
 
     </script>
Line 78: Line 83:
 
     $('.display_frame').removeClass('reveal');
 
     $('.display_frame').removeClass('reveal');
 
     $('#' + stateMsg).addClass('reveal');
 
     $('#' + stateMsg).addClass('reveal');
 +
    $('#footer').addClass('reveal');
 
     $('#ct1').goTo();
 
     $('#ct1').goTo();
  
Line 88: Line 94:
 
<!-- Loading Screen -->
 
<!-- Loading Screen -->
 
<div id='loading-background'>
 
<div id='loading-background'>
−
   <img id='loading-gif' src='https://cldup.com/pIBaUjU48W.gif' alt='Loading...' />
+
   <img id='loading-gif' src='https://static.igem.org/mediawiki/2017/c/c6/Greekom_loading_gif.gif' alt='Loading...' />
 
</div>
 
</div>
  
 
<!-- Navigation Bar -->
 
<!-- Navigation Bar -->
 
             <div style='display: none;' id='main-wraper'>
 
             <div style='display: none;' id='main-wraper'>
−
                    <!--<div style='position:absolute;z-index:-1000;border:1px solid black;height:500px;width:100px;background:#e8e4f5;'>.</div>-->
 
 
    <div class='menu_wrap'></div>
 
    <div class='menu_wrap'></div>
 
<nav class='menu'>
 
<nav class='menu'>
Line 161: Line 166:
 
   <object id='PUBLIC_ENGAGEMENT' width='100%' height='100%' class='display_frame hide' data='https://2017.igem.org/Team:Greece/PUBLIC_ENGAGEMENT'></object>
 
   <object id='PUBLIC_ENGAGEMENT' width='100%' height='100%' class='display_frame hide' data='https://2017.igem.org/Team:Greece/PUBLIC_ENGAGEMENT'></object>
  
−
<!-- Footer Box -->
 
−
<div id='footer' style='background:#ffffff; position: absolute; width:100%; height: 220px; z-index:1000;'>
 
−
    <img style='position:relative; width:100%; height:100%;' src='http://users.auth.gr/komodromo/iGEM%20Greece%202017/Flipbook/pages/footer.png' />
 
 
</div>
 
</div>
 +
 +
<!-- Footer Box -->
 +
<div id='footer' style='background:#ffffff; position: absolute; width:100%; height: 220px; z-index:1000;' class='hide'>
 +
    <img style='position:relative; width:100%; height:100%;' src='https://static.igem.org/mediawiki/2017/0/06/Greekom_footer.png' />
 
</div>
 
</div>
  
−
<!-- Part of template CSS file-->
+
<!-- Special Style -->
 
<style>
 
<style>
  
 
#svg_graphics_box{ margin: 0px 0px 0px 0px;}
 
#svg_graphics_box{ margin: 0px 0px 0px 0px;}
  
−
.circlez{
+
.circlez{ opacity: 0.8; }
−
opacity: 0.8;
+
−
}
+
  
 
.animate_text{ font-size: 25px; }
 
.animate_text{ font-size: 25px; }
  
−
.circlez, .animate_text{cursor: pointer;}
+
.circlez, .animate_text{ cursor: pointer; }
  
 
.opace{ opacity: 1; }
 
.opace{ opacity: 1; }
  
 
.hide{ display:none;}
 
.hide{ display:none;}
 +
 
.reveal{ display: block; }
 
.reveal{ display: block; }
−
 
−
</style>
 
−
 
−
<!-- Special style -->
 
−
<style>
 
  
 
video{
 
video{
Line 195: Line 195:
 
     top: 0%;
 
     top: 0%;
 
     left: 0%;
 
     left: 0%;
−
     width: 100%;
+
     min-width: 100%;
 +
    min-height: 100%;
 +
    width: inherit;
 
     height: inherit;
 
     height: inherit;
 
     z-index: 999;
 
     z-index: 999;
Line 201: Line 203:
 
}
 
}
 
</style>
 
</style>
−
 
−
<style>
 
−
/* Responsive stylesheets */
 
−
/* DEFAULT PROPERTIES ARE INHERITED FROM 1920px - 1080px RESOLUTION */
 
−
 
−
/* DEFAULT PROPERTIES ARE INHERITED FROM 1535px WIDTH*/
 
−
 
−
/* < 1024px Resolution Desktop Screen */
 
−
 
−
/* < 1366px Resolution Desktop Screen*/
 
−
 
−
@media screen and (min-width: 1025px) and (max-width: 1367px) {
 
−
 
−
.menu_wrap{
 
−
position:relative;
 
−
                margin:-7px 0px 0px 0px;
 
−
                width: 100%;
 
−
                height: 85px;
 
−
/*No left or right margins - menu wides fullscreen*/
 
−
}
 
−
 
−
.menu{
 
−
position:absolute;
 
−
width: 100%;
 
−
margin: -84px 0px 0px 0px;
 
−
}
 
−
 
−
.menu > ul > li{
 
−
margin-left:12px;
 
−
}
 
−
.menu li{
 
−
margin-right: 35px;
 
−
margin-left: 35px;
 
−
}
 
−
 
−
#just_to_align{
 
−
right: 48px;
 
−
margin: 19px 10px 0px 0px;
 
−
}
 
−
.logo{
 
−
margin: -21px 0px 0px -52px;
 
−
}
 
−
 
−
        #c_t1{ cx: -210 }
 
−
        #c_t2{ cx: 200 }
 
−
        #c_t3{ cx: 615 }
 
−
}
 
−
 
−
@media screen and (min-width: 1367px) and (max-width: 1921px){
 
−
       
 
−
        .logo{
 
−
                margin: -21px 0px 0px -48px;
 
−
        }
 
−
     
 
−
        .menu li {
 
−
                margin-right: 4%;
 
−
                margin-left: 4%;
 
−
        }
 
−
 
−
@media screen and (min-width: 1367px) and (max-width: 1770px){
 
−
    .menu li{
 
−
          margin-right: 3%;
 
−
          margin-left: 3%;
 
−
    }
 
−
 
−
    .menu{ margin:-5px 0px 0px 0px; height: 80px;}
 
−
    .menu_wrap{ margin: -5px 0px 0px 0px;}
 
−
}
 
−
 
−
@media screen and (min-width: 1770px) and (max-width: 1921px){
 
−
       
 
−
        .menu_wrap{ margin: -1px 0px 0px 0px; }
 
−
 
−
        .menu{ margin: -5px 0px 0px 0px; }
 
−
 
−
        #just_to_align{ margin: 21px 10px 0px 0px; }
 
−
 
−
        .logo{ margin: -18px 0px 0px -48px; }
 
−
 
−
        #display_box{ margin: 900px 0px 0px 0px; }
 
−
 
−
        #svg_graphics_box{ margin: 120px 0px 0px 0px;}
 
−
 
−
}
 
−
 
−
}
 
−
</style>
 
−
 
−
<!-- Styling script -->
 
  
 
<!-- This script exists due to the innability of changing the <x> attribute of <tspan> in circles -->
 
<!-- This script exists due to the innability of changing the <x> attribute of <tspan> in circles -->

Revision as of 15:16, 20 September 2017

Loading...