Template:Marburg/style
/* DEFAULT OVERRIDES */
- top_title {
display:none; } html { height:100%; } body { height:100%; background-color: white; } ul{ list-style-type:none; list-style-image:none; line-height: unset; } li { margin-bottom: 0 !important; }
- globalWrapper {
height:100%; padding:0; }
- content {
position:absolute; top:18px; height:calc(100% - 18px); width:100%; margin:0; padding:0; }
- HQ_page {
height:100%; }
- HQ_page h1, h2, h3, h4, h5, h6 {
font-family: unset; } h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.17em; } h4 { font-size: 1.12em; } h5 { font-size: .83em; } h6 { font-size: .75em; }
- HQ_page p {
margin-top:18px; margin-bottom:18px; border: 0; font-size: 100%; font: inherit; }
- bodyContent {
height:100%; }
- mw-content-text {
position:absolute; top:0; height:100%; width:100%; font-family: Roboto; line-height: normal; }
- mw-content-text ul {
margin:0; } a { text-decoration: none; padding-right: 0px !important; } a:hover { text-decoration: none; } a:focus { text-decoration:none; }
- canvas {
position: fixed; top:0; left:0; z-index:-1; } /* - - - - - - - HEADER - - - - - - - */ header {
position: fixed;
top:18px; min-width: 300px; width: 100%; height: 80px; line-height: 80px; font-size: 18px; text-align: center; background-color:rgba(170,170,170,0.9); box-shadow: 0 0 50px 0 rgba(0,0,0,0.35); text-align: center; z-index: 10; transition: height 0.5s ease-in-out, line-height 0.5s ease-in-out, font-size 0.5s ease-in-out; } .header_wrapper { display: inline-block; height: 100%; text-align: left; } .shrink { height: 60px; line-height: 60px; font-size: 16px; } .header_logo { position: absolute; height: 100%; color:white; font-weight: bold; font-size:32px; animation: logo_fadeIn 1.0s ease-in-out; z-index: 1; } .burger { display: none; position: absolute; width: 23px; height: 23px;
top: calc(100% / 2 - 11.5px);
left: 15px; opacity: 0.65; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url(https://static.igem.org/mediawiki/2018/0/0e/T--Marburg--burger.svg); cursor:pointer; }
.menu_wrapper { opacity: 1; animation: menu_fadeIn 1s ease-in-out; }
@keyframes logo_fadeIn { from { opacity: 0; margin-left: -50px; } to { opacity: 1; margin-left: 0px; }} @keyframes menu_fadeIn { from { opacity: 0; } to { opacity: 1.0; } } /* - - - - - - - DROP DOWN - - - - - - - */
.menu { position: relative; margin: 0; padding: 0; height: 100%; font-weight: bold; } .menu::before { float:left; position: relative; content:""; width: 250px; height: 100px; } /* Button */ .menu li { position: relative; float: left; height: 100%; list-style-type: none; transition: background-color 0.2s ease-in-out; } .menu li a { display: block; color:#3b3b3b;
text-decoration: none;
padding: 0 15px 0 15px !important; } .menu li:hover { background-color: rgba(165,255,55,0.5);
}
.menu li:focus-within ul { visibility: visible;
max-height: 700px;
opacity: 1.0; } .menu li:hover ul { visibility: visible;
max-height: 700px;
opacity: 1.0; }
/* Container */ .menu li ul { visibility: hidden; max-height: 0; opacity: 0.0; font-weight: normal; position: absolute; left:0; padding:0; background-color: rgba(200,200,200, 0.87); text-align: left; overflow:hidden; box-shadow: 0px 9px 20px 0px rgba(0,0,0,0.2), inset 0px 35px 45px -35px rgba(0,0,0,0.5); transition: all 0.3s ease-in-out; }
/* Element */ .menu li ul li { display: block; padding: 0; width: 100%; min-width: 250px; line-height: 55px; white-space: nowrap; } .menu li ul li:hover { background-color:unset; } .menu li ul li a { transition: background-color 0.17s ease-in-out; } .menu li ul li a:hover { background-color: rgba(165,255,55,0.5); }
/* - - - - - - - MAIN - - - - - - - */ main { width: 100%; min-height: 100%; } /* main h1,h2,h3,h4,h5,h6 {
font-weight: normal; font-style: normal;
}*/
article { max-width: 900px; margin: 120px auto 120px auto; font-size: 1.9em; padding: 10px; }
section:first-child {
}
section { width: 100%;margin-top: 190px; text-align: center; }
section:not(:last-child) {
border-bottom:10px solid rgb(220,220,220);
}
.m_wrapper {
max-width: 900px;
display:inline-block;
}
.m_logo {
position: relative;
width: 100%;
height: 0;
padding-bottom: 57%;
margin-left: auto;
margin-right: auto;
margin-top: -80px;
margin-bottom: 50px;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
background-image: url(
);
animation: ml_fadeIn 1.5s ease-in-out;
text-align: center; }
.m_team {
background-position: center;
width: 100%;
height: 0;
padding-bottom:71%;
background-size: 100%;
background-repeat: no-repeat;
background-image: url(
);
animation: ml_fadeIn 1.0s ease-in-out;
}
@keyframes ml_fadeIn { from { opacity: 0; } to { opacity: 1; }}
.m_txt { display: inline-block; width: calc(100% - 20px); font-size: 24px; text-align: left; margin-bottom: 40px; padding:10px; }
/* - - - - - - - SCROLL - - - - - - - */
.btn_scroll_top {
position: fixed;
font-weight: bold;
color:darkgray;
width: 45px;
height: 45px;
right: 40px;
bottom: 115px;
background-image: url(
);
background-position: center;
background-size: contain;
cursor:pointer;
transition: opacity 0.5s, visibility 0.5s, transform 0.5s;
transition-timing-function: ease-in-out;
z-index: 10;
}
.btn_scroll_enabled { opacity: 0.5; visibility: visible; transform: translateY(10px); } .btn_scroll_enabled:hover { opacity: 0.35; transform:scale(1.05) translateY(10px); } .btn_scroll_disabled { opacity: 0; visibility: hidden; transform: translateY(-10px); }
/* - - - - - - - FOOTER - - - - - - - */ footer { width: 100%; height: 100px; background-color:rgb(180,180,180); margin-bottom: -19px; text-align: center; } .footer_wrapper { position: relative; display:inline-block;
max-width: 900px;
height: 100px; margin-bottom: -4px; text-align: left; } .footer_social { float:right; } footer img { float:left; width: 50px; opacity: 0.5; margin: 27px 8px 0 8px; transition: all 0.2s ease-in-out; } footer img:hover { margin: 22px 8px 0 8px; opacity: 1.0; }
/* - - - - - - - MOBILE - - - - - - - */ @media only screen and (max-width: 1100px) { .menu::before { content: unset; } .menu { display: inline-block; margin: 0 0 0 0; height: unset; } .menu li { width: 100%; } .menu >li>a{ background-color: rgba(150,150,150, 0.9);
line-height: 2.85em;
} .menu>li>ul{} .menu >li>a{ background-color: rgba(150,150,150, 0.9);
line-height: 2.85em;
} .menu li ul { position: relative; visibility: visible; max-height: unset; box-shadow: none; opacity: 1.0; } .menu li ul a { line-height: 2.5em; } .menu li:hover { background-color: unset; } .menu li ul li a:hover { background-color:unset; } .menu_wrapper { display: none; position: absolute; left:0; top:40px; height: calc(100vh - 40px); width: 100%; overflow-y: auto; font-size:1.1em; animation: none; }
header {
height: 40px; } .header_logo { transform: translateX(-50%); font-size:27px; line-height: 40px; } .header_logo { animation: none; top:0; left:50%; } .header_wrapper { width: 100%; } }