Difference between revisions of "Team:Dundee/style.css"

 
(75 intermediate revisions by 2 users not shown)
Line 42: Line 42:
 
}
 
}
  
−
h1 {
+
h1, h2, h3, h4 {
 
border: none;
 
border: none;
−
color: #e9e9e9;
+
color: #d6d6d6;
 +
}
 +
 
 +
#bodyContent h1, #bodyContent h2 {
 +
  margin-bottom: 0;
 
}
 
}
  
Line 89: Line 93:
  
 
/* Page Start */
 
/* Page Start */
 +
 +
html, body, div, h1, h2, h3, h4, span, .btn {
 +
font-family: 'roboto';
 +
    line-height: 1.75;
 +
}
 +
  
 
html, body {
 
html, body {
−
overflow-x:hidden;
 
−
    font-family: 'cambria';
 
 
     margin: auto;
 
     margin: auto;
 
     padding: 0px;
 
     padding: 0px;
 +
    color: #d6d6d6;
 
}
 
}
 
p {
 
p {
−
color: #e9e9e9
+
color: #d6d6d6;
 
}
 
}
 +
 
.container {
 
.container {
−
     padding-right: 0; /*15px in bootstrap.css*/
+
     padding-right: 15px; /*15px in bootstrap.css*/
−
     padding-left: 0;  /*idem*/
+
     padding-left: 15px;  /*idem*/
 
     margin-right: auto;
 
     margin-right: auto;
 
     margin-left: auto;
 
     margin-left: auto;
Line 115: Line 125:
 
     font-family: 'cambria';
 
     font-family: 'cambria';
 
     font-size: 16px;
 
     font-size: 16px;
−
   
+
     
 
}
 
}
  
Line 122: Line 132:
 
}
 
}
  
−
h3 {
+
header > h3 {
 
color:#FFF;
 
color:#FFF;
 
font-size: 25px;
 
font-size: 25px;
 +
}
 +
/** FONTS **/
 +
@font-face {
 +
font-family: typewriter;
 +
src: url(https://static.igem.org/mediawiki/2015/5/5a/DUNDEE15-Bohemian-typewriter.ttf) format('truetype');
 
}
 
}
 +
 +
 +
 +
@font-face {
 +
font-family: roboto;
 +
src: url(../fonts/RobotoSlab-Light.ttf) format('truetype');
 +
}
 +
 +
@font-face {
 +
  font-family: 'FontAwesome';
 +
  src: url('https://static.igem.org/mediawiki/2015/6/60/Dundee15-fafont.ttf') format('truetype');
 +
 +
}
 +
  
 
/* HEADER */
 
/* HEADER */
 
header {
 
header {
−
background:url(https://static.igem.org/mediawiki/2015/9/98/Dundee_bg_header.png) no-repeat;
+
background:url(<!--Put image source in ""-->../img/newbg1.png) no-repeat;
−
height:500px;
+
height:700px;
 
width: 100%;
 
width: 100%;
 +
margin: auto;
 
padding-top:50px;
 
padding-top:50px;
 
color: #fff;
 
color: #fff;
−
background-position: center;  
+
background-position: center center;  
 
-webkit-mask-image: -webkit-gradient(linear, left 80%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
 
-webkit-mask-image: -webkit-gradient(linear, left 80%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
 +
-webkit-background-size: cover;
 +
    -moz-background-size: cover;
 +
    background-size: cover;
 +
    -o-background-size: cover;
 +
    background-attachment: scroll;
 
}
 
}
 
header h1 {
 
header h1 {
Line 149: Line 184:
 
     padding-left:10px;
 
     padding-left:10px;
 
     padding-right:10px;
 
     padding-right:10px;
−
}
+
    line-height:  
−
@font-face {
+
−
font-family: typewriter;
+
−
src: url(https://static.igem.org/mediawiki/2015/5/5a/DUNDEE15-Bohemian-typewriter.ttf);
+
 
}
 
}
 
.highlight {
 
.highlight {
 
font-family: typewriter;
 
font-family: typewriter;
 +
}
 +
 +
@media (max-width: 450px) {
 +
header h1 {
 +
line-height: 1.8;
 +
}
 +
header h3 {
 +
line-height: 1.8;
 +
}
 
}
 
}
  
  
 
/* END OF HEADER */
 
/* END OF HEADER */
 +
 +
/** NAVBAR **/
 +
.dropdown-header {
 +
font-size: 16px;
 +
font-weight: 900;
 +
color: #c1c1c1;
 +
}
 +
 +
.dropdown:active {
 +
background-color: none;
 +
}
 +
 +
.dropdown-menu>li>a {
 +
font-weight: bold;
 +
color: black;
 +
}
 +
 +
.dropdown-menu>li>a:hover {
 +
background-color: #339966;
 +
color:white;
 +
}
 +
 +
.igem-navbar {
 +
padding-top: 5px;
 +
}
 +
 +
.navbar-logo {
 +
float:left;
 +
padding-top: 12px;
 +
}
 +
 +
@media (max-width: 767px) {
 +
.navbar-logo {
 +
display:none;
 +
}
 +
.igem-navbar {
 +
display: none;
 +
}
 +
}
 +
#nav.affix {
 +
    position: fixed;
 +
    top: 0;
 +
    width: 100%;
 +
    z-index:10;
 +
}
 +
 +
/** END OF NAVBAR **/
  
  
Line 214: Line 302:
 
color: #585858;
 
color: #585858;
 
}
 
}
−
 
−
 
  
 
#about2 {
 
#about2 {
Line 271: Line 357:
 
#about3 .row {
 
#about3 .row {
 
margin-bottom: 40px;
 
margin-bottom: 40px;
−
}
 
−
#about3 .feature {
 
−
padding-top: 50px;
 
 
}
 
}
 
#about3 h4 {
 
#about3 h4 {
 
font-weight: bold;
 
font-weight: bold;
 
}
 
}
−
#sponsor {
+
 
−
/*background: url(../img/bg-sponsor.jpg);*/
+
/** FOOTER AND SPONSORS **/
−
padding-top: 40px;
+
−
padding-bottom: 60px;
+
−
color: #ffffff;
+
−
text-align: center;
+
−
}
+
−
#sponsor .row {
+
−
margin-bottom: 40px;
+
−
}
+
−
#sponsor .space {
+
−
margin-bottom: 40px;
+
−
}
+
−
.igem-sponsor {
+
−
height: 100px;
+
−
width: auto;
+
−
}
+
 
footer {
 
footer {
 
background: #333333;
 
background: #333333;
 
padding-top: 40px;
 
padding-top: 40px;
 
padding-bottom: 40px;
 
padding-bottom: 40px;
 +
padding-left: 30px;
 +
padding-right: 10px;
 
color: #ffffff;
 
color: #ffffff;
 
font-weight: 100;
 
font-weight: 100;
 +
width: 100%;
 
}
 
}
−
footer h4 {
+
 
−
margin-bottom: 30px;
+
@media (max-width: 767px) {
 +
footer {
 +
padding-top: 40px;
 +
padding-bottom: 40px;
 +
padding-left: 20px;
 +
padding-right: 10px;
 +
}
 
}
 
}
−
#copyright {
+
#sponsor {
−
padding-bottom: 20px;
+
−
padding-top: 20px;
+
−
background: #222222;
+
−
color: #ffffff;
+
 
text-align: center;
 
text-align: center;
 +
margin-right: auto;
 +
margin-left: auto;
 
}
 
}
 +
#sponsor-logo {
 +
padding-top: 50px;
 +
height:auto;
 +
width:60%;
 +
}
 +
@media (max-width: 992px) {
 +
#sponsor-logo {
 +
padding-top: 15px;
 +
height:auto;
 +
width:200px;
 +
}
 +
.igem-navbar {
 +
display:none;
 +
}
 +
.navbar-logo {
 +
display: none;
 +
}
 +
.navbar-brand {
 +
display:none;
 +
}
 +
}
 +
 +
/** END OF FOOTER AND SPONSORS **/
 +
 +
 
@media only screen and (max-width: 480px) {
 
@media only screen and (max-width: 480px) {
 
.btn-lg {
 
.btn-lg {
 
margin-bottom: 10px;
 
margin-bottom: 10px;
−
}
+
margin-right: auto;
 +
margin-left: auto;
 +
}
 
#about .row .col-md-3 {
 
#about .row .col-md-3 {
 
margin-bottom: 30px;
 
margin-bottom: 30px;
Line 332: Line 434:
 
}
 
}
  
−
}
 
−
#nav.affix {
 
−
    position: fixed;
 
−
    top: 0;
 
−
    width: 100%;
 
−
    z-index:10;
 
 
}
 
}
 +
  
 
#page-wrap {
 
#page-wrap {
Line 364: Line 461:
 
}
 
}
  
−
/* VIDEO */
 
−
 
−
.responsive-video {
 
−
position: relative;
 
−
padding-bottom: 56.25%;
 
−
padding-top: 60px; overflow: hidden;
 
−
}
 
−
 
−
 
−
.responsive-video iframe,
 
−
.responsive-video object,
 
−
.responsive-video embed {
 
−
position: absolute;
 
−
top: 0;
 
−
left: 20%;
 
−
width: 60%;
 
−
height: 55%;
 
−
}
 
  
 
/** BUTTON NAVIGATION ANCHORS. PREVENTS OVERLAP OF NAVBAR ON TOP OF CONTENT **/
 
/** BUTTON NAVIGATION ANCHORS. PREVENTS OVERLAP OF NAVBAR ON TOP OF CONTENT **/
Line 387: Line 466:
 
display: block;
 
display: block;
 
position: relative;
 
position: relative;
−
top: -100px;
+
top: -75px;
 
visibility: hidden;
 
visibility: hidden;
 
}
 
}
Line 408: Line 487:
 
   line-height: 1;
 
   line-height: 1;
 
   -moz-osx-font-smoothing: grayscale;
 
   -moz-osx-font-smoothing: grayscale;
−
}
+
 
−
#about-section1 {
+
−
background: teal;
+
 
}
 
}
  
−
 
+
/** LABJOURNAL STYLES **/
  
 
@media only screen and (max-width: 768px) {
 
@media only screen and (max-width: 768px) {
Line 424: Line 501:
  
 
.border, .border-week, .border-day {
 
.border, .border-week, .border-day {
−
+
border: 2px solid gray;
 
}
 
}
  
−
 
−
.border {
 
−
border: 2px solid black;
 
−
background-color: gray;
 
−
 
−
}
 
  
 
.border-week {
 
.border-week {
 
margin-top: 20px;
 
margin-top: 20px;
−
border: 2px solid black;
 
 
background-color: transparent;
 
background-color: transparent;
 
margin-bottom: 0px;
 
margin-bottom: 0px;
Line 444: Line 514:
 
float: right;
 
float: right;
 
border: 2px solid black;
 
border: 2px solid black;
−
background-color: gray;
+
background-color: #2b2b2b;
 
margin-bottom: 0px;
 
margin-bottom: 0px;
 
margin-top: 5px;
 
margin-top: 5px;
Line 452: Line 522:
 
float: right;
 
float: right;
 
clear: both;
 
clear: both;
 +
cursor: pointer;
 
}
 
}
 
.biospray-btn {
 
.biospray-btn {
Line 464: Line 535:
 
margin-left: 10px;
 
margin-left: 10px;
 
display: inline-block;
 
display: inline-block;
−
color: #d3d5d6;
+
color: #d6d6d6;
 
}
 
}
 
.biospray-content {
 
.biospray-content {
Line 491: Line 562:
 
text-align:left;
 
text-align:left;
 
     clear: right;
 
     clear: right;
−
     color: #d3d5d6
+
     color: #d6d6d6;
 
}
 
}
 
#biospray-title {
 
#biospray-title {
Line 499: Line 570:
 
     padding-left:0px;
 
     padding-left:0px;
 
     display: inline-block;
 
     display: inline-block;
−
     padding-bottom: 0px;
+
     padding-bottom: 15px;
−
     color: #d3d5d6;
+
     color: #d6d6d6;
 
}
 
}
 
.labtitle {
 
.labtitle {
Line 509: Line 580:
 
     padding-bottom: 0px;
 
     padding-bottom: 0px;
 
     display: inline-block;
 
     display: inline-block;
−
     color: #d3d5d6;
+
     color: #d6d6d6;
 
}
 
}
 +
.journal-summary-heading {
 +
color: #669966;
 +
font-size: 20px;
 +
}
 +
.journal-content {
 +
color: #d6d6d6;
 +
}
 +
.journal-protocol, .journal-protocol:hover {
 +
color: #669966;
 +
text-decoration: none;
 +
cursor: pointer;
 +
}
 +
.box-btn.glyphicon {
 +
font-size: 2em;
 +
color: #d6d6d6;
 +
-webkit-transition:0.3s;
 +
-moz-transition:0.3s;
 +
-o-transition:0.3s;
 +
transition:0.3s;
 +
 +
}
 +
 +
.box-btn.glyphicon:hover {
 +
color: #669966;
 +
}
 +
.biospray-btn.glyphicon:hover {
 +
color: #669966;
 +
}
 +
/** END OF LABJOURNAL **/
 +
 +
 +
/** GENERAL PAGE STRUCTURE **/
 +
 
.ribbon {
 
.ribbon {
 
background-color: transparent;
 
background-color: transparent;
−
     padding: 0, 15px, 0, 15px;
+
     padding-right: 0px;
 +
    padding-left: 0px;
 
}
 
}
 
.rows {
 
.rows {
−
padding-top: 50px;
+
    padding: 20px;
−
padding-bottom:50px;
+
    padding-bottom: 80px;
−
padding-left:50px;
+
−
padding-right:50px;
+
 
background-color: transparent;
 
background-color: transparent;
 +
}
 +
 +
.rows > .btn {
 +
margin-bottom: 15px;
 
}
 
}
 
.row1, .row2, .row3, .row4, .row5, .row6 {
 
.row1, .row2, .row3, .row4, .row5, .row6 {
−
padding-top: 50px;
+
padding-top: 10px;
−
padding-bottom:50px;
+
padding-bottom:10px;
 
padding-left:30px;
 
padding-left:30px;
 
padding-right:20px;
 
padding-right:20px;
 
background-color: transparent;
 
background-color: transparent;
 
}
 
}
−
.row1 {
+
ul .dropdown-menu {
−
background-color: ;
+
right:0;
−
}
+
−
.dropdown-menu {
+
−
left:0;
+
 
}
 
}
 
.btn .btn-info .col-sm-1 .box-btn {
 
.btn .btn-info .col-sm-1 .box-btn {
 
clear: both;
 
clear: both;
 
}
 
}
 +
 +
.btn-info {
 +
background-color: #339966;
 +
 +
}
 +
 +
a:link, a:visited, a:active, a {
 +
outline: 0;
 +
  color: white;
 +
  text-decoration: none !important;
 +
  cursor: pointer;
 +
}
 +
 +
e {
 +
font-size: 120%;
 +
color: white;
 +
font-weight: 450;
 +
}
 +
/** END OF GENERAL PAGE STRUCTURE **/
  
 
/** MODAL THEMES **/
 
/** MODAL THEMES **/
 +
 +
.modal {
 +
top: 70px;
 +
}
  
 
.modal-body, .modal-title {
 
.modal-body, .modal-title {
 +
color: black !important;
 +
}
 +
 +
.modal-body p {
 
color: black;
 
color: black;
 
}
 
}
  
 +
body.modal-open {
 +
    overflow: visible;
 +
}
 +
/** END OF MODAL THEMES **/
  
  
 +
/** TABLE **/
 +
table, th, td {
 +
border: 1px solid #339966 !important;
 +
border-collapse: collapse;
 +
}
  
 +
.modal > table, th, td {
 +
border: 1px solid black;
 +
border-collapse: collapse;
 +
}
 +
/** END OF TABLE **/
  
−
/** LABJOURNAL THEME **/
+
 
−
.journal-summary-heading {
+
 
−
color: #66FF33;
+
#sponsor-logo {
−
font-size: 20px;
+
padding-top: 50px;
 +
height:60%;
 +
width:60%;
 
}
 
}
−
.journal-content {
+
 
−
color: #d3d5d6;
+
@media (max-width: 992px) {
 +
#sponsor-logo {
 +
padding-top: 15px;
 +
height:100%;
 +
width:200px;
 +
}
 +
.igem-navbar {
 +
display:none;
 +
}
 +
.navbar-logo {
 +
display: none;
 +
}
 +
.navbar-brand {
 +
display:none;
 +
}
 +
.button-center {
 +
margin-bottom: 20px;
 +
text-align: center;
 +
}
 
}
 
}
−
.journal-protocol, .journal-protocol:hover {
+
 
−
color: #66FF33;
+
@media (max-width: 1200px) {
−
text-decoration: none;
+
.navbar-logo {
 +
display: none;
 +
}
 +
.navbar-brand {
 +
padding: 15px 5px;
 +
}
 
}
 
}
−
.box-btn.glyphicon {
 
−
font-size: 2em;
 
−
color: #d3d5d6;
 
−
-webkit-transition:0.3s;
 
−
-moz-transition:0.3s;
 
−
-o-transition:0.3s;
 
−
transition:0.3s;
 
  
 +
 +
/** PAGE BREAKING IMAGES **/
 +
.splash {
 +
background:url(../img/splash/modelling.JPG) no-repeat;
 +
height:300px;
 +
width: 100%;
 +
margin: auto;
 +
padding-top:50px;
 +
color: #fff;
 +
background-position: center center;
 +
-webkit-background-size: cover;
 +
    -moz-background-size: cover;
 +
    background-size: cover;
 +
    -o-background-size: cover;
 +
    background-attachment: scroll;
 
}
 
}
  
−
.box-btn.glyphicon:hover {
+
.ft-biospray {
−
color: #66FF33;
+
background: url(../img/splash/ft-biospray.jpg) no-repeat;
 +
height:300px;
 +
width: 100%;
 +
margin: auto;
 +
padding-top:50px;
 +
color: #fff;
 +
background-position: center center;
 +
-webkit-background-size: cover;
 +
    -moz-background-size: cover;
 +
    background-size: cover;
 +
    -o-background-size: cover;
 +
    background-attachment: scroll;
 
}
 
}
−
.biospray-btn.glyphicon:hover {
+
.ft-fingerprint {
−
color: #66FF33;
+
background: url(../img/splash/ft-fingerprint.jpg) no-repeat;
 +
height:300px;
 +
width: 100%;
 +
margin: auto;
 +
padding-top:50px;
 +
color: #fff;
 +
background-position: center center;
 +
-webkit-background-size: cover;
 +
    -moz-background-size: cover;
 +
    background-size: cover;
 +
    -o-background-size: cover;
 +
    background-attachment: scroll;
 +
}
 +
.ft-chromate {
 +
background: url(../img/splash/ft-chromate.jpg) no-repeat;
 +
height:300px;
 +
width: 100%;
 +
margin: auto;
 +
padding-top:50px;
 +
color: #fff;
 +
background-position: center center;
 +
-webkit-background-size: cover;
 +
    -moz-background-size: cover;
 +
    background-size: cover;
 +
    -o-background-size: cover;
 +
    background-attachment: scroll;
 
}
 
}
  
−
/** TABLE **/
+
.page-break {
−
table, th, td {
+
border-style: solid;
−
border: 1px solid black;
+
border-bottom: thin solid #FFF;
−
border-collapse: collapse;
+
margin-bottom: 50px;
 
}
 
}
  
 +
.caption-center {
 +
text-align: center;
 +
}
  
−
a:link, a:visited, a:active, a {
+
 
−
  color: white;
+
body h1 {
−
  text-decoration: none !important;
+
color: #339966;
 +
padding-top: -15px;
 
}
 
}
  
 +
body h2 {
 +
color: #339966;
 +
margin-top: -20px;
 +
    padding-top: -15px;
 +
}
 +
 +
/** END OF PAGE BREAKING IMAGES**/
 +
 +
/** SEQUENCES PAGE **/
 +
 +
.modal-body p {
 +
    word-wrap: break-word;
 +
}
 +
 +
.sequences {
 +
word-wrap: break-word;
 +
}
 +
 +
/** END OF SEQUENCES **/
 +
 +
</style>
 
</html>
 
</html>
 +
1

Latest revision as of 15:43, 13 September 2015

1