Team:UT-Tokyo/Template/Style
From 2013.igem.org
(Difference between revisions)
(58 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{ | #p-logo{ | ||
display:none; | display:none; | ||
+ | } | ||
+ | .firstHeading{ | ||
+ | display: none; | ||
} | } | ||
Line 18: | Line 57: | ||
display: block; | display: block; | ||
width: 100%; | width: 100%; | ||
- | |||
- | |||
- | |||
- | |||
} | } | ||
- | a{ | + | #header a, #main a{ |
text-decoration: none; | text-decoration: none; | ||
} | } | ||
- | + | #header a:link, #main a:link{ | |
- | a:link{ | + | |
color: blue; | color: blue; | ||
} | } | ||
- | + | #headera:hover, #main a:hover{ | |
- | + | ||
- | + | ||
- | a:hover{ | + | |
color: red; | color: red; | ||
} | } | ||
Line 48: | Line 79: | ||
position: fixed; | position: fixed; | ||
height: 100px; | height: 100px; | ||
- | |||
top: 0px; | top: 0px; | ||
left: 0px; | left: 0px; | ||
Line 61: | Line 91: | ||
} | } | ||
- | #header ul# | + | #header ul#navig { |
position: fixed; | position: fixed; | ||
margin: 0px; | margin: 0px; | ||
Line 70: | Line 100: | ||
z-index:999999; | z-index:999999; | ||
} | } | ||
- | #header ul# | + | #header ul#navig li { |
height:100px; | height:100px; | ||
width: 373px; | width: 373px; | ||
Line 79: | Line 109: | ||
} | } | ||
- | #header ul# | + | #header ul#navig li.home{ |
- | background: transparent url( | + | background: transparent url(https://static.igem.org/mediawiki/2013/1/13/Postit_green.png) no-repeat bottom right; |
} | } | ||
- | #header ul# | + | #header ul#navig li.project{ |
- | background: transparent url( | + | background: transparent url(https://static.igem.org/mediawiki/2013/f/fa/Postit_blue.png) no-repeat bottom right; |
} | } | ||
- | #header ul# | + | #header ul#navig li.modeling{ |
- | background: transparent url( | + | background: transparent url(https://static.igem.org/mediawiki/2013/0/0b/Postit_red.png) no-repeat bottom right; |
} | } | ||
- | #header ul# | + | #header ul#navig li.humanpractice{ |
- | background: transparent url( | + | background: transparent url(https://static.igem.org/mediawiki/2013/9/99/Postit_purple.png) no-repeat bottom right; |
} | } | ||
- | #header ul# | + | #header ul#navig li.team{ |
- | background: transparent url( | + | background: transparent url(https://static.igem.org/mediawiki/2013/5/58/Postit_yellow.png) no-repeat bottom right; |
} | } | ||
- | #header ul# | + | #header ul#navig li .hidari{ |
float: left; | float: left; | ||
display: inline; | display: inline; | ||
Line 109: | Line 139: | ||
} | } | ||
- | #header ul# | + | #header ul#navig li .naka{ |
float: left; | float: left; | ||
display: inline; | display: inline; | ||
Line 120: | Line 150: | ||
} | } | ||
- | #header ul# | + | #header ul#navig li .migi{ |
display: inline; | display: inline; | ||
float: left; | float: left; | ||
Line 196: | Line 226: | ||
position: absolute; | position: absolute; | ||
width: 100%; | width: 100%; | ||
- | background-color: | + | background-color: rgb(255,255,255); |
z-index: 1; | z-index: 1; | ||
} | } | ||
- | + | pre{ | |
position: relative; | position: relative; | ||
- | top: - | + | top: -155px; |
left: 0px; | left: 0px; | ||
width: 100%; | width: 100%; | ||
Line 208: | 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 221: | Line 254: | ||
padding: 100px 0 70px 350px; | padding: 100px 0 70px 350px; | ||
width: 600px; | width: 600px; | ||
- | + | top: -200px; | |
- | top: - | + | |
counter-reset: part; | counter-reset: part; | ||
} | } | ||
Line 230: | Line 262: | ||
margin: 0; | margin: 0; | ||
text-align: justify; | text-align: justify; | ||
+ | } | ||
+ | |||
+ | #contents li{ | ||
+ | list-style-type: disc; | ||
+ | list-style-image: none; | ||
} | } | ||
Line 245: | 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 259: | 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 275: | Line 320: | ||
letter-spacing: 2px; | letter-spacing: 2px; | ||
color: #bd200d; | color: #bd200d; | ||
+ | padding: 0; | ||
+ | border: none; | ||
} | } | ||
Line 292: | 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