Template:Team:KIT-Kyoto/Common

From 2014.igem.org

(Difference between revisions)
 
(549 intermediate revisions not shown)
Line 1: Line 1:
-
{{CSS/Main}}
 
<html>
<html>
-
<style>
 
-
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;}, table/*-- hides default wiki settings --*/
 
-
</style>
 
-
 
<style type="text/css">
<style type="text/css">
-
body {
+
*{
-
    color: #000;
+
font-family:'Lucida Grande',
 +
'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
 +
Meiryo, メイリオ, sans-serif;
 +
font-size:16px;
 +
}
 +
.sentence a{
 +
color: rgb(0,20,300);
}
}
-
.pure-img-responsive {
+
#contentSub, #footer-box, #catlinks,#search-controls, #p-logo, .printfooter, .firstHeading, .visualClear {
-
    max-width: 100%;
+
display: none;
-
    height: auto;
+
}
}
-
/*
+
#top-section li,#top-section a{
-
Add transition to containers so they can push in and out.
+
font-size:13px;
-
*/
+
}
-
#layout,
+
#menubar ul{
-
#menu,
+
line-height:1em;
-
.menu-link {
+
}
-
    -webkit-transition: all 0.2s ease-out;
+
#menubar ul li a:link,#menubar ul li a:visited,#menubar ul li a:active{
-
    -moz-transition: all 0.2s ease-out;
+
color:gray;
-
    -ms-transition: all 0.2s ease-out;
+
-
    -o-transition: all 0.2s ease-out;
+
-
    transition: all 0.2s ease-out;
+
}
}
-
/*
+
#menubar ul li a:hover{
-
This is the parent `<div>` that contains the menu and the content area.
+
color:lime;
-
*/
+
-
#layout {
+
-
    position: relative;
+
-
    padding-left: 0;
+
}
}
-
    #layout.active {
 
-
        position: relative;
 
-
        left: 150px;
 
-
    }
 
-
        #layout.active #menu {
 
-
            left: 150px;
 
-
            width: 150px;
 
-
        }
 
-
        #layout.active .menu-link {
+
#bgimg {  
-
            left: 150px;
+
position: fixed; 
-
        }
+
left:0;  
-
/*
+
top:0;
-
The content `<div>` is where all your content goes.
+
z-index: -1;
-
*/
+
height: 100%;
-
.content {
+
width: 100%;
-
    margin: 0 auto;
+
}
-
    padding: 0 2em;
+
 
-
    max-width: 800px;
+
#bgimg img {  
-
    margin-bottom: 50px;
+
position: fixed;
-
    line-height: 1.6em;
+
min-height: 100%;  
 +
min-width: 800px;  
 +
width: 100%;  
 +
height: auto;
 +
left:0;
 +
top:0;  
}
}
-
.header {
+
div#container{
-
    margin: 0;
+
margin:0 30px 0 270px;
-
    color: #333;
+
height:100%;
-
    text-align: center;
+
}
-
    padding: 2.5em 2em 0;
+
-
    border-bottom: 1px solid #eee;
+
-
}
+
-
    .header h1 {
+
-
        margin: 0.2em 0;
+
-
        font-size: 3em;
+
-
        font-weight: 300;
+
-
    }
+
-
    .header h2 {
+
-
        font-weight: 300;
+
-
        color: #ccc;
+
-
        padding: 0;
+
-
        margin-top: 0;
+
-
    }
+
-
.content-subhead {
+
div#container div.main-contents{
-
    margin: 50px 0 20px 0;
+
padding:30px;
-
    font-weight: 300;
+
position:relative;
-
    color: #888;
+
width:70%;
 +
min-width:730px;
 +
max-width:930px;
 +
margin:100px auto;
 +
background-color:rgba(300,300,300,0.85);
 +
overflow:hidden;
}
}
 +
.sentence{
 +
font-family:'Lucida Grande',
 +
'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
 +
Meiryo, メイリオ, sans-serif;
 +
text-align:justify;
 +
line-height:2em;
 +
text-indent:1em;
 +
}
 +
.sentence span{
 +
border-bottom:2px solid rgba(300,0,0,0.5);
 +
}
-
/*
+
.kitimg{
-
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
+
float:right;
-
appears on the left side of the page.
+
margin:20px;
-
*/
+
}
-
#menu {
+
.box1{
-
    margin-left: -150px; /* "#menu" width */
+
margin:30px 30px 30px 200px;
-
    width: 150px;
+
text-align:justify;
-
    position: fixed;
+
border-bottom:dashed 1px rgba(0,0,0,0.2);
-
    top: 0;
+
}
-
    left: 0;
+
.box2{
-
    bottom: 0;
+
margin:30px 200px 30px 30px;
-
    z-index: 1000; /* so the menu or its navicon stays above all content */
+
text-align:justify;
-
    background: #191818;
+
border-bottom:dashed 1px rgba(0,0,0,0.2);
-
    overflow-y: auto;
+
-
    -webkit-overflow-scrolling: touch;
+
}
}
-
    /*
 
-
    All anchors inside the menu should be styled like this.
 
-
    */
 
-
    #menu a {
 
-
        color: #999;
 
-
        border: none;
 
-
        padding: 0.6em 0 0.6em 0.6em;
 
-
    }
 
-
    /*
+
ul.materials{
-
    Remove all background/borders, since we are applying them to #menu.
+
padding-left:10px;
-
    */
+
list-style:disc;
-
    #menu .pure-menu,
+
font-family:'Lucida Grande',
-
    #menu .pure-menu ul {
+
'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
-
        border: none;
+
Meiryo, メイリオ, sans-serif;
-
        background: transparent;
+
}
-
    }
+
-
    /*
+
.procedure{
-
    Add that light border to separate items into groups.
+
padding-left:10px;
-
    */
+
list-style:decimal;
-
    #menu .pure-menu ul,
+
font-family:'Lucida Grande',
-
    #menu .pure-menu .menu-item-divided {
+
'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
-
        border-top: 1px solid #333;
+
Meiryo, メイリオ, sans-serif;
-
    }
+
line-height:2em;
-
        /*
+
}
-
        Change color of the anchor links on hover/focus.
+
-
        */
+
-
        #menu .pure-menu li a:hover,
+
-
        #menu .pure-menu li a:focus {
+
-
            background: #333;
+
-
        }
+
-
    /*
+
.note{
-
    This styles the selected menu item `<li>`.
+
padding-left:10px;
-
    */
+
list-style:none;
-
    #menu .pure-menu-selected,
+
font-family:'Lucida Grande',
-
    #menu .pure-menu-heading {
+
'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
-
        background: #1f8dd6;
+
Meiryo, メイリオ, sans-serif;
-
    }
+
}
-
        /*
+
-
        This styles a link within a selected menu item `<li>`.
+
-
        */
+
-
        #menu .pure-menu-selected a {
+
-
            color: #fff;
+
-
        }
+
-
    /*
+
.toplogo img{
-
    This styles the menu heading.
+
position:relative;
-
    */
+
margin:14px -10px -10px -15px;
-
    #menu .pure-menu-heading {
+
z-index:1;
-
        font-size: 110%;
+
}
-
        color: #fff;
+
-
        margin: 0;
+
-
    }
+
-
/* -- Dynamic Button For Responsive Menu -------------------------------------*/
+
.hp_top{
 +
position:relative;
 +
left:50%;
 +
margin-left:-200px;
 +
}
-
/*
 
-
The button to open/close the Menu is custom-made and not part of Pure. Here's
 
-
how it works:
 
-
*/
 
-
/*
+
h1, h2, h3, h4, h5 {
-
`.menu-link` represents the responsive menu toggle that shows/hides on
+
font-family:'Lucida Grande',
-
small screens.
+
'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
-
*/
+
Meiryo, メイリオ, sans-serif;
-
.menu-link {
+
-
    position: fixed;
+
-
    display: block; /* show this only on small screens */
+
-
    top: 0;
+
-
    left: 0; /* "#menu width" */
+
-
    background: #000;
+
-
    background: rgba(0,0,0,0.7);
+
-
    font-size: 10px; /* change this value to increase/decrease button size */
+
-
    z-index: 10;
+
-
    width: 2em;
+
-
    height: auto;
+
-
    padding: 2.1em 1.6em;
+
}
}
-
    .menu-link:hover,
+
h1{
-
    .menu-link:focus {
+
font-size:40px;
-
        background: #000;
+
}
-
    }
+
-
    .menu-link span {
+
h2{
-
        position: relative;
+
padding-left:10px;
-
        display: block;
+
border-left:5px solid rgba(0,200,100,0.8);
-
    }
+
font-size:30px;
 +
font-weight:bold;
 +
}
-
    .menu-link span,
+
h2 a{
-
    .menu-link span:before,
+
display:block;
-
    .menu-link span:after {
+
font-size:30px;
-
        background-color: #fff;
+
font-weight:bold;
-
        width: 100%;
+
cursor:text;
-
        height: 0.2em;
+
}
-
    }
+
-
        .menu-link span:before,
+
h2 a:link,h2 a:hover,h2 a:visited,h2 a:active{
-
        .menu-link span:after {
+
color:#000000;
-
            position: absolute;
+
text-decoration:none;
-
            margin-top: -0.6em;
+
}
-
            content: " ";
+
-
        }
+
-
        .menu-link span:after {
+
#top-section {  
-
            margin-top: 0.6em;
+
background-color: #383838;
-
        }
+
border: 0 none;
 +
height: 14px;
 +
z-index: 100;
 +
top: 0;
 +
position: fixed;
 +
width: 100%; 
 +
}
 +
#top-section-bar {
 +
background-color: #383838;
 +
height: 14px;
 +
display: block;
 +
z-index: 10;
 +
position: fixed;
 +
width: 100%;
 +
top: 0;
 +
}
-
/* -- Responsive Styles (Media Queries) ------------------------------------- */
+
#menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover {
 +
color: #727272;
 +
text-decoration: none;
 +
background-color: transparent;
 +
}
 +
#kitfooter-box {
 +
  border-top: 1px solid rgba(0,120,200,0.4);
 +
        margin:10px auto -25px auto;
 +
padding:5px 5px;
 +
        z-index:1;
 +
        position:relative;
 +
        overflow:hidden;
 +
}
-
/*
+
#kitfooter-box a {
-
Hides the menu at `48em`, but modify this based on your app's needs.
+
        background-color: transparent;
-
*/
+
color: midnightblue;
-
@media (min-width: 48em) {
+
font-size:90%;
 +
}
-
    .header,
+
#kitfooter{
-
    .content {
+
width:70%;
-
        padding-left: 2em;
+
height:50px;
-
        padding-right: 2em;
+
margin:auto;
-
    }
+
}
-
    #layout {
+
ul#fkit{
-
        padding-left: 150px; /* left col width "#menu" */
+
margin:5px 0px 0px 0px;
-
        left: 0;
+
text-align:center;
-
    }
+
}
-
    #menu {
+
-
        left: 150px;
+
-
    }
+
-
    .menu-link {
+
ul#fkit li{
-
         position: fixed;
+
         display:inline;
-
         left: 150px;
+
         list-style:none;
-
         display: none;
+
         margin:2px 1%;
-
    }
+
font-size:12px;
 +
}
-
     #layout.active .menu-link {
+
 
-
        left: 150px;
+
body {
-
    }
+
background-color: #fff;
 +
padding:0;
 +
margin:0;
 +
}
 +
 
 +
#globalWrapper, #content {
 +
width: 100%;
 +
height: 100%;
 +
border: 0px;
 +
background-color: transparent;
 +
margin: 0px;
 +
padding: 0px;
 +
}
 +
 
 +
html, body {
 +
width: 100%;
 +
height: 100%;
 +
background-color: transparent;
 +
}
 +
.clear {
 +
     clear:both;
 +
} 
 +
.clear hr {
 +
    display:none;
 +
}
 +
.mimg1{
 +
width: 240px;
 +
}
 +
.mimg2{
 +
width:400px;
 +
}
 +
figure.mimg1,.mimg2 {
 +
position: relative;
 +
overflow: hidden;
 +
background: #37e996;
 +
        margin:10px;
 +
}
 +
figure.mimg1 img,figure.mimg2 img {
 +
position: relative;
 +
z-index: 1;
 +
-webkit-transition: .3s;
 +
transition: .3s;
 +
}
 +
figcaption.mcap1 ,figcaption.mcap2{
 +
position: absolute;
 +
bottom: -70px;
 +
left: 0;
 +
z-index: 2;
 +
        width:100%;
 +
height: 70px;
 +
background: #37e996;
 +
-webkit-transition: .3s;
 +
transition: .3s;
 +
}
 +
.mimg1:hover img ,.mimg2:hover img{
 +
-webkit-transform: translateY(-40px);
 +
transform: translateY(-40px);
 +
}
 +
.mimg1:hover figcaption ,.mimg2:hover figcaption{
 +
bottom: 0;
 +
-webkit-transform: translateY(-30px);
 +
transform: translateY(-30px);
}
}
</style>
</style>
 +
</html>

Latest revision as of 18:15, 17 October 2014

Retrieved from "http://2014.igem.org/Template:Team:KIT-Kyoto/Common"