kidwellj/findcommonground.uk
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Lots of style updates

Browse source
This commit is contained in:
Barry Clark 2014-02-12 20:42:49 -05:00
parent 6c7ba1bc57
commit db4dceaba5
14 changed files with 194 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -1,4 +1,3 @@
# Jekyll Boilerplate # Jekyll Boilerplate
Create your Jekyll blog in minutes. Create your Jekyll blog in minutes.

44
_config.yml
View file

@ -1,25 +1,37 @@
#
# This file contains configuration flags to customize your site
#
# The name of your site
name: Jekyll Boilerplate name: Jekyll Boilerplate
# A short bio or description
description: Short bio of description placeholder.
# A URL pointing to your avatar or profile pic
# To use your Gravatar: (the one that GitHub uses for your profile pic)
# 1. Go to https://github.com/YOURUSERNAME/
# 2. Right click > Copy Image URL on your profile pic,
# 3. Take the first long ID from the URL and paste it in place of mine below
avatar: http://www.gravatar.com/avatar/36b4f56a7fa40d3c06e5afc4ed0b82b5?s=200
# Your disqus username, if you'd like blog commenting
disqus:
# Your Google Analytics web tracking code (e.g. UA-2110908-2)
google_analytics:
# Links used for your social icons
links:
github: https://github.com/YOUR-USERNAME
twitter: https://twitter.com/YOUR-USERNAME
#linkedin: https://linkedin.com/in/YOUR-USERNAME
markdown: redcarpet markdown: redcarpet
markdown_ext: md
pygments: true
# Exclude these files from your production _site
exclude: exclude:
- Gemfile - Gemfile
- Gemfile.lock - Gemfile.lock
- scss - scss
- js
- README.md - README.md
disqus:
shortname: ''
googleanalytics:
id: ''
links:
#github: https://github.com/YOUR-USERNAME
#twitter: https://twitter.com/YOUR-USERNAME
#linkedin: https://linkedin.com/in/YOUR-USERNAME
#avatar: http://YOUR-USERNAME.github.io/images/avatar.jpg

2
_includes/analytics.html
View file

@ -2,7 +2,7 @@
<script type="text/javascript"> <script type="text/javascript">
var _gaq = _gaq || []; var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{{ site.googleanalytics.id }}']); _gaq.push(['_setAccount', '{{ site.google_analytics }}']);
_gaq.push(['_trackPageview']); _gaq.push(['_trackPageview']);
(function() { (function() {

10
_includes/disqus.html
View file

@ -1,16 +1,14 @@
<div id="disqus_thread"></div> <div id="disqus_thread"></div>
<script type="text/javascript"> <script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ {% if include.disqus %}
var disqus_shortname = '{{ site.disqus.shortname }}'; // required: replace example with your forum shortname
{% if include.disqus_identifier %} var disqus_shortname = '{{ site.disqus }}';
var disqus_identifier = "{{ include.disqus_identifier }}";
{% endif %}
(function() { (function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})(); })();
</script> {% endif %}
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

6
_layouts/default.html
View file

@ -20,8 +20,10 @@
</head> </head>
<body> <body>
<header> <header class="masthead">
<a href="/" class="logo"><img src="/404.ups" />{{ site.name }}</a> <img src="{{ site.avatar }}" class="avatar" />
<a href="/" class="name">{{ site.name }}</a>
<p class="description">{{ site.description }}</p>
<nav> <nav>
<a href="/">Blog</a> <a href="/">Blog</a>

2
_layouts/page.html
View file

@ -3,7 +3,7 @@ layout: default
--- ---
<article class="page"> <article class="page">
<h1>{{ page.title }}</h1> <header><h1>{{ page.title }}</h1></header>
<div class="entry"> <div class="entry">
{{ content }} {{ content }}

2
_layouts/post.html
View file

@ -3,7 +3,9 @@ layout: default
--- ---
<article class="post"> <article class="post">
<header>
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>
</header>
<div class="entry"> <div class="entry">
{{ content }} {{ content }}

85
_posts/2014-4-4-Jekyll-The-Easy-Way.md Normal file
View file

@ -0,0 +1,85 @@
---
layout: post
title: Jekyll The Easy Way
---
I just migrated my blog over to this Jekyll powered static site that you're currently reading. Finding a good workflow with Jekyll took me longer than I expected.
When you understand how Jekyll works, it's _extremely_ fast to set up. However when learning I came across lot of articles, repos and stack overflow threads that made the setup much more complicated than it needs to be.
![cool code image aww yea](/images/omg-code.jpg)
### Jekyll is built for one specific purpose
Tom Preston Warner of Github build Jekyll to [[INSERT HERE EXCERT FROM TPW's blog]]
This also the way that Jekyll was built to be used!
It was built for one purpose. To make blogging on Github Pages extremely quick and easy.
If you want more than a simple blog hosted on Github Pages, don't use Jekyll! Sure, it can be used for other things too. But if you try to use them for those, you're probably going to have a bad time.
### Use your named account on Github Pages (barryclark.github.io)
This eliminates the need for a seperate gh-pages branch workflow, making things really simple!
You just commit your Jekyll layout files and your markdown blog posts and content to the master branch of your barryclark.github.io, and Github Pages AUTOMATICALLY compiles it.
Fun fact: Github Pages processes ALL files through Jekyll. You mostly just don't notice this if you're using Github Pages for static content as flat .html content just passes through and doesn't get compiled.
If you wanted to, you wouldn't actually ever hard to install or run jekyll locally. You could just push up to your barryclark.github.io and everything would be taken care of for you.
That is awesome. And that's the first way that Jekyll is supposed to be used.
### Don't use plugins
Github Pages builds Jekyll sites in "safe mode". This means that when compiling your site, Github Pages won't run any of your plugins, it'll only use the standard Jekyll build. If you want to use plugins to
That means you can't compile SASS, etc, etc.
Using plugins means that you can't use your Github Pages account. There are other ways to do this. But they add lots of extra complexity.
### Pre-process css/js yourself
Use a guard or grunt script while you're theming. Don't try to do it within the jekyll build process.
You should be using grunt anyway.
Then just push the .css and .js and Jekyll will have no problems with it. No need to install jekyll-asset-manager, which has a whole host of complications with it.
### Have a workflow for blogging, and a separate workflow for theming
Updating content is CRAZY easy... and that's the whole point of Jekyll. You just write a markdown post and commit it to the repo, and you're done. Amazing.
2 of the simplest theming workflows I found:
- Build your site statically and theme that.
-
Don't try to mix things in to the jekyll build process. It's not worth it, and you likely won't be able to use that workflow on barryclark.github.io
### To get started, fork a good repo
Following all of the about tips, you'll have a much easier time setting up Jekyll... and hell, if you want to do some fancy things, add them in later.
There are a number of repos that already follow the rules above. Forking one of them will put you on the right tracks, and save you a TON of time. You'll be able to get up and running extremely quickly.
Give a list of my favorite repos to fork.
- Tom Preston Warner
- Zach Holman
I've also shared my base theme repo, which abides by each of the things I've covered in this post. It includes grunt scripts to do your pre-processing, and the same layout as you see here on this blog, with easy options for customization.
- Mine (Jekyllstrap? Jekyll-base?) :>
### Forking Jekyllstrap
Give instructions on exactly how to fork the repo. Step through each step to have your Jekyll site running on your name.com domain name.
1. Fork
2. Write your CSS
3.
I should create this, and fork my own repo.

14
about.md Normal file
View file

@ -0,0 +1,14 @@
---
layout: page
title: About Me
---
Some information about you!
### More Information
A place to include any other types of information that you'd like to include about yourself.
### Contact me
[email@domain.com](mailto:email@domain.com)

BIN
images/omg-code.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 62 KiB

6
index.html
View file

@ -6,12 +6,12 @@ layout: default
{% for post in site.posts %} {% for post in site.posts %}
<article class="post"> <article class="post">
<header> <header>
<h2>{{ post.title }}</h2> <h1>{{ post.title }}</h1>
</header> </header>
<div class="entry">{{ post.content | truncatewords:50}}</div> <div class="entry">{{ post.content | truncatewords:40}}</div>
<a href="{{ post.url }}">Read More</a> <a href="{{ post.url }}" class="read-more">Read More</a>
</article> </article>
{% endfor %} {% endfor %}
</div> </div>

2
scss/_variables.scss
View file

@ -12,7 +12,7 @@ $black: #000;
$darkerGray: #222; $darkerGray: #222;
$darkGray: #333; $darkGray: #333;
$gray: #666; $gray: #666;
$lightGray: #bbb; $lightGray: #aaa;
$lighterGray: #eee; $lighterGray: #eee;
$white: #fff; $white: #fff;

35
scss/style.scss
View file

@ -17,7 +17,7 @@ html {
} }
body { body {
max-width: 700px; max-width: 680px;
margin: 0 auto; margin: 0 auto;
background: $white; background: $white;
@ -25,20 +25,20 @@ body {
color: $darkGray; color: $darkGray;
} }
h1, h2, h3, h4, h5, h6, .section > header { h1, h2, h3, h4, h5, h6 {
font-family: $helveticaNeue; font-family: $helveticaNeue;
color: $darkerGray; color: $darkerGray;
font-weight: bold; font-weight: 400;
line-height: 1.7; line-height: 1.7;
margin: 2em 0 15px; margin: 1em 0 15px;
padding: 0; padding: 0;
} }
h1 { h1 {
font-size: 2rem; font-size: 2.2rem;
@include mobile { @include mobile {
font-size: 2rem; font-size: 2.2rem;
} }
} }
@ -86,6 +86,10 @@ ul {
list-style-type: disc; list-style-type: disc;
} }
img {
max-width: 100%;
}
// Specify the color of the selection // Specify the color of the selection
::-moz-selection { ::-moz-selection {
color: $black; color: $black;
@ -101,10 +105,6 @@ ul {
// LAYOUT / SECTIONS // LAYOUT / SECTIONS
// //
header {
margin: 40px 0;
}
.logo { .logo {
float: left; float: left;
@ -118,6 +118,10 @@ header {
} }
} }
.avatar {
border-radius: 6px;
}
nav { nav {
float: right; float: right;
@ -154,13 +158,12 @@ nav {
} }
} }
.posts > .post {
padding-bottom: 2em;
border-bottom: 1px solid $lighterGray;
}
.post { .post {
width: 680px;
@include mobile {
width: 100%;
}
blockquote { blockquote {
border-left: 2px solid $gray; border-left: 2px solid $gray;
font-size: 1.2em; font-size: 1.2em;

32
style.css
View file

@ -285,25 +285,25 @@ html {
font-size: 100%; } font-size: 100%; }
body { body {
max-width: 700px; max-width: 680px;
margin: 0 auto; margin: 0 auto;
background: white; background: white;
font: 18px/1.4 Helvetica, Arial, sans-serif; font: 18px/1.4 Helvetica, Arial, sans-serif;
color: #333333; } color: #333333; }
h1, h2, h3, h4, h5, h6, .section > header { h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #222222; color: #222222;
font-weight: bold; font-weight: 400;
line-height: 1.7; line-height: 1.7;
margin: 2em 0 15px; margin: 1em 0 15px;
padding: 0; } padding: 0; }
h1 { h1 {
font-size: 2rem; } font-size: 2.2rem; }
@media screen and (max-width: 520px) { @media screen and (max-width: 520px) {
h1 { h1 {
font-size: 2rem; } } font-size: 2.2rem; } }
h2 { h2 {
letter-spacing: 1px; letter-spacing: 1px;
@ -340,6 +340,9 @@ ul {
padding-left: 30px; padding-left: 30px;
list-style-type: disc; } list-style-type: disc; }
img {
max-width: 100%; }
::-moz-selection { ::-moz-selection {
color: black; color: black;
background: #eeeeee; } background: #eeeeee; }
@ -348,9 +351,6 @@ ul {
color: black; color: black;
background: #eeeeee; } background: #eeeeee; }
header {
margin: 40px 0; }
.logo { .logo {
float: left; } float: left; }
.logo a { .logo a {
@ -360,6 +360,9 @@ header {
.logo a:hover, .logo a:active { .logo a:hover, .logo a:active {
color: #4183c4; } color: #4183c4; }
.avatar {
border-radius: 6px; }
nav { nav {
float: right; float: right;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@ -386,12 +389,11 @@ nav {
width: 100%; width: 100%;
text-align: center; } } text-align: center; } }
.post { .posts > .post {
width: 680px; } padding-bottom: 2em;
@media screen and (max-width: 520px) { border-bottom: 1px solid #eeeeee; }
.post {
width: 100%; } } .post blockquote {
.post blockquote {
border-left: 2px solid #666666; border-left: 2px solid #666666;
font-size: 1.2em; font-size: 1.2em;
font-style: italic; font-style: italic;