Difference between revisions of "Team:BABS UNSW Australia/pseudoknots"
Line 4: | Line 4: | ||
<style> | <style> | ||
+ | /* | ||
+ | * Base structure | ||
+ | */ | ||
+ | |||
+ | /* Move down content because we have a fixed navbar that is 50px tall */ | ||
+ | body { | ||
+ | padding-top: 50px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* | ||
+ | * Global add-ons | ||
+ | */ | ||
+ | |||
+ | .sub-header { | ||
+ | padding-bottom: 10px; | ||
+ | border-bottom: 1px solid #eee; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Top navigation | ||
+ | * Hide default border to remove 1px line. | ||
+ | */ | ||
+ | .navbar-fixed-top { | ||
+ | border: 0; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Sidebar | ||
+ | */ | ||
+ | |||
+ | /* Hide for mobile, show later */ | ||
+ | .sidebar { | ||
+ | display: none; | ||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | .sidebar { | ||
+ | position: fixed; | ||
+ | top: 51px; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | z-index: 1000; | ||
+ | display: block; | ||
+ | padding: 20px; | ||
+ | overflow-x: hidden; | ||
+ | overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ | ||
+ | background-color: #f5f5f5; | ||
+ | border-right: 1px solid #eee; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* Sidebar navigation */ | ||
+ | .nav-sidebar { | ||
+ | margin-right: -21px; /* 20px padding + 1px border */ | ||
+ | margin-bottom: 20px; | ||
+ | margin-left: -20px; | ||
+ | } | ||
+ | .nav-sidebar > li > a { | ||
+ | padding-right: 20px; | ||
+ | padding-left: 20px; | ||
+ | } | ||
+ | .nav-sidebar > .active > a, | ||
+ | .nav-sidebar > .active > a:hover, | ||
+ | .nav-sidebar > .active > a:focus { | ||
+ | color: #fff; | ||
+ | background-color: #428bca; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* | ||
+ | * Main content | ||
+ | */ | ||
+ | |||
+ | .main { | ||
+ | padding: 20px; | ||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | .main { | ||
+ | padding-right: 40px; | ||
+ | padding-left: 40px; | ||
+ | } | ||
+ | } | ||
+ | .main .page-header { | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* | ||
+ | * Placeholder dashboard ideas | ||
+ | */ | ||
+ | |||
+ | .placeholders { | ||
+ | margin-bottom: 30px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .placeholders h4 { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | .placeholder { | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | .placeholder img { | ||
+ | display: inline-block; | ||
+ | border-radius: 50%; | ||
+ | } | ||
.page-header{ | .page-header{ | ||
background: black; | background: black; | ||
Line 30: | Line 135: | ||
<center> <h1>Pseudoknots<small>Translational delay</small></h1> </center> | <center> <h1>Pseudoknots<small>Translational delay</small></h1> </center> | ||
</div> | </div> | ||
+ | |||
+ | |||
+ | <div class="container-fluid"> | ||
+ | <div class="row"> | ||
+ | <div class="col-sm-3 col-md-2 sidebar"> | ||
+ | <ul class="nav nav-sidebar"> | ||
+ | <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li> | ||
+ | <li><a href="#">Reports</a></li> | ||
+ | <li><a href="#">Analytics</a></li> | ||
+ | <li><a href="#">Export</a></li> | ||
+ | </ul> | ||
+ | <ul class="nav nav-sidebar"> | ||
+ | <li><a href="">Nav item</a></li> | ||
+ | <li><a href="">Nav item again</a></li> | ||
+ | <li><a href="">One more nav</a></li> | ||
+ | <li><a href="">Another nav item</a></li> | ||
+ | <li><a href="">More navigation</a></li> | ||
+ | </ul> | ||
+ | <ul class="nav nav-sidebar"> | ||
+ | <li><a href="">Nav item again</a></li> | ||
+ | <li><a href="">One more nav</a></li> | ||
+ | <li><a href="">Another nav item</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> | ||
+ | <h1 class="page-header">Dashboard</h1> | ||
+ | |||
+ | <div class="row placeholders"> | ||
+ | <div class="col-xs-6 col-sm-3 placeholder"> | ||
+ | <img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail"> | ||
+ | <h4>Label</h4> | ||
+ | <span class="text-muted">Something else</span> | ||
+ | </div> | ||
+ | <div class="col-xs-6 col-sm-3 placeholder"> | ||
+ | <img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail"> | ||
+ | <h4>Label</h4> | ||
+ | <span class="text-muted">Something else</span> | ||
+ | </div> | ||
+ | <div class="col-xs-6 col-sm-3 placeholder"> | ||
+ | <img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail"> | ||
+ | <h4>Label</h4> | ||
+ | <span class="text-muted">Something else</span> | ||
+ | </div> | ||
+ | <div class="col-xs-6 col-sm-3 placeholder"> | ||
+ | <img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail"> | ||
+ | <h4>Label</h4> | ||
+ | <span class="text-muted">Something else</span> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
</html> | </html> |
Revision as of 02:20, 6 September 2015