Difference between revisions of "Template:SJTU-BioX-Shanghai/Alpha/Header"

 
(30 intermediate revisions by 3 users not shown)
Line 8: Line 8:
 
function toc_loop() {
 
function toc_loop() {
 
   var TOP = window.pageYOffset + 50;
 
   var TOP = window.pageYOffset + 50;
−
   var headings = $('#toc ~ h2 > span:last-child, #toc ~ h3 > span:last-child');
+
   var headings = $('#toc ~ h2 > span:last-child, #toc ~ h3 > span:last-child');
 
   if (headings.length == 0) return
 
   if (headings.length == 0) return
  
Line 31: Line 31:
 
       var id = a.attributes["href"].value;
 
       var id = a.attributes["href"].value;
 
       var ele = document.getElementById(id.slice(1, id.length));
 
       var ele = document.getElementById(id.slice(1, id.length));
−
       var top = ele.offsetTop, docEle = document.documentElement
+
       var top = ele.offsetTop, docEle = document.documentElement
−
       var pageHeight = docEle.offsetHeight, windowHeight = docEle.clientHeight
+
       var pageHeight = docEle.offsetHeight, windowHeight = docEle.clientHeight
  
−
       if ((pageHeight - top) > windowHeight) setTimeout("scrollBy(0, -20)", 10);
+
       if ((pageHeight - top) > windowHeight) setTimeout ("scrollBy(0, -20)", 10);
 
     }
 
     }
 
   )
 
   )
Line 43: Line 43:
 
$(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 */
+
−
body {
+
−
  font-family: 'Arial, Helvetica, sans-serif';
+
−
  color: black;
+
−
  background-color: #FFFFFF;
+
−
}
+
−
a:link {
+
−
  color: #109E52;
+
−
}
+
−
a:visited{
+
−
  color: #91B798;
+
−
}
+
−
 
+
−
#toc ul a{
+
−
  border-left-color: #109E52;
+
−
}
+
−
#toc ul a.reading {
+
−
  border-left-color: red;
+
−
}
+
−
 
+
 
nav #hide-nav {
 
nav #hide-nav {
−
   color:rgba(150,204,137,0.8);
+
   background-color: rgba(185,217,137,0.5);
 
}
 
}
 
nav #hide-nav svg * {
 
nav #hide-nav svg * {
Line 93: Line 72:
  
 
nav {
 
nav {
−
 
−
 
 
   font-family: "Tahoma, Geneva, sans-serif";
 
   font-family: "Tahoma, Geneva, sans-serif";
 
}
 
}
−
 
  
 
nav a {
 
nav a {
 
   font-family: Arial;
 
   font-family: Arial;
 
   font-size: 1em;
 
   font-size: 1em;
−
   font-weight: bold;
+
   font-weight: 800;
 
   text-transform: uppercase;
 
   text-transform: uppercase;
 
}
 
}
 +
 
nav a:hover {
 
nav a:hover {
 
   text-decoration: none;
 
   text-decoration: none;
Line 111: Line 88:
 
   background-color: #FFFFFF;
 
   background-color: #FFFFFF;
 
}
 
}
−
 
  
 
nav > ul > li:first-child > a {
 
nav > ul > li:first-child > a {
 
   background-color: rgba(87,172,101,0.8);
 
   background-color: rgba(87,172,101,0.8);
 
}
 
}
−
/* color & font END */
 
−
 
−
 
−
 
−
/* layout BEGIN */
 
−
#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;
 
−
}
 
−
#toc .tocnumber {
 
−
  display: none;
 
−
}
 
−
#toc * {
 
−
  margin-top: 0px;
 
−
  margin-bottom: 0px;
 
−
}
 
−
#toc ul ul {
 
−
  margin-left: 0px;
 
−
}
 
−
#toc ul a {
 
−
  border-left: 1em solid;
 
−
  padding-left: 0.5em;
 
−
}
 
−
#toc ul ul a {
 
−
  padding-left: 1.5em;
 
−
}
 
−
 
−
#content {
 
−
  box-sizing: border-box;
 
−
  width: 100%;
 
−
  height: 100%;
 
−
  padding-left: 17em;
 
−
  padding-right: 2em;
 
−
  padding-top: 20px;
 
−
}
 
−
#content.nav-toggle {
 
−
  padding-left: 4em;
 
−
}
 
−
 
 
nav {
 
nav {
 
   position: fixed;
 
   position: fixed;
Line 175: Line 98:
 
   box-sizing: border-box;
 
   box-sizing: border-box;
 
   height: 100%;
 
   height: 100%;
−
   width: 14em;
+
   width: 14.5em;
 
   padding-top: 20px;
 
   padding-top: 20px;
 
   padding-left: 1em;
 
   padding-left: 1em;
Line 189: Line 112:
 
}
 
}
 
.nav-toggle nav svg {
 
.nav-toggle nav svg {
−
   transform: matrix(-1,0,0,1,10,0);
+
   transform: matrix(-1,0,0,1,0,0);
 
}
 
}
 
nav > * {
 
nav > * {
Line 254: Line 177:
 
   display: block;
 
   display: block;
 
   padding-left: 2em;
 
   padding-left: 2em;
−
   height: 3em;
+
   height: 4em;
−
   line-height: 3em;
+
   line-height: 4em;
 
}
 
}
 
nav > ul ul a {
 
nav > ul ul a {
Line 265: 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 312: Line 338:
 
<li><a href="#">modeling</a></li>
 
<li><a href="#">modeling</a></li>
 
<li>
 
<li>
−
  <a href="#" style="height: 6em ;">human practices</a>
+
  <a href="#" >human practices</a>
 
  <ul>
 
  <ul>
 
    <li><a href="#">process flow</a></li>
 
    <li><a href="#">process flow</a></li>

Latest revision as of 07:41, 21 August 2015