Difference between revisions of "Template:Vilnius-Lithuania/IntroCSS"

Line 172: Line 172:
 
}
 
}
  
 +
@media only screen and (max-width : 1200px) {
 +
    .liposomes {
 +
        top:30%;
 +
        display: inline-block;
 +
        height:auto;
 +
    }
 +
}
  
 
@media only screen and (min-width: 120px) and (max-width: 450px) {
 
@media only screen and (min-width: 120px) and (max-width: 450px) {

Revision as of 09:46, 11 October 2018

  • ,
    after,
    before {

margin: 0; padding: 0; box-sizing: inherit }

html { box-sizing: border-box }

html body { background-color: #332F2F; font-family: "Futura", "sans-serif" }

html a { text-decoration: none; color: #000 }

html ul, html ol { list-style: none }

@font-face { font-family: "Futura"; src: url("https://static.igem.org/mediawiki/2018/4/49/T--Vilnius-Lithuania--FuturaPTMedium.woff") format("woff") }

.logo { position: absolute; top: 6vh; left: 5vw; z-index: 10000 }

.logo .logo__image { width: 10em; z-index: 10000; height: auto }

.skip { position: absolute; top: 6vh; right: 5vw }

.skip .skip__image { width: 4em; height: auto }

.container { width: 100vw; height: 92vh; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #332F2F; }

.media { min-width: 0; text-align: center }

.pulsing-logo { display: flex; flex-wrap: wrap; justify-content: center; transition: all 1s ease-in }

.pulsing-logo .pulsing-logo__project-text { flex: 100%; width: 100%; display: none; text-align: center; padding: 2em 2em 0em 2em }

.pulsing-logo .pulsing-logo__image { width: 15%; max-width: 100%; transition: display 1s ease-in }

.canals { position: absolute; top: 0; left: 0; height: 50vh; height: 90vh }

.canals .canals__image { display: none; width: 100vw; margin-top: -3%; height: 90vh }

.canals .canals__lipid-image, .canals .canals__water-image, .canals .canals__oil-image { position: absolute; margin-top: -3%; display: none; width: 100vw; height: 90vh }

.canals .canals__water-image { z-index: 1 }

.canals .canals__oil-image { z-index: 2 }

.canals .canals__lipid-image { z-index: 3 }

.buttons { position: absolute; display: none; right: 10vw; top: 50vh; z-index: 3 }

.buttons .off-button { display: flex; align-items: center; flex-wrap: wrap; flex: 1 }

.buttons .button-anchor { display: flex; flex: 1; align-items: center }

.buttons .button-anchor img { width: 40% }

.buttons .button-text { color: white; font-size: 1.1em }

.liposomes { position: absolute; z-index: 1; height: 95vh; width: 100vw; top: -12vh }

.liposomes video { position: absolute; z-index: -1; width: 100vw }

@media only screen and (max-width : 1200px) { 

   .liposomes {
       top:30%;
       display: inline-block;
       height:auto;
   }

}

@media only screen and (min-width: 120px) and (max-width: 450px) { .canals .canals__lipid-image, .canals .canals__oil-image, .canals .canals__water-image { height: auto; margin-top: 15vh } .canals .canals__image { height: auto; margin-top: 15vh } .pulsing-logo .pulsing-logo__image { width: 35% } }