mirror of
https://github.com/sdiehl/wiwinwlh.git
synced 2024-08-16 23:40:41 +03:00
Use a lighter and responsive styling (#140)
* Use a lighter and responsive styling * Fix indentation
This commit is contained in:
Oskar Wickström
Stephen Diehl
parent
34acc0561b
commit
56f908deb5
10
Makefile
10
Makefile
@ -1,10 +1,14 @@
|
||||
PANDOC = pandoc
|
||||
IFORMAT = markdown
|
||||
FLAGS = --standalone --toc --toc-depth=2 --highlight-style pygments
|
||||
TEMPLATE = resources/page.tmpl
|
||||
LTEMPLATE = resources/page.latex
|
||||
ETEMPLATE = resources/page.epubt
|
||||
STYLE = css/style.css
|
||||
FLAGS = --standalone \
|
||||
--toc \
|
||||
--toc-depth=2 \
|
||||
--highlight-style pygments \
|
||||
-c css/style.css \
|
||||
-c css/layout.css
|
||||
GHC=ghc
|
||||
|
||||
HTML = tutorial.html
|
||||
@ -18,7 +22,7 @@ includes: includes.hs
|
||||
|
||||
%.html: %.md includes
|
||||
./includes < $< \
|
||||
| $(PANDOC) -c $(STYLE) --template $(TEMPLATE) -s -f $(IFORMAT) -t html $(FLAGS) \
|
||||
| $(PANDOC) --template $(TEMPLATE) -s -f $(IFORMAT) -t html $(FLAGS) \
|
||||
| sed '/<extensions>/r extensions.html' > $@
|
||||
|
||||
%.epub: %.md includes
|
||||
|
||||
6
css/bootstrap-min.css
vendored
6
css/bootstrap-min.css
vendored
File diff suppressed because one or more lines are too long
9
css/bootstrap-responsive.min.css
vendored
9
css/bootstrap-responsive.min.css
vendored
File diff suppressed because one or more lines are too long
10
css/bootstrap.min.css
vendored
10
css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
145
css/layout.css
Normal file
145
css/layout.css
Normal file
@ -0,0 +1,145 @@
|
||||
/*!
|
||||
* Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
|
||||
* Code licensed under the Apache License v2.0.
|
||||
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*/
|
||||
|
||||
#sidebar-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 250px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
background: #f7f7f7;
|
||||
border-right: 1px solid #eee;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
#sidebar-wrapper .logo {
|
||||
display: block;
|
||||
margin: 10px 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
#sidebar-wrapper .logo img {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
#toggle-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sidebar-nav li {
|
||||
}
|
||||
|
||||
.sidebar-nav li a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.sidebar-nav li a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.sidebar-nav li a:active,
|
||||
.sidebar-nav li a:focus {
|
||||
}
|
||||
|
||||
.sidebar-nav ul {
|
||||
list-style-type: circle;
|
||||
padding: 10px 10px 10px 20px;
|
||||
}
|
||||
|
||||
.sidebar-nav > ul {
|
||||
list-style-type: none;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.sidebar-nav > ul > li > a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
#main-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 250px;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#main {
|
||||
padding: 20px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
#sidebar-wrapper {
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
right: 0;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
#sidebar-wrapper .sidebar-nav {
|
||||
display: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
#sidebar-wrapper.expanded {
|
||||
height: 100%;
|
||||
}
|
||||
#sidebar-wrapper.expanded .sidebar-nav {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-top: 1px solid #eee;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#sidebar-wrapper .logo {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
#sidebar-wrapper .logo img {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#toggle-sidebar {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
line-height: 30px;
|
||||
height: 50px;
|
||||
border: 0;
|
||||
background: none;
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
#sidebar-wrapper #toggle-sidebar:before {
|
||||
content: 'Show';
|
||||
}
|
||||
#sidebar-wrapper.expanded #toggle-sidebar:before {
|
||||
content: 'Close';
|
||||
}
|
||||
#main-wrapper {
|
||||
top: 50px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
126
css/sidebar.css
126
css/sidebar.css
@ -1,126 +0,0 @@
|
||||
/*!
|
||||
* Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
|
||||
* Code licensed under the Apache License v2.0.
|
||||
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*/
|
||||
|
||||
/* Toggle Styles */
|
||||
|
||||
#wrapper {
|
||||
padding-left: 0;
|
||||
-webkit-transition: all 0.5s ease;
|
||||
-moz-transition: all 0.5s ease;
|
||||
-o-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
#wrapper.toggled {
|
||||
padding-left: 250px;
|
||||
}
|
||||
|
||||
#sidebar-wrapper {
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
left: 250px;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
margin-left: -250px;
|
||||
overflow-y: auto;
|
||||
background: #000;
|
||||
-webkit-transition: all 0.5s ease;
|
||||
-moz-transition: all 0.5s ease;
|
||||
-o-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
#wrapper.toggled #sidebar-wrapper {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
#page-content-wrapper {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#wrapper.toggled #page-content-wrapper {
|
||||
position: absolute;
|
||||
margin-right: -250px;
|
||||
}
|
||||
|
||||
/* Sidebar Styles */
|
||||
|
||||
.sidebar-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 250px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.sidebar-nav li {
|
||||
text-indent: 20px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.sidebar-nav li a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.sidebar-nav li a:hover {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.sidebar-nav li a:active,
|
||||
.sidebar-nav li a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar-nav > .sidebar-brand {
|
||||
height: 65px;
|
||||
font-size: 18px;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.sidebar-nav > .sidebar-brand a {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.sidebar-nav > .sidebar-brand a:hover {
|
||||
color: #fff;
|
||||
background: none;
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
#wrapper {
|
||||
padding-left: 250px;
|
||||
}
|
||||
|
||||
#wrapper.toggled {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#sidebar-wrapper {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
#wrapper.toggled #sidebar-wrapper {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
#page-content-wrapper {
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#wrapper.toggled #page-content-wrapper {
|
||||
position: relative;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
320
css/style.css
320
css/style.css
@ -1,19 +1,17 @@
|
||||
html {
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: 10pt;
|
||||
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
|
||||
color: #332;
|
||||
|
||||
margin: 0px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
|
||||
line-height: 1.4;
|
||||
color: #333;
|
||||
|
||||
-webkit-font-feature-settings: "kern", "liga";
|
||||
-moz-font-feature-settings: "kern", "liga";
|
||||
@ -21,17 +19,13 @@ body {
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
color: #332;
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
font-weight: 400;
|
||||
font-weight: bold;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
pre {
|
||||
/* Override bootstrap */
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
background-color: inherit;
|
||||
pre.sourceCode {
|
||||
padding: 10px 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
@ -40,7 +34,8 @@ code {
|
||||
}
|
||||
|
||||
pre code {
|
||||
font: 10pt "Source Code Pro", Monaco, "Lucida Console",Terminal,"Courier New",Courier;
|
||||
font-family: "Source Code Pro", monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
img {
|
||||
@ -48,26 +43,20 @@ img {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#sidebar-wrapper {
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
.sidebar-nav li {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
#sidebar-wrapper {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin-bottom: 500px;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin: 50px 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 .5em 0;
|
||||
text-align: center;
|
||||
font-size: 250%;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 30px;
|
||||
font-size: 150%;
|
||||
margin: .5em 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@ -88,151 +77,57 @@ img {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
#sidebar-wrapper {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* TOC Links */
|
||||
.sidebar-nav ul {
|
||||
list-style-type: none;
|
||||
|
||||
margin-before: 0.5em;
|
||||
margin-after: 0.5em;
|
||||
margin-start: 0;
|
||||
margin-end: 0;
|
||||
padding-start: 0px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.sidebar-nav > ul > li > a {
|
||||
font-weight: 600;
|
||||
border-bottom: 3px solid #ccc;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #111111;
|
||||
a {
|
||||
color: #4070a0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.body li a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.toc a {
|
||||
text-decoration: none;
|
||||
font-size: 8pt;
|
||||
line-height: 0.9;
|
||||
}
|
||||
|
||||
.toc a:hover {
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Body Links */
|
||||
|
||||
p a {
|
||||
|
||||
p a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
li code, p code, table code {
|
||||
font-size: 12px;
|
||||
border: 1px solid #ccc;
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
-moz-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0 3px;
|
||||
-moz-border-radius: 0px;
|
||||
border-radius: 0px;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
/* Language Extensions Table */
|
||||
|
||||
.table-striped .verical {
|
||||
-webkit-transform: rotate(-90deg);
|
||||
-moz-transform: rotate(-90deg);
|
||||
-ms-transform: rotate(-90deg);
|
||||
-o-transform: rotate(-90deg);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.table-striped .striped-header td {
|
||||
/*border-bottom: 1px solid black;*/
|
||||
}
|
||||
|
||||
.table-striped .striped-header td {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 8pt;
|
||||
}
|
||||
|
||||
.table-striped {
|
||||
text-align: center;
|
||||
border-spacing: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.table-striped td:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table-striped td:nth-child(5) {
|
||||
text-align: left;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.table-striped td:nth-child(6) {
|
||||
text-align: left;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
.table-striped a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.table-striped
|
||||
|
||||
.table-striped tr:nth-child(even) {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.table-striped tr:nth-child(odd) {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
|
||||
table{
|
||||
background:#fff;
|
||||
border:1px solid #ccc;
|
||||
border-width:2px;
|
||||
border-collapse:collapse;
|
||||
margin:5px 0 10px;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border: 0;
|
||||
border-collapse:collapse;
|
||||
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
th, td{
|
||||
border:1px solid #ccc;
|
||||
padding:3px 10px;
|
||||
text-align:left;
|
||||
vertical-align:top;
|
||||
th, td {
|
||||
padding: 5px 10px;
|
||||
text-align:left;
|
||||
vertical-align:top;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
tr.even td{
|
||||
tr:nth-child(even) td{
|
||||
background:#f7f7f7;
|
||||
}
|
||||
|
||||
th{
|
||||
background:#edeff0;
|
||||
}
|
||||
|
||||
/* */
|
||||
|
||||
.center {
|
||||
@ -244,20 +139,6 @@ th{
|
||||
height: 120%;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 0.9em;
|
||||
|
||||
margin-bottom: 18px;
|
||||
margin-top: 18px;
|
||||
|
||||
border-left: 1px solid #ccc;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.annotation {
|
||||
font-size: 10pt;
|
||||
}
|
||||
@ -306,10 +187,6 @@ code.sourceCode {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
pre.sourceCode {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
ul.sections > li > div {
|
||||
-moz-box-sizing: border-box; /* firefox */
|
||||
-ms-box-sizing: border-box; /* ie */
|
||||
@ -318,25 +195,16 @@ ul.sections > li > div {
|
||||
box-sizing: border-box; /* css3 */
|
||||
}
|
||||
|
||||
.toc {
|
||||
}
|
||||
|
||||
.toc ul ul {
|
||||
padding-left: 0.8em;
|
||||
}
|
||||
|
||||
.toc > ul {
|
||||
margin-top: 0px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.toc li {
|
||||
line-height: 15px !important;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
/* Boxes */
|
||||
|
||||
.alert {
|
||||
padding: 5px 15px;
|
||||
margin-bottom: 15px;
|
||||
bakground: #eee;
|
||||
}
|
||||
.alert a {
|
||||
color: inherit;
|
||||
}
|
||||
.alert-success {
|
||||
color: #468847;
|
||||
background-color: #dff0d8;
|
||||
@ -348,83 +216,3 @@ ul.sections > li > div {
|
||||
background-color: #f2dede;
|
||||
border-color: #eed3d7;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 8px 35px 8px 14px;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid #fbeed5;
|
||||
max-width: 600px;
|
||||
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/*---------------------- (> 481px) ---------------------*/
|
||||
@media only screen and (min-width: 481px) {
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1025px) {
|
||||
.side .logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.side {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fork {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1025px) {
|
||||
.side {
|
||||
position: fixed;
|
||||
width: 270px !important;
|
||||
margin-left: 0px;
|
||||
height: 100vh;
|
||||
/*border-right: 1px solid black;*/
|
||||
overflow-y: auto;
|
||||
|
||||
border-right: 1px solid #bbb;
|
||||
box-shadow: 0 0 20px #ccc;
|
||||
-webkit-box-shadow: 0 0 20px #ccc;
|
||||
-moz-box-shadow: 0 0 20px #ccc;
|
||||
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.side .logo {
|
||||
margin-left: 80px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
.side ul ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.side ul ul.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.side .active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding-left: 20px;
|
||||
margin-left: 270px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
137
js/nav.js
137
js/nav.js
@ -1,131 +1,12 @@
|
||||
// Adapted from Javascript Garden, a MIT project.
|
||||
function Sections(page) {
|
||||
this.page = page;
|
||||
this.init();
|
||||
}
|
||||
$(function () {
|
||||
var $sidebar = $('#sidebar-wrapper');
|
||||
var $toggle = $('#toggle-sidebar');
|
||||
|
||||
Sections.prototype = {
|
||||
init: function(attribute) {
|
||||
this.heights = this.page.nav.find('ul').map(function(idx, ele) {
|
||||
return $(this).outerHeight();
|
||||
}).get();
|
||||
},
|
||||
$toggle.click(function () {
|
||||
$sidebar.toggleClass('expanded');
|
||||
});
|
||||
|
||||
map: function() {
|
||||
this.names = $('h2').map(function(idx, ele) {
|
||||
return {
|
||||
id: this.id,
|
||||
offset: $(this).offset().top + 30,
|
||||
title: $(this).find(':header:first').html()
|
||||
};
|
||||
}).get();
|
||||
},
|
||||
|
||||
highlight: function() {
|
||||
|
||||
var scroll = this.page.window.scrollTop(),
|
||||
articleID = this.names[this.names.length - 1].id;
|
||||
|
||||
//$('a').removeClass('active');
|
||||
|
||||
var $el;
|
||||
|
||||
for(var i = 0, l = this.names.length; i < l; i++) {
|
||||
if (this.names[i].offset > scroll) {
|
||||
$el = $("[href='#" + this.names[i].id + "']");
|
||||
var s = $el.parents('ul')[0];
|
||||
|
||||
//$el.addClass('active');
|
||||
|
||||
if (s !== window.section) {
|
||||
//$(window.section).slideUp();
|
||||
$(window.section).hide();
|
||||
//$(s).slideDown();
|
||||
$(s).show();
|
||||
window.section = s;
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
updateLinks: function(index) {
|
||||
if (index !== this.names.length - 1) {
|
||||
this.setLink(this.links.next, this.names[index + 1]);
|
||||
} else {
|
||||
//this.links.next.slideUp(100);
|
||||
this.links.next.hide();
|
||||
}
|
||||
|
||||
if (index !== 0) {
|
||||
this.setLink(this.links.prev, this.names[index - 1]);
|
||||
} else {
|
||||
//this.links.prev.slideUp(100);
|
||||
this.links.next.hide();
|
||||
}
|
||||
},
|
||||
|
||||
setLink: function(ele, data) {
|
||||
ele.slideDown(100).attr('href', '#' + data.id)
|
||||
.find('.nav_section_name').html(data.title);
|
||||
}
|
||||
};
|
||||
|
||||
function Page() {
|
||||
$.extend(true, this, {
|
||||
window: $(window),
|
||||
nav: $('.nav > ul > li'),
|
||||
section: null,
|
||||
articule: null
|
||||
});
|
||||
|
||||
this.sections = new Sections(this);
|
||||
this.init();
|
||||
}
|
||||
|
||||
Page.prototype = {
|
||||
init: function() {
|
||||
var that = this,
|
||||
mainNav = $('.toc');
|
||||
|
||||
$.extend(this, {
|
||||
scrollLast: 0,
|
||||
resizeTimeout: null
|
||||
});
|
||||
|
||||
this.window.scroll(function() {
|
||||
that.onScroll();
|
||||
});
|
||||
|
||||
this.window.resize(function() {
|
||||
that.onResize();
|
||||
});
|
||||
|
||||
that.sections.map();
|
||||
setTimeout(function() {
|
||||
that.sections.highlight();
|
||||
}, 10);
|
||||
},
|
||||
|
||||
onScroll: function() {
|
||||
if ((+new Date()) - this.scrollLast > 50) {
|
||||
this.scrollLast = +new Date();
|
||||
this.sections.highlight();
|
||||
}
|
||||
},
|
||||
|
||||
onResize: function() {
|
||||
clearTimeout(this.resizeTimeout);
|
||||
}
|
||||
};
|
||||
|
||||
$(document).ready(function() {
|
||||
if ($(window).width() > 481) {
|
||||
var page = new Page();
|
||||
page.scrolllast = new Date();
|
||||
}
|
||||
|
||||
//$('.side ul ul').hide();
|
||||
//$('.side ul ul').first().show();
|
||||
$sidebar.find('.sidebar-nav').click(function () {
|
||||
$sidebar.removeClass('expanded');
|
||||
});
|
||||
});
|
||||
|
||||
@ -7,16 +7,11 @@
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
|
||||
<link href="http://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet">
|
||||
<link href="http://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
|
||||
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700|Source+Code+Pro" rel="stylesheet">
|
||||
<style type="text/css">
|
||||
$header-includes$
|
||||
</style>
|
||||
|
||||
<link href="css/bootstrap-min.css" rel="stylesheet">
|
||||
<link href="css/sidebar.css" rel="stylesheet">
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
@ -49,27 +44,25 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="https://github.com/sdiehl/wiwinwlh" class="fork"><img style="position: absolute; top: 0; right: 0; border: 0;" src="img/fork.png" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
|
||||
|
||||
<div>
|
||||
|
||||
<div id="sidebar-wrapper">
|
||||
<li class="sidebar-brand">
|
||||
<!--<img style="width: 100px" class="" src="img/haskell_logo.svg">-->
|
||||
</li>
|
||||
|
||||
<ul class="sidebar-nav">
|
||||
$toc$
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="span9 body">
|
||||
$body$
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidebar-wrapper">
|
||||
<a href="http://dev.stephendiehl.com/hask/" class="logo">
|
||||
<img src="img/haskell_logo.svg" alt="Haskell Logo">
|
||||
</a>
|
||||
<button id="toggle-sidebar">
|
||||
Menu
|
||||
</button>
|
||||
<ul class="sidebar-nav">
|
||||
$toc$
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="main-wrapper">
|
||||
<div id="main">
|
||||
$body$
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery.js"></script>
|
||||
<!--<script src="js/nav.js"></script>-->
|
||||
<script src="js/nav.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user