Team:UT-Tokyo/Template/Style

From 2013.igem.org

(Difference between revisions)
(Created page with "<html> </p> <!-- in bodycontent --> <style type="text/css"> *{margin:0; padding:0;} body{ font-family: 'Source Sans Pro',sans-serif,'Hiragino Kaku Gothic Pro',Meiryo; f...")
 
(59 intermediate revisions not shown)
Line 5: Line 5:
*{margin:0; padding:0;}
*{margin:0; padding:0;}
 +
 +
#top-section{
 +
    width: 100%
 +
    }
 +
 +
#menubar {
 +
    top: 0;
 +
    font-size: 75%;
 +
    }
 +
 +
#content {
 +
    position: relative;
 +
    width: 100%;
 +
    background: rgb(255, 255, 255);
 +
    color: rgb(0, 0, 0);
 +
    border-left: 1px solid rgb(68, 68, 68);
 +
    border-right: 1px solid rgb(68, 68, 68);
 +
    line-height: 1.5em;
 +
    z-index: 2;
 +
    margin: 0;
 +
    padding: 0;
 +
    }
 +
 +
#globalWrapper {
 +
    position: relative;
 +
    font-size: 100%;
 +
    width: 100%;
 +
    margin: 0;
 +
    padding: 0;
 +
    padding-bottom: 10px;
 +
    }
 +
 +
content{
 +
    padding: 0 !important;
 +
    margin: 0 !important;
 +
    }
 +
 +
#p-logo{
 +
    display:none;
 +
    }
 +
.firstHeading{
 +
    display: none;
 +
    }
body{
body{
Line 14: Line 57:
     display: block;
     display: block;
     width: 100%;
     width: 100%;
-
    -webkit-margin-before: 1em;
 
-
    -webkit-margin-after: 1em;
 
-
    -webkit-margin-start: 0px;
 
-
    -webkit-margin-end: 0px;
 
     }
     }
-
a{
+
#header a, #main a{
     text-decoration: none;
     text-decoration: none;
     }
     }
-
 
+
#header a:link, #main a:link{
-
a:link{
+
     color: blue;
     color: blue;
     }
     }
-
a:visited{
+
#headera:hover, #main a:hover{
-
    color: purple;
+
-
    }
+
-
a:hover{
+
     color: red;
     color: red;
     }
     }
Line 44: Line 79:
     position: fixed;
     position: fixed;
     height: 100px;
     height: 100px;
-
    width: 100%;
 
     top: 0px;
     top: 0px;
     left: 0px;
     left: 0px;
Line 57: Line 91:
     }
     }
-
#header ul#navigation {
+
#header ul#navig {
     position: fixed;
     position: fixed;
     margin: 0px;
     margin: 0px;
Line 66: Line 100:
     z-index:999999;
     z-index:999999;
}
}
-
#header ul#navigation li {
+
#header ul#navig li {
     height:100px;
     height:100px;
     width: 373px;
     width: 373px;
Line 75: Line 109:
}
}
-
#header ul#navigation li.home{
+
#header ul#navig li.home{
-
     background: transparent url(postit_green.png) no-repeat bottom right;
+
     background: transparent url(https://static.igem.org/mediawiki/2013/1/13/Postit_green.png) no-repeat bottom right;
     }
     }
-
#header ul#navigation li.project{
+
#header ul#navig li.project{
-
     background: transparent url(postit_blue.png) no-repeat bottom right;
+
     background: transparent url(https://static.igem.org/mediawiki/2013/f/fa/Postit_blue.png) no-repeat bottom right;
     }
     }
-
#header ul#navigation li.modeling{
+
#header ul#navig li.modeling{
-
     background: transparent url(postit_red.png) no-repeat bottom right;
+
     background: transparent url(https://static.igem.org/mediawiki/2013/0/0b/Postit_red.png) no-repeat bottom right;
     }
     }
-
#header ul#navigation li.humanpractice{
+
#header ul#navig li.humanpractice{
-
     background: transparent url(postit_purple.png) no-repeat bottom right;
+
     background: transparent url(https://static.igem.org/mediawiki/2013/9/99/Postit_purple.png) no-repeat bottom right;
     }
     }
-
#header ul#navigation li.team{
+
#header ul#navig li.team{
-
     background: transparent url(postit_yellow.png) no-repeat bottom right;
+
     background: transparent url(https://static.igem.org/mediawiki/2013/5/58/Postit_yellow.png) no-repeat bottom right;
     }
     }
-
#header ul#navigation li .hidari{
+
#header ul#navig li .hidari{
     float: left;
     float: left;
     display: inline;
     display: inline;
Line 105: Line 139:
     }
     }
-
#header ul#navigation li .naka{
+
#header ul#navig li .naka{
     float: left;
     float: left;
     display: inline;
     display: inline;
Line 116: Line 150:
     }
     }
-
#header ul#navigation li .migi{
+
#header ul#navig li .migi{
     display: inline;
     display: inline;
     float: left;
     float: left;
Line 192: Line 226:
     position: absolute;
     position: absolute;
     width: 100%;
     width: 100%;
-
     background-color: rgba(255,255,255,0.8);
+
     background-color: rgb(255,255,255);
     z-index: 1;
     z-index: 1;
     }
     }
-
#title{
+
pre{
     position: relative;
     position: relative;
-
     top: -20px;
+
     top: -155px;
     left: 0px;
     left: 0px;
     width: 100%;
     width: 100%;
Line 204: Line 238:
     line-height: 435px;
     line-height: 435px;
     text-align: right;
     text-align: right;
-
     font-size: 90px;;
+
    font-family: inherit;
 +
     font-size: 90px;
     letter-spacing: 10px;
     letter-spacing: 10px;
     color: #bd200d;
     color: #bd200d;
     background-color: rgb(228, 200, 200);
     background-color: rgb(228, 200, 200);
     z-index: -1;
     z-index: -1;
 +
    padding: 0;
 +
    border: none;
     }
     }
Line 217: Line 254:
     padding: 100px 0 70px 350px;
     padding: 100px 0 70px 350px;
     width: 600px;
     width: 600px;
-
    position: relative;
+
     top: -200px;
-
     top: -50px;
+
     counter-reset: part;
     counter-reset: part;
     }
     }
Line 226: Line 262:
     margin: 0;
     margin: 0;
     text-align: justify;
     text-align: justify;
 +
    }
 +
 +
#contents li{
 +
    list-style-type: disc;
 +
    list-style-image: none;
     }
     }
Line 241: Line 282:
     color: #bd200d;
     color: #bd200d;
     counter-reset: chapter;
     counter-reset: chapter;
 +
    padding: 0;
 +
    border: none;
 +
    line-height: 60px;
 +
    text-indent: -0.5em;
 +
    padding-left: 0.5em;
     }
     }
#contents h1:before{
#contents h1:before{
Line 255: Line 301:
     color: #bd200d;
     color: #bd200d;
     counter-reset: section;
     counter-reset: section;
 +
    padding: 0;
 +
    border: none;
 +
    line-height: 35px;
     }
     }
#contents h2:before{
#contents h2:before{
Line 271: Line 320:
     letter-spacing: 2px;
     letter-spacing: 2px;
     color: #bd200d;
     color: #bd200d;
 +
    padding: 0;
 +
    border: none;
     }
     }
Line 288: Line 339:
</style>
</style>
-
 
+
    <script>
 +
    $(function() {
 +
        var rotate = function(logo, angle) {
 +
            logo.css({
 +
            "-webkit-transform" : "rotate("+angle+"deg)",
 +
            "-moz-transform" : "rotate("+angle+"deg)",
 +
            "transform" : "rotate("+angle+"deg)"
 +
            });
 +
        }
 +
        $(window).scroll(function(){
 +
            rotate($(".logo"), $(window).scrollTop()*0.2);
 +
        })
 +
    });
 +
    $(function() {
 +
        var d=300;
 +
        $('#navig li').each(function(){
 +
            var $this = $(this);
 +
            var r=Math.floor(Math.random()*31)-15;
 +
            $this.css({
 +
                '-moz-transform':'rotate('+r+'deg)',
 +
                '-webkit-transform':'rotate('+r+'deg)',
 +
                'transform':'rotate('+r+'deg)'
 +
                });
 +
            $this.stop().animate({
 +
                'marginLeft':'-70px'
 +
                },d+=150);
 +
        });
 +
        $('#navig > li').hover(
 +
            function () {
 +
                var $this = $(this);
 +
                $($this).stop().animate({
 +
                    'marginLeft':'120px'
 +
                },200);
 +
            },
 +
            function () {
 +
                var $this = $(this);
 +
                $($this).stop().animate({
 +
                    'marginLeft':'-70px'
 +
                },200);
 +
        });
 +
    });
 +
    $(function(){
 +
        $('a[href^=#]').click(function(){
 +
            var speed = 500;
 +
            var href= $(this).attr("href");
 +
            var target = $(href == "#" || href == "" ? 'html' : href);
 +
            var position = target.offset().top;
 +
            $("html, body").animate({scrollTop:position}, speed, "swing");
 +
            return false;
 +
        });
 +
    });
 +
    $(function(){
 +
        $("ol ol.menu").hide(); 
 +
        $("span.mhead").click(function(){ 
 +
            $(this).next('ol').slideToggle(); 
 +
        }); 
 +
    }); 
 +
    </script>
<p>
<p>
</html>
</html>

Latest revision as of 08:19, 13 October 2013

Retrieved from "http://2013.igem.org/Team:UT-Tokyo/Template/Style"