Difference between revisions of "Template:InCell iGEM"

Line 447: Line 447:
 
 
 
</style>
 
</style>
 +
 +
<!--- THIS IS WHERE CUSTOM CSS BEGINS --->
 +
 +
html,
 +
body {
 +
    width: 100%;
 +
    height: 100%;
 +
}
 +
 +
body {
 +
    font-family: "Helvetica Neue","Source Sans Pro",Helvetica,Arial,sans-serif;
 +
}
 +
 +
@font-face {
 +
    font-family: "My Custom Font1";
 +
    src: url(../fonts/tafelschrift.regular.ttf) format("truetype");
 +
}
 +
 +
@font-face {
 +
    font-family: "My Custom Font2";
 +
    src: url(../fonts/alphabetized-cassette-tapes.regular.ttf) format("truetype");
 +
}
 +
 +
.text-vertical-center {
 +
    display: table-cell;
 +
    text-align: center;
 +
    vertical-align: middle;
 +
}
 +
 +
.text-vertical-center h1 {
 +
    margin: 0;
 +
    padding: 0;
 +
    font-size: 4.5em;
 +
    font-weight: 700;
 +
    color: whitesmoke;
 +
    font-family: "My Custom Font1";
 +
}
 +
 +
.text-vertical-center h3 {
 +
    margin: 0;
 +
    padding: 0;
 +
    font-size: 4em;
 +
    font-weight: 100;
 +
    color: ghostwhite;
 +
    font-family: "My Custom Font2";
 +
}
 +
 +
 +
/* Custom Button Styles */
 +
 +
.btn-dark {
 +
    border-radius: 0;
 +
    color: #fff;
 +
    background-color: rgba(0,0,0,0.4);
 +
}
 +
 +
.btn-dark:hover,
 +
.btn-dark:focus,
 +
.btn-dark:active {
 +
    color: #fff;
 +
    background-color: rgba(0,0,0,0.7);
 +
}
 +
 +
.btn-light {
 +
    border-radius: 0;
 +
    color: #333;
 +
    background-color: rgb(255,255,255);
 +
}
 +
 +
.btn-light:hover,
 +
.btn-light:focus,
 +
.btn-light:active {
 +
    color: #333;
 +
    background-color: rgba(255,255,255,0.8);
 +
}
 +
 +
/* Custom Horizontal Rule */
 +
 +
hr.small {
 +
    max-width: 100px;
 +
}
 +
 +
/* Side Menu */
 +
 +
#sidebar-wrapper {
 +
    z-index: 1000;
 +
    position: fixed;
 +
    right: 0;
 +
    width: 250px;
 +
    height: 100%;
 +
    transform: translateX(250px);
 +
    overflow-y: auto;
 +
    background: #222;
 +
    -webkit-transition: all 0.4s ease 0s;
 +
    -moz-transition: all 0.4s ease 0s;
 +
    -ms-transition: all 0.4s ease 0s;
 +
    -o-transition: all 0.4s ease 0s;
 +
    transition: all 0.4s ease 0s;
 +
}
 +
 +
.sidebar-nav {
 +
    position: absolute;
 +
    top: 0;
 +
    width: 250px;
 +
    margin: 0;
 +
    padding: 0;
 +
    list-style: none;
 +
}
 +
 +
.sidebar-nav li {
 +
    text-indent: 20px;
 +
    line-height: 40px;
 +
}
 +
 +
.sidebar-nav li a {
 +
    display: block;
 +
    text-decoration: none;
 +
    color: #999;
 +
}
 +
 +
.sidebar-nav li a:hover {
 +
    text-decoration: none;
 +
    color: #fff;
 +
    background: rgba(255,255,255,0.2);
 +
}
 +
 +
.sidebar-nav li a:active,
 +
.sidebar-nav li a:focus {
 +
    text-decoration: none;
 +
}
 +
 +
.sidebar-nav > .sidebar-brand {
 +
    height: 55px;
 +
    font-size: 18px;
 +
    line-height: 55px;
 +
}
 +
 +
.sidebar-nav > .sidebar-brand a {
 +
    color: #999;
 +
}
 +
 +
.sidebar-nav > .sidebar-brand a:hover {
 +
    color: #fff;
 +
    background: none;
 +
}
 +
 +
#menu-toggle {
 +
    z-index: 1;
 +
    position: fixed;
 +
    top: 0;
 +
    right: 0;
 +
}
 +
 +
#sidebar-wrapper.active {
 +
    right: 250px;
 +
    width: 250px;
 +
    -webkit-transition: all 0.4s ease 0s;
 +
    -moz-transition: all 0.4s ease 0s;
 +
    -ms-transition: all 0.4s ease 0s;
 +
    -o-transition: all 0.4s ease 0s;
 +
    transition: all 0.4s ease 0s;
 +
}
 +
 +
.toggle {
 +
    margin: 5px 5px 0 0;
 +
}
 +
 +
/* Header */
 +
 +
.header {
 +
    display: table;
 +
    position: relative;
 +
    width: 100%;
 +
    height: 100%;
 +
    background: url(../img/bg.jpg) no-repeat center center scroll;
 +
    -webkit-background-size: cover;
 +
    -moz-background-size: cover;
 +
    background-size: cover;
 +
    -o-background-size: cover;
 +
}
 +
 +
/* About */
 +
 +
.about {
 +
    padding: 50px 0;
 +
}
 +
 +
/* Services */
 +
 +
.services {
 +
    padding: 50px 0;
 +
}
 +
 +
.service-item {
 +
    margin-bottom: 30px;
 +
}
 +
 +
/* Callout */
 +
 +
.callout {
 +
    display: table;
 +
    width: 100%;
 +
    height: 400px;
 +
    color: #fff;
 +
    background: url(../img/callout.jpg) no-repeat center center scroll;
 +
    -webkit-background-size: cover;
 +
    -moz-background-size: cover;
 +
    background-size: cover;
 +
    -o-background-size: cover;
 +
}
 +
 +
/* Portfolio */
 +
 +
.portfolio {
 +
    padding: 50px 0;
 +
}
 +
 +
.portfolio-item {
 +
    margin-bottom: 30px;
 +
}
 +
 +
.img-portfolio {
 +
    margin: 0 auto;
 +
}
 +
 +
.img-portfolio:hover {
 +
    opacity: 0.8;
 +
}
 +
 +
/* Call to Action */
 +
 +
.call-to-action {
 +
    padding: 50px 0;
 +
}
 +
 +
.call-to-action .btn {
 +
    margin: 10px;
 +
}
 +
 +
/* Map */
 +
 +
.map {
 +
    height: 500px;
 +
}
 +
 +
@media(max-width:768px) {
 +
    .map {
 +
        height: 75%;
 +
    }
 +
}
 +
 +
.map iframe {
 +
    pointer-events: none;
 +
}
 +
 +
/* Footer */
 +
 +
footer {
 +
    padding: 100px 0;
 +
}
 +
 +
#to-top {
 +
  display: none;
 +
  position: fixed;
 +
  bottom: 5px;
 +
  right: 5px;
 +
}
 +
  
  
Line 683: Line 951:
  
 
</div>
 
</div>
 +
 +
 +
  
  

Revision as of 17:26, 30 June 2017

html, body { width: 100%; height: 100%; } body { font-family: "Helvetica Neue","Source Sans Pro",Helvetica,Arial,sans-serif; } @font-face { font-family: "My Custom Font1"; src: url(../fonts/tafelschrift.regular.ttf) format("truetype"); } @font-face { font-family: "My Custom Font2"; src: url(../fonts/alphabetized-cassette-tapes.regular.ttf) format("truetype"); } .text-vertical-center { display: table-cell; text-align: center; vertical-align: middle; } .text-vertical-center h1 { margin: 0; padding: 0; font-size: 4.5em; font-weight: 700; color: whitesmoke; font-family: "My Custom Font1"; } .text-vertical-center h3 { margin: 0; padding: 0; font-size: 4em; font-weight: 100; color: ghostwhite; font-family: "My Custom Font2"; } /* Custom Button Styles */ .btn-dark { border-radius: 0; color: #fff; background-color: rgba(0,0,0,0.4); } .btn-dark:hover, .btn-dark:focus, .btn-dark:active { color: #fff; background-color: rgba(0,0,0,0.7); } .btn-light { border-radius: 0; color: #333; background-color: rgb(255,255,255); } .btn-light:hover, .btn-light:focus, .btn-light:active { color: #333; background-color: rgba(255,255,255,0.8); } /* Custom Horizontal Rule */ hr.small { max-width: 100px; } /* Side Menu */ #sidebar-wrapper { z-index: 1000; position: fixed; right: 0; width: 250px; height: 100%; transform: translateX(250px); overflow-y: auto; background: #222; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .sidebar-nav { position: absolute; top: 0; width: 250px; margin: 0; padding: 0; list-style: none; } .sidebar-nav li { text-indent: 20px; line-height: 40px; } .sidebar-nav li a { display: block; text-decoration: none; color: #999; } .sidebar-nav li a:hover { text-decoration: none; color: #fff; background: rgba(255,255,255,0.2); } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } .sidebar-nav > .sidebar-brand { height: 55px; font-size: 18px; line-height: 55px; } .sidebar-nav > .sidebar-brand a { color: #999; } .sidebar-nav > .sidebar-brand a:hover { color: #fff; background: none; } #menu-toggle { z-index: 1; position: fixed; top: 0; right: 0; } #sidebar-wrapper.active { right: 250px; width: 250px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .toggle { margin: 5px 5px 0 0; } /* Header */ .header { display: table; position: relative; width: 100%; height: 100%; background: url(../img/bg.jpg) no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } /* About */ .about { padding: 50px 0; } /* Services */ .services { padding: 50px 0; } .service-item { margin-bottom: 30px; } /* Callout */ .callout { display: table; width: 100%; height: 400px; color: #fff; background: url(../img/callout.jpg) no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } /* Portfolio */ .portfolio { padding: 50px 0; } .portfolio-item { margin-bottom: 30px; } .img-portfolio { margin: 0 auto; } .img-portfolio:hover { opacity: 0.8; } /* Call to Action */ .call-to-action { padding: 50px 0; } .call-to-action .btn { margin: 10px; } /* Map */ .map { height: 500px; } @media(max-width:768px) { .map { height: 75%; } } .map iframe { pointer-events: none; } /* Footer */ footer { padding: 100px 0; } #to-top { display: none; position: fixed; bottom: 5px; right: 5px; }

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement