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

 
(20 intermediate revisions by 2 users not shown)
Line 44: Line 44:
 
h1, h2, h3, h4 {
 
h1, h2, h3, h4 {
 
border: none;
 
border: none;
−
color: #e9e9e9;
+
color: #d6d6d6;
 
}
 
}
  
Line 96: Line 96:
 
html, body, div, h1, h2, h3, h4, span, .btn {
 
html, body, div, h1, h2, h3, h4, span, .btn {
 
font-family: 'roboto';
 
font-family: 'roboto';
−
        line-height: inherit;
+
    line-height: 1.75;
 
}
 
}
  
Line 103: Line 103:
 
     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 124: Line 125:
 
     font-family: 'cambria';
 
     font-family: 'cambria';
 
     font-size: 16px;
 
     font-size: 16px;
−
   
+
     
 
}
 
}
  
Line 131: Line 132:
 
}
 
}
  
−
h3 {
+
header > h3 {
 
color:#FFF;
 
color:#FFF;
 
font-size: 25px;
 
font-size: 25px;
Line 138: Line 139:
 
@font-face {
 
@font-face {
 
font-family: typewriter;
 
font-family: typewriter;
−
src: url(https://static.igem.org/mediawiki/2015/5/5a/DUNDEE15-Bohemian-typewriter.ttf);
+
src: url(https://static.igem.org/mediawiki/2015/5/5a/DUNDEE15-Bohemian-typewriter.ttf) format('truetype');
 
}
 
}
 +
 +
  
 
@font-face {
 
@font-face {
 
font-family: roboto;
 
font-family: roboto;
−
src: url(../fonts/RobotoSlab-Thin.ttf);
+
src: url(../fonts/RobotoSlab-Light.ttf) format('truetype');
 
}
 
}
  
Line 149: Line 152:
 
   font-family: 'FontAwesome';
 
   font-family: 'FontAwesome';
 
   src: url('https://static.igem.org/mediawiki/2015/6/60/Dundee15-fafont.ttf') format('truetype');
 
   src: url('https://static.igem.org/mediawiki/2015/6/60/Dundee15-fafont.ttf') format('truetype');
−
  font-weight: normal;
+
 
−
  font-style: normal;
+
 
}
 
}
  
Line 156: Line 158:
 
/* 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:700px;
 
height:700px;
 
width: 100%;
 
width: 100%;
Line 162: Line 164:
 
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)));
−
zoom: 100%;
+
-webkit-background-size: cover;
 +
    -moz-background-size: cover;
 +
    background-size: cover;
 +
    -o-background-size: cover;
 +
    background-attachment: scroll;
 
}
 
}
 
header h1 {
 
header h1 {
Line 171: Line 177:
 
}
 
}
 
header h3 {
 
header h3 {
−
margin-top:-10px;
+
margin-top:-60px;
 
}
 
}
 
highlight {
 
highlight {
Line 178: Line 184:
 
     padding-left:10px;
 
     padding-left:10px;
 
     padding-right:10px;
 
     padding-right:10px;
 +
    line-height:
 
}
 
}
 
.highlight {
 
.highlight {
 
font-family: typewriter;
 
font-family: typewriter;
 +
}
 +
 +
@media (max-width: 450px) {
 +
header h1 {
 +
line-height: 1.8;
 +
}
 +
header h3 {
 +
line-height: 1.8;
 +
}
 
}
 
}
  
Line 186: Line 202:
 
/* 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 300: Line 361:
 
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;
Line 326: Line 372:
 
font-weight: 100;
 
font-weight: 100;
 
width: 100%;
 
width: 100%;
−
}
 
−
footer h4 {
 
−
margin-bottom: 30px;
 
 
}
 
}
  
Line 339: Line 382:
 
}
 
}
 
}
 
}
−
 
+
#sponsor {
−
#copyright {
+
−
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 368: Line 435:
  
 
}
 
}
−
#nav.affix {
+
 
−
    position: fixed;
+
−
    top: 0;
+
−
    width: 100%;
+
−
    z-index:10;
+
−
}
+
  
 
#page-wrap {
 
#page-wrap {
Line 399: 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 443: 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 465: Line 507:
 
.border-week {
 
.border-week {
 
margin-top: 20px;
 
margin-top: 20px;
−
 
 
background-color: transparent;
 
background-color: transparent;
 
margin-bottom: 0px;
 
margin-bottom: 0px;
Line 473: 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 481: Line 522:
 
float: right;
 
float: right;
 
clear: both;
 
clear: both;
 +
cursor: pointer;
 
}
 
}
 
.biospray-btn {
 
.biospray-btn {
Line 493: Line 535:
 
margin-left: 10px;
 
margin-left: 10px;
 
display: inline-block;
 
display: inline-block;
−
color: #d3d5d6;
+
color: #d6d6d6;
 
}
 
}
 
.biospray-content {
 
.biospray-content {
Line 520: Line 562:
 
text-align:left;
 
text-align:left;
 
     clear: right;
 
     clear: right;
−
     color: #d3d5d6
+
     color: #d6d6d6;
 
}
 
}
 
#biospray-title {
 
#biospray-title {
Line 529: Line 571:
 
     display: inline-block;
 
     display: inline-block;
 
     padding-bottom: 15px;
 
     padding-bottom: 15px;
−
     color: #d3d5d6;
+
     color: #d6d6d6;
 
}
 
}
 
.labtitle {
 
.labtitle {
Line 538: Line 580:
 
     padding-bottom: 0px;
 
     padding-bottom: 0px;
 
     display: inline-block;
 
     display: inline-block;
−
     color: #d3d5d6;
+
     color: #d6d6d6;
 
}
 
}
−
.ribbon {
 
−
background-color: transparent;
 
−
    padding: 0, 15px, 0, 15px;
 
−
}
 
−
.rows {
 
−
padding-top: 50px;
 
−
padding-bottom:50px;
 
−
padding-left:50px;
 
−
padding-right:50px;
 
−
background-color: transparent;
 
−
}
 
−
.row1, .row2, .row3, .row4, .row5, .row6 {
 
−
padding-top: 50px;
 
−
padding-bottom:50px;
 
−
padding-left:30px;
 
−
padding-right:20px;
 
−
background-color: transparent;
 
−
}
 
−
.row1 {
 
−
background-color: ;
 
−
}
 
−
.dropdown-menu {
 
−
left:0;
 
−
}
 
−
.btn .btn-info .col-sm-1 .box-btn {
 
−
clear: both;
 
−
}
 
−
 
−
/** MODAL THEMES **/
 
−
 
−
.modal-body, .modal-title {
 
−
color: black !important;
 
−
}
 
−
 
−
.modal-body p {
 
−
color: black;
 
−
}
 
−
 
−
/** LABJOURNAL THEME **/
 
 
.journal-summary-heading {
 
.journal-summary-heading {
−
color: #66FF33;
+
color: #669966;
 
font-size: 20px;
 
font-size: 20px;
 
}
 
}
 
.journal-content {
 
.journal-content {
−
color: #d3d5d6;
+
color: #d6d6d6;
 
}
 
}
 
.journal-protocol, .journal-protocol:hover {
 
.journal-protocol, .journal-protocol:hover {
−
color: #66FF33;
+
color: #669966;
 
text-decoration: none;
 
text-decoration: none;
−
        cursor: pointer;
+
cursor: pointer;
 
}
 
}
 
.box-btn.glyphicon {
 
.box-btn.glyphicon {
 
font-size: 2em;
 
font-size: 2em;
−
color: #d3d5d6;
+
color: #d6d6d6;
 
-webkit-transition:0.3s;
 
-webkit-transition:0.3s;
 
-moz-transition:0.3s;
 
-moz-transition:0.3s;
Line 602: Line 605:
  
 
.box-btn.glyphicon:hover {
 
.box-btn.glyphicon:hover {
−
color: #66FF33;
+
color: #669966;
 
}
 
}
 
.biospray-btn.glyphicon:hover {
 
.biospray-btn.glyphicon:hover {
−
color: #66FF33;
+
color: #669966;
 
}
 
}
 +
/** END OF LABJOURNAL **/
  
−
/** TABLE **/
+
 
−
table, th, td {
+
/** GENERAL PAGE STRUCTURE **/
−
border: 1px solid black;
+
 
−
border-collapse: collapse;
+
.ribbon {
 +
background-color: transparent;
 +
    padding-right: 0px;
 +
    padding-left: 0px;
 +
}
 +
.rows {
 +
    padding: 20px;
 +
    padding-bottom: 80px;
 +
background-color: transparent;
 
}
 
}
  
 +
.rows > .btn {
 +
margin-bottom: 15px;
 +
}
 +
.row1, .row2, .row3, .row4, .row5, .row6 {
 +
padding-top: 10px;
 +
padding-bottom:10px;
 +
padding-left:30px;
 +
padding-right:20px;
 +
background-color: transparent;
 +
}
 +
ul .dropdown-menu {
 +
right:0;
 +
}
 +
.btn .btn-info .col-sm-1 .box-btn {
 +
clear: both;
 +
}
 +
 +
.btn-info {
 +
background-color: #339966;
 +
 +
}
  
 
a:link, a:visited, a:active, a {
 
a:link, a:visited, a:active, a {
Line 619: Line 652:
 
   color: white;
 
   color: white;
 
   text-decoration: none !important;
 
   text-decoration: none !important;
 +
  cursor: pointer;
 
}
 
}
  
−
.dropdown-header {
+
e {
−
font-size: 16px;
+
font-size: 120%;
−
font-weight: 900;
+
color: white;
−
color: #c1c1c1;
+
font-weight: 450;
 
}
 
}
 +
/** END OF GENERAL PAGE STRUCTURE **/
  
 +
/** MODAL THEMES **/
  
−
.dropdown-menu>li>a {
+
.modal {
−
font-weight: bold;
+
top: 70px;
−
color: black;
+
}
 +
 
 +
.modal-body, .modal-title {
 +
color: black !important;
 
}
 
}
  
−
.dropdown-menu>li>a:hover {
+
.modal-body p {
−
background-color: #67c152;
+
color: black;
−
color:white;
+
 
}
 
}
  
−
.igem-navbar {
+
body.modal-open {
−
padding-top: 5px;
+
    overflow: visible;
 
}
 
}
 +
/** END OF MODAL THEMES **/
  
−
.navbar-logo {
+
 
−
float:left;
+
/** TABLE **/
−
padding-top: 12px;
+
table, th, td {
 +
border: 1px solid #339966 !important;
 +
border-collapse: collapse;
 
}
 
}
  
−
@media (max-width: 767px) {
+
.modal > table, th, td {
−
.navbar-logo {
+
border: 1px solid black;
−
display:none;
+
border-collapse: collapse;
−
}
+
−
.igem-navbar {
+
−
display: none;
+
−
}
+
 
}
 
}
 +
/** END OF TABLE **/
 +
 +
  
 
#sponsor-logo {
 
#sponsor-logo {
Line 676: Line 716:
 
.navbar-brand {
 
.navbar-brand {
 
display:none;
 
display:none;
 +
}
 +
.button-center {
 +
margin-bottom: 20px;
 +
text-align: center;
 
}
 
}
 
}
 
}
 +
 +
@media (max-width: 1200px) {
 +
.navbar-logo {
 +
display: none;
 +
}
 +
.navbar-brand {
 +
padding: 15px 5px;
 +
}
 +
}
 +
 +
 +
/** 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;
 +
}
 +
 +
.ft-biospray {
 +
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;
 +
}
 +
.ft-fingerprint {
 +
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;
 +
}
 +
 +
.page-break {
 +
border-style: solid;
 +
border-bottom: thin solid #FFF;
 +
margin-bottom: 50px;
 +
}
 +
 +
.caption-center {
 +
text-align: center;
 +
}
 +
 +
 +
body h1 {
 +
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>
 
</style>
 
</html>
 
</html>
 +
1

Latest revision as of 15:43, 13 September 2015

1