index.html

---
layout: default
---

<div class="teaserimage">
    <div class="teaserimage-image" {% if site.cover %}style="background-image: url({{ site.cover }})"{% endif %}>
        Teaser Image
    </div>
</div>

<header class="blog-header">

    <https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/fontawesome.min.css" rel="stylesheet">
    <!-- link href="./css/fontawesome_meetup_icon/meetup_icon_patch.css" rel="stylesheet" -->

    {% if site.logo %}
    <a class="blog-logo" href="{{site.url}}" style="background-image: url('{{ site.logo }}')">{{ site.title }}</a>
    {% endif %}
    <h1 class="blog-title">{{ site.title }}</h1>
    <h2 class="blog-description">{{ site.description }}</h2>
    <div class="custom-links">
        <!--    <a href="https://groups.google.com/forum/#!forum/edinbr">Mailing list</a>
            &nbsp;&nbsp;·&nbsp;&nbsp; -->
        <a href="/about/">About</a>
	&nbsp;&nbsp;·&nbsp;&nbsp;
        {% for social in site.social %}
        <a class="icon-{{ social.icon }}" href="{{ social.url }}">
            <i class="fa fa-{{ social.icon }}"></i>
        </a>
        &nbsp;&nbsp;·&nbsp;&nbsp;
        {% endfor %}
	<a href="/code_of_conduct/">Code of conduct</a>

    </div>
    <div id="home-search" class="home">
        <script>
            (function() {
                var cx = '001991838578884220505:j66yua34t8u';
                var gcse = document.createElement('script');
                gcse.type = 'text/javascript';
                gcse.async = true;
                gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                    '//www.google.com/cse/cse.js?cx=' + cx;
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(gcse, s);
            })();
        </script>
        <gcse:search queryParameterName="searchString"></gcse:search>
    </div>
</header>


<script>
    (function ($) {
        "use strict";

        $(document).ready(function(){

            var $window = $(window),
                $image = $('.teaserimage-image');
            $window.on('scroll', function() {
                var top = $window.scrollTop();

                if (top < 0 || top > 1500) { return; }
                $image
                    .css('transform', 'translate3d(0px, '+top/3+'px, 0px)')
                    .css('opacity', 1-Math.max(top/700, 0));
            });
            $window.trigger('scroll');

        });

    }(jQuery));
</script>


<main class="content" role="main">

    {% if site.tags.featured %}
    <h5 class="index-headline featured"><span>Featured</span></h5>

    <div class="container featured">
        {% for post in site.tags.featured %}
        <article class="post" itemscope itemtype="http://schema.org/BlogPosting" role="article">
            <div class="article-item">
                <header class="post-header">
                    <h2 class="post-title" itemprop="name"><a href="{{ post.url }}" itemprop="url">{{ post.title }}</a></h2>
                </header>
                <section class="post-excerpt" itemprop="description">
                    <p>{{ post.content | strip_html | truncatewords: 50 }}</p>
                </section>
                <div class="post-meta">
                    <time datetime="{{ post.date | date_to_long_string }}">{{ post.date | date_to_long_string }}</time>
                    <!--            <span class="post-tags-set">on {{#foreach tags}}<span class="post-tag-{{slug}}">{{#if @first}}{{else}}, {{/if}}<a href="/tag/{{slug}}">{{name}}</a></span>{{/foreach}}</span>-->
                </div>
                <div>
        </article>
        {% endfor %}
    </div>

    <h5 class="index-headline normal"><span>Regular</span></h5>
    {% endif %}

    <div class="cf frame">
        {% for post in paginator.posts %}
        <article class="post" itemscope itemtype="http://schema.org/BlogPosting" role="article">
            <div class="article-item">
                <header class="post-header">
                    <h2 class="post-title" itemprop="name"><a href="{{ post.url }}" itemprop="url">{{ post.title }}</a></h2>
                </header>
                <section class="post-excerpt" itemprop="description">
                    <p>{{ post.content | strip_html | truncatewords: 50 }}</p>
                </section>
                <div class="post-meta">
                    <time datetime="{{ post.date | date_to_long_string }}">{{ post.date | date_to_long_string }}</time>
                    <!-- Below, adding the number of comments here, without any tag (such as: [View comments]). This way, the comment count automatically gets displayed instead of a blank space, rather than replace the tag [View comments]. This is useful for posts where comments are disabled, where the tag would never get replaced, and would still show [View comments], even though there is no comment thread to view for that post.-->
                    <a href="http://edinbr.org/{{ post.url }}#disqus_thread" data-disqus-identifier="{{ post.id }}"></a>
                    <!--            <span class="post-tags-set">on {{#foreach tags}}<span class="post-tag-{{slug}}">{{#if @first}}{{else}}, {{/if}}<a href="/tag/{{slug}}">{{name}}</a></span>{{/foreach}}</span>-->
                </div>
                <div>
        </article>
        {% endfor %}
    </div>

    <nav class="pagination" role="navigation">
        {% if paginator.next_page %}
        <a class="newer-posts" href="/page{{paginator.next_page}}">&larr; Older posts</a>
        {% endif %}
        <span class="page-number">Page {{ paginator.page }} of {{ paginator.total_pages }}</span>
        {% if paginator.previous_page %}
        {% if paginator.page == 2 %}
        <a class="older-posts" href="/">Newer posts &rarr;</a>
        {% else %}
        <a class="older-posts" href="/page{{paginator.previous_page}}">Newer posts &rarr;</a>
        {% endif %}
        {% endif %}
    </nav>


    <!-- {{!! After all the posts, we have the previous/next pagination links }}
    {{pagination}} -->

</main>