Difference between revisions of "Template:TU Darmstadt/CSS"
| (32 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 128: | Line 131: | ||
border-top: 20px; | border-top: 20px; | ||
position: relative; | position: relative; | ||
| − | width: 100vw; | + | width: calc(100vw - 490px); |
max-width: 820px; | max-width: 820px; | ||
left: 435px; | left: 435px; | ||
} | } | ||
| − | + | ||
| + | .team-member { | ||
| + | display: flex; | ||
| + | align-items: flex-start; | ||
| + | margin-top: 20px; | ||
| + | } | ||
| + | |||
| + | .team-member > p { | ||
| + | margin-top: 0; | ||
| + | flex-basis: 200px; | ||
| + | } | ||
| + | |||
| + | .team-member > .text { | ||
| + | flex: 1; | ||
| + | margin-left: 10px; | ||
| + | padding-left: 20px; | ||
| + | border-left: 2px solid gray; | ||
| + | min-height: 200px; | ||
| + | } | ||
| + | |||
| + | #HQ_page .team-member p.name { | ||
| + | margin-top: -7px; | ||
| + | font-size: 20px; | ||
| + | font-family: 'Caudex', serif !important; | ||
| + | font-weight: bold; | ||
| + | } | ||
| + | |||
| + | #HQ_page .team-member p.sosumi { | ||
| + | font-size: 17px; | ||
| + | margin-top: -10px; | ||
| + | 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 147: | 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: | + | padding-top: 140px; |
| − | margin-top: - | + | margin-top: -140px; |
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 { | |
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 184: | Line 219: | ||
background: white; | background: white; | ||
z-index: 100; | z-index: 100; | ||
| + | top: 17px; | ||
} | } | ||
| − | + | ||
nav img { | nav img { | ||
height: 2em; | height: 2em; | ||
| Line 191: | Line 227: | ||
top: 16px; | top: 16px; | ||
} | } | ||
| − | + | ||
nav .title { | nav .title { | ||
font-family: 'Levenim MT' !important; | font-family: 'Levenim MT' !important; | ||
| Line 201: | Line 237: | ||
text-decoration: none !important; | text-decoration: none !important; | ||
} | } | ||
| − | + | ||
nav .title::after { | nav .title::after { | ||
content: ""; | content: ""; | ||
| Line 213: | 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 224: | Line 260: | ||
transition-delay: 0.2s; | transition-delay: 0.2s; | ||
} | } | ||
| − | + | ||
nav a { | nav a { | ||
cursor: pointer; | cursor: pointer; | ||
| Line 231: | 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 247: | 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 263: | 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 276: | Line 312: | ||
top: 5px; | top: 5px; | ||
} | } | ||
| − | + | ||
nav .multiple ul { | nav .multiple ul { | ||
display: none; | display: none; | ||
| Line 285: | 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 320: | 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 326: | 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 333: | 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 339: | 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 352: | Line 387: | ||
position: relative; | position: relative; | ||
} | } | ||
| − | + | ||
.igem_2018_team_content h2 { | .igem_2018_team_content h2 { | ||
padding-bottom: 10px; | padding-bottom: 10px; | ||
| Line 361: | 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 372: | 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 388: | Line 423: | ||
} | } | ||
} | } | ||
| − | + | ||
| + | @media (min-width: 1024px) and (max-width: 1230px) { | ||
| + | nav > ul { | ||
| + | font-size: 15px; | ||
| + | top: 41px; | ||
| + | } | ||
| + | |||
| + | nav > ul > li { | ||
| + | padding: 0 4px; | ||
| + | } | ||
| + | } | ||
| + | |||
@media (max-width: 1024px) { | @media (max-width: 1024px) { | ||
body { | body { | ||
overflow-x: hidden; | overflow-x: hidden; | ||
} | } | ||
| − | + | ||
| + | footer .social img { | ||
| + | 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 409: | 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 424: | Line 474: | ||
width: auto; | width: auto; | ||
left: 0; | left: 0; | ||
| − | padding: | + | padding: 0; |
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 443: | Line 493: | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
| − | + | ||
.burger-inner { | .burger-inner { | ||
margin-top: 10px; | margin-top: 10px; | ||
| Line 454: | Line 504: | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
| − | + | ||
.bun, .patty { | .bun, .patty { | ||
height: 3px; | height: 3px; | ||
| Line 466: | Line 516: | ||
position: relative; | position: relative; | ||
} | } | ||
| − | + | ||
.burger-bg { | .burger-bg { | ||
position: fixed; | position: fixed; | ||
| Line 478: | 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); | ||
transition: 0.25s ease-in-out; | transition: 0.25s ease-in-out; | ||
| − | position: | + | position: fixed; |
z-index: 35; | z-index: 35; | ||
overflow-y: scroll; | overflow-y: scroll; | ||
| Line 516: | 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 532: | 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 { | ||
| + | flex-direction: column; | ||
| + | align-items: center; | ||
| + | } | ||
| + | |||
| + | .team-member > .text { | ||
| + | margin: 10px 0; | ||
| + | padding: 20px 0 0; | ||
| + | border-top: 2px solid gray; | ||
| + | border-left: none; | ||
| + | width: 100%; | ||
| + | max-width: 500px; | ||
| + | } | ||
| + | |||
| + | .team-member > p { | ||
| + | width: 100%; | ||
| + | max-width: 500px; | ||
} | } | ||
} | } | ||
| − | + | ||
#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 560: | Line 630: | ||
max-width: 400px; | max-width: 400px; | ||
} | } | ||
| − | + | ||
@media (min-width: 1680px) { | @media (min-width: 1680px) { | ||
#toc { | #toc { | ||
| Line 566: | Line 636: | ||
} | } | ||
} | } | ||
| − | + | ||
#toc a { | #toc a { | ||
color: #333; | color: #333; | ||
| + | display: flex; | ||
| + | padding: 0 10px; | ||
| + | margin-left: -10px; | ||
| + | border-left: 3px solid transparent; | ||
} | } | ||
| − | + | ||
| + | #toc .toctext { | ||
| + | flex: 1; | ||
| + | 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 580: | 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