Difference between revisions of "Team:Dundee/style"

 
(43 intermediate revisions by the same user not shown)
Line 4: Line 4:
  
 
/* hiding the top section*/
 
/* hiding the top section*/
−
 
−
 
  
 
#top-section{
 
#top-section{
Line 136: Line 134:
 
font-size: 25px;
 
font-size: 25px;
 
}
 
}
 +
 +
body h1 {
 +
color: #339966;
 +
padding-top: -15px;
 +
}
 +
 +
body h2 {
 +
color: #339966;
 +
margin-top: -20px;
 +
    padding-top: -15px;
 +
}
 +
 +
body h4 {
 +
color: #339966;
 +
}
 +
 +
.container h3 {
 +
color: #339966;
 +
}
 +
 +
.container li {
 +
color: #e9e9e9;
 +
}
 +
 +
 
/** FONTS **/
 
/** FONTS **/
 
@font-face {
 
@font-face {
Line 146: Line 169:
 
@font-face {
 
@font-face {
 
font-family: roboto;
 
font-family: roboto;
−
src: url(../fonts/RobotoSlab-Light.ttf) format('truetype');
+
src: url('https://static.igem.org/mediawiki/2015/4/41/RobotoSlab-Light.ttf') format('truetype');
 
}
 
}
  
Line 158: Line 181:
 
/* HEADER */
 
/* HEADER */
 
header {
 
header {
−
background:url(<!--Put image source in ""-->../img/newbg1.png) no-repeat;
+
height: 700px;
 +
width: 100%;
 +
margin: auto;
 +
padding-top: 50px;
 +
}
 +
 
 +
#header-home {
 +
background:url(https://static.igem.org/mediawiki/2015/d/d6/Header-home.jpg) no-repeat;
 
height:700px;
 
height:700px;
 
width: 100%;
 
width: 100%;
Line 172: Line 202:
 
     background-attachment: scroll;
 
     background-attachment: scroll;
 
}
 
}
−
header h1 {
+
#header-chromate {
−
font-size: 60px;
+
background:url(https://static.igem.org/mediawiki/2015/5/5c/Header-chromate.JPG) no-repeat;
−
margin-top: 120px;
+
height:700px;
 +
width: 100%;
 +
margin: auto;
 +
padding-top:50px;
 +
color: #fff;
 +
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-background-size: cover;
 +
    -moz-background-size: cover;
 +
    background-size: cover;
 +
    -o-background-size: cover;
 +
    background-attachment: scroll;
 
}
 
}
−
header h3 {
+
#header-modelling {
−
margin-top:-60px;
+
background:url(https://static.igem.org/mediawiki/2015/8/81/Header-modelling.JPG) no-repeat;
 +
height:700px;
 +
width: 100%;
 +
margin: auto;
 +
padding-top:50px;
 +
color: #fff;
 +
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-background-size: cover;
 +
    -moz-background-size: cover;
 +
    background-size: cover;
 +
    -o-background-size: cover;
 +
    background-attachment: scroll;
 +
}
 +
#header-modelling-appendix {
 +
background:url(https://static.igem.org/mediawiki/2015/5/5b/Header-modelling-appendix.JPG) no-repeat;
 +
height:700px;
 +
width: 100%;
 +
margin: auto;
 +
padding-top:50px;
 +
color: #fff;
 +
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-background-size: cover;
 +
    -moz-background-size: cover;
 +
    background-size: cover;
 +
    -o-background-size: cover;
 +
    background-attachment: scroll;
 +
}
 +
#header-lab {
 +
background:url(https://static.igem.org/mediawiki/2015/3/3a/Header-lab.JPG) no-repeat;
 +
height:700px;
 +
width: 100%;
 +
margin: auto;
 +
padding-top:50px;
 +
color: #fff;
 +
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-background-size: cover;
 +
    -moz-background-size: cover;
 +
    background-size: cover;
 +
    -o-background-size: cover;
 +
    background-attachment: scroll;
 +
}
 +
#header-tubes {
 +
background:url(https://static.igem.org/mediawiki/2015/1/1a/Header-tubes.JPG) no-repeat;
 +
height:700px;
 +
width: 100%;
 +
margin: auto;
 +
padding-top:50px;
 +
color: #fff;
 +
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-background-size: cover;
 +
    -moz-background-size: cover;
 +
    background-size: cover;
 +
    -o-background-size: cover;
 +
    background-attachment: scroll;
 +
}
 +
#header-purify {
 +
background:url(https://static.igem.org/mediawiki/2015/6/60/Header-purify.JPG) no-repeat;
 +
height:700px;
 +
width: 100%;
 +
margin: auto;
 +
padding-top:50px;
 +
color: #fff;
 +
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-background-size: cover;
 +
    -moz-background-size: cover;
 +
    background-size: cover;
 +
    -o-background-size: cover;
 +
    background-attachment: scroll;
 +
}
 +
#header-fingerprint {
 +
background:url(https://static.igem.org/mediawiki/2015/8/8f/Ft-fingerprint.JPG) no-repeat;
 +
height:700px;
 +
width: 100%;
 +
margin: auto;
 +
padding-top:50px;
 +
color: #fff;
 +
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-background-size: cover;
 +
    -moz-background-size: cover;
 +
    background-size: cover;
 +
    -o-background-size: cover;
 +
    background-attachment: scroll;
 +
}
 +
#header-ethics {
 +
background:url(https://static.igem.org/mediawiki/2015/2/2b/Header-ethics.jpg) no-repeat;
 +
height:700px;
 +
width: 100%;
 +
margin: auto;
 +
padding-top:50px;
 +
color: #fff;
 +
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-background-size: cover;
 +
    -moz-background-size: cover;
 +
    background-size: cover;
 +
    -o-background-size: cover;
 +
    background-attachment: scroll;
 +
}
 +
#header-bottles {
 +
background:url(https://static.igem.org/mediawiki/2015/0/06/Header-bottles.JPG) no-repeat;
 +
height:700px;
 +
width: 100%;
 +
margin: auto;
 +
padding-top:50px;
 +
color: #fff;
 +
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-background-size: cover;
 +
    -moz-background-size: cover;
 +
    background-size: cover;
 +
    -o-background-size: cover;
 +
    background-attachment: scroll;
 
}
 
}
 
highlight {
 
highlight {
Line 188: Line 346:
 
.highlight {
 
.highlight {
 
font-family: typewriter;
 
font-family: typewriter;
 +
}
 +
 +
@media (max-width: 450px) {
 +
 +
}
 +
 +
@media (min-width: 451px) {
 +
header h1 {
 +
font-size: 60px;
 +
margin-top: 120px;
 +
}
 +
header h3 {
 +
margin-top:-55px;
 +
}
 
}
 
}
  
Line 196: Line 368:
 
header h3 {
 
header h3 {
 
line-height: 1.8;
 
line-height: 1.8;
 +
}
 +
header h1 {
 +
font-size: 40px;
 
}
 
}
 
}
 
}
Line 204: Line 379:
 
/** NAVBAR **/
 
/** NAVBAR **/
 
.dropdown-header {
 
.dropdown-header {
−
font-size: 16px;
+
font-size: 18px;
 
font-weight: 900;
 
font-weight: 900;
 
color: #c1c1c1;
 
color: #c1c1c1;
 +
text-align: center;
 
}
 
}
  
Line 232: Line 408:
 
}
 
}
  
−
@media (max-width: 767px) {
+
@media (max-width: 800px) {
 
.navbar-logo {
 
.navbar-logo {
 
display:none;
 
display:none;
Line 275: Line 451:
 
padding-left:50px;
 
padding-left:50px;
 
}
 
}
−
#about h3 {
+
#about ` {
 
margin-bottom: 20px;
 
margin-bottom: 20px;
 
}
 
}
Line 303: Line 479:
 
}
 
}
  
 +
#about .col-lg-3:hover .glyphicon {
 +
border: 1px solid transparent;
 +
background: #E8E8E8;
 +
color: #585858;
 +
}
 
#about2 {
 
#about2 {
 
padding-top: 180px;
 
padding-top: 180px;
Line 372: Line 553:
 
font-weight: 100;
 
font-weight: 100;
 
width: 100%;
 
width: 100%;
 +
}
 +
 +
.footer-btn {
 +
margin-top: 40px;
 +
margin-bottom: 30px;
 
}
 
}
  
Line 392: Line 578:
 
width:60%;
 
width:60%;
 
}
 
}
−
@media (max-width: 992px) {
+
@media (max-width: 900px) {
 
#sponsor-logo {
 
#sponsor-logo {
 
padding-top: 15px;
 
padding-top: 15px;
 
height:auto;
 
height:auto;
 
width:200px;
 
width:200px;
−
}
 
−
.igem-navbar {
 
−
display:none;
 
−
}
 
−
.navbar-logo {
 
−
display: none;
 
−
}
 
−
.navbar-brand {
 
−
display:none;
 
 
}
 
}
 
}
 
}
Line 418: Line 595:
 
margin-left: auto;
 
margin-left: auto;
 
}
 
}
 +
.pull-right {
 +
display: none;
 +
}
 
#about .row .col-md-3 {
 
#about .row .col-md-3 {
 
margin-bottom: 30px;
 
margin-bottom: 30px;
Line 423: Line 603:
 
#about2, #about3 .btn {
 
#about2, #about3 .btn {
 
width: 100%;
 
width: 100%;
−
}
 
−
#about3 .img-mockup {
 
−
display: none;
 
 
}
 
}
 
#about3 {
 
#about3 {
Line 433: Line 610:
 
text-align:center;
 
text-align:center;
 
}
 
}
−
 
 
}
 
}
  
Line 502: Line 678:
 
.border, .border-week, .border-day {
 
.border, .border-week, .border-day {
 
border: 2px solid gray;
 
border: 2px solid gray;
 +
}
 +
 +
.border {
 +
margin-top: 5px;
 +
margin-bottom: 5px;
 
}
 
}
  
Line 630: Line 811:
 
}
 
}
 
.row1, .row2, .row3, .row4, .row5, .row6 {
 
.row1, .row2, .row3, .row4, .row5, .row6 {
−
padding-top: 10px;
+
margin-top: 10px;
−
padding-bottom:10px;
+
margin-bottom:10px;
−
padding-left:30px;
+
margin-left:30px;
−
padding-right:20px;
+
margin-right:20px;
 
background-color: transparent;
 
background-color: transparent;
 
}
 
}
Line 674: Line 855:
 
.modal-body p {
 
.modal-body p {
 
color: black;
 
color: black;
 +
}
 +
 +
.modal-title a {
 +
color: blue !important;
 
}
 
}
  
Line 726: Line 911:
 
.navbar-logo {
 
.navbar-logo {
 
display: none;
 
display: none;
 +
}
 +
.igem-navbar {
 +
display:none;
 
}
 
}
 
.navbar-brand {
 
.navbar-brand {
 
padding: 15px 5px;
 
padding: 15px 5px;
 +
}
 +
.intro-video {
 +
width: 80%;
 +
margin-top: 20px;
 
}
 
}
 
}
 
}
Line 750: Line 942:
  
 
.ft-biospray {
 
.ft-biospray {
−
background: url(../img/splash/ft-biospray.jpg) no-repeat;
+
background: url(https://static.igem.org/mediawiki/2015/8/8f/Ft-biospray.JPG) no-repeat;
 
height:300px;
 
height:300px;
 
width: 100%;
 
width: 100%;
Line 764: Line 956:
 
}
 
}
 
.ft-fingerprint {
 
.ft-fingerprint {
−
background: url(../img/splash/ft-fingerprint.jpg) no-repeat;
+
background: url(https://static.igem.org/mediawiki/2015/8/8f/Ft-fingerprint.JPG) no-repeat;
 
height:300px;
 
height:300px;
 
width: 100%;
 
width: 100%;
Line 778: Line 970:
 
}
 
}
 
.ft-chromate {
 
.ft-chromate {
−
background: url(../img/splash/ft-chromate.jpg) no-repeat;
+
background: url(https://static.igem.org/mediawiki/2015/2/22/Ft-chromate.JPG) no-repeat;
 
height:300px;
 
height:300px;
 
width: 100%;
 
width: 100%;
Line 791: Line 983:
 
     background-attachment: scroll;
 
     background-attachment: scroll;
 
}
 
}
 +
 +
.splash-duran {
 +
background: url(https://static.igem.org/mediawiki/2015/6/68/Splash-duran.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;
 +
}
 +
.splash-tank {
 +
background: url(https://static.igem.org/mediawiki/2015/8/8f/Splash-tank.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;
 +
}
 +
.splash-pour {
 +
background: url(https://static.igem.org/mediawiki/2015/f/f5/Splash-pour.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;
 +
}
 +
.splash-incubator {
 +
background: url(https://static.igem.org/mediawiki/2015/2/2e/Splash-incubator.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 {
 
.page-break {
Line 796: Line 1,046:
 
border-bottom: thin solid #FFF;
 
border-bottom: thin solid #FFF;
 
margin-bottom: 50px;
 
margin-bottom: 50px;
 +
margin-top: 20px;
 
}
 
}
  
Line 801: Line 1,052:
 
text-align: 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**/
 
/** END OF PAGE BREAKING IMAGES**/
  
Line 827: Line 1,065:
  
 
/** END OF SEQUENCES **/
 
/** END OF SEQUENCES **/
 +
 +
/** FIGURE STYLES **/
 +
 +
figure {
 +
margin-bottom: 20px;
 +
}
 +
 +
figure figcaption p {
 +
font-size: .9em !important;
 +
}
 +
@media (max-width: 992px) {
 +
figure img {
 +
width: 80%;
 +
background-color: #2b2b2b;
 +
padding: 5px;
 +
}
 +
 +
figure figcaption {
 +
width: 80%;
 +
text-align: center;
 +
margin-left: auto;
 +
margin-right: auto;
 +
background-color: #2b2b2b;
 +
padding: 5px;
 +
}
 +
figure1 img {
 +
width: 80%;
 +
background-color: #2b2b2b;
 +
padding: 5px;
 +
}
 +
figure1 figcaption {
 +
width: 80%;
 +
text-align: center;
 +
margin-left: auto;
 +
margin-right: auto;
 +
background-color: #2b2b2b;
 +
padding: 5px;
 +
}
 +
}
 +
 +
@media (min-width: 993px) {
 +
figure img {
 +
width: 650px;
 +
text-align: center;
 +
margin-left: auto;
 +
margin-right: auto;
 +
background-color: #2b2b2b;
 +
padding: 10px;
 +
}
 +
figure figcaption {
 +
width: 650px;
 +
text-align: center;
 +
margin-left: auto;
 +
margin-right: auto;
 +
background-color: #2b2b2b;
 +
padding: 10px;
 +
}
 +
.col-md-6 figure img {
 +
width: 100%;
 +
text-align: center;
 +
margin-left: auto;
 +
margin-right: auto;
 +
background-color: #2b2b2b;
 +
padding: 10px;
 +
}
 +
.col-md-6 figure figcaption {
 +
width:100%;
 +
text-align: center;
 +
margin-left: auto;
 +
margin-right: auto;
 +
background-color: #2b2b2b;
 +
padding: 10px;
 +
}
 +
figure1 img {
 +
width: 30%;
 +
background-color: #2b2b2b;
 +
padding: 5px;
 +
}
 +
figure1 figcaption {
 +
width: 30%;
 +
text-align: center;
 +
margin-left: auto;
 +
margin-right: auto;
 +
background-color: #2b2b2b;
 +
padding: 5px;
 +
}
 +
.intro-video {
 +
width: 60%;
 +
margin-top: 20px;
 +
}
 +
}
 +
 +
.btn-margin {
 +
margin-bottom: 10px;
 +
}
 +
 +
/** END OF FIGURE STYLES **/
  
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 22:25, 18 September 2015