Difference between revisions of "Template:TU Darmstadt/CSS"
| (8 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<html> | <html> | ||
| − | <style> | + | <style type="text/css"> |
/* latin-ext */ | /* latin-ext */ | ||
@font-face { | @font-face { | ||
| Line 114: | Line 114: | ||
src: url(https://static.igem.org/mediawiki/2018/f/f9/T--TU_Darmstadt--Levenim_MT-Bold.ttf); | src: url(https://static.igem.org/mediawiki/2018/f/f9/T--TU_Darmstadt--Levenim_MT-Bold.ttf); | ||
} | } | ||
| + | </style> | ||
| + | |||
| + | <style type="text/css"> | ||
#mw-content-text { | #mw-content-text { | ||
| Line 120: | Line 123: | ||
min-height: calc(100vh - 21px); | min-height: calc(100vh - 21px); | ||
} | } | ||
| − | + | ||
footer { | footer { | ||
order: 2; | order: 2; | ||
| Line 132: | Line 135: | ||
left: 435px; | left: 435px; | ||
} | } | ||
| − | + | ||
.team-member { | .team-member { | ||
display: flex; | display: flex; | ||
| Line 138: | Line 141: | ||
margin-top: 20px; | margin-top: 20px; | ||
} | } | ||
| − | + | ||
.team-member > p { | .team-member > p { | ||
margin-top: 0; | margin-top: 0; | ||
flex-basis: 200px; | flex-basis: 200px; | ||
} | } | ||
| − | + | ||
.team-member > .text { | .team-member > .text { | ||
flex: 1; | flex: 1; | ||
| Line 151: | Line 154: | ||
min-height: 200px; | min-height: 200px; | ||
} | } | ||
| − | + | ||
#HQ_page .team-member p.name { | #HQ_page .team-member p.name { | ||
margin-top: -7px; | margin-top: -7px; | ||
| Line 158: | Line 161: | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
| − | + | ||
#HQ_page .team-member p.sosumi { | #HQ_page .team-member p.sosumi { | ||
font-size: 17px; | font-size: 17px; | ||
| Line 164: | Line 167: | ||
line-height: 19px; | line-height: 19px; | ||
} | } | ||
| − | + | ||
footer .social { | footer .social { | ||
display: flex; | display: flex; | ||
flex-direction: row; | flex-direction: row; | ||
} | } | ||
| − | + | ||
footer .social img { | footer .social img { | ||
height: 40px; | height: 40px; | ||
} | } | ||
| − | + | ||
.caption { | .caption { | ||
padding-left: 15px; | padding-left: 15px; | ||
| Line 179: | Line 182: | ||
margin: 0 30px 20px; | margin: 0 30px 20px; | ||
} | } | ||
| − | + | ||
.caption p { | .caption p { | ||
font-size: 13px !important; | font-size: 13px !important; | ||
} | } | ||
| − | + | ||
.mw-headline { | .mw-headline { | ||
padding-top: 140px; | padding-top: 140px; | ||
| Line 189: | Line 192: | ||
pointer-events: none; | pointer-events: none; | ||
} | } | ||
| − | + | ||
h2 .mw-headline { | h2 .mw-headline { | ||
padding-top: 0; | padding-top: 0; | ||
margin-top: 0; | margin-top: 0; | ||
} | } | ||
| − | + | ||
.igem_2018_team_column_wrapper img { | .igem_2018_team_column_wrapper img { | ||
max-width: 100%; | max-width: 100%; | ||
height: auto; | height: auto; | ||
} | } | ||
| − | + | ||
.wikitable { | .wikitable { | ||
margin: 0 auto !important; | margin: 0 auto !important; | ||
} | } | ||
| − | + | ||
.show-menu li, .show-menu a { | .show-menu li, .show-menu a { | ||
color: white !important; | color: white !important; | ||
transition-delay: 0s; | transition-delay: 0s; | ||
} | } | ||
| − | + | ||
nav { | nav { | ||
position: fixed; | position: fixed; | ||
| Line 216: | Line 219: | ||
background: white; | background: white; | ||
z-index: 100; | z-index: 100; | ||
| + | top: 17px; | ||
} | } | ||
| − | + | ||
nav img { | nav img { | ||
height: 2em; | height: 2em; | ||
| Line 223: | Line 227: | ||
top: 16px; | top: 16px; | ||
} | } | ||
| − | + | ||
nav .title { | nav .title { | ||
font-family: 'Levenim MT' !important; | font-family: 'Levenim MT' !important; | ||
| Line 233: | Line 237: | ||
text-decoration: none !important; | text-decoration: none !important; | ||
} | } | ||
| − | + | ||
nav .title::after { | nav .title::after { | ||
content: ""; | content: ""; | ||
| Line 245: | Line 249: | ||
transition: 0.2s; | transition: 0.2s; | ||
} | } | ||
| − | + | ||
.show-menu .title::after { | .show-menu .title::after { | ||
transition-delay: 0s; | transition-delay: 0s; | ||
background-color: white; | background-color: white; | ||
} | } | ||
| − | + | ||
nav li { | nav li { | ||
color: black !important; | color: black !important; | ||
| Line 256: | Line 260: | ||
transition-delay: 0.2s; | transition-delay: 0.2s; | ||
} | } | ||
| − | + | ||
nav a { | nav a { | ||
cursor: pointer; | cursor: pointer; | ||
| Line 263: | Line 267: | ||
transition-delay: 0.2s; | transition-delay: 0.2s; | ||
} | } | ||
| − | + | ||
nav a:hover { | nav a:hover { | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
| − | + | ||
nav:before { | nav:before { | ||
content: ""; | content: ""; | ||
| Line 279: | Line 283: | ||
z-index: -2; | z-index: -2; | ||
} | } | ||
| − | + | ||
nav.show-menu:before { | nav.show-menu:before { | ||
background-color: #CC1C43; | background-color: #CC1C43; | ||
height: 400px; | height: 400px; | ||
} | } | ||
| − | + | ||
nav > ul { | nav > ul { | ||
font-size: 20px; | font-size: 20px; | ||
| Line 295: | Line 299: | ||
transition: height 0.2s ease-in-out; | transition: height 0.2s ease-in-out; | ||
} | } | ||
| − | + | ||
.show-menu > ul { | .show-menu > ul { | ||
height: 350px; | height: 350px; | ||
transition: height 0.4s ease-in-out; | transition: height 0.4s ease-in-out; | ||
} | } | ||
| − | + | ||
nav > ul > li { | nav > ul > li { | ||
list-style: none; | list-style: none; | ||
| Line 308: | Line 312: | ||
top: 5px; | top: 5px; | ||
} | } | ||
| − | + | ||
nav .multiple ul { | nav .multiple ul { | ||
display: none; | display: none; | ||
| Line 317: | Line 321: | ||
font-size: 14px; | font-size: 14px; | ||
} | } | ||
| − | + | ||
nav .multiple > a { | nav .multiple > a { | ||
padding-bottom: 20px; | padding-bottom: 20px; | ||
} | } | ||
| − | + | ||
nav .multiple:hover ul { | nav .multiple:hover ul { | ||
display: block; | display: block; | ||
} | } | ||
| − | + | ||
nav .multiple ul li { | nav .multiple ul li { | ||
list-style: none; | list-style: none; | ||
} | } | ||
| − | + | ||
nav .multiple .sub { | nav .multiple .sub { | ||
padding-left: 15px; | padding-left: 15px; | ||
} | } | ||
| − | + | ||
#globalWrapper { | #globalWrapper { | ||
font-size: 16px !important; | font-size: 16px !important; | ||
font-family: 'Raleway', sans-serif; | font-family: 'Raleway', sans-serif; | ||
} | } | ||
| − | + | ||
#HQ_page p { | #HQ_page p { | ||
font-size: 16px; | font-size: 16px; | ||
font-family: 'Raleway', sans-serif !important; | font-family: 'Raleway', sans-serif !important; | ||
} | } | ||
| − | + | ||
.abstract h3 { | .abstract h3 { | ||
display: inline; | display: inline; | ||
| Line 352: | Line 356: | ||
font-family: 'Raleway', sans-serif !important; | font-family: 'Raleway', sans-serif !important; | ||
} | } | ||
| − | + | ||
.abstract h3::after { | .abstract h3::after { | ||
content: "." !important; | content: "." !important; | ||
| Line 358: | Line 362: | ||
position: static !important; | position: static !important; | ||
} | } | ||
| − | + | ||
.igem_2018_team_content { | .igem_2018_team_content { | ||
padding: 100px 40px 40px 405px; | padding: 100px 40px 40px 405px; | ||
| Line 365: | Line 369: | ||
z-index: 10; | z-index: 10; | ||
} | } | ||
| − | + | ||
.igem_2018_team_column_wrapper { | .igem_2018_team_column_wrapper { | ||
z-index: 50; | z-index: 50; | ||
| Line 371: | Line 375: | ||
padding-right: calc(100% - 850px); | padding-right: calc(100% - 850px); | ||
padding-left: 30px; | padding-left: 30px; | ||
| − | |||
padding-top: 60px; | padding-top: 60px; | ||
pointer-events: all; | pointer-events: all; | ||
word-break: break-word; | word-break: break-word; | ||
} | } | ||
| − | + | ||
.igem_2018_team_content h2, .igem_2018_team_content h3, .igem_2018_team_content h4, .igem_2018_team_content h5 { | .igem_2018_team_content h2, .igem_2018_team_content h3, .igem_2018_team_content h4, .igem_2018_team_content h5 { | ||
font-family: 'Caudex'; | font-family: 'Caudex'; | ||
| Line 384: | Line 387: | ||
position: relative; | position: relative; | ||
} | } | ||
| − | + | ||
.igem_2018_team_content h2 { | .igem_2018_team_content h2 { | ||
padding-bottom: 10px; | padding-bottom: 10px; | ||
| Line 393: | Line 396: | ||
line-height: 80px; | line-height: 80px; | ||
} | } | ||
| − | + | ||
.igem_2018_team_content h2:after, .igem_2018_team_content h3:after, .igem_2018_team_content h2:before { | .igem_2018_team_content h2:after, .igem_2018_team_content h3:after, .igem_2018_team_content h2:before { | ||
content: ""; | content: ""; | ||
| Line 404: | Line 407: | ||
bottom: 0; | bottom: 0; | ||
} | } | ||
| − | + | ||
.igem_2018_team_content h2:before { | .igem_2018_team_content h2:before { | ||
top: 0; | top: 0; | ||
bottom: inherit; | bottom: inherit; | ||
} | } | ||
| − | + | ||
.page-title.notebook ~ .igem_2018_team_content #toc { | .page-title.notebook ~ .igem_2018_team_content #toc { | ||
display: none; | display: none; | ||
} | } | ||
| − | + | ||
@media (max-width: 550px) { | @media (max-width: 550px) { | ||
.igem_2018_team_content h2 { | .igem_2018_team_content h2 { | ||
| Line 420: | Line 423: | ||
} | } | ||
} | } | ||
| − | + | ||
@media (min-width: 1024px) and (max-width: 1230px) { | @media (min-width: 1024px) and (max-width: 1230px) { | ||
nav > ul { | nav > ul { | ||
| Line 426: | Line 429: | ||
top: 41px; | top: 41px; | ||
} | } | ||
| − | + | ||
nav > ul > li { | nav > ul > li { | ||
padding: 0 4px; | padding: 0 4px; | ||
} | } | ||
} | } | ||
| − | + | ||
@media (max-width: 1024px) { | @media (max-width: 1024px) { | ||
body { | body { | ||
overflow-x: hidden; | overflow-x: hidden; | ||
} | } | ||
| − | + | ||
footer .social img { | footer .social img { | ||
height: 30px; | height: 30px; | ||
} | } | ||
| − | + | ||
#toc { | #toc { | ||
display: none; | display: none; | ||
} | } | ||
| − | + | ||
.igem_2018_team_content { | .igem_2018_team_content { | ||
padding: 0; | padding: 0; | ||
} | } | ||
| − | + | ||
.igem_2018_team_column_wrapper { | .igem_2018_team_column_wrapper { | ||
padding: 30px 0; | padding: 30px 0; | ||
| Line 456: | Line 459: | ||
background: white; | background: white; | ||
} | } | ||
| − | + | ||
.igem_2018_team_column_wrapper img, .igem_2018_team_column_wrapper video { | .igem_2018_team_column_wrapper img, .igem_2018_team_column_wrapper video { | ||
max-width: 100%; | max-width: 100%; | ||
height: auto; | height: auto; | ||
} | } | ||
| − | + | ||
.igem_2018_team_column_wrapper .floatright { | .igem_2018_team_column_wrapper .floatright { | ||
float: left; | float: left; | ||
| Line 474: | Line 477: | ||
margin: 0 20px; | margin: 0 20px; | ||
} | } | ||
| − | + | ||
nav { | nav { | ||
position: static; | position: static; | ||
} | } | ||
| − | + | ||
nav .title::after { display: none; } | nav .title::after { display: none; } | ||
| − | + | ||
.burger { | .burger { | ||
width: 70px; | width: 70px; | ||
| Line 490: | Line 493: | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
| − | + | ||
.burger-inner { | .burger-inner { | ||
margin-top: 10px; | margin-top: 10px; | ||
| Line 501: | Line 504: | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
| − | + | ||
.bun, .patty { | .bun, .patty { | ||
height: 3px; | height: 3px; | ||
| Line 513: | Line 516: | ||
position: relative; | position: relative; | ||
} | } | ||
| − | + | ||
.burger-bg { | .burger-bg { | ||
position: fixed; | position: fixed; | ||
| Line 525: | Line 528: | ||
transition: .4s ease-in-out; | transition: .4s ease-in-out; | ||
} | } | ||
| − | + | ||
body.nav-in { | body.nav-in { | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
| − | + | ||
body.nav-in .burger-bg { | body.nav-in .burger-bg { | ||
transform: scale(60); | transform: scale(60); | ||
} | } | ||
| − | + | ||
body.nav-in .bun:first-of-type { | body.nav-in .bun:first-of-type { | ||
transform: rotate(45deg); | transform: rotate(45deg); | ||
top: 8px; | top: 8px; | ||
} | } | ||
| − | + | ||
body.nav-in .patty { | body.nav-in .patty { | ||
transform: scaleX(0); | transform: scaleX(0); | ||
} | } | ||
| − | + | ||
body.nav-in .bun:last-of-type { | body.nav-in .bun:last-of-type { | ||
transform: rotate(-45deg); | transform: rotate(-45deg); | ||
top: -8px; | top: -8px; | ||
} | } | ||
| − | + | ||
nav > ul { | nav > ul { | ||
transform: translateY(-100vh); | transform: translateY(-100vh); | ||
| Line 563: | Line 566: | ||
height: auto !important; | height: auto !important; | ||
} | } | ||
| − | + | ||
nav > ul li, nav > ul li a { | nav > ul li, nav > ul li a { | ||
color: white !important; | color: white !important; | ||
} | } | ||
| − | + | ||
nav > ul li { | nav > ul li { | ||
display: block; | display: block; | ||
margin-bottom: 5px; | margin-bottom: 5px; | ||
} | } | ||
| − | + | ||
nav > ul li.multiple > ul { | nav > ul li.multiple > ul { | ||
padding: 5px 0 5px 20px; | padding: 5px 0 5px 20px; | ||
| Line 579: | Line 582: | ||
position: static; | position: static; | ||
} | } | ||
| − | + | ||
nav > ul li.multiple:hover > ul { | nav > ul li.multiple:hover > ul { | ||
display: none; | display: none; | ||
} | } | ||
| − | + | ||
nav > ul li.multiple.clicked > ul { | nav > ul li.multiple.clicked > ul { | ||
display: block !important; | display: block !important; | ||
} | } | ||
| − | + | ||
nav > ul:hover::before { | nav > ul:hover::before { | ||
height: 0 !important; | height: 0 !important; | ||
} | } | ||
| − | + | ||
body.nav-in nav > ul { | body.nav-in nav > ul { | ||
transform: translateY(0); | transform: translateY(0); | ||
} | } | ||
| − | + | ||
.team-member { | .team-member { | ||
flex-direction: column; | flex-direction: column; | ||
align-items: center; | align-items: center; | ||
} | } | ||
| − | + | ||
.team-member > .text { | .team-member > .text { | ||
margin: 10px 0; | margin: 10px 0; | ||
| Line 609: | Line 612: | ||
max-width: 500px; | max-width: 500px; | ||
} | } | ||
| − | + | ||
.team-member > p { | .team-member > p { | ||
width: 100%; | width: 100%; | ||
| Line 615: | Line 618: | ||
} | } | ||
} | } | ||
| − | + | ||
#toc { | #toc { | ||
position: fixed; | position: fixed; | ||
left: 10px; | left: 10px; | ||
top: 190px; | top: 190px; | ||
| + | width: 100%; | ||
border: none; | border: none; | ||
background: transparent; | background: transparent; | ||
| Line 626: | Line 630: | ||
max-width: 400px; | max-width: 400px; | ||
} | } | ||
| − | + | ||
@media (min-width: 1680px) { | @media (min-width: 1680px) { | ||
#toc { | #toc { | ||
| Line 632: | Line 636: | ||
} | } | ||
} | } | ||
| − | + | ||
#toc a { | #toc a { | ||
color: #333; | color: #333; | ||
| Line 640: | Line 644: | ||
border-left: 3px solid transparent; | border-left: 3px solid transparent; | ||
} | } | ||
| − | + | ||
#toc .toctext { | #toc .toctext { | ||
flex: 1; | flex: 1; | ||
padding-left: 5px; | padding-left: 5px; | ||
} | } | ||
| − | + | ||
#toc .toclevel-1 > a, #toctitle { | #toc .toclevel-1 > a, #toctitle { | ||
display: none; | display: none; | ||
} | } | ||
| − | + | ||
#toc .toclevel-2 > a { | #toc .toclevel-2 > a { | ||
padding: 0 10px; | padding: 0 10px; | ||
| Line 655: | Line 659: | ||
margin-left: 0; | margin-left: 0; | ||
} | } | ||
| − | + | ||
#toc .active { | #toc .active { | ||
border-left: 3px solid rgb(153, 51, 51) !important; | border-left: 3px solid rgb(153, 51, 51) !important; | ||
} | } | ||
| − | + | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
| − | + | ||
| − | + | ||
| − | + | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
/* DEFAULT WIKI SETTINGS */ | /* DEFAULT WIKI SETTINGS */ | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
| − | + | ||
| − | + | ||
| − | + | #home_logo, #sideMenu { display:none; } | |
| − | + | #sideMenu, #top_title, .patrollink {display:none;} | |
| − | + | #content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;} | |
| − | + | body {background-color:white; } | |
| − | + | ||
| − | + | .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;} | |
| − | + | ||
| − | + | ||
</style> | </style> | ||
</html> | </html> | ||
Latest revision as of 17:26, 17 October 2018