mirror/sqlstyle.guide
1
0
Fork 0
mirror of https://github.com/treffynnon/sqlstyle.guide.git synced 2025-03-09 12:49:51 -05:00
Code Activity

Styling and scroll to implemented

Browse source
This commit is contained in:
Simon Holywell 2015-07-06 16:53:43 +01:00
parent 1f9e164e64
commit 974faf243d
5 changed files with 88 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
_includes/head.html
View file

@ -0,0 +1,8 @@
<nav id="page-nav">
<a href="#" id="to-top" class="toplink">↑</a>
</nav>
<header class="top">
<div class="wrap">
<h1>SQL Style Guide</h1>
</div>
</header>

3
_layouts/default.html
View file

@ -10,10 +10,11 @@
</head> </head>
<body> <body>
{% include head.html %} {% include head.html %}
<div id="content"> <div id="content" class="wrap">
{{ content }} {{ content }}
</div> </div>
{% include foot.html %} {% include foot.html %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="scripts.js"></script> <script src="scripts.js"></script>
</body> </body>
</html> </html>

22
scripts.js
View file

@ -7,3 +7,25 @@ hljs.initHighlightingOnLoad();
{% include anchor.min.js %} {% include anchor.min.js %}
anchors.add('h2,h3,h4,h5,h6'); anchors.add('h2,h3,h4,h5,h6');
/*
* ScrollTo code
*/
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var dest = 0;
if(target) {
var $target = $(target);
dest = $target.offset().top;
}
$('html, body').stop().animate({
'scrollTop': dest
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});

63
style.css
View file

@ -2,6 +2,8 @@
layout: nil layout: nil
--- ---
{% assign primary_colour = '#DE1B1B' %}
/* /*
Begin styles from codeguide.co by @mdo Begin styles from codeguide.co by @mdo
@ -29,22 +31,28 @@ End styles from codeguide.co by @mdo
*/ */
/*
* Page navigation
*/
#page-nav {
bottom: 0.5em;
#content { right: 0.5em;
padding: 2% 10%; position: fixed;
max-width: 48em; text-align: center;
margin: 0 auto; font-weight: bold;
} }
/*
* Typography
*/
h1 { h1 {
font-family: 'Roboto Slab', serif; font-family: 'Roboto Slab', serif;
font-weight: 400; font-weight: 400;
} }
h2 { h2 {
font-family: 'Roboto Slab', sans-serif; font-family: 'Roboto Slab', serif;
font-weight: 400; font-weight: 400;
border-bottom: 0.25em solid #e2e2e2; border-bottom: 0.25em solid #e2e2e2;
padding-bottom: 0.3em; padding-bottom: 0.3em;
@ -55,10 +63,46 @@ h3:before {
width: 1.5em; width: 1.5em;
display: inline-block; display: inline-block;
margin-left: -1.5em; margin-left: -1.5em;
color: #f46801; color: #DE1B1B;
font-weight: normal; font-weight: normal;
} }
a {
color: #333;
border-bottom: 1px solid {{ primary_colour }};
text-decoration: none;
-o-transition:.2s;
-ms-transition:.2s;
-moz-transition:.2s;
-webkit-transition:.2s;
transition:.3s;
}
a:hover {
color: {{ primary_colour }};
border-color: #333;
}
header.top {
background: {{ primary_colour }};
}
header.top h1 {
color: #fff;
}
.wrap {
padding: 2% 10%;
max-width: 48em;
margin: 0 auto;
}
#content h1 {
display: none;
}
/* Syntax highlighting */ /* Syntax highlighting */
code { code {
font-family: 'Droid Sans Mono', monospace; font-family: 'Droid Sans Mono', monospace;
@ -73,5 +117,6 @@ pre code {
{% include highlight.hybrid.css %} {% include highlight.hybrid.css %}
.anchorjs-link { .anchorjs-link {
color: #f46801; color: {{ primary_colour }};
border: none;
} }