brianmaierjr / long-haul

A minimal, type-focused Jekyll theme.

Long Haul is a minimal jekyll theme built with SASS and focuses on long form blog posts. It is meant to be used as a starting point for a jekyll blog/website.

If you really enjoy Long Haul and want to give me credit somewhere on the internet send or tweet out your experience with Long Haul and tag me @brianmaierjr.

View Demo

Features

• Minimal, Type Focused Design
• Built with SASS
• SVG Social Icons
• Responsive Nav Menu
• XML Feed for RSS Readers
• Contact Form via Formspree
• 5 Post Loop with excerpt on Home Page
• Previous / Next Post Navigation
• Estimated Reading Time for posts
• Stylish Drop Cap on posts
• A Better Type Scale for all devices
• Comments powered by Disqus
• Dark Mode support via prefers-color-scheme

Setup

1. Install Jekyll
2. Fork the Long Haul repo
3. Clone it
4. Install Bundler
5. Run bundle install
6. Run Jekyll Serve and Watch commandbundle exec jekyll serve -w

Site Settings

The main settings can be found inside the _config.yml file:

• title: title of your site
• description: description of your site
• url: your url
• paginate: the amount of posts displayed on homepage
• navigation: these are the links in the main site navigation
• social diverse social media usernames (optional)
• google_analytics Google Analytics key (optional)

Header Option

If you'd like your header to be larger then you can use the option below in you config.yml to make it take up half of the vertical space on screens 800px wide and up. Preview image below.

• header: large

To use on GitHub Pages

To use latest Jekyll and Jekyll Sass Converter on GitHub Pages, you can now deploy to a GitHub Pages site using GitHub Actions.

License

This is MIT with no added caveats, so feel free to use this Jekyll theme on your site without linking back to me or using a disclaimer.

long-haul's Issues

og:image is not worked

Hi, thanks for your beautiful and easy to use jekyll template!

I added Open Graph meta to my blog today and I noticed that your template has a bug that the og:image won't display!

in _includes/head.html, the code below has something wrong:

<meta content="{{ '/assets/img/touring.jpg' | prepend: site.baseurl }}" property="og:image">

In _config.yml, site.baseurl is empty so that the code above will become

<meta content="'/assets/img/touring.jpg" property="og:image">

I've tried myself to replace site.baseurl with site.url and it works, maybe you can fix it?

<meta content="{{ '/assets/img/touring.jpg' | prepend: site.url }}" property="og:image">

`compass compile` can't find `support-for`

Error:

$ compass compile
    write assets/css/ie.css
    error assets/scss/style.scss (Line 1 of /home/nobody/.gem/ruby/gems/normalize-scss-4.0.3/sass/_normalize.scss: File to import not found or unreadable: support-for.
Load paths:
  Compass::SpriteImporter
  /home/nobody/[...]/long-haul/assets/scss
  /home/nobody/.gem/ruby/gems/compass-core-1.0.3/stylesheets
  /home/nobody/.gem/ruby/gems/susy-2.2.9/sass
  /home/nobody/.gem/ruby/gems/normalize-scss-4.0.3/sass)
Compilation failed in 1 files.

Context:

• support-for (1.0.3)
• normalize-scss (4.0.3)
• ruby 2.0.0p353 (2013-11-22 revision 43784) [i386-linux]
• Fedora release 20 (Heisenbug)

Remove SUSY

That's right, my beloved susy needs to go. It's not really used that much on this theme honestly and I'd much rather move towards using flexbox. Bring on the future!

how can i Compile the scss

when i call compass watch
then throw command not found: compass

Medium support

Hi,

Thank you very much for your nice theme!! I would like to add Medium icon under social section. Is it possible? Where can I find the svg icon?

Thanks!

Your theme is listed in jekyllthemes.ru

Your theme has been listed on http://jekyllthemes.ru/

Liquid Syntax Error

When running jekyll serve I get this error:

Liquid Exception: Liquid syntax error: Unexpected character \ in "{{ \'/assets/js/jquery-1.11.2.min.js\' | prepend: site.baseurl }}" in _includes/scripts.html, included in _layouts/default.html
jekyll 3.0.0.pre.beta4 | Error:  Liquid syntax error: Unexpected character \ in "{{ \'/assets/js/jquery-1.11.2.min.js\' | prepend: site.baseurl }}"

I am not sure if this is something I need to fix on my end. This is my second attempy at using a Jekyll theme are yours is awesome but very complex lol. Also, I do get this error as well even after I install the gem.

Deprecation: You appear to have pagination turned on, but you haven't included the `jekyll-paginate` gem. Ensure you have `gems: [jekyll-paginate]` in your configuration file.

Any help you have would be great. Like I said, your theme is dope and I can't wait to use it. Thanks!

Thanks

This theme is super awesome.

Just one suggestion — would be nice to offer some guidance for extra features people might want, like integrating a commenting widget or displaying a "related articles" at the bottom at the page.

But I guess I can get my hands dirty and the typography, omg it's the best I've seen.

same day posts

Hello, I had some difficulty with posts with the same date, their order was wrong. Any solution? Thanks in advance for your help.

Add Whitespace Control

https://shopify.github.io/liquid/basics/whitespace/

Home tab isn't marked as current

Hello, I've a problem with nav bar. After I downloaded and launched page, behaviour of nav bar is inconsistent with the one from demo. First tab isn't highlighted and on demo it works. Do you have any idea why is that?

I've tried to debug this, but I don't have any idea how it works in demo, because page.url of home is always - baseUrl/ and link.url is /index.html, so page.url contains link.url is always false.

Quick fix is to extend condition in header.html to:

if page.url contains link.url or forloop.first and page.url == '/'

I can create for that PR, but I am not happy with that solution.

How to get Pagination on a page other than the Homepage?

I wanted my site to have the About page featured on the homepage, and my Recent Posts featured on a Blog page. I was able to make this work by doing the following.

I took the code that was originally in the index.html and pasted it into a blog.md file in the root directory. At first, nothing showed up on the page, but when I changed the line:

{% for post in paginator.posts %}

to:

{% for post in site.posts %}

all of my blog posts appeared on the Blog page. The only problem is that there is no pagination on the page. Any help would be greatly appreciated, thank you :)

Convert to use jekyll sass functionality

I'd like to leave compass behind and convert this theme to use default jekyll sass compiling.

Outdated npm packages

Hi Brian,

I decided to come and see if you updated the theme in the last years and it looks so!
You adopted some new things I'm getting familiar right now.

Going to the point, running

npm install

I get some warnings:

npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js

what's the best thing to do?

Thanks

Twitter Cards Support

Great job on the theme! Can you add support for Twitter Cards? Currently, if you post a URL on Twitter, it doesn't display the feature image or the summary.

Style for bigger screens

Bigger text, bigger angles, everything bigger!

Assets not being loaded

Hi,

I'm trying to switch themes to long-haul and I've encountered a strange issue, where jekyll serves the blog up fine from my existing posts but doesn't seem to load any assets.

I get Failed to load resource 404s for the following assets.

http://farez.ca/assets/css/style.css
http://farez.ca/assets/js/modernizr.custom.15390.js 
http://farez.ca/assets/js/scripts.js 
http://farez.ca/assets/js/responsive-nav.min.js 
http://farez.ca/assets/js/dropcap.min.js 
http://farez.ca/assets/css/style.css

I'm not sure if this is related but I can't seem to run compass watch successfully. I get

farez$ compass watch
WARN: Unresolved specs during Gem::Specification.reset:
      ffi (>= 0.5.0)
WARN: Clearing out unresolved specs.
Please report a bug if this causes problems.
LoadError on line ["179"] of /Users/farez/.rvm/gems/ruby-2.0.0-p481/gems/compass-core-1.0.3/lib/compass/configuration/data.rb: cannot load such file -- normalize-scss

Any idea what's wrong? I'm not a ruby or front-end programmer and have no experience with SASS etc.

Thank you for making long-haul, it's a great theme!

Farez

How to change color instead of green?

I want to chang primary color instead of green (seagreen?). How to do that?

markdown grammar of quote use failed

when use markdown grammar about 「quote」

i read about the 《Example Post Formatting》

<blockquote>***</blockquote>

but,it didn't work

look like this:

i wrote by this:

Your theme is listed on jekyll-themes.com

Your theme has been listed on https://jekyll-themes.com/.

Render-blocking Javascript and other speed improvements

I was wondering if you could take a look at improving a few speed resources. Such as moving the JavaScript loading to the footer (modernizr.custom.15390.js) to improve load times/load them in parallel or optimizing the CSS delivery.

The website that I'm referring to that shows these suggestions is https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fbrianmaierjr.com%2Flong-haul%2F

.post figure img tag needs to center

In css/style.css
line~1157
Tag: .post figure img
If the image in a figure is not as wide as the surrounding divs (for example, if the image is 580 pixels wide and is a figure) it will become left justified. Unless the following is added to the css style.css sheet in the ".post figure img" tag.

display: block;
margin-left: auto;
margin-right: auto;

How to change the style of inline syntax?

Hi, brian:

I am a newbie of jekyll, but I really like the long-haul theme. I am building my website based on it. When I try to use the `` (single quote) to highlight words or syntax inline, I find it not obvious enough to see this in-line highlighting. Could you let me know where is the source code for inline syntax that I can modify?

Also, I am wondering whether the theme where box for syntax highlighting is wider than normal paragraph is kind of style you try to keep in the theme? How can I modify the size of the syntax box? Thank you!

Could not find addressable-2.5.1 in any of the sources (Bundler::GemNotFound)

I'm getting:

WARN: Unresolved specs during Gem::Specification.reset: listen (< 3.1, ~> 3.0) WARN: Clearing out unresolved specs. Please report a bug if this causes problems. C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/bundler-1.16.0.pre.2/lib/bundler/spec_set.rb:88:in block in materialize': Could not find addressable-2.5.1 in any of the sources (Bundler::GemNotFound)
from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/bundler-1.16.0.pre.2/lib/bundler/spec_set.rb:82:in map!' from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/bundler-1.16.0.pre.2/lib/bundler/spec_set.rb:82:in materialize'
from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/bundler-1.16.0.pre.2/lib/bundler/definition.rb:171:in specs' from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/bundler-1.16.0.pre.2/lib/bundler/definition.rb:238:in specs_for'
from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/bundler-1.16.0.pre.2/lib/bundler/definition.rb:227:in requested_specs' from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/bundler-1.16.0.pre.2/lib/bundler/runtime.rb:110:in block in definition_method'
from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/bundler-1.16.0.pre.2/lib/bundler/runtime.rb:22:in setup' from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/bundler-1.16.0.pre.2/lib/bundler.rb:107:in setup'
from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/jekyll-3.5.2/lib/jekyll/plugin_manager.rb:48:in require_from_bundler' from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/jekyll-3.5.2/exe/jekyll:9:in <top (required)>'
from C:/Ruby24-x64/bin/jekyll:23:in load' from C:/Ruby24-x64/bin/jekyll:23:in

'`

after running jekyll serve

How to expand width of page?

I want to expand width of page but I can't find the code.
Can you help me? thank you!

double bullet indentions are too wide

Whenever I make a bulleted list that has sub bullets, the indention is insanely far to the point where listed item starts on the halfway point of the page.

Assets aren't loading

Hi Brian,
thanks for a great template.

I can't seem to get the assets to load when I push my site to gh-pages. It works fine when working locally. Would you mind taking a look? The site is at:
https://github.com/sebastianbarfort/BoT
It renders at
https://sebastianbarfort.github.io/BoT/

I'm sorry if this is a replica of #1, but I couldn't figure out what the problem was.

Best,
Sebastian

sorry.ㅜㅜ 'I'm confused.

Disqus comments

I love your theme!

How can we enable Disqus comments?

compass errors

Compass is detaching the header image from the corners when I bundle exec compass watch:

I'm also receiving those warnings:

"DEPRECATION WARNING on line 87 of /var/lib/gems/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_deprecated-support.scss: #{}
(...)
DEPRECATION WARNING on line 92 of /var/lib/gems/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_deprecated-support.scss: #{}
(...)"

I pinned the sass version to 3.4.16 in Gemfile and the warnings were gone, but the header malfunctions persisted.

Error when using native SCSS compiler

I get an error when I try to use the native Jekyll SCSS compiler

  Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/style.scss':
                    File to import not found or unreadable: compass. Load path: /Users/valentin/development/webdev/blog/assets/_scss on line 2

When I comment out the 2 external files compass and normalize I get this error

 Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/style.scss':
                    Undefined mixin 'transition'. on line 20

This is the entry I added to the _config.yml

sass:
  sass_dir: scss

I have moved the style.css and the ie.scss into the css folder and added frontmatter.
I have also gem installed normalize-scss and susy

EDIT: I am only trying to use the native compiler because I can't seem to get compass working. The command is "undefined", even though I have installed ti normalize-scss gem

Image width in figures with captions

The image width in figures with captions does not match up with the width of the text, which looks a little awkward in my opinion.

How can I change this? The .css looks very difficult to edit. How do I unpack this .css into a human-readable form?

Not been able to update colors

Hi

Thanks for a great template and I´m trying to update the colors.
I´m changing the file assets/scss/_config.scss

// Color variables
$primary-color: $mat_indigo_500;
$secondary-color: $mat_indigo_500;
$tertiary-color: $mat_indigo_900;
$link-color: $primary-color;

$bad-color: $red; // Bad color for errors, validation etc.
$good-color: $primary-color; // Good color for success etc.
$info-color: $blue; // Good color for success etc.
$warning-color: $orange; // Good color for success etc.
$subtle-color: $grey; // Subtle color for subtle text

But nothing happens. why?

Extraneous period

Is the period at the end of
https://github.com/brianmaierjr/long-haul/blob/master/assets/scss/breakpoints/_mobileup.scss#L329 an accident, or is this some funky CSS hack?

Error when running compass watch

When running compass watch I am receiving the following error:

LoadError on line ["54"] of /Library/Ruby/Site/2.0.0/rubygems/core_ext/kernel_require.rb: cannot load such file -- normalize-scss
Run with --trace to see the full backtrace

I tried commenting out require "normalize-scss" on config.rb but this leads to another series of errors with Susy imports.

Creating new footer icons

I was trying to create new footer icons (hacker news, feeds, and linkedin for example) and I can't understand how are you doing them...

Formspree link in about.md is incorrect

Just an FYI, but the formspree URL in about.md is missing a colon (and has an extra trailing slash).

Add support for linkedin under social

The supported social media handles include facebook, email, twitter and github. It would be great to add linkedin as well to the list.

markdown does not work in post

hi,
i c'ant make a new line in my post in markdown. The only way to make it work is using html br. how can i activate the markdown rendering ?
Sorry for my english :-(

Adding associate ads alongside text

I want to add associate ads in the blank space to the right and left of the text.

how to change the 「github」 address on navigation

I had search the config.yml, but it seems have not this config.

navigation:
 - title: Home
   url: /index.html
 - title: About
   url: /about
 - title: Contact
   url: /contact

gem missing error for jekyll but I have the gem installed.

When I try to launch the server (jekyll serve) I get this error saying the gem jekyll-paginate cannot be accesed.

Dependency Error: Yikes! It looks like you don't have jekyll-paginate or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. The full error message from Ruby is: 'cannot load such file -- jekyll-paginate' If you run into trouble, you can find helpful resources at https://jekyllrb.com/help/!

Any ideas? Let me know if you need more info. I don't think I am using your theme but perhaps you have ideas.

Cheers!

Ordered lists are indented too far

Follows the same issue as here, #21 Except now it is for ordered lists.

Having problems running the project

Hey @brianmaierjr

Thanks for the awesome theme! I'm pretty new to jekyll (I might be doing something wrong) but when I tried to build the project following your steps I got this error:

Configuration file: <my-path>/long-haul/_config.yml
       Deprecation: You appear to have pagination turned on, but you haven't included the `jekyll-paginate` gem. Ensure you have `gems: [jekyll-paginate]` in your configuration file.
            Source: <my-path>/long-haul
       Destination: <my-path>/long-haul/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
  Dependency Error: Yikes! It looks like you don't have redcarpet or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. The full error message from Ruby is: 'cannot load such file -- redcarpet' If you run into trouble, you can find helpful resources at http://jekyllrb.com/help/! 
  Conversion error: Jekyll::Converters::Markdown encountered an error while converting '_posts/2014-12-10-test-post.markdown':
                    redcarpet
             ERROR: YOUR SITE COULD NOT BE BUILT:
                    ------------------------------------
                    redcarpet

I did try to install the pygments gem ( gem install pygments.rb ) as some people online said it would resolve this kind of problem but it didn't fix it for me. Any idea what is going on?

Don't know what kind of extra information you might need to check this problem but please let me know if I can do something to help.

Thanks a lot again

Add angle to header on mobile and fix long site names.

Disqus Implementation

Hi @brianmaierjr. I really love this beautiful Jekyll theme of yours. Can I implement Disqus (https://disqus.com/) to activate comment blog feature?

How to make the default text wider in posts?

I really appreciate your theme! However, I want to make the default text in posts wider, but I failed to do so. I'm not very familiar with css, so could you please tell me a way to do that? I just want the text to be as wide as the bottom line. Thank you!

[Feature Request] Add global color option to config

Hello there! I was taking a look at this theme for usage with Jekyll. I'm really liking it! I was wondering if I could request a small feature. I see that most of the green elements in the CSS are the same color. Would you be able to add in a config option to change this color globally instead of changing each instance in the stylesheet?

Changing the title

Hi Brian, great theme. First one I have liked in a while.

I use your theme on http://popagandhi.com/ and I have changed the title in my config file. However, it still outputs as Long Haul. Do you know where I can change it?

Diagonal shape in big screens

The diagonal shape on header's image seems buggy in big screens and small zoom.