Difference between revisions of "Template:Tuebingen"

Revision as of 19:54, 30 September 2016

/* Central space for fine tuning */ :root { --lightBackgroundText: rgba(223, 220, 228, 0.9); --contentFontSize: large; --navBorderThickness: 2px; --navFontSize: x-large; --navSubFontSize: large; --navLinkPadding: 0.3em; --navLeftPadding: 1vw; --navScrollTime: 500ms; --contentPadding: 3vw; font-family: Helvetica, Arial, sans-serif; /* Setup counter for figure and table enumeration */ counter-reset: figures tables; } .iGemSabber { /* rule of thumb, BG about +10 each */ /*--lightsabber: rgb(46, 255, 6);*/ --lightsabber: rgb(202, 255, 212); --lightsabberBg: rgba(1, 216, 34, 0.9); } .blueSabber { --lightsabber: rgb(223, 254, 255); --lightsabberBg: rgba(0, 129, 160, 0.9); } .orangeSabber { --lightsabber: rgb(254, 255, 234); --lightsabberBg: rgba(235, 168, 73, 0.9); } .redSabber { --lightsabber: rgb(247, 253, 252); --lightsabberBg: rgba(180, 0, 0, 0.9); } .whiteSabber { --lightsabber: rgb(252, 252, 255); --lightsabberBg: rgba(145, 164, 161, 0.9); } .purpleSabber { --lightsabber: rgb(255, 238, 254); --lightsabberBg: rgba(200, 39, 190, 0.9); } body { /* Version 1: One picture scaled full size (watch file size) */ background-image: url(../wiki/images/thumb/f/fe/Space_low.jpg/1599px-Space_low.jpg); background-size: 100% 100%; background-repeat: no-repeat; /* Version 2: Small pattern repeated */ /* background-image: url(steel1.jpg); background-repeat: repeat; */ background-position: right top; background-attachment: fixed; padding: 0; margin: 0; } .grailWrapper { background-color: var(--lightBackgroundText); display: table; height: 100%; width: 100%; margin: 0; margin: 0 auto; padding: 0; border-collapse: collapse; min-width: 760px; max-width: 1000px; font-size: var(--contentFontSize); } .header { height: 200px; /* not accurate, vertical center for final logo */ /* still needed? padding-top: 30px; */ text-align: center; vertical-align: middle; font-size: 50px; font-family: Impact, Charcoal, sans-serif; display: table-row; } nav { display: block;/*table-row;*/ padding: 0; margin: 0; /* make border on top and bottom of nav */ border-width: var(--navBorderThickness); border-style: solid none; border-color: black; font-size: var(--navFontSize); height: calc(2 * var(--navLinkPadding) + var(--navFontSize) 2 * var(--navBorderThickness)); /*background-color: #4f4f4f;*/ background: linear-gradient(to bottom, #4f4f4f, #6f6f6f, #4f4f4f); } .navbarFixed { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; } .navbarFixed ul { --navLeftPadding: 5.5em; } #navIcon { display: absolute; position: fixed; top: 10px; left: 10px; height: 3em; margin-right: 1em; /*top: -0.6em;*/ vertical-align: top; padding: 0.5em; border: 2px solid black; border-radius: 1.5em; background: radial-gradient(circle, #dfdeee, #6f6f6f, black); box-shadow: 10px 10px 5px grey; box-shadow: 0 0 0.8em 0.3em #000000; /*visibility: hidden;*/ } nav ul { display: table; table-layout: fixed; margin: 0 0 0 var(--navLeftPadding); padding: 0; width: calc(100% - var(--navLeftPadding)); list-style: none; } nav ul li { display: table-cell; width: 100%; height: calc(2 * var(--navLinkPadding) + var(--navFontSize)); text-align: center; vertical-align: top; } nav ul li a { display: block; padding: var(--navLinkPadding) 0; text-align:center; vertical-align: middle; color: #fff; text-decoration: none; border-left:4px solid black; } nav ul li:hover a, .linkActive { /*color: black;*/ background: linear-gradient(to bottom, #4f4f4f, var(--lightsabberBg), #4f4f4f); } nav ul li:hover ul li a { background: none !important; } nav ul li ul li a:hover { text-decoration: underline; } nav li ul { display: block; height: auto; width: calc(100% - 18px); padding: 0 10px; margin: 0; position: absolute; left: -2px; top: calc(2 * var(--navLinkPadding) + var(--navFontSize) + 2 * var(--navBorderThickness)); z-index:1; background: linear-gradient(to right, black 0, var(--lightsabber) 1px, var(--lightsabber) 7px, black 8px, var(--lightsabberBg) 8px, var(--lightBackgroundText)); } nav ul > li { position: relative; } nav li ul li { display: block; overflow: hidden; height:0; -webkit-transition: height var(--navScrollTime) ease-in; -moz-transition: height var(--navScrollTime) ease-in; -o-transition: height var(--navScrollTime) ease-in; transition: height var(--navScrollTime) ease-in; } nav ul > li:hover ul li { height: 2em; } nav ul li ul li a{ display:block; height: 100%; width: 100%; padding: auto; font-size: var(--navSubFontSize); border: none; color:black; } .contentArea { display: block; width: var(100% - var(--contentPadding)); margin: 0 var(--contentPadding); padding: 0; text-align: justify; } .contentRow { display: table; width: 100%; padding: 0; margin: 0; border-spacing: 1em; border-collapse: separate; } .contentCell { display: table-cell; vertical-align: top; padding: 0; margin: 0; } .contentSmallCell{ width: 40%; } figure { display: block; margin: 1em; padding: 0.5em; width: calc(100% - var(padding)); background-color: white; } figure img { display: block; --leftRightSpace: 0.8em; width: calc(100% - 2 * var(--leftRightSpace)); padding: var(--leftRightSpace); } figure figcaption::before{ counter-increment: figures; font-weight: bold; content: "Figure " counter(figures) ": "; } figure figcaption { width: 100%; } table { border-top: 3px solid black; border-bottom: 3px solid black; border-spacing: 0.4em; border-collapse: collapse; margin: 0 auto; } table caption::before{ counter-increment: tables; font-weight: bold; content: "Table " counter(tables) ": "; } table caption { width: 100%; margin-bottom: 0.8em; text-align: center; } table td { padding: 0.3em; } table thead tr { font-weight: bold; border-bottom: 1.5px solid black; }

iGEM Tuebingen