Template:Tuebingen/main.css

/* TODO should we put every non-shared style in a media query? */ /* TODO to overwrite iGEM defaults we should make all element-selectors more specific! */ /* TODO order all this */ /* TODO adapt the media query to exactly where the flexbox wraps into 3 lines (check if font permits 2 lines!) */

/* iGEM adaptions */

  1. content {

line-height: initial; }

  1. mainContainer .section div {

font-size: 16px; } /* end iGEM adaptions */

body { margin: 0; padding: 0; padding-left: 200px; transition: padding-left 1s; font-family: sans-serif; /* TODO adapt */ background-color: #ffffff !important; }

p { margin: 0; padding: 0; }

.MathJax img { border: none !important; max-width: initial !important; }

.MathJax_Display > span { text-align: center; }

.collapsed { margin-left: -140px; }

/* TODO can we also adapt to the set font-size? Or will this mess up the Initial? */

  1. mainContainer #mainHead h1 {

font-weight: normal; font-size: 90px; margin-top: 70px; padding-top: 0px; line-height: 120% }

  1. mainContainer table {

display: table; overflow-x: auto; white-space: nowrap; border: none; width: 100%; border-bottom: 2px solid #000; border-collapse: collapse; caption-side: bottom; max-width: 90%; margin: 0 auto; box-sizing: border-box; }

  1. mainContainer table > caption {

white-space: normal; margin: 10px auto; }

  1. mainContainer th {

border: none; padding: 4px 15px; border-top: 2px solid #000; border-bottom: 2px solid #000; }

  1. mainContainer td {

border: none; padding: 2px 15px; text-align: center; }

.singleContent img { border: 2px solid #000; max-width: 100%; margin: 0 auto; }

.multiContent img { border: 2px solid #000; max-width: 100%; margin: 0 auto; }

figure { background-color: #eee; max-width: 90%; margin: 5px auto; padding: 1em 1em; border-radius: 10px; box-sizing: border-box; }

figure img { border: 2px solid #000; max-width: 100%; display: block; margin: 0 auto; }

figure figcaption { text-align: center; }

  1. Footer {

min-height: 30vh; padding: 5vh 2vw; }

  1. sideBar {

position: fixed; top: 18px; left: 0; width: 200px; height: 100%;

background-color: #000; color: #fff;

transition: margin-left 1s; z-index: 1; }

  1. sideBar h1 {

font-size: 20px; font-weight: normal; }

  1. sideBarMenu {

height: 60px; margin: 0; padding: 0; position: relative; }

  1. sideBarMenu .homeButton {

list-style: none; position: absolute; left: 9px; top: 12px; height: 40px; width: 50px; background: url('https://static.igem.org/mediawiki/2018/e/ee/T--Tuebingen--bont_logo.png'); background-size: 50px 40px; }

  1. sideBarMenu .homeButton:hover {

opacity: 0.5; }

  1. sideBarMenu .menuButton {

list-style: none; position: absolute; right: 9px; top: 12px; background: url('https://static.igem.org/mediawiki/2018/f/f8/T--Tuebingen--close.svg'); background-size: 40px 40px; }

.collapsed #sideBarMenu .menuButton { background: url('https://static.igem.org/mediawiki/2018/b/b2/T--Tuebingen--menu.svg'); background-size: 40px 40px; }


  1. mainContainer {

width: 100%; }

  1. titleImage {

position: relative; top: 0; left: 0; width: 100%; z-index: -2; }

  1. titleImageOverlay {

position:absolute; top: 0; left: 0; width: 100%; z-index: -1; }

.singleContent { margin: 10px 80px; line-height: 150%; text-align: justify; }

.multiContent { margin: 40px 80px; line-height: 150%; text-align: justify; }

.multiContentBigMargin { margin: 140px 80px !important; }

.subSection > h2 { margin: 20px 80px 10px; display: flex; align-items: center; }

.subSection > h2:after { content: ""; display: inline-block; flex-grow: 1; height: 3px; margin: 0px 0px 0px 40px; background-image: radial-gradient(#000, #fff); } .multiContent > div { display: inline-block; vertical-align: middle; }

/* TODO to avoid breaking because of spaces, subtract 1%. This is a dirty hack, might replace this with a proper grid */ .half { width: 49%; }

.third { width: 32%; }

.quarter { width: 24%; }

  1. headNavigation {

position: sticky; /* TODO polyfill IE? */ top: 18px; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: stretch; min-height: 60px; margin: 0; padding: 0 50px; transition: top 0.5s;

background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.5)); z-index: 1; }

  1. headNavigation.myhidden {

top: -60px; }

  1. headNavigation > li {

flex-grow: 1; list-style: none; }

  1. headNavigation a {

text-decoration: none; color: #555; font-size: 120%; display: block; height: 100%; width: 100%; }

  1. headNavigation a > p {

display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; padding: 0.2em 0.5em; font-size: 20px; }

  1. headNavigation a:hover {

background-color: #ccc; }

  1. sideBarNavigation {

margin-top: 60px; padding: 0; text-align: center; }

  1. sideBarNavigation > li {

list-style: none; margin: 10px auto; }

  1. sideBarNavigation >li:hover::after {

content: ""; display: block; background-image: radial-gradient(#fff, #000); width: 80%; height: 3px; margin: 10px auto; transition: opacity 0.5s; opacity: 1; }

  1. sideBarNavigation >li::after {

content: ""; display: block; background-image: radial-gradient(#fff, #000); width: 80%; height: 3px; margin: 10px auto; transition: opacity 0.5s; opacity: 0; }

  1. sideBarNavigation a {

color: inherit; text-decoration: none; text-align: left; margin-left: 30px; display: block; height: 100%; width: 100%; font-size: 16px; }

.inactive { opacity: 0.5; }

  1. sideBar > #excludedInitial {

margin: 20px; border-radius: 50%; font-size: 150px; line-height: 160px;/* (width = height) - 2*margin*/ text-align: center;

background-color: #fff; color: #000; }

  1. includedInitial {

display: none; }

  1. sideBarSubNavigation { /* TODO not cascading */

padding: 0; text-align: center; color: #000; }

  1. sideBarSubNavigation > li {

list-style: none; display: block; margin: 20px 0 20px 30px; height: 40px; line-height: 40px; background-color: #ccc; position: relative; opacity: 0.6; transition: opacity 0.5s; }

  1. sideBarSubNavigation > li a {

text-decoration: none; color: inherit; display: inline-block; width: 100%; }

  1. sideBarSubNavigation > li::after {

display: inline-block; content: ""; position: absolute; right: -40px;

border-left: 40px solid #ccc; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: none; }

/* a little trick for the border */

  1. sideBarSubNavigation > li::before {

display: inline-block; content: ""; position: absolute; right: -42px; top: -2px;

border-left: 42px solid #000; border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-right: none; }


  1. sideBarSubNavigation > li:hover {

opacity: 1; }

  1. sideBarSubNavigation > .active {

opacity: 1; }

  1. mainContainer #meaningfulQuote {

font-size: 200%; line-height: 160%; text-align: center; margin: 20px 150px 80px; }

.quoteAttribution { text-align: right; display: block; width: 100%; }

.seperator { background-image: radial-gradient(#000, #fff); width: 80%; height: 3px; margin: 10px auto; }

.seperatorInverse { background-image: radial-gradient(#fff, #000); width: 80%; height: 3px; margin: 10px auto; }

.collapsed .collapsible { transition: opacity 1s 0.5s !important; opacity: 0 !important; }

.menuButton { height: 40px; width: 40px; border-radius: 5px; border: 1px solid #fff; position: relative; }

.menuButton:hover { background-color: #444; }

.section { }

/* TODO make this actually cascading using selectors */ .sectionHeading { margin: 20px 0; }


/* we solved the box-size adaption problem like this without pseudoelements. Maybe we can use the position-trick instead! */

  1. mainContainer .section .sectionHeadingText {

font-weight: normal; background-color: #ccc; border-radius: 10px; display: inline-block; font-size: 200%; line-height: 200%; padding-left: 2.4em; margin-left: -1.2em; padding-right: 1em; vertical-align: middle; }

.sectionHeadingCircle { height: 4em; /* = font-size * line-height */ width: 4em; margin-left: -2em; /* = height = width / 2*/ border-radius: 50%; background-color: #fff; display: inline-block; position: relative; vertical-align: middle; z-index: 2; }

/* hmmm, as the pseudo element will alwys be in the h2, we can only make the circle smaller than the colored container. We probably should just use divs...

  1. mainContainer h2 {

font-weight: normal; background-color: #ccc; border-radius: 10px; display: inline-block; font-size: 40px; height: 48px; }

  1. mainContainer h2::before {

content: ""; display: inline-block; height: 48px; width: 48px; margin-left: -24px; background-color: #fff; border-radius: 50%; position: relative; } */ .tabMenu { display: flex; }

.tabMenu button:nth-child(1) { background-color: #ddd; } .tabMenu button:nth-child(2) { background-color: #ccc; } .tabMenu button:nth-child(3) { background-color: #bbb; } .tabMenu button:nth-child(4) { background-color: #aaa; }

.tabMenu button { border: none; 

   outline: none;
   background-color: #ccc;

vertical-align: bottom; font-size: 100%; cursor: pointer; border-top-left-radius: 5px; border-top-right-radius: 5px; flex-basis: 33%; padding: 10px 15px; }

.tab { padding: 0.05px; /* dirty little hack to prevent margin collapsing */ display: none; }

.tabContent .tab:nth-child(1) { background-color: #ddd; }

.tabContent .tab:nth-child(2) { background-color: #ccc; }

.tabContent .tab:nth-child(3) { background-color: #bbb; }

.tabContent .tab:nth-child(4) { background-color: #aaa; }

.tab.active { display: block; }

.plainSubHeading { margin: 20px 80px 10px; font-weight: bold; }

  1. Footer ol {

font-size: 80%; }

.readmore { 

   background-color: #000;
   border: none;
   border-radius: 10px;
   padding: 15px 40px;
   color: #fff;
   font-size: 20px;
   font-weight: normal;
   cursor: pointer;

transition: background-color 0.3s; }

.readmore:hover { background-color: #555; }

.memberRow { display: flex; justify-content: space-evenly; flex-wrap: wrap; }

.memberPassContainer { overflow-x: auto; display: inline-block; margin: 10px 2px; border-radius:15px; }

.memberPass { position: relative; height: 300px; width: 500px; background-color: #ccc; padding-top: 0.05em; }

  1. mainContainer .memberPass img {

height: 100%; border: none; border-right: 2px solid black; float: left; }

  1. mainContainer .memberPass img.serious {

position: absolute; top: 0; left: 0; transition: opacity 1s; }

  1. mainContainer .memberPass img.serious:hover {

opacity: 0; }

  1. mainContainer .memberPass table {

display: table; white-space: normal; border: none; margin: 10px 0 0 0; font-size: 14px; line-height: 120%; background-color: transparent; width: initial; }

  1. mainContainer .memberPass th {

border: none; text-align: left; padding: 4px 15px 0px; background-color: transparent; }

  1. mainContainer .memberPass td {

text-align: left; padding: 0px 15px 4px; background-color: transparent; }

.pulsingLine { fill: none; stroke: #ccc; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; animation: pulse 6s infinite; }

@keyframes pulse { 0% { stroke: #ccc; } 50% { stroke: #fff; } 100% { stroke: #ccc; } }


@media only screen and (max-width: 736px) {

body { padding-left: 60px; }

.singleContent { margin: 20px 40px; }

.multiContent { margin: 20px 40px; }

.multiContent > div { display: block; width: 100%; }

.half { width: 100%; }

.third { width: 100%; }

.quarter { width: 100%; }

  1. sideBar > #excludedInitial {

height: 0; line-height: 0; font-size: 0; }

  1. includedInitial {

display: initial; }

  1. mainContainer #mainHead h1 {

font-weight: normal; font-size: 40px; margin-top: 60px; padding-top: 0px; padding-left: 10px; }

  1. mainContainer .section .sectionHeadingText {

font-size: 150%; line-height: 150%; padding-left: 1.2em; margin-left: -1.125em; padding-right: 0.5em; }

.sectionHeadingCircle { height: 2.25em; /* = font-size * line-height */ width: 2.25em; margin-left: -1.125em; /* = height = width / 2*/ border-radius: 50%; background-color: #fff; display: inline-block; position: relative; vertical-align: middle; z-index: 2; }

.subSection > h2 { margin: 20px 40px 10px; }

  1. mainContainer #meaningfulQuote {

margin: 20px 40px; }

  1. headNavigation {

padding: 0 0; }

  1. headNavigation a > p {

font-size: 16px; padding: 0.1em 0.3em; }

.plainSubHeading { margin: 20px 40px 10px; }

.initiallyCollapsed { margin-left: -140px; }

}