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

Line 1: Line 1:
 +
 +
html {
 +
line-height: 1.15;
 +
-webkit-text-size-adjust: 100%
 +
}
 +
 +
body {
 +
margin: 0
 +
}
 +
 +
h1 {
 +
font-size: 2em;
 +
margin: 0.67em 0
 +
}
 +
 +
hr {
 +
box-sizing: content-box;
 +
height: 0;
 +
overflow: visible
 +
}
 +
 +
pre {
 +
font-family: monospace, monospace;
 +
font-size: 1em
 +
}
 +
 +
a {
 +
background-color: transparent
 +
}
 +
 +
abbr[title] {
 +
border-bottom: none;
 +
text-decoration: underline;
 +
text-decoration: underline dotted
 +
}
 +
 +
b,
 +
strong {
 +
font-weight: bolder
 +
}
 +
 +
code,
 +
kbd,
 +
samp {
 +
font-family: monospace, monospace;
 +
font-size: 1em
 +
}
 +
 +
small {
 +
font-size: 80%
 +
}
 +
 +
sub,
 +
sup {
 +
font-size: 75%;
 +
line-height: 0;
 +
position: relative;
 +
vertical-align: baseline
 +
}
 +
 +
sub {
 +
bottom: -0.25em
 +
}
 +
 +
sup {
 +
top: -0.5em
 +
}
 +
 +
img {
 +
border-style: none
 +
}
 +
 +
button,
 +
input,
 +
optgroup,
 +
select,
 +
textarea {
 +
font-family: inherit;
 +
font-size: 100%;
 +
line-height: 1.15;
 +
margin: 0
 +
}
 +
 +
button,
 +
input {
 +
overflow: visible
 +
}
 +
 +
button,
 +
select {
 +
text-transform: none
 +
}
 +
 +
button,
 +
[type="button"],
 +
[type="reset"],
 +
[type="submit"] {
 +
-webkit-appearance: button
 +
}
 +
 +
button::-moz-focus-inner,
 +
[type="button"]::-moz-focus-inner,
 +
[type="reset"]::-moz-focus-inner,
 +
[type="submit"]::-moz-focus-inner {
 +
border-style: none;
 +
padding: 0
 +
}
 +
 +
button:-moz-focusring,
 +
[type="button"]:-moz-focusring,
 +
[type="reset"]:-moz-focusring,
 +
[type="submit"]:-moz-focusring {
 +
outline: 1px dotted ButtonText
 +
}
 +
 +
fieldset {
 +
padding: 0.35em 0.75em 0.625em
 +
}
 +
 +
legend {
 +
box-sizing: border-box;
 +
color: inherit;
 +
display: table;
 +
max-width: 100%;
 +
padding: 0;
 +
white-space: normal
 +
}
 +
 +
progress {
 +
vertical-align: baseline
 +
}
 +
 +
textarea {
 +
overflow: auto
 +
}
 +
 +
[type="checkbox"],
 +
[type="radio"] {
 +
box-sizing: border-box;
 +
padding: 0
 +
}
 +
 +
[type="number"]::-webkit-inner-spin-button,
 +
[type="number"]::-webkit-outer-spin-button {
 +
height: auto
 +
}
 +
 +
[type="search"] {
 +
-webkit-appearance: textfield;
 +
outline-offset: -2px
 +
}
 +
 +
[type="search"]::-webkit-search-decoration {
 +
-webkit-appearance: none
 +
}
 +
 +
::-webkit-file-upload-button {
 +
-webkit-appearance: button;
 +
font: inherit
 +
}
 +
 +
details {
 +
display: block
 +
}
 +
 +
summary {
 +
display: list-item
 +
}
 +
 +
template {
 +
display: none
 +
}
 +
 +
[hidden] {
 +
display: none
 +
}
 +
 
*,
 
*,
 
*::after,
 
*::after,
Line 28: Line 205:
 
@font-face {
 
@font-face {
 
font-family: "Futura";
 
font-family: "Futura";
−
src: url("https://static.igem.org/mediawiki/2018/4/49/T--Vilnius-Lithuania--FuturaPTMedium.woff") format("woff")
+
src: url("../fonts/FuturaPTMedium.woff") format("woff")
 
}
 
}
  
Line 57: Line 234:
 
.container {
 
.container {
 
width: 100vw;
 
width: 100vw;
−
height: 92vh;
+
height: 100vh;
 
display: flex;
 
display: flex;
 +
position: relative;
 
flex-wrap: wrap;
 
flex-wrap: wrap;
 
justify-content: center;
 
justify-content: center;
 
align-items: center;
 
align-items: center;
−
background-color: #332F2F;
+
overflow: hidden
 
}
 
}
  
Line 93: Line 271:
 
.canals {
 
.canals {
 
position: absolute;
 
position: absolute;
 +
transition: all 2s linear;
 
top: 0;
 
top: 0;
 
left: 0;
 
left: 0;
Line 102: Line 281:
 
display: none;
 
display: none;
 
width: 100vw;
 
width: 100vw;
−
margin-top: -3%;
+
height: 100vh;
−
height: 90vh
+
margin-top: -3%
 
}
 
}
  
Line 113: Line 292:
 
display: none;
 
display: none;
 
width: 100vw;
 
width: 100vw;
−
height: 90vh
+
height: 100vh
 
}
 
}
  
Line 130: Line 309:
 
.buttons {
 
.buttons {
 
position: absolute;
 
position: absolute;
−
display: none;
+
opacity: 0;
 +
transition: opacity 2s linear;
 
right: 10vw;
 
right: 10vw;
 
top: 50vh;
 
top: 50vh;
−
z-index: 3
+
z-index: -3
 
}
 
}
  
Line 160: Line 340:
 
.liposomes {
 
.liposomes {
 
position: absolute;
 
position: absolute;
−
z-index: 1;
+
overflow: hidden;
−
height: 95vh;
+
left: 0;
 +
top: -20vh;
 
width: 100vw;
 
width: 100vw;
−
top: -12vh
+
transform: scale(1.5);
 +
z-index: 10
 
}
 
}
  
−
.liposomes video {
+
.liposomes img {
−
position: absolute;
+
width: 100%;
−
z-index: -1;
+
overflow: hidden
−
width: 100vw
+
 
}
 
}
  
−
@media only screen and (max-width : 1200px) {
+
@media (max-width: 1050px) {
−
    .liposomes {
+
.liposomes {
−
        top:30%;
+
top: 0
−
        display: inline-block;
+
}
−
        height:auto;
+
−
    }
+
 
}
 
}
  
−
@media only screen and (min-width: 120px) and (max-width: 450px) {
+
@media (max-width: 450px) {
−
.canals .canals__lipid-image,
+
.pulsing-logo .pulsing-logo__image {
−
.canals .canals__oil-image,
+
width: 55%
−
.canals .canals__water-image {
+
−
height: auto;
+
−
margin-top: 15vh
+
 
}
 
}
−
.canals .canals__image {
+
.logo {
−
height: auto;
+
top: 90vh;
−
margin-top: 15vh
+
left: 30vw;
 +
z-index: 10000
 
}
 
}
−
.pulsing-logo .pulsing-logo__image {
+
.logo .logo__image {
−
width: 35%
+
width: 10em;
 +
z-index: 10000;
 +
height: auto
 +
}
 +
.liposomes {
 +
top: 30vh
 +
}
 +
.buttons {
 +
position: absolute;
 +
display: flex;
 +
opacity: 0;
 +
left: 0;
 +
width: 100%;
 +
right: 10vw;
 +
top: 70vh;
 +
z-index: -3
 +
}
 +
.buttons .off-button {
 +
position: relative;
 +
display: flex;
 +
align-items: center;
 +
flex-wrap: wrap;
 +
flex: 1
 +
}
 +
.buttons .button-anchor {
 +
display: flex;
 +
flex: 1;
 +
flex-wrap: wrap;
 +
text-align: center;
 +
justify-content: center;
 +
align-items: center
 +
}
 +
.buttons .button-anchor img {
 +
width: 56%;
 +
flex: 1
 +
}
 +
.buttons .button-text {
 +
width: 50%;
 +
order: -1;
 +
color: white;
 +
font-size: 1.1em
 
}
 
}
 
}
 
}

Revision as of 18:54, 12 October 2018

html { line-height: 1.15; -webkit-text-size-adjust: 100% }

body { margin: 0 }

h1 { font-size: 2em; margin: 0.67em 0 }

hr { box-sizing: content-box; height: 0; overflow: visible }

pre { font-family: monospace, monospace; font-size: 1em }

a { background-color: transparent }

abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted }

b, strong { font-weight: bolder }

code, kbd, samp { font-family: monospace, monospace; font-size: 1em }

small { font-size: 80% }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline }

sub { bottom: -0.25em }

sup { top: -0.5em }

img { border-style: none }

button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0 }

button, input { overflow: visible }

button, select { text-transform: none }

button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button }

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0 }

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText }

fieldset { padding: 0.35em 0.75em 0.625em }

legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal }

progress { vertical-align: baseline }

textarea { overflow: auto }

[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0 }

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto }

[type="search"] { -webkit-appearance: textfield; outline-offset: -2px }

[type="search"]::-webkit-search-decoration { -webkit-appearance: none }

-webkit-file-upload-button {

-webkit-appearance: button; font: inherit }

details { display: block }

summary { display: list-item }

template { display: none }

[hidden] { display: none }

  • ,
    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("../fonts/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: 100vh; display: flex; position: relative; flex-wrap: wrap; justify-content: center; align-items: center; overflow: hidden }

.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; transition: all 2s linear; top: 0; left: 0; height: 50vh; height: 90vh }

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

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

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

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

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

.buttons { position: absolute; opacity: 0; transition: opacity 2s linear; 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; overflow: hidden; left: 0; top: -20vh; width: 100vw; transform: scale(1.5); z-index: 10 }

.liposomes img { width: 100%; overflow: hidden }

@media (max-width: 1050px) { .liposomes { top: 0 } }

@media (max-width: 450px) { .pulsing-logo .pulsing-logo__image { width: 55% } .logo { top: 90vh; left: 30vw; z-index: 10000 } .logo .logo__image { width: 10em; z-index: 10000; height: auto } .liposomes { top: 30vh } .buttons { position: absolute; display: flex; opacity: 0; left: 0; width: 100%; right: 10vw; top: 70vh; z-index: -3 } .buttons .off-button { position: relative; display: flex; align-items: center; flex-wrap: wrap; flex: 1 } .buttons .button-anchor { display: flex; flex: 1; flex-wrap: wrap; text-align: center; justify-content: center; align-items: center } .buttons .button-anchor img { width: 56%; flex: 1 } .buttons .button-text { width: 50%; order: -1; color: white; font-size: 1.1em } }