After working a little more with jekyll, I’m really starting to like it. It’s quite easy, once you get the hang of it (safe for CSS/SASS, but that’s a nightmare everywhere). So I’m posting a few handy snippets I found.

WORK FROM THE SOURCE!

My jekyll theme is based upon the minima theme. Basically anything I did was by looking at the source and modifying what I had to. In this post, whenever I talk about add this or add that file, I just downloaded it from the git repo and added it.

SYNTAX HIGHLIGHTING!

First, to create this post, I actually had to figure out how to display jekyll and html code in this blog. What you need is to use the { % raw % } tag to encapsule your liquid code (I deliberatly put a space in between the curly braces and the percentage sign here). Otherwise, the page generator will read your code even if it is in an highlight tag. And we don’t want that.

ORDER YOUR PAGES!

One of the first things I wanted to do, after creating my projects collection, I wanted to be able to sort my pages. I was really happy to see that this can be quite easily done! The code for this I got from stackoverflow In the folder /_includes, add the file header.html. There, find the div ‘trigger’. Change it to this:

    <div class="trigger">
        <a class="page-link"  href="{% raw %}{{ "/" | relative_url}}">Home</a>
        {% assign sorted_pages = site.pages | sort:"order" %}
        {% for my_page in sorted_pages %}
            {% if my_page.title %}
            <a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
            {% endif %}
       {% endfor %}
    </div>

Let’s go through that. Instead of simply looping through the pages, what you do instead is sort them by a property order. This property can simply be defined in the frontmater header of a page, like this:

---
layout: page
title: Links
permalink: /links/
order: 3
---

Next, I just loop over the list sorted_pages, giving me exactly the order I defined previously. Sidenote I also added a Home Button to my nav page. It just seemed to be missing for me.

ADD A FAVICON!

First, you obviously need a favicon. Create one and put it into the root directory of your page. For me, it didn’t show up at first. So again, I had to modify the source. In the folder /_includes, add the file head.html. There, we add a link tag to the head.

<head>
    ...
    <link rel="shortcut icon" type="image/x-icon" href="{{ "favicon.ico" | relative_url }}?">
    ...
</head>

This should work without any more modifications. Save and test.

Ok, this here is more a reminder to myself, but I promise I can show you a pretty neat CSS trick in the end. I made myself a little logo (hurray) and wanted to use it for more than just a favicon. My idea was to include it on the top right side of the page, same hight as the blog title. Seemed easy enough, I thought.

I changed this line in the header.html file

<a class="site-title" href="{{ "/" | relative_url}}">{{ site.title | escape }}</a>

to this

 <div class="site-title">
    <a class="site-left" href="/">Rosthouses Dev Blog</a>
    <img class="site-right" src="/assets/img/logo.png" alt="logo" >
</div>

After that my page looked like this: Logo Test 1 Allright, no worries. Just float these and it will work out perfectly.

.site-title{
    float: none;
    .site-left  { float: left; }
    .site-right { float: right; }
}

This should do the trick, next I…

Logo Test 2 Oh… Well that isn’t what I wanted.

After looking around a little, I got the problem. I have to tell the browser to stop floating elements as soon as I don’t want them to float anymore. That means checking what the next HTML element is in my tree and add this CSS tag to it: clear: both; What I don’t like about this solution is that the NEXT element basically has to clean up the mess of the previous element. After looking around, I foudn this:

.site-title{
    float: none;
    .site-left  { float: left; }
    .site-right { float: right; }
    &:after{
        content: '';
        display: block;
        clear: both;
    }
}

Whith the after element, I create an invisible HTML element, that clears up the floating. It’s a bit of a hac, but works pretty good: Logo Test 3

MORE TRICKS TO FOLLOW!

I will be posting more such tricks in the future. It’s a nice challenge to figure out such things and provides me a break.

NEXT WEEK!

Next week I will (finally) really start working on games. I intend to work on Bouncer again and change the aestethics of the game to have a “Fjord” theme instead of a medival one. Hopefully I can post a better project page after that.