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

2
_includes/foot.html
View file

@ -1,3 +1,3 @@
<footer class="foot">
<p>&copy; Copyright Simon Holywell 2015</p>
</footer>
</footer>

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>
<body>
{% include head.html %}
<div id="content">
<div id="content" class="wrap">
{{ content }}
</div>
{% include foot.html %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>

24
scripts.js
View file

@ -6,4 +6,26 @@ layout: nil
hljs.initHighlightingOnLoad();
{% 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
---
{% assign primary_colour = '#DE1B1B' %}
/*
Begin styles from codeguide.co by @mdo
@ -29,22 +31,28 @@ End styles from codeguide.co by @mdo
*/
/*
* Page navigation
*/
#content {
padding: 2% 10%;
max-width: 48em;
margin: 0 auto;
#page-nav {
bottom: 0.5em;
right: 0.5em;
position: fixed;
text-align: center;
font-weight: bold;
}
/*
* Typography
*/
h1 {
font-family: 'Roboto Slab', serif;
font-weight: 400;
}
h2 {
font-family: 'Roboto Slab', sans-serif;
font-family: 'Roboto Slab', serif;
font-weight: 400;
border-bottom: 0.25em solid #e2e2e2;
padding-bottom: 0.3em;
@ -55,10 +63,46 @@ h3:before {
width: 1.5em;
display: inline-block;
margin-left: -1.5em;
color: #f46801;
color: #DE1B1B;
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 */
code {
font-family: 'Droid Sans Mono', monospace;
@ -73,5 +117,6 @@ pre code {
{% include highlight.hybrid.css %}
.anchorjs-link {
color: #f46801;
color: {{ primary_colour }};
border: none;
}