"
Team:UCL/Humans/Team
From 2014.igem.org
(Difference between revisions)
Adamdenyer (Talk | contribs) |
|||
| Line 3: | Line 3: | ||
<!-- ============= CSS for Humans Main ================= --> | <!-- ============= CSS for Humans Main ================= --> | ||
| - | + | type="text/css" /> | |
<script src="https://2014.igem.org/Team:UCL/Template:modernizr.js?action=raw&ctype=text/javascript"></script> | <script src="https://2014.igem.org/Team:UCL/Template:modernizr.js?action=raw&ctype=text/javascript"></script> | ||
| + | <style> | ||
| + | |||
| + | .og-grid { | ||
| + | list-style: none; | ||
| + | padding: 20px 0; | ||
| + | margin: 0 auto; | ||
| + | text-align: center; | ||
| + | width: 100%; | ||
| + | } | ||
| + | |||
| + | .og-grid li { | ||
| + | display: inline-block; | ||
| + | margin: 5px 5px 5px 0px; | ||
| + | vertical-align: top; | ||
| + | } | ||
| + | |||
| + | .og-grid li img.thumb { | ||
| + | height: 165px; | ||
| + | width: 120px; | ||
| + | } | ||
| + | |||
| + | .og-grid li > a, | ||
| + | .og-grid li > a img { | ||
| + | border: none; | ||
| + | outline: none; | ||
| + | display: block; | ||
| + | position: relative; | ||
| + | } | ||
| + | |||
| + | .og-grid li.og-expanded > a::after { | ||
| + | top: auto; | ||
| + | border: solid transparent; | ||
| + | content: " "; | ||
| + | height: 0; | ||
| + | width: 0; | ||
| + | position: absolute; | ||
| + | pointer-events: none; | ||
| + | border-bottom-color: #ddd; | ||
| + | border-width: 15px; | ||
| + | left: 50%; | ||
| + | margin: -20px 0 0 -15px; | ||
| + | } | ||
| + | |||
| + | .og-expander { | ||
| + | position: absolute; | ||
| + | background: #ddd; | ||
| + | top: auto; | ||
| + | left: 0; | ||
| + | width: 100%; | ||
| + | margin-top: 10px; | ||
| + | text-align: left; | ||
| + | height: 0; | ||
| + | overflow: hidden; | ||
| + | } | ||
| + | |||
| + | .og-expander-inner { | ||
| + | padding: 50px 30px; | ||
| + | height: 100%; | ||
| + | } | ||
| + | |||
| + | .og-close { | ||
| + | position: absolute; | ||
| + | width: 40px; | ||
| + | height: 40px; | ||
| + | top: 20px; | ||
| + | right: 20px; | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | |||
| + | .og-close::before, | ||
| + | .og-close::after { | ||
| + | content: ' '; | ||
| + | position: absolute; | ||
| + | width: 100%; | ||
| + | top: 50%; | ||
| + | height: 1px; | ||
| + | background: #888; | ||
| + | transform: rotate(45deg); | ||
| + | } | ||
| + | |||
| + | .og-close::after { | ||
| + | transform: rotate(-45deg); | ||
| + | } | ||
| + | |||
| + | .og-close:hover::before, | ||
| + | .og-close:hover::after { | ||
| + | background: #333; | ||
| + | } | ||
| + | |||
| + | .og-fullimg | ||
| + | { | ||
| + | width: 50%; | ||
| + | float: left; | ||
| + | height: 100%; | ||
| + | overflow: hidden; | ||
| + | position: relative; | ||
| + | } | ||
| + | |||
| + | .og-details { | ||
| + | width: 50%; | ||
| + | float: left; | ||
| + | height: 100%; | ||
| + | overflow: hidden; | ||
| + | position: relative; | ||
| + | top:-50px; | ||
| + | } | ||
| + | |||
| + | .og-fullimg { | ||
| + | text-align: center; | ||
| + | } | ||
| + | |||
| + | .og-fullimg img { | ||
| + | display: inline-block; | ||
| + | max-height: 100%; | ||
| + | max-width: 100%; | ||
| + | } | ||
| + | |||
| + | .og-details h3 { | ||
| + | font-weight: 300; | ||
| + | font-size: 52px; | ||
| + | padding: 40px 0 10px; | ||
| + | margin-bottom: 10px; | ||
| + | } | ||
| + | |||
| + | .og-details p { | ||
| + | font-weight: 400; | ||
| + | font-size: 16px; | ||
| + | line-height: 22px; | ||
| + | color: #999; | ||
| + | text-align:left | ||
| + | } | ||
| + | |||
| + | .og-details a { | ||
| + | font-weight: 700; | ||
| + | font-size: 16px; | ||
| + | color: #333; | ||
| + | text-transform: uppercase; | ||
| + | letter-spacing: 2px; | ||
| + | padding: 10px 20px; | ||
| + | border: 3px solid #333; | ||
| + | display: inline-block; | ||
| + | margin: 30px 0 0; | ||
| + | outline: none; | ||
| + | } | ||
| + | |||
| + | .og-details a::before { | ||
| + | content: '\2192'; | ||
| + | display: inline-block; | ||
| + | margin-right: 10px; | ||
| + | } | ||
| + | |||
| + | .og-details a:hover { | ||
| + | border-color: #999; | ||
| + | color: #999; | ||
| + | } | ||
| + | |||
| + | .og-loading { | ||
| + | width: 20px; | ||
| + | height: 20px; | ||
| + | border-radius: 50%; | ||
| + | background: #ddd; | ||
| + | box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc; | ||
| + | position: absolute; | ||
| + | top: 50%; | ||
| + | left: 50%; | ||
| + | margin: -25px 0 0 -25px; | ||
| + | animation: loader 0.5s infinite ease-in-out both; | ||
| + | } | ||
| + | |||
| + | </style> | ||
<div class="textArena"> | <div class="textArena"> | ||
Revision as of 12:57, 24 September 2014
