Difference between revisions of "Template:Team:Calgary/StyleSheets/styling.css"

 
(57 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
<head>
 
<head>
 
<style>
 
<style>
−
#rocketmeluncur {
 
−
  position: fixed;
 
−
  bottom: 50px;
 
−
  z-index: 7;
 
−
  display: none;
 
−
  visibility: hidden;
 
−
  width: 35px;
 
−
  height: 62px;
 
−
  right: 25px;
 
−
  background: url(https://static.igem.org/mediawiki/2017/9/92/Calgary2017_BacktoTopButton.png) no-repeat 50% 0;
 
−
  opacity: 0;
 
−
  -webkit-transition: visibility .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), -webkit-transform .6s cubic-bezier(0.6, 0.04, 0.98, 0.335);
 
−
  -moz-transition: visibility .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), -moz-transform .6s cubic-bezier(0.6, 0.04, 0.98, 0.335);
 
−
  transition: visibility .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity .6s cubic-bezier(0.6, 0.04, 0.98, 0.335), transform .6s cubic-bezier(0.6, 0.04, 0.98, 0.335);
 
−
}
 
−
 
−
#rocketmeluncur i {
 
−
  display: block;
 
−
  margin-top: 48px;
 
−
  height: 14px;
 
−
  background: url(https://static.igem.org/mediawiki/2017/9/92/Calgary2017_BacktoTopButton.png) no-repeat 50% -48px;
 
−
  opacity: .5;
 
−
  -webkit-transition: -webkit-transform .2s;
 
−
  -moz-transition: -moz-transform .2s;
 
−
  transition: transform .2s;
 
−
  -webkit-transform-origin: 50% 0;
 
−
  -moz-transform-origin: 50% 0;
 
−
  transform-origin: 50% 0
 
−
}
 
−
 
−
#rocketmeluncur:hover {
 
−
  background-position: 50% -62px
 
−
}
 
−
 
−
#rocketmeluncur:hover i {
 
−
  background-position: 50% 100%;
 
−
  -webkit-animation: flaming .7s infinite;
 
−
  -moz-animation: flaming .7s infinite;
 
−
  animation: flaming .7s infinite
 
−
}
 
−
 
−
#rocketmeluncur.showrocket {
 
−
  visibility: visible;
 
−
  opacity: 1
 
−
}
 
−
 
−
#rocketmeluncur.launchrocket {
 
−
  background-position: 50% -62px;
 
−
  opacity: 0;
 
−
  -webkit-transform: translateY(-800px);
 
−
  -moz-transform: translateY(-800px);
 
−
  -ms-transform: translateY(-800px);
 
−
  transform: translateY(-800px);
 
−
  pointer-events: none
 
−
}
 
−
 
−
#rocketmeluncur.launchrocket i {
 
−
  background-position: 50% 100%;
 
−
  -webkit-transform: scale(1.4, 3.2);
 
−
  -moz-transform: scale(1.4, 3.2);
 
−
  transform: scale(1.4, 3.2)
 
−
}
 
−
 
−
 
−
 
−
 
−
 
 
#sideMenu, #top_title {
 
#sideMenu, #top_title {
 
display: none;
 
display: none;
Line 131: Line 64:
 
#HQ_page h1, h2, h3, h4, h5{
 
#HQ_page h1, h2, h3, h4, h5{
 
font-family: 'Varela Round';
 
font-family: 'Varela Round';
−
font-size:32px;
+
font-size:28px;
 
  text-transform: uppercase;
 
  text-transform: uppercase;
−
text-align: center;
 
 
}
 
}
  
Line 144: Line 76:
  
 
#HQ_page h2{
 
#HQ_page h2{
−
font-size: 18px;
+
font-size: 24px;
 
color: #fcb633;
 
color: #fcb633;
 
}
 
}
Line 219: Line 151:
 
     top: 0; /* Position the navbar at the top of the page */
 
     top: 0; /* Position the navbar at the top of the page */
 
     width: 70%; /* Full width */
 
     width: 70%; /* Full width */
−
     text-align: center;
+
     text-align: left;
 
margin-top: 1.5rem;
 
margin-top: 1.5rem;
 
background-color: #d24f2b;
 
background-color: #d24f2b;
Line 231: Line 163:
 
background-size: 100%;
 
background-size: 100%;
  
−
background-position: 0px -15px;
+
background-position: 0px -35px;
  
 
}
 
}
Line 237: Line 169:
 
#TopBar li {
 
#TopBar li {
 
     list-style: none;
 
     list-style: none;
 +
}
 +
 +
#TopBar ul ul li{
 +
float: none;
 +
position: relative;
 +
    font-family: 'Varela Round';
 +
    color: #faece5;
 +
    font-weight: 900;
 +
    text-transform: uppercase;
 +
}
 +
 +
#TopBar ul ul ul{
 +
position: absolute;
 +
left: 100%;
 +
top: 0;
 +
margin: 0;
 
}
 
}
  
Line 290: Line 238:
 
.toggle-menu{
 
.toggle-menu{
 
display: none;
 
display: none;
 +
}
 +
 +
#drop{
 +
margin-top: -1rem;
 
}
 
}
  
 
.toggle-drop{
 
.toggle-drop{
 
display: none;
 
display: none;
 +
}
 +
 +
.toggle-drop2{
 +
display: none;
 +
}
 +
 +
.logo{
 +
text-align:center;
 
}
 
}
  
Line 328: Line 288:
 
box-shadow: 5px 5px 15px #DDDDDD;
 
box-shadow: 5px 5px 15px #DDDDDD;
 
}
 
}
−
/*
+
 
−
.nav-list li:hover{
+
−
    background-color: #d24f2b;
+
−
}
+
−
*/
+
 
.nav-list ul a{
 
.nav-list ul a{
 
font-weight: normal;
 
font-weight: normal;
Line 351: Line 307:
 
#drop{
 
#drop{
 
display:none;
 
display:none;
 +
}
 +
#drop2{
 +
display:none;
 +
}
 +
 +
@media only screen and (max-width: 95.75rem){
 +
#TopBar{
 +
background-position: 0px -15px;
 
}
 
}
  
Line 413: Line 377:
 
padding: 0.5rem;
 
padding: 0.5rem;
 
margin: 0;
 
margin: 0;
−
width: 100%;
+
width: 97%;
 
}
 
}
  
Line 463: Line 427:
 
}
 
}
  
 +
  .toggle-drop2{
 +
display: block;
 +
}
 
.nav-list{
 
.nav-list{
 
display: block;
 
display: block;
Line 477: Line 444:
  
 
.active{
 
.active{
 +
max-height: 100%;
 +
overflow: auto;
 +
}
 +
 +
.active2{
 
max-height: 100%;
 
max-height: 100%;
 
overflow: auto;
 
overflow: auto;
Line 496: Line 468:
 
padding-right: 0rem;
 
padding-right: 0rem;
 
}
 
}
 +
 +
#TopBar ul ul li{
 +
float: initial;
 +
position: initial;
 +
}
 +
 +
#TopBar ul ul ul{
 +
position: initial;
 +
left: initial;
 +
top: initial;
 +
margin: initial;
 +
padding-left: 1rem;
 +
}
 +
  
 
#InfoBox{
 
#InfoBox{

Latest revision as of 22:33, 31 October 2017