Difference between revisions of "Template:SJTU-BioX-Shanghai/Alpha/Header"
(92 intermediate revisions by 3 users not shown) | |||
Line 5: | Line 5: | ||
var ctt = $('#content')[0] | var ctt = $('#content')[0] | ||
ctt.classList.toggle('nav-toggle') | ctt.classList.toggle('nav-toggle') | ||
+ | } | ||
+ | function toc_loop() { | ||
+ | var TOP = window.pageYOffset + 50; | ||
+ | var headings = $('#toc ~ h2 > span:last-child, #toc ~ h3 > span:last-child'); | ||
+ | if (headings.length == 0) return | ||
+ | |||
+ | for (var i = 0; i < headings.length; i++) { | ||
+ | var h = headings[i]; | ||
+ | var top = $(h).offset().top; | ||
+ | if (top > TOP ) break | ||
+ | } | ||
+ | if (i > 0) h = headings[i-1] | ||
+ | //set h as reading part | ||
+ | var id = h.id; | ||
+ | |||
+ | var prev_a = $('#toc a.reading'); | ||
+ | var a = $('a[href="#'+ id +'"]'); | ||
+ | prev_a.removeClass('reading'); | ||
+ | a.addClass('reading'); | ||
} | } | ||
function init() { | function init() { | ||
− | $('#toc ul a').click( | + | $('#toc div#toctitle + ul a').click( |
function(evnt){ | function(evnt){ | ||
− | var | + | var a = evnt.currentTarget; |
− | + | var id = a.attributes["href"].value; | |
− | + | var ele = document.getElementById(id.slice(1, id.length)); | |
− | + | var top = ele.offsetTop, docEle = document.documentElement | |
+ | var pageHeight = docEle.offsetHeight, windowHeight = docEle.clientHeight | ||
+ | |||
+ | if ((pageHeight - top) > windowHeight) setTimeout ("scrollBy(0, -20)", 10); | ||
} | } | ||
) | ) | ||
+ | |||
+ | setInterval("toc_loop()", 10); | ||
} | } | ||
$(document).ready(init) | $(document).ready(init) | ||
</script> | </script> | ||
− | + | <style> | |
− | <style> | + | /* test BEGIN */ |
− | /* test BEGIN */ | + | h1.firstHeading{ |
− | h1.firstHeading{ | + | display: none; |
− | display: none; | + | } |
− | } | + | /* test END */ |
− | /* test END */ | + | /* color & font BEGIN */ |
− | + | ||
− | /* color & font BEGIN */ | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
nav #hide-nav { | nav #hide-nav { | ||
− | background-color: | + | background-color: rgba(185,217,137,0.5); |
} | } | ||
nav #hide-nav svg * { | nav #hide-nav svg * { | ||
fill: #109E52; | fill: #109E52; | ||
} | } | ||
− | + | nav { | |
+ | background-image: url(/wiki/images/9/98/SJTUB_shade.png); | ||
+ | background-repeat: repeat; | ||
+ | } | ||
nav, nav > ul > li:not(:first-child) a { | nav, nav > ul > li:not(:first-child) a { | ||
− | |||
color: #109E52; | color: #109E52; | ||
+ | } | ||
+ | nav > ul > li:not(:first-child) li a { | ||
+ | background-color: #647E6A; | ||
+ | opacity: 0.85; | ||
} | } | ||
nav > ul > li:first-child a{ | nav > ul > li:first-child a{ | ||
− | color: | + | color: white; |
} | } | ||
nav { | nav { | ||
− | |||
− | |||
font-family: "Tahoma, Geneva, sans-serif"; | font-family: "Tahoma, Geneva, sans-serif"; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 72: | Line 78: | ||
font-family: Arial; | font-family: Arial; | ||
font-size: 1em; | font-size: 1em; | ||
− | font-weight: | + | font-weight: 800; |
text-transform: uppercase; | text-transform: uppercase; | ||
} | } | ||
+ | |||
nav a:hover { | nav a:hover { | ||
text-decoration: none; | text-decoration: none; | ||
Line 83: | Line 90: | ||
nav > ul > li:first-child > a { | nav > ul > li:first-child > a { | ||
− | background-color: | + | background-color: rgba(87,172,101,0.8); |
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
nav { | nav { | ||
position: fixed; | position: fixed; | ||
Line 144: | Line 98: | ||
box-sizing: border-box; | box-sizing: border-box; | ||
height: 100%; | height: 100%; | ||
− | width: | + | width: 14.5em; |
padding-top: 20px; | padding-top: 20px; | ||
padding-left: 1em; | padding-left: 1em; | ||
Line 154: | Line 108: | ||
nav svg { | nav svg { | ||
+ | margin: auto; | ||
transform: matrix(1,0,0,1,0,0); | transform: matrix(1,0,0,1,0,0); | ||
} | } | ||
Line 174: | Line 129: | ||
position: absolute; | position: absolute; | ||
top: 50%; | top: 50%; | ||
− | left: | + | left: 0.5px; |
height: 40px; | height: 40px; | ||
margin-top: -20px; | margin-top: -20px; | ||
Line 182: | Line 137: | ||
margin: 0px; | margin: 0px; | ||
padding: 0px; | padding: 0px; | ||
− | |||
− | |||
list-style: none; | list-style: none; | ||
width: 100%; | width: 100%; | ||
Line 194: | Line 147: | ||
padding: 0px; | padding: 0px; | ||
top: 0px; | top: 0px; | ||
− | left: 14. | + | left: 14.1em; |
height: 0px; | height: 0px; | ||
width: 0px; | width: 0px; | ||
overflow: hidden; | overflow: hidden; | ||
+ | color: #FFFFFF; | ||
+ | } | ||
+ | nav > ul > ul > li a{ | ||
+ | color: #FFFFFF; | ||
+ | } | ||
+ | nav > ul > ul > li:not(:first-child) a { | ||
+ | color: #FFFFFF; | ||
} | } | ||
nav > ul > li:hover ul, nav > ul > li ul:hover { | nav > ul > li:hover ul, nav > ul > li ul:hover { | ||
Line 205: | Line 165: | ||
nav li { | nav li { | ||
margin-top: 0px; | margin-top: 0px; | ||
− | margin-bottom: | + | margin-bottom: 0px; |
} | } | ||
nav li:last-child { | nav li:last-child { | ||
Line 217: | Line 177: | ||
display: block; | display: block; | ||
padding-left: 2em; | padding-left: 2em; | ||
− | height: | + | height: 4em; |
− | line-height: | + | line-height: 4em; |
} | } | ||
nav > ul ul a { | nav > ul ul a { | ||
Line 228: | Line 188: | ||
position: absolute; | position: absolute; | ||
left: 0.5em; | left: 0.5em; | ||
+ | } | ||
+ | /* color & font END */ | ||
+ | |||
+ | |||
+ | |||
+ | /* layout BEGIN */ | ||
+ | body { | ||
+ | font-family: Trebuchet MS,"Helvetica Neue",Helvetica,Arial; | ||
+ | color: black; | ||
+ | background-color: #FFFFFF; | ||
+ | } | ||
+ | h2{ | ||
+ | color:#FEFEFE; | ||
+ | background-color:#57AB65; | ||
+ | font-size:500; | ||
+ | letter-spacing:-0.05em; | ||
+ | font-size:2em; | ||
+ | } | ||
+ | h3{ | ||
+ | color:#57AB65; | ||
+ | font-weight:500; | ||
+ | font-size:2em; | ||
+ | letter-spacing:-0.05em; | ||
+ | } | ||
+ | p{ | ||
+ | color:#003219; | ||
+ | font-weight:400; | ||
+ | font-size:1.3em; | ||
+ | } | ||
+ | a:link { | ||
+ | color: #109E52; | ||
+ | } | ||
+ | a:visited { | ||
+ | color: #8aa28e; | ||
+ | } | ||
+ | #toc ul a{ | ||
+ | font-family: Trebuchet MS,"Helvetica Neue",Helvetica,Arial; | ||
+ | border-left-color: #109E52; | ||
+ | } | ||
+ | #toc ul a.reading { | ||
+ | border-left-color: #5f7963; | ||
+ | } | ||
+ | #top_menu_under { | ||
+ | border-bottom: 0px; | ||
+ | } | ||
+ | #top_menu_14 { | ||
+ | border-bottom: 0px; | ||
+ | } | ||
+ | #top_menu_inside { | ||
+ | border-left: 0px; | ||
+ | border-right: 0px; | ||
+ | } | ||
+ | |||
+ | #toc { | ||
+ | position: fixed; | ||
+ | right: 1em; | ||
+ | top: 10em; | ||
+ | width: 16em; | ||
+ | font-size: 0.6em; | ||
+ | border: 0px; | ||
+ | background: white; | ||
+ | } | ||
+ | #toc .tocnumber { | ||
+ | display: none; | ||
+ | } | ||
+ | #toc * { | ||
+ | margin-top: 0px; | ||
+ | margin-bottom: 0px; | ||
+ | } | ||
+ | #toc ul ul { | ||
+ | margin-left: 0px; | ||
+ | } | ||
+ | #toc ul a { | ||
+ | border-left: 0.4em solid; | ||
+ | padding:0.4em 0 0.4em 0.8em; | ||
+ | font-weight:700; | ||
+ | } | ||
+ | #toc ul ul a { | ||
+ | padding-left:1.5em; | ||
+ | font-weight:500; | ||
+ | } | ||
+ | |||
+ | #content { | ||
+ | box-sizing: border-box; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | padding-left: 17em; | ||
+ | padding-right: 2em; | ||
+ | padding-top: 20px; | ||
+ | } | ||
+ | #content.nav-toggle { | ||
+ | padding-left: 4em; | ||
+ | } | ||
+ | p img{ | ||
+ | float:right; | ||
+ | margin-left:2em; | ||
+ | margin-bottom:2em; | ||
+ | } | ||
+ | article#mainArticle{ | ||
+ | width:80%; | ||
+ | } | ||
+ | p{ | ||
+ | text-align:justify; | ||
} | } | ||
/* layout END */ | /* layout END */ | ||
Line 258: | Line 321: | ||
<nav> | <nav> | ||
− | <div id="hide-nav" onclick="toggle_nav(this)"><svg width=" | + | <div id="hide-nav" onclick="toggle_nav(this)"><svg width="6px" height="24px"><polygon points="6,0 0,12 6,24"/></svg></div> |
+ | <div id="shade"></div> | ||
<ul> | <ul> | ||
<li><a href="#">home</a></li> | <li><a href="#">home</a></li> | ||
Line 269: | Line 333: | ||
</ul> | </ul> | ||
</li> | </li> | ||
+ | <li><a href="#">notebooks</a></li> | ||
+ | <li><a href="#">safety</a></li> | ||
+ | <li><a href="#">parts</a></li> | ||
<li><a href="#">modeling</a></li> | <li><a href="#">modeling</a></li> | ||
<li> | <li> | ||
− | + | <a href="#" >human practices</a> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <a href="#">human practices</a> | + | |
<ul> | <ul> | ||
<li><a href="#">process flow</a></li> | <li><a href="#">process flow</a></li> | ||
Line 283: | Line 345: | ||
</ul> | </ul> | ||
</li> | </li> | ||
− | <li><a href="#">team</a></li> | + | <li><a href="#">self-judging</a></li> |
+ | <li> | ||
+ | <a href="#">team</a> | ||
+ | <ul> | ||
+ | <li><a href="#">team members</a></li> | ||
+ | <li><a href="#">attribution</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
</ul> | </ul> | ||
</nav> | </nav> |
Latest revision as of 07:41, 21 August 2015