mirror of
https://github.com/sdiehl/wiwinwlh.git
synced 2024-07-07 08:36:30 +03:00
Navigation and scroll fixes (#143)
* Fix scrolling and some other minor goodies * Add document title and version at beginning * Fix rest of overflowing tables * Automatically wrap tables
This commit is contained in:
Oskar Wickström
Stephen Diehl
parent
d7539465ad
commit
512e9ce8c0
|
|
@ -97,20 +97,24 @@
|
|||
}
|
||||
#sidebar-wrapper .sidebar-nav {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
height: 100%;
|
||||
border-top: 1px solid #eee;
|
||||
overflow-y: auto;
|
||||
font-size: 15px;
|
||||
}
|
||||
#sidebar-wrapper .sidebar-nav a {
|
||||
display: inline-block;
|
||||
}
|
||||
#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;
|
||||
|
|
|
|||
|
|
@ -21,6 +21,27 @@ body {
|
|||
h1, h2, h3, h4, h5 {
|
||||
font-weight: bold;
|
||||
line-height: 1.1;
|
||||
margin: 1em 0 .5em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding: 1em 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: 250%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 175%;
|
||||
padding: .5em 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 150%;
|
||||
}
|
||||
h4 {
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
pre.sourceCode {
|
||||
|
|
@ -49,22 +70,17 @@ hr {
|
|||
margin: 50px 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 .5em 0;
|
||||
.document-title {
|
||||
text-transform: uppercase;
|
||||
font-size: 200%;
|
||||
text-align: center;
|
||||
font-size: 250%;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
h2 {
|
||||
.document-version {
|
||||
font-size: 150%;
|
||||
margin: .5em 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: bold;
|
||||
width: 400px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.author {
|
||||
|
|
@ -81,13 +97,16 @@ img {
|
|||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
a:link {
|
||||
color: #4070a0;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:active {
|
||||
color: #205080;
|
||||
}
|
||||
|
||||
/* Body Links */
|
||||
|
||||
|
|
@ -128,7 +147,30 @@ tr:nth-child(even) td{
|
|||
background:#f7f7f7;
|
||||
}
|
||||
|
||||
/* */
|
||||
/* Provide an overflowing container for the wide table */
|
||||
.overflow-table {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
overflow-x: auto;
|
||||
border-left: 1px solid #ddd;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
.overflow-table table {
|
||||
margin: 0;
|
||||
}
|
||||
/* Join the table borders with the .overflow-table div borders */
|
||||
.overflow-table tr td:first-child,
|
||||
.overflow-table tr th:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
.overflow-table tr td:last-child,
|
||||
.overflow-table tr th:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
/* Hide the stray paragraph tag generated by the build */
|
||||
.overflow-table > p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
|
|
|
|||
11
js/nav.js
11
js/nav.js
|
|
@ -1,4 +1,7 @@
|
|||
$(function () {
|
||||
|
||||
// NAV
|
||||
|
||||
var $sidebar = $('#sidebar-wrapper');
|
||||
var $toggle = $('#toggle-sidebar');
|
||||
|
||||
|
|
@ -6,7 +9,13 @@ $(function () {
|
|||
$sidebar.toggleClass('expanded');
|
||||
});
|
||||
|
||||
$sidebar.find('.sidebar-nav').click(function () {
|
||||
$sidebar.find('.sidebar-nav a').click(function () {
|
||||
$sidebar.removeClass('expanded');
|
||||
});
|
||||
|
||||
// TABLES
|
||||
$('#main table').each(function () {
|
||||
var $table = $(this).wrap('<div class="overflow-table"></div>');
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,7 +5,12 @@
|
|||
<title>What I Wish I Knew When Learning Haskell 2.3 ( Stephen Diehl )</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
$for(author-meta)$
|
||||
<meta name="author" content="$author-meta$">
|
||||
$endfor$
|
||||
$if(date-meta)$
|
||||
<meta name="dcterms.date" content="$date-meta$">
|
||||
$endif$
|
||||
|
||||
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700|Source+Code+Pro" rel="stylesheet">
|
||||
<style type="text/css">
|
||||
|
|
@ -43,7 +48,7 @@
|
|||
$endfor$
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body itemscope itemtype="http://schema.org/TechArticle">
|
||||
<div id="sidebar-wrapper">
|
||||
<a href="http://dev.stephendiehl.com/hask/" class="logo">
|
||||
<img src="img/haskell_logo.svg" alt="Haskell Logo">
|
||||
|
|
@ -58,6 +63,13 @@ $toc$
|
|||
|
||||
<div id="main-wrapper">
|
||||
<div id="main">
|
||||
<h1 class="document-title" itemprop="name">
|
||||
What I Wish I Knew When Learning Haskell
|
||||
</h1>
|
||||
<p itemprop="version" class="document-version">
|
||||
Version
|
||||
<span class="version">2.3</span>
|
||||
</p>
|
||||
$body$
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user