From 974faf243d9770b21966e8c63aea5f88c2db8afe Mon Sep 17 00:00:00 2001 From: Simon Holywell Date: Mon, 6 Jul 2015 16:53:43 +0100 Subject: [PATCH] Styling and scroll to implemented --- _includes/foot.html | 2 +- _includes/head.html | 8 ++++++ _layouts/default.html | 3 ++- scripts.js | 24 ++++++++++++++++- style.css | 63 ++++++++++++++++++++++++++++++++++++------- 5 files changed, 88 insertions(+), 12 deletions(-) diff --git a/_includes/foot.html b/_includes/foot.html index 6bc1a64..06841cd 100644 --- a/_includes/foot.html +++ b/_includes/foot.html @@ -1,3 +1,3 @@ + \ No newline at end of file diff --git a/_includes/head.html b/_includes/head.html index e69de29..f25db9f 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -0,0 +1,8 @@ + +
+
+

SQL Style Guide

+
+
\ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index 9283663..090bc94 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -10,10 +10,11 @@ {% include head.html %} -
+
{{ content }}
{% include foot.html %} + diff --git a/scripts.js b/scripts.js index 0a01432..cddb95a 100644 --- a/scripts.js +++ b/scripts.js @@ -6,4 +6,26 @@ layout: nil hljs.initHighlightingOnLoad(); {% include anchor.min.js %} -anchors.add('h2,h3,h4,h5,h6'); \ No newline at end of file +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; + }); + }); +}); \ No newline at end of file diff --git a/style.css b/style.css index 4ba8ba3..a92542b 100644 --- a/style.css +++ b/style.css @@ -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; } \ No newline at end of file