Difference between revisions of "Template:Tartu TUIT/style"
| (22 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | < | + | <html> |
| − | @import url("https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i"); | + | <style>@import url("https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i"); |
@import url("https://use.fontawesome.com/releases/v5.4.1/css/all.css"); | @import url("https://use.fontawesome.com/releases/v5.4.1/css/all.css"); | ||
html, body { | html, body { | ||
| Line 16: | Line 16: | ||
cursor: pointer; } | cursor: pointer; } | ||
| − | .cols::after, .header::after, #process .content::after, #molecule .map .card::after, .notebook .images-two::after, .notebook .images-height::after, .notebook .event .details::after { | + | .cols::after, .experiment::after, header.header::after, #process .content::after, #molecule .map .card::after, .notebook .images-two::after, .notebook .images-height::after, .notebook .event .details::after, .clearfix::after { |
content: ''; | content: ''; | ||
display: table; | display: table; | ||
clear: both; } | clear: both; } | ||
| − | .cols, .header .menu, .header .menu .submenu { | + | .cols, header.header .menu, header.header .menu .submenu { |
list-style-type: none; | list-style-type: none; | ||
padding: 0; | padding: 0; | ||
| Line 61: | Line 61: | ||
min-height: 100%; } | min-height: 100%; } | ||
| − | h2 { | + | body h2, body h2, body h3, body h4 { |
| + | color: #dde5ee; | ||
| + | font-family: 'Roboto' !important; } | ||
| + | |||
| + | body li { | ||
| + | margin-bottom: 0; } | ||
| + | |||
| + | h2, .article h2 { | ||
text-align: center; | text-align: center; | ||
font-weight: 100; | font-weight: 100; | ||
| Line 103: | Line 110: | ||
vertical-align: super; | vertical-align: super; | ||
padding: 0px 0px; } | padding: 0px 0px; } | ||
| + | .article img { | ||
| + | max-width: 100%; } | ||
| + | .article ol.fancy.cols { | ||
| + | margin-left: -2%; | ||
| + | margin-right: -2%; } | ||
.article ol.fancy { | .article ol.fancy { | ||
list-style-type: none; | list-style-type: none; | ||
| − | counter-reset: ol-counter; } | + | counter-reset: ol-counter; |
| + | margin: 0; } | ||
.article ol.fancy li { | .article ol.fancy li { | ||
| − | counter-increment: ol-counter; } | + | counter-increment: ol-counter; |
| + | padding: 0px 0px 10px; } | ||
.article ol.fancy li::before { | .article ol.fancy li::before { | ||
box-shadow: 0 0 5px #50b1be; | box-shadow: 0 0 5px #50b1be; | ||
| Line 115: | Line 129: | ||
color: #181e33; | color: #181e33; | ||
font-weight: 900; | font-weight: 900; | ||
| − | padding: | + | font-size: 16px; |
| + | padding: 1px 6px 0px; | ||
line-height: 20px; | line-height: 20px; | ||
| − | margin: | + | margin: 1px 10px 4px 0; |
float: left; } | float: left; } | ||
.article ol.fancy li::after { | .article ol.fancy li::after { | ||
| Line 124: | Line 139: | ||
display: table; } | display: table; } | ||
.article .references { | .article .references { | ||
| − | padding-left: 18px; } | + | padding-left: 18px; |
| + | margin: 0; } | ||
.article .references li { | .article .references li { | ||
padding-left: 10px; } | padding-left: 10px; } | ||
| Line 157: | Line 173: | ||
color: #dde5ee; } | color: #dde5ee; } | ||
| − | .header { | + | .attrib ul { |
| + | list-style-type: none; | ||
| + | margin: 0; } | ||
| + | .attrib ul li { | ||
| + | padding: 3px 0; | ||
| + | line-height: 30px; } | ||
| + | .attrib ul li::before { | ||
| + | box-shadow: 0 0 5px #50b1be; | ||
| + | content: ''; | ||
| + | background-color: #75c2cc; | ||
| + | border-radius: 100%; | ||
| + | color: #181e33; | ||
| + | font-weight: 900; | ||
| + | padding: 3px; | ||
| + | line-height: 20px; | ||
| + | margin: 12px 10px 0px 0; | ||
| + | float: left; } | ||
| + | .attrib ul li::after { | ||
| + | content: ''; | ||
| + | clear: both; | ||
| + | display: table; } | ||
| + | .attrib ul .name { | ||
| + | font-weight: 900; } | ||
| + | |||
| + | .sponsors h2 { | ||
| + | margin-top: 60px; } | ||
| + | |||
| + | .sponsors img { | ||
| + | display: block; | ||
| + | width: 500px; | ||
| + | margin: 10px auto; | ||
| + | background-color: #dde5ee; } | ||
| + | |||
| + | .interviews .nav { | ||
| + | padding: 0px 0 50px; | ||
| + | text-align: center; | ||
| + | list-style-type: none; } | ||
| + | .interviews .nav .button { | ||
| + | background-color: #dde5ee; | ||
| + | color: #181e33; | ||
| + | font-weight: 400; | ||
| + | text-decoration: none; | ||
| + | padding: 10px 15px; | ||
| + | margin: 10px; | ||
| + | display: inline-block; } | ||
| + | .interviews .nav .button:hover { | ||
| + | box-shadow: 0 0 15px #50b1be; | ||
| + | cursor: pointer; } | ||
| + | .interviews .nav .button.active { | ||
| + | box-shadow: 0 0 5px #fff, 0 0 10px #50b1be, 0 0 15px #50b1be, 0 0 17px #50b1be, 0 0 30px #50b1be; } | ||
| + | |||
| + | .interviews .interview { | ||
| + | display: none; } | ||
| + | |||
| + | .interview ul { | ||
| + | list-style-type: none; | ||
| + | margin: 0; } | ||
| + | .interview ul li { | ||
| + | padding: 3px 0; | ||
| + | line-height: 25px; | ||
| + | position: relative; } | ||
| + | .interview ul li::before { | ||
| + | text-shadow: 0 0 5px #50b1be, 0 0 10px #50b1be; | ||
| + | content: '?'; | ||
| + | border-radius: 100%; | ||
| + | color: #dde5ee; | ||
| + | font-weight: 900; | ||
| + | font-size: 24px; | ||
| + | padding: 3px; | ||
| + | line-height: 20px; | ||
| + | left: -30px; | ||
| + | top: 5px; | ||
| + | position: absolute; } | ||
| + | .interview ul li::after { | ||
| + | content: ''; | ||
| + | clear: both; | ||
| + | display: table; } | ||
| + | |||
| + | .interview .person img { | ||
| + | float: left; | ||
| + | height: 150px; | ||
| + | margin-right: 40px; | ||
| + | margin-bottom: 40px; | ||
| + | border-top-left-radius: 50px; } | ||
| + | |||
| + | .interview .person .name { | ||
| + | font-weight: 100; | ||
| + | font-size: 36px; | ||
| + | padding-bottom: 10px; } | ||
| + | |||
| + | .interview .person .position { | ||
| + | font-size: 16px; } | ||
| + | |||
| + | .interview .questions { | ||
| + | clear: both; } | ||
| + | |||
| + | .interview .question { | ||
| + | font-style: italic; | ||
| + | margin-bottom: 10px; | ||
| + | color: #9ad2da; } | ||
| + | |||
| + | .interview .answer { | ||
| + | margin-bottom: 30px; } | ||
| + | .interview .answer img { | ||
| + | max-width: 100%; } | ||
| + | |||
| + | .experiment .time { | ||
| + | text-align: center; | ||
| + | padding-bottom: 30px; } | ||
| + | .experiment .time i { | ||
| + | padding-right: 7px; } | ||
| + | |||
| + | .experiment .ingredients, .experiment .tools { | ||
| + | width: 50%; | ||
| + | float: left; | ||
| + | padding-left: 5%; } | ||
| + | .experiment .ingredients li, .experiment .tools li { | ||
| + | text-align: left; } | ||
| + | |||
| + | .experiment .steps::before { | ||
| + | content: ''; | ||
| + | clear: both; | ||
| + | display: table; } | ||
| + | |||
| + | header.header { | ||
| + | padding-top: 18px; | ||
background-color: #181e33; | background-color: #181e33; | ||
display: block; | display: block; | ||
| − | height: | + | height: 98px; |
color: #dde5ee; | color: #dde5ee; | ||
width: 100%; | width: 100%; | ||
| − | position: | + | position: absolute; |
| + | top: 0; | ||
z-index: 200; } | z-index: 200; } | ||
| − | .header .logo { | + | header.header .logo { |
background-color: #181e33; | background-color: #181e33; | ||
display: block; | display: block; | ||
| Line 174: | Line 316: | ||
padding: 7px; | padding: 7px; | ||
height: 80px; } | height: 80px; } | ||
| − | .header .logo img { | + | header.header .logo img { |
height: 100%; | height: 100%; | ||
width: auto; } | width: auto; } | ||
| − | .header .menu li { | + | header.header .menu li { |
cursor: default; | cursor: default; | ||
white-space: nowrap; } | white-space: nowrap; } | ||
| − | .header .menu > li { | + | header.header .menu > li { |
position: relative; } | position: relative; } | ||
| − | .header .menu .submenu { | + | header.header .menu .submenu { |
display: none; } | display: none; } | ||
| − | .header .menu .submenu a { | + | header.header .menu .submenu a { |
display: block; } | display: block; } | ||
| − | .header .nav-button { | + | header.header .nav-button { |
display: none; | display: none; | ||
height: 80px; | height: 80px; | ||
| Line 192: | Line 334: | ||
padding: 10px; | padding: 10px; | ||
position: absolute; | position: absolute; | ||
| − | top: | + | top: 18px; |
width: 80px; } | width: 80px; } | ||
| − | .header .nav-button i { | + | header.header .nav-button i { |
background-color: #dde5ee; | background-color: #dde5ee; | ||
height: 2px; | height: 2px; | ||
| Line 204: | Line 346: | ||
transition: background-color 0.3s 0s; | transition: background-color 0.3s 0s; | ||
width: 30px; } | width: 30px; } | ||
| − | .header .nav-button i::before, .header .nav-button i::after { | + | header.header .nav-button i::before, header.header .nav-button i::after { |
background-color: #dde5ee; | background-color: #dde5ee; | ||
backface-visibility: hidden; | backface-visibility: hidden; | ||
| Line 213: | Line 355: | ||
transition: transform 0.3s 0s; | transition: transform 0.3s 0s; | ||
width: 100%; } | width: 100%; } | ||
| − | .header .nav-button i::before { | + | header.header .nav-button i::before { |
transform: translateY(-8px); } | transform: translateY(-8px); } | ||
| − | .header .nav-button i::after { | + | header.header .nav-button i::after { |
transform: translateY(8px); } | transform: translateY(8px); } | ||
| − | .header.sticky { | + | header.header.sticky { |
position: fixed; | position: fixed; | ||
top: 0; | top: 0; | ||
| Line 229: | Line 371: | ||
@media (min-width: 769px) { | @media (min-width: 769px) { | ||
| − | .header .navigation { | + | header.header .navigation { |
position: relative; | position: relative; | ||
z-index: 200; | z-index: 200; | ||
| Line 236: | Line 378: | ||
font-size: 18px; | font-size: 18px; | ||
font-weight: 400; } | font-weight: 400; } | ||
| − | .header .menu { | + | header.header .menu { |
width: 40%; } | width: 40%; } | ||
| − | .header .menu > li { | + | header.header .menu > li { |
float: left; | float: left; | ||
height: 80px; } | height: 80px; } | ||
| − | .header .menu > li > span { | + | header.header .menu > li > span { |
color: #dde5ee; | color: #dde5ee; | ||
line-height: 80px; | line-height: 80px; | ||
padding: 0px 20px; } | padding: 0px 20px; } | ||
| − | .header .menu > li .submenu { | + | header.header .menu > li .submenu { |
position: absolute; | position: absolute; | ||
top: 80px; | top: 80px; | ||
| Line 253: | Line 395: | ||
z-index: -1; | z-index: -1; | ||
min-width: 200px; } | min-width: 200px; } | ||
| − | .header .menu > li .submenu a { | + | header.header .menu > li .submenu a { |
color: #dde5ee; | color: #dde5ee; | ||
padding: 15px 20px; | padding: 15px 20px; | ||
text-decoration: none; } | text-decoration: none; } | ||
| − | .header .menu > li .submenu a:hover { | + | header.header .menu > li .submenu a:hover { |
background-color: rgba(80, 177, 190, 0.1); } | background-color: rgba(80, 177, 190, 0.1); } | ||
| − | .header .menu > li:hover { | + | header.header .menu > li:hover { |
background-color: rgba(80, 177, 190, 0.1); } | background-color: rgba(80, 177, 190, 0.1); } | ||
| − | .header .menu > li:hover .submenu { | + | header.header .menu > li:hover .submenu { |
display: block; } | display: block; } | ||
| − | .header .menu-left { | + | header.header .menu-left { |
float: left; } | float: left; } | ||
| − | .header .menu-left .submenu { | + | header.header .menu-left .submenu { |
left: 0; } | left: 0; } | ||
| − | .header .menu-right { | + | header.header .menu-right { |
float: right; } | float: right; } | ||
| − | .header .menu-right > li { | + | header.header .menu-right > li { |
float: right; } | float: right; } | ||
| − | .header .menu-right .submenu { | + | header.header .menu-right .submenu { |
right: 0; } } | right: 0; } } | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
| − | .header .nav-button { | + | header.header .nav-button { |
display: block; } | display: block; } | ||
| − | .header .navigation { | + | header.header .navigation { |
background-color: #181e33; | background-color: #181e33; | ||
border-top: 2px solid #50b1be; | border-top: 2px solid #50b1be; | ||
| Line 286: | Line 428: | ||
overflow: auto; | overflow: auto; | ||
bottom: 0px; | bottom: 0px; | ||
| − | top: | + | top: 98px; |
left: 0; | left: 0; | ||
transform: translateX(-100%); | transform: translateX(-100%); | ||
| Line 294: | Line 436: | ||
z-index: 100; | z-index: 100; | ||
padding-top: 10px; } | padding-top: 10px; } | ||
| − | .header .menu > li > span { | + | header.header .menu > li > span { |
padding: 0 20px; | padding: 0 20px; | ||
line-height: 60px; | line-height: 60px; | ||
display: block; } | display: block; } | ||
| − | .header .menu .submenu { | + | header.header .menu .submenu { |
background-color: rgba(80, 177, 190, 0.1); } | background-color: rgba(80, 177, 190, 0.1); } | ||
| − | .header .menu .submenu a { | + | header.header .menu .submenu a { |
padding: 0 30px; | padding: 0 30px; | ||
line-height: 60px; | line-height: 60px; | ||
color: #dde5ee; } | color: #dde5ee; } | ||
| − | .header .menu .menu-item-branch .label::before { | + | header.header .menu .menu-item-branch .label::before { |
content: '+'; | content: '+'; | ||
padding-right: 10px; } | padding-right: 10px; } | ||
| − | .header .menu .menu-item-branch.open .label::before { | + | header.header .menu .menu-item-branch.open .label::before { |
content: '-'; } | content: '-'; } | ||
| − | .header .menu .menu-item-branch.open .submenu { | + | header.header .menu .menu-item-branch.open .submenu { |
display: block; } | display: block; } | ||
.nav-shown { | .nav-shown { | ||
| Line 323: | Line 465: | ||
top: 0px; | top: 0px; | ||
z-index: 1; } | z-index: 1; } | ||
| − | .nav-shown .navigation { | + | .nav-shown header.header .navigation { |
opacity: 1; | opacity: 1; | ||
transform: translateX(0); } | transform: translateX(0); } | ||
| − | .nav-shown .nav-button i { | + | .nav-shown header.header .nav-button i { |
background-color: transparent; } | background-color: transparent; } | ||
| − | .nav-shown .nav-button i::before { | + | .nav-shown header.header .nav-button i::before { |
transform: translateY(0) rotate(-45deg); } | transform: translateY(0) rotate(-45deg); } | ||
| − | .nav-shown .nav-button i::after { | + | .nav-shown header.header .nav-button i::after { |
transform: translateY(0) rotate(45deg); } } | transform: translateY(0) rotate(45deg); } } | ||
| Line 442: | Line 584: | ||
top: 0px; } | top: 0px; } | ||
#reef #reef-bg .split-right, #reef #reef-bg .split-left { | #reef #reef-bg .split-right, #reef #reef-bg .split-left { | ||
| − | background-image: url(layer-bg.png); } | + | background-image: url(https://static.igem.org/mediawiki/2018/f/fe/T--Tartu_TUIT--layer-bg-1.png); } |
#reef #reef-corals-first { | #reef #reef-corals-first { | ||
top: 0px; } | top: 0px; } | ||
#reef #reef-corals-first .split-right, #reef #reef-corals-first .split-left { | #reef #reef-corals-first .split-right, #reef #reef-corals-first .split-left { | ||
| − | background-image: url(layer-first.png); } | + | background-image: url(https://static.igem.org/mediawiki/2018/8/82/T--Tartu_TUIT--layer-first.png); } |
#reef #reef-corals-second { | #reef #reef-corals-second { | ||
top: 0px; } | top: 0px; } | ||
#reef #reef-corals-second .split-left, #reef #reef-corals-second .split-right { | #reef #reef-corals-second .split-left, #reef #reef-corals-second .split-right { | ||
| − | background-image: url(layer-second.png); } | + | background-image: url(https://static.igem.org/mediawiki/2018/b/b2/T--Tartu_TUIT--layer-second.png); } |
#reef #reef-corals-third { | #reef #reef-corals-third { | ||
bottom: 0px; } | bottom: 0px; } | ||
#reef #reef-corals-third .split-left, #reef #reef-corals-third .split-right { | #reef #reef-corals-third .split-left, #reef #reef-corals-third .split-right { | ||
| − | background-image: url(layer-third.png); } | + | background-image: url(https://static.igem.org/mediawiki/2018/4/4d/T--Tartu_TUIT--layer-third.png); } |
#reef #reef-corals-zero { | #reef #reef-corals-zero { | ||
bottom: 0px; } | bottom: 0px; } | ||
#reef #reef-corals-zero .split-left, #reef #reef-corals-zero .split-right { | #reef #reef-corals-zero .split-left, #reef #reef-corals-zero .split-right { | ||
| − | background-image: url(layer-zero.png); } | + | background-image: url(https://static.igem.org/mediawiki/2018/c/c9/T--Tartu_TUIT--layer-zero.png); } |
#reef #reef-corals-zero .split-right { | #reef #reef-corals-zero .split-right { | ||
filter: none; | filter: none; | ||
| − | background-image: url(layer-zero-after.png); } | + | background-image: url(https://static.igem.org/mediawiki/2018/0/0a/T--Tartu_TUIT--layer-zero-after.png); } |
#process { | #process { | ||
| Line 509: | Line 651: | ||
margin: 0 auto 100px; } | margin: 0 auto 100px; } | ||
#molecule .map .background { | #molecule .map .background { | ||
| − | background-image: url(molecule.png); | + | background-image: url(https://static.igem.org/mediawiki/2018/3/33/T--Tartu_TUIT--molecule.png); |
background-size: 100%; | background-size: 100%; | ||
position: relative; | position: relative; | ||
| Line 622: | Line 764: | ||
font-size: 25px; | font-size: 25px; | ||
font-weight: 900; } | font-weight: 900; } | ||
| + | |||
| + | .notebook table, .article table { | ||
| + | background-color: transparent; | ||
| + | color: #dde5ee; | ||
| + | border-collapse: collapse; } | ||
| + | .notebook table td, .article table td { | ||
| + | background-color: transparent; | ||
| + | border: 1px solid rgba(221, 229, 238, 0.5); | ||
| + | padding: 3px 5px; } | ||
| + | |||
| + | .article table { | ||
| + | width: 100%; | ||
| + | margin-bottom: 30px; } | ||
| + | .article table td { | ||
| + | padding: 10px 13px; } | ||
.notebook { | .notebook { | ||
color: #dde5ee; | color: #dde5ee; | ||
| − | margin-top: 100px; } | + | margin-top: 100px; |
| + | font-size: 18px; } | ||
.notebook p, .notebook h3 { | .notebook p, .notebook h3 { | ||
margin: 0; } | margin: 0; } | ||
| Line 631: | Line 789: | ||
padding-bottom: 15px; | padding-bottom: 15px; | ||
font-size: 22px; | font-size: 22px; | ||
| − | margin-top: -5px; } | + | margin-top: -5px; |
| + | font-weight: 400; } | ||
| + | .notebook .h3 { | ||
| + | text-align: left; | ||
| + | font-size: 22px; | ||
| + | font-weight: 400; } | ||
.notebook p { | .notebook p { | ||
padding-bottom: 10px; | padding-bottom: 10px; | ||
| Line 646: | Line 809: | ||
.notebook .images-two img { | .notebook .images-two img { | ||
max-width: 50%; } | max-width: 50%; } | ||
| − | .notebook .images-height | + | .notebook .images-height { |
| − | height: 100%; } | + | padding-bottom: 0; } |
| + | .notebook .images-height img { | ||
| + | max-width: initial; | ||
| + | height: 100%; | ||
| + | margin-right: 0px; } | ||
| + | .notebook .pt { | ||
| + | padding-top: 20px; } | ||
| + | .notebook table { | ||
| + | color: #dde5ee; | ||
| + | border-collapse: collapse; } | ||
| + | .notebook table td { | ||
| + | border: 1px solid rgba(221, 229, 238, 0.5); | ||
| + | padding: 3px 5px; } | ||
| + | .notebook ul, .notebook ol { | ||
| + | margin: 0; | ||
| + | padding-left: 18px; } | ||
.notebook .event { | .notebook .event { | ||
width: 1000px; | width: 1000px; | ||
| Line 682: | Line 860: | ||
.notebook-red .details { | .notebook-red .details { | ||
| − | |||
| − | |||
border-left: 3px solid #ea2d30; } | border-left: 3px solid #ea2d30; } | ||
.notebook-red .bullet { | .notebook-red .bullet { | ||
box-shadow: 0 0 5px #fff, 0 0 10px #ea2d30, 0 0 15px #ea2d30, 0 0 17px #ea2d30, 0 0 30px #ea2d30; } | box-shadow: 0 0 5px #fff, 0 0 10px #ea2d30, 0 0 15px #ea2d30, 0 0 17px #ea2d30, 0 0 30px #ea2d30; } | ||
| + | |||
| + | .notebook-blue a { | ||
| + | color: #50b1be; } | ||
| + | |||
| + | .notebook-blue .details { | ||
| + | border-left: 3px solid #50b1be; } | ||
| + | |||
| + | .notebook-blue .last .details { | ||
| + | border-left: 0px none; } | ||
| + | |||
| + | .notebook-blue .bullet { | ||
| + | box-shadow: 0 0 5px #fff, 0 0 10px #50b1be, 0 0 15px #50b1be, 0 0 17px #50b1be, 0 0 30px #50b1be; } | ||
| + | |||
| + | .actions { | ||
| + | text-align: center; | ||
| + | padding: 50px; } | ||
| + | .actions .button { | ||
| + | box-shadow: 0 0 5px #fff, 0 0 10px #50b1be, 0 0 15px #50b1be, 0 0 17px #50b1be, 0 0 30px #50b1be; | ||
| + | background-color: #dde5ee; | ||
| + | color: #181e33; | ||
| + | text-decoration: none; | ||
| + | padding: 20px; } | ||
| + | |||
</style> | </style> | ||
Latest revision as of 12:38, 5 November 2018