jekyll-theme-switch 0.1.1

data/_layouts/monthly_archive.html

@@ -0,0 +1,17 @@
+---
+layout: default
+---
+<div class="monthly-archive">
+  <div>
+    {% assign m = page.date | date: "%-m" %}
+    <h1 class="title">Maandarchief voor <time datetime="{{ page.date | date: '%Y-%m' }}">{% include month.html month=m %} {{ page.date | date: "%Y" }}</time></h1>
+  </div>
+  <div>
+      <dl>
+          {% for post in page.posts reversed %}
+          <dt>{% include date.html date=post.date %}</dt>
+          <dd><a href="{{ post.url }}"><span>{{ post.title }}</span></a></dd>
+          {% endfor %}
+      </dl>
+  </div>
+</div>

data/_layouts/page.html

@@ -0,0 +1,14 @@
+---
+layout: default
+---
+<div class="post {{ page.path | replace: '/', '-' | replace: '.', '-' }}">
+
+  <header class="post-header">
+    <h1 class="post-title">{{ page.title }}</h1>
+  </header>
+
+  <article class="post-content">
+    {{ content }}
+  </article>
+
+</div>

data/_layouts/post.html

@@ -0,0 +1,34 @@
+---
+layout: default
+---
+<div class="post {{ page.id | replace: '/', '-' }}">
+
+  <header class="post-header">
+    <h1 class="post-title">{{ page.title }}</h1>
+    {% include post_meta.html post=page %}
+  </header>
+
+  <article class="post-content">
+    {{ content }}
+
+    <div style="clear: both;"></div>
+  </article>
+
+  {% unless page.comments == false %}
+  {% include disqus.html %}
+  {% endunless %}
+
+  <div class="post-nav">
+    {% if page.previous %}
+      <a href="{{ page.previous.url }}" class="previous button" title="{{ page.previous.title }}">Vorige</a>
+    {% else %}
+      <span class="previous button disabled">Vorige</span>
+    {% endif %}
+    {% if page.next %}
+      <a href="{{ page.next.url }}" class="next button" title="{{ page.next.title }}">Volgende</a>
+    {% else %}
+      <span class="next button disabled">Volgende</span>
+    {% endif %}
+  </div>
+
+</div>

data/_layouts/series_index.html

@@ -0,0 +1,11 @@
+---
+layout: post
+---
+{{ content }}
+<div class="series-footer">
+    <ul>
+        {% for post in page.series_posts %}
+        <li><a href="{{ post.url }}">{{ post.title }}</a></li>
+        {% endfor %}
+    </ul>
+</div>

data/_layouts/series_post.html

@@ -0,0 +1,16 @@
+---
+layout: post
+---
+{% assign series_index = page.series_index[0] %}
+<div class="series-header">
+    <p>Deze blogpost is onderdeel van de serie <a href="{{ series_index.url }}">{{ series_index.title }}</a>.</p>
+</div>
+{{ content }}
+<div class="series-footer">
+    <p>Deze blogpost is onderdeel van de serie <a href="{{ series_index.url }}">{{ series_index.title }}</a>.</p>
+    <ul>
+        {% for post in series_index.series_posts %}
+        <li><a href="{{ post.url }}">{{ post.title }}</a></li>
+        {% endfor %}
+    </ul>
+</div>

data/_layouts/tag_page.html

@@ -0,0 +1,23 @@
+---
+layout: default
+---
+
+<div class="tag-index">
+    <h1 class="page-heading">{{ page.title |  capitalize | replace: "Ij", "IJ" }}</h1>
+
+    <ul class="post-list">
+        {% for post in page.posts %}
+        <li {% if post.lead_image %}style="background-image: linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0.7) 80%), url('{{ post.lead_image }}'); background-size: contain;"{% endif %}>
+            {% include post_meta.html post=post %}
+
+            <h2>
+                <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
+            </h2>
+            <div>
+                {{ post.excerpt }}
+            </div>
+            <a href="{{ post.url | prepend: site.baseurl }}">lees verder</a>
+        </li>
+        {% endfor %}
+    </ul>
+</div>

data/_layouts/yearly_archive.html

@@ -0,0 +1,20 @@
+---
+layout: default
+---
+<div class="yearly-archive">
+  <div>
+    <h1 class="title">Jaararchief voor <time datetime="{{ page.date | date: '%Y' }}">{{ page.date | date: "%Y" }}</time></h1>
+  </div>
+  <div>
+    {% assign posts = page.posts | group_by_exp: "post", "post.date | date: '%-m'" %}
+    {% for group in posts reversed %}
+    <h2>{% include month.html month=group.name %}</h2>
+    <dl>
+      {% for post in group.items reversed %}
+      <dt>{% include date.html date=post.date %}</dt>
+      <dd><a href="{{ post.url }}"><span>{{ post.title }}</span></a></dd>
+      {% endfor %}
+    </dl>
+    {% endfor %}
+  </div>
+</div>

data/_sass/jekyll-theme-switch/_base.scss

@@ -0,0 +1,234 @@
+/**
+ * Reset some basic elements
+ */
+body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, hr,
+dl, dd, ol, ul, figure {
+    margin: 0;
+    padding: 0;
+}
+
+
+
+/**
+ * Basic styling
+ */
+body {
+    font-family: $base-font-family;
+    font-size: $base-font-size;
+    line-height: $base-line-height;
+    font-weight: 300;
+    color: $text-color;
+    background-color: $background-color;
+    -webkit-text-size-adjust: 100%;
+}
+
+
+
+/**
+ * Set `margin-bottom` to maintain vertical rhythm
+ */
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+ul, ol, dl, figure,
+%vertical-rhythm {
+    margin-bottom: $spacing-unit / 2;
+}
+
+
+
+/**
+ * Images
+ */
+img {
+    max-width: 100%;
+    vertical-align: middle;
+}
+
+article {
+  img {
+    float: left;
+    margin-right: 1em;
+  }
+
+  p.center {
+    clear: both;
+    text-align: center;
+
+    img {
+      float: none;
+    }
+  }
+
+  p.fill {
+    text-align: center;
+
+    img {
+      float: none;
+      width: 90%;
+    }
+  }
+
+  p.small,
+  div.footnotes {
+    font-size: 0.75em;
+  }
+}
+
+video {
+    width: 100%;
+    vertical-align: middle;
+}
+
+/**
+ * Figures
+ */
+figure > img {
+    display: block;
+    float: none;
+}
+
+figcaption {
+    font-size: $small-font-size;
+}
+
+
+
+/**
+ * Lists
+ */
+ul, ol {
+    margin-left: $spacing-unit;
+}
+
+li {
+    > ul,
+    > ol {
+         margin-bottom: 0;
+    }
+}
+
+
+
+/**
+ * Headings
+ */
+h1, h2, h3, h4, h5, h6 {
+    font-weight: bold;
+}
+
+
+
+/**
+ * Links
+ */
+a {
+    color: $brand-color;
+
+    &:visited {
+        color: darken($brand-color, 15%);
+    }
+
+    &:hover {
+        color: $text-color;
+        text-decoration: underline;
+    }
+}
+
+
+
+/**
+ * Blockquotes
+ */
+blockquote {
+    border-left: ($spacing-unit / 8) solid $grey-color;
+    padding-left: $spacing-unit / 2;
+    font-style: italic;
+
+    > :last-child {
+        margin-bottom: 0;
+    }
+}
+
+
+
+/**
+ * Code formatting
+ */
+pre,
+code {
+    font-size: 15px;
+    border: 1px solid $grey-color-light;
+    border-radius: 3px;
+    background-color: #eef;
+}
+
+code {
+    padding: 1px 5px;
+}
+
+pre {
+    padding: 8px 12px;
+    overflow-x: scroll;
+
+    > code {
+        border: 0;
+        padding-right: 0;
+        padding-left: 0;
+    }
+}
+
+
+
+/**
+ * Wrapper
+ */
+.wrapper {
+    max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
+    max-width:         calc(#{$content-width} - (#{$spacing-unit} * 2));
+    margin-right: auto;
+    margin-left: auto;
+    padding-right: $spacing-unit;
+    padding-left: $spacing-unit;
+    @extend %clearfix;
+
+    @include media-query($on-laptop) {
+        max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
+        max-width:         calc(#{$content-width} - (#{$spacing-unit}));
+        padding-right: $spacing-unit / 2;
+        padding-left: $spacing-unit / 2;
+    }
+}
+
+
+
+/**
+ * Clearfix
+ */
+%clearfix {
+
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+}
+
+
+
+/**
+ * Icons
+ */
+.icon {
+
+    > svg {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        vertical-align: middle;
+
+        path {
+            fill: $grey-color;
+        }
+    }
+}

data/_sass/jekyll-theme-switch/_dark.scss

@@ -0,0 +1,30 @@
+
+@media (prefers-color-scheme: dark) {
+    body {
+        color: $text-color-dark;
+    }
+
+    body,
+    .page-content,
+    .post-content,
+    .pagination,
+    .site-nav,
+    .section-nav,
+    .post-nav,
+    .post-list li
+    {
+        background-color: $background-color-dark;
+    }
+
+    a {
+        color: $brand-color-dark;
+
+        &:visited {
+            color: lighten($brand-color-dark, 15%);
+        }
+
+        &:hover {
+            color: $text-color-dark;
+        }
+    }
+}

data/_sass/jekyll-theme-switch/_image-effects.scss

@@ -0,0 +1,17 @@
+
+img.askew_left {
+  transform: matrix3d(1, 0, 0, 0.0006, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  border: red 2px solid;
+  width: $content-width / 4;
+}
+
+img.reflect,
+img.askew_left
+{
+  border-radius: 3pt;
+  -webkit-box-reflect: below 7pt -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(60%, transparent), to(rgba(250, 250, 250, 0.3)));
+}
+
+img.small {
+  width: 15em;
+}

data/_sass/jekyll-theme-switch/_jekyll-youtube.scss

@@ -0,0 +1,19 @@
+
+.youtube-embedder {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+  margin: 1em 0;
+}
+
+.youtube-embedder iframe,
+.youtube-embedder object,
+.youtube-embedder embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}