(239 intermediate revisions by 2 users not shown) | |||
Line 5: | Line 5: | ||
#home_logo, #sideMenu { display:none; } | #home_logo, #sideMenu { display:none; } | ||
#sideMenu, #top_title, .patrollink {display:none;} | #sideMenu, #top_title, .patrollink {display:none;} | ||
− | body{background: | + | body{background: #444444} |
#content { margin-left:0px; margin-top:-7px; padding:0px; margin:0px; width:100%;} | #content { margin-left:0px; margin-top:-7px; padding:0px; margin:0px; width:100%;} | ||
Line 15: | Line 15: | ||
- pros: easier to read, very organized | - pros: easier to read, very organized | ||
- cons: might require some nasty workarounds | - cons: might require some nasty workarounds | ||
+ | - use vw and vh instead of % as a workaround for MediaWiki | ||
- strive for material theme (https://material.io/) | - strive for material theme (https://material.io/) | ||
- solid, paper-like design | - solid, paper-like design | ||
*/ | */ | ||
− | + | *{ | |
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
Line 25: | Line 26: | ||
.fullscreen_section{ | .fullscreen_section{ | ||
− | width: | + | width: 100vw; |
− | height: | + | height: 100vh; |
+ | background: #444444; | ||
} | } | ||
.small_section{ | .small_section{ | ||
− | width: | + | width: 100vw; |
− | height: | + | height: 30vh; |
+ | box-shadow: inset 0 0 20px #333333; | ||
} | } | ||
Line 44: | Line 47: | ||
text-align: center; | text-align: center; | ||
font-family: Arial; | font-family: Arial; | ||
− | font-size: | + | min-height: 200px; |
+ | font-size: 7em; | ||
font-weight: bold; | font-weight: bold; | ||
color: black; | color: black; | ||
− | + | animation-name: title_in; | |
− | + | animation-duration: 1s; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | |||
+ | @keyframes title_in{ | ||
+ | 0%{ | ||
+ | transform: translateY(-50px) scale(1.1, 1.1); | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | 100%{ | ||
+ | transform: translateY(0px) scale(1, 1); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | } | ||
#section1 > .content_wrapper > .desc{ | #section1 > .content_wrapper > .desc{ | ||
Line 97: | Line 107: | ||
#section2 > .content_wrapper > .desc > .body, #section3 > .content_wrapper > .desc > .body{ | #section2 > .content_wrapper > .desc > .body, #section3 > .content_wrapper > .desc > .body{ | ||
font-family: Arial; | font-family: Arial; | ||
+ | font-size: 1em; | ||
color: rgb(148, 148, 148); | color: rgb(148, 148, 148); | ||
margin: 5px; | margin: 5px; | ||
Line 102: | Line 113: | ||
#section4{ | #section4{ | ||
− | + | background-color: #EEEEEE; | |
− | + | margin: 0; | |
} | } | ||
Line 120: | Line 131: | ||
#section5{ | #section5{ | ||
position: relative; | position: relative; | ||
− | left: | + | left: 15vw; |
− | width: | + | width: 70vw; |
− | + | ||
} | } | ||
Line 128: | Line 138: | ||
font-family: Arial; | font-family: Arial; | ||
font-size: 2em; | font-size: 2em; | ||
− | color: | + | color: #EEEEEE; |
− | + | padding: 20px; | |
+ | z-index: 10; | ||
} | } | ||
Line 218: | Line 229: | ||
background-size: cover; | background-size: cover; | ||
display: inline-block; | display: inline-block; | ||
+ | } | ||
+ | |||
+ | .fullscreen { | ||
+ | background-color: #111111; | ||
+ | background-image:url("https://static.igem.org/mediawiki/2018/0/0f/T--TPHS_San_Diego--Fungal_wall.jpg"); | ||
+ | -webkit-background-size: contain; | ||
+ | -moz-background-size: contain; | ||
+ | -o-background-size: contain; | ||
+ | background-size: contain; | ||
+ | background-repeat: no-repeat; | ||
+ | padding-bottom: 200px; | ||
+ | } | ||
+ | |||
+ | slider { | ||
+ | display:block; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | background-color:#1f1f1f; | ||
+ | overflow:hidden; | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | slider > * { | ||
+ | position:absolute; | ||
+ | display:block; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | background:#1f1f1f; | ||
+ | animation: slide 12s infinite; | ||
+ | overflow:hidden; | ||
+ | box-shadow: inset 0 0 20px black; | ||
+ | } | ||
+ | |||
+ | slide:nth-child(1){ | ||
+ | left:0%; | ||
+ | animation-delay: -1s; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2018/5/52/T--TPHS_San_Diego--back_1.jpg"); | ||
+ | background-size:cover; | ||
+ | background-position:center; | ||
+ | background-attachment: fixed; | ||
+ | visibility: hidden; | ||
+ | image-rendering: -webkit-optimize-contrast; | ||
+ | background-size: cover; | ||
+ | background-position:50% 50%; | ||
+ | } | ||
+ | |||
+ | slide:nth-child(2){ | ||
+ | left:0%; | ||
+ | animation-delay: 2s; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2018/2/2a/T--TPHS_San_Diego--back_2.jpg"); | ||
+ | background-size:cover; | ||
+ | background-position:center; | ||
+ | background-attachment: fixed; | ||
+ | visibility: hidden; | ||
+ | image-rendering: -webkit-optimize-contrast; | ||
+ | background-size: cover; | ||
+ | background-position:50% 50%; | ||
+ | } | ||
+ | |||
+ | slide:nth-child(3){ | ||
+ | animation-delay: 5s; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2018/1/11/T--TPHS_San_Diego--back_3.jpg"); | ||
+ | background-size:cover; | ||
+ | background-position:center; | ||
+ | background-attachment: fixed; | ||
+ | visibility: hidden; | ||
+ | image-rendering: -webkit-optimize-contrast; | ||
+ | background-size: cover; | ||
+ | background-position:50% 50%; | ||
+ | } | ||
+ | |||
+ | slide:nth-child(4){ | ||
+ | left:0%; | ||
+ | animation-delay: 8s; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2018/b/b3/T--TPHS_San_Diego--Homepage4.png"); | ||
+ | background-size:cover; | ||
+ | background-position:center; | ||
+ | background-attachment: fixed; | ||
+ | visibility: hidden; | ||
+ | image-rendering: -webkit-optimize-contrast; | ||
+ | background-size: cover; | ||
+ | background-position:50% 50%; | ||
+ | } | ||
+ | |||
+ | |||
+ | .slide_container { | ||
+ | display:inline-block; | ||
+ | position: absolute; | ||
+ | bottom: 0; | ||
+ | font-family:Arial; | ||
+ | font-size:30px; | ||
+ | text-align:center; | ||
+ | margin: 50px; | ||
+ | padding: 20px; | ||
+ | width:40%; | ||
+ | |||
+ | /*height: 40%;*/ | ||
+ | background: #333333; | ||
+ | color:#fff; | ||
+ | box-shadow: 0 0 20px black; | ||
+ | line-height: 30px; | ||
+ | } | ||
+ | |||
+ | @keyframes slide { | ||
+ | 0% {left: 100%; width:100%;visibility: visible;} | ||
+ | 5% {left: 0%; visibility: visible;} | ||
+ | 25% {left: 0%;visibility: visible;} | ||
+ | 30%{left :-100%; width:100%;visibility: visible;} | ||
+ | 30.001%{left:-100%; width:0%;visibility: visible;} | ||
+ | 100% {left:100%; width:0%;visibility: visible;} | ||
+ | } | ||
+ | |||
+ | p{ | ||
+ | margin: 0 !important; | ||
+ | padding: 0 !important; | ||
} | } | ||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 00:34, 18 October 2018