Version 1.5.0

New features:
- Background slideshow on frontpage
- Now you can choose from a few ready styles - And even alter your own
colors after you choose that style.
- Now you can choose whether to open in lightbox.
- Can change nearly all colors [link colors, link hover colors, text
colors, background colors.]
*This is just a short list of some of the changes and improvements.

album.lens

@@ -6,8 +6,7 @@
         <div class="container-fluid padding-0 margin-0">
             <div class="col-lg-12 text-xs-center">
                 <koken:if true="settings.show_header">
-                    <h2 class="m-t-0 text-primary">{{ album.title }}</h2>
-                    <hr class="primary hidden-sm-up">
+                    <h2 class="m-t-0 text-title">{{ album.title }}</h2>
                 </koken:if>
                 <span class="text-muted">Published: <koken:time relative="true" /></span>
                 <h6 class="text-dark">{{ album.description }}</h6>

albums.lens

@@ -7,8 +7,7 @@
 
             <koken:if true="settings.show_header">
                 <div class="col-lg-12 text-xs-center">
-                    <h2 class="m-t-0 text-primary">{{ labels.album.plural }}<sup>{{ count }}</sup></h2>
-                    <hr class="primary hidden-sm-up">
+                    <h2 class="m-t-0 text-title">{{ labels.album.plural }}<sup>{{ count }}</sup></h2>
                 </div>
             </koken:if>
 

categories.lens

@@ -1,12 +1,11 @@
 <koken:include file="inc/header.html" />
 <koken:include file="inc/nav.html" />
-<div id="top" class="bg-alt">
+<div id="top">
     <div class="container">
         <div class="col-lg-12 text-xs-center m-y-2">
 
             <koken:if true="settings.show_header">
-                <h2 class="m-t-0 text-primary"> {{ labels.category.plural }} </h2>
-                <hr class="primary hidden-sm-up">
+                <h2 class="m-t-0 text-title"> {{ labels.category.plural }} </h2>
             </koken:if>
             <koken:load limit="30" infinite="true">
                 <koken:categories>

category.lens

@@ -1,13 +1,12 @@
 <koken:include file="inc/header.html" />
 <koken:include file="inc/nav.html" />
 <koken:load limit="30" infinite="true">
-    <div id="top" class="bg-alt">
+    <div id="top">
         <div class="container-fluid fadeIn">
             <div class="col-lg-12 text-xs-center">
 
                 <koken:if true="settings.show_header">
-                    <h2 class="m-t-0 text-primary">{{ labels.category.singular }}: {{ category.title }}<span><sup>{{ category.counts.total }}</sup></span></h2>
-                    <hr class="primary hidden-sm-up">
+                    <h2 class="m-t-0 text-title">{{ labels.category.singular }}: {{ category.title }}<span><sup>{{ category.counts.total }}</sup></span></h2>
                 </koken:if>
 
                 <div>

content.lens

@@ -1,12 +1,36 @@
-<koken:load>
     <koken:include file="inc/header.html" />
     <koken:include file="inc/nav.html" />
-    <div id="top" class="bg-alt">
+
+    <koken:load>
+
+      <koken:head>
+        <meta property="og:site_name" content="{{ site.title }}" />
+        <meta property="og:title" content="{{ site.title }}" />
+        <meta property="og:description" content="{{ site.description strip_html='true' }}" />
+        <meta property="og:type" content="website" />
+        <koken:first>
+        <meta property="og:image" content="{{ content.presets.medium_large.url }}" />
+        <meta property="og:image:width" content="{{ content.presets.medium_large.width }}" />
+        <meta property="og:image:height" content="{{ content.presets.medium_large.height }}" />
+        </koken:first>
+        <meta property="og:url" content="{{ location.site_url }}{{ location.here }}" />
+        <koken:not empty="profile.twitter">
+          <meta name="twitter:card" content="gallery" />
+          <meta name="twitter:site" content="@{{ profile.twitter }}" />
+          <meta name="twitter:creator" content="@{{ profile.twitter }}" />
+          <koken:loop limit="4">
+            <meta name="twitter:image{{ index }}" content="{{ content.presets.medium_large.cropped.url }}">
+          </koken:loop>
+        </koken:not>
+      </koken:head>
+
+    </koken:load>
+<koken:load>
+    <div id="top">
         <div class="container fadeIn">
 
             <koken:if true="settings.show_header">
-                <h2 class="m-t-0 text-primary text-xs-center">{{ content.title | content.filename.clean  }}</h2>
-                <hr class="primary hidden-sm-up">
+                <h2 class="m-t-0 text-title text-xs-center">{{ content.title | content.filename.clean  }}</h2>
             </koken:if>
 
             <koken:include file="inc/content/content-nav.html" />

contents.lens

@@ -4,8 +4,7 @@
 
     <koken:if true="settings.show_header">
         <div class="col-lg-12 text-xs-center">
-            <h2 class="m-t-0 text-primary">{{ labels.content.plural }}</h2>
-            <hr class="primary hidden-sm-up">
+            <h2 class="m-t-0 text-title">{{ labels.content.plural }}</h2>
         </div>
     </koken:if>
 

error.lens

@@ -4,8 +4,7 @@
   <div id="top">
   <div class="container wow fadeIn">
     <div class="col-lg-12 text-xs-center">
-      <h2 class="m-t-0 text-primary">{{ routed_variables.code }}</h2>
-      <hr class="primary hidden-sm-up">
+      <h2 class="m-t-0 text-title">{{ routed_variables.code }}</h2>
     </div>
 
       <div class="col-lg-12 col-offset-2">

essay.lens

@@ -1,13 +1,37 @@
-<koken:load>
     <koken:include file="inc/header.html" />
     <koken:include file="inc/nav.html" />
+
+    <koken:load>
+
+      <koken:head>
+        <meta property="og:site_name" content="{{ site.title }}" />
+        <meta property="og:title" content="{{ site.title }}" />
+        <meta property="og:description" content="{{ site.description strip_html='true' }}" />
+        <meta property="og:type" content="website" />
+        <koken:first>
+        <meta property="og:image" content="{{ content.presets.medium_large.url }}" />
+        <meta property="og:image:width" content="{{ content.presets.medium_large.width }}" />
+        <meta property="og:image:height" content="{{ content.presets.medium_large.height }}" />
+        </koken:first>
+        <meta property="og:url" content="{{ location.site_url }}{{ location.here }}" />
+        <koken:not empty="profile.twitter">
+          <meta name="twitter:card" content="gallery" />
+          <meta name="twitter:site" content="@{{ profile.twitter }}" />
+          <meta name="twitter:creator" content="@{{ profile.twitter }}" />
+          <koken:loop limit="4">
+            <meta name="twitter:image{{ index }}" content="{{ content.presets.medium_large.cropped.url }}">
+          </koken:loop>
+        </koken:not>
+      </koken:head>
+
+    </koken:load>
+    <koken:load>
     <div id="top">
         <div class="container">
 
             <koken:if true="settings.show_header">
                 <div class="col-lg-12 text-xs-center">
-                    <h2 class="text-primary">{{ essay.title }}</h2>
-                    <hr class="primary hidden-sm-up">
+                    <h2 class="text-title">{{ essay.title }}</h2>
                 </div>
             </koken:if>
 

essays.lens

@@ -1,16 +1,39 @@
 <koken:include file="inc/header.html" />
 <koken:include file="inc/nav.html" />
-<div id="top" class="bg-alt">
+<koken:load>
+
+  <koken:head>
+    <meta property="og:site_name" content="{{ site.title }}" />
+    <meta property="og:title" content="{{ site.title }}" />
+    <meta property="og:description" content="{{ site.description strip_html='true' }}" />
+    <meta property="og:type" content="website" />
+    <koken:first>
+    <meta property="og:image" content="{{ content.presets.medium_large.url }}" />
+    <meta property="og:image:width" content="{{ content.presets.medium_large.width }}" />
+    <meta property="og:image:height" content="{{ content.presets.medium_large.height }}" />
+    </koken:first>
+    <meta property="og:url" content="{{ location.site_url }}{{ location.here }}" />
+    <koken:not empty="profile.twitter">
+      <meta name="twitter:card" content="gallery" />
+      <meta name="twitter:site" content="@{{ profile.twitter }}" />
+      <meta name="twitter:creator" content="@{{ profile.twitter }}" />
+      <koken:loop limit="4">
+        <meta name="twitter:image{{ index }}" content="{{ content.presets.medium_large.cropped.url }}">
+      </koken:loop>
+    </koken:not>
+  </koken:head>
+
+</koken:load>
+
+<div id="top">
   <div class="container-fluid">
 
   <koken:if true="settings.show_header">
   <div class="col-lg-12 text-xs-center">
-    <h2 class="text-primary">{{ labels.essay.plural }}
-    <koken:if true="{{ settings.show_essays_filter }}">
-    <koken:include file="inc/date_filter_essays.html" />
-    </koken:if>
-    </h2>
-    <hr class="primary hidden-sm-up">
+  <koken:if true="{{ settings.show_essays_filter }}">
+  <p><koken:include file="inc/date_filter_essays.html" /></p>
+  </koken:if>
+    <h2 class="text-title">{{ labels.essay.plural }}</h2>
   </div>
   </koken:if>
 

home.lens

@@ -1,77 +1,92 @@
-<style></style>
 <koken:include file="inc/header.html" />
 <koken:include file="inc/nav.html" />
 <koken:load>
-    <koken:if true="settings.show_slideshow">
-        <div class="section-fill-height slideshow-container {{ settings.animation_type }}" id="slideshow">
-            <div id="ss_spinner"></div>
-            <koken:pulse jsvar="pulse" class="slideshow" width="100%" height="100%" crop="fill" loop="true" autostart="true" random="true" source="{{ settings.slideshow_source }}" />
-            <koken:if true="settings.show_slideshow_overlay">
-                <h2 class="{{ settings.animation_type }}" data-wow-duration="2s" data-wow-delay="0.5s"><koken:if true="{{ settings.show_intro_text }}"><span style="margin-bottom:10px;display:block;">{{ settings.intro_text }}</span></koken:if>
-    <koken:if true="settings.show_section_buttons">
-    <div class="btn-group hidden-sm-down" role="group" aria-label="Navigation">
-      <koken:if true="settings.content_front">
-        <a href="#{{ labels.content.plural }}" class="btn btn-secondary page-scroll {{ settings.animation_type_welcome }}" data-wow-duration="2s" data-wow-delay="0.5s" title="{{labels.content.plural}}" data-bind-to-key="right"> <i class="fa fa-photo fa-fw"></i> {{ labels.content.plural }} </a>
-      </koken:if>
-      <koken:if true="settings.album_front">
-        <a href="#{{ labels.album.plural }}" class="btn btn-secondary page-scroll {{ settings.animation_type_welcome }}" data-wow-duration="2s" data-wow-delay="0.5s"> <i class="fa fa-folder-o fa-fw"></i> {{ labels.album.plural }} </a>
-      </koken:if>
-      <koken:if true="settings.essay_front">
-        <a href="#{{ labels.essay.plural }}" class="btn btn-secondary page-scroll" title="{{labels.essay.plural}}"> <i class="fa fa-pencil fa-fw"></i> {{ labels.essay.plural }} </a>
-      </koken:if>
+
+  <koken:head>
+    <meta property="og:site_name" content="{{ site.title }}" />
+    <meta property="og:title" content="{{ site.title }}" />
+    <meta property="og:description" content="{{ site.description strip_html='true' }}" />
+    <meta property="og:type" content="website" />
+    <koken:first>
+    <meta property="og:image" content="{{ content.presets.medium_large.url }}" />
+    <meta property="og:image:width" content="{{ content.presets.medium_large.width }}" />
+    <meta property="og:image:height" content="{{ content.presets.medium_large.height }}" />
+    </koken:first>
+    <meta property="og:url" content="{{ location.site_url }}{{ location.here }}" />
+    <koken:not empty="profile.twitter">
+      <meta name="twitter:card" content="gallery" />
+      <meta name="twitter:site" content="@{{ profile.twitter }}" />
+      <meta name="twitter:creator" content="@{{ profile.twitter }}" />
+      <koken:loop limit="4">
+        <meta name="twitter:image{{ index }}" content="{{ content.presets.medium_large.cropped.url }}">
+      </koken:loop>
+    </koken:not>
+  </koken:head>
+
+</koken:load>
+
+
+<koken:if true="settings.show_slideshow">
+<div id="ss_spinner"></div>
+    <div id="slideshow">
+    <koken:pulse jsvar="pulse" crop="fill" loop="true" autostart="true" random="true" source="{{ settings.slideshow_source }}" />
     </div>
-    </koken:if>
-  </h2>
-            </koken:if>
-        </div>
-    </koken:if>
+</koken:if>
+
 
-    <!-- Content Section -->
-    <koken:if true="settings.content_front">
-        <section class="pb-0" id="{{ labels.content.plural }}">
-            <div class="container-fluid wow {{ settings.animation_type }} padding-0 margin-0">
-            <koken:load source="contents" limit="{{ settings.content_front_count }}">
-            <h2 class="m-t-0 text-primary text-xs-center">{{ labels.content.plural }}</h2>
-            <hr class="primary hidden-sm-up text-xs-center">
-            <koken:if data="settings.content_grid_layout" equals="masonry">
-            <koken:include file="inc/content/content_masonry_grid.html" />
-            </koken:if>
-            <koken:if data="settings.content_grid_layout" equals="bootstrap">
+<script>
+  pulse.on( 'start', function() {
+    $('#ss_spinner').addClass('loading');
+  });
+  pulse.on( 'waiting', function(e) {
+    if (e) {
+      $('#ss_spinner').addClass('loading');
+    } else {
+      $('#ss_spinner').removeClass('loading');
+    }
+  });
+  pulse.on( 'dataloaded', function() {
+    $('#ss_spinner').removeClass('loading');
+  });
+</script>
+
+  <!-- Content Section -->
+  <koken:if true="settings.content_front">
+    <section id="content">
+      <div class="container-fluid padding-0 margin-0">
+        <koken:load source="contents" limit="{{ settings.content_front_count }}">
+          <h2 class="text-title text-xs-center">{{ labels.content.plural }}</h2>
             <koken:include file="inc/content/content_bootstrap_grid.html" />
-            </koken:if>
-            </koken:load>
-            </div>
-        </section>
-    </koken:if>
-    <!-- Content Section -->
+        </koken:load>
+      </div>
+    </section>
+  </koken:if>
+  <!-- Content Section -->
 
-    <!-- Album Section -->
-    <koken:if true="settings.album_front">
-        <section id="{{ labels.album.plural }}" class="pb-0 bg-faded">
-            <div class="container-fluid wow animated {{ settings.animation_type }}">
-            <koken:load source="albums" limit="{{ settings.album_front_count }}">
-            <h2 class="m-t-0 text-primary text-xs-center">{{ labels.album.plural }}</h2>
-            <hr class="primary hidden-sm-up text-xs-center">
-            <koken:include file="inc/album/album-grid.html" />
-            </koken:load>
-            </div>
-        </section>
-    </koken:if>
-    <!-- Album Section -->
+  <!-- Album Section -->
+  <koken:if true="settings.album_front">
+    <section id="album">
+      <div class="container-fluid wow animated {{ settings.animation_type }}">
+        <koken:load source="albums" limit="{{ settings.album_front_count }}">
+          <h2 class="text-title text-xs-center">{{ labels.album.plural }}</h2>
+          <koken:include file="inc/album/album-grid.html" />
+        </koken:load>
+      </div>
+    </section>
+  </koken:if>
+  <!-- Album Section -->
 
-    <!-- Essay Section -->
-    <koken:if true="settings.essay_front">
-        <section class="pb-0"  id="{{ labels.essay.plural }}">
-            <div class="container-fluid wow animated {{ settings.animation_type }}">
-            <koken:load source="essays" limit="{{ settings.essay_front_count }}">
-            <h2 class="m-t-0 text-primary text-xs-center">{{ labels.essay.plural }}</h2>
-            <hr class="primary hidden-sm-up text-xs-center">
-            <koken:include file="inc/essay/essay-grid.html" />
-            </koken:load>
-            </div>
-        </section>
-    </koken:if>
-    <!-- Essay Section -->
+  <!-- Essay Section -->
+  <koken:if true="settings.essay_front">
+    <section id="essay">
+      <div class="container-fluid wow animated {{ settings.animation_type }}">
+        <koken:load source="essays" limit="{{ settings.essay_front_count }}">
+          <h2 class="text-title text-xs-center">{{ labels.essay.plural }}</h2>
+          <koken:include file="inc/essay/essay-grid.html" />
+        </koken:load>
+      </div>
+    </section>
+  </koken:if>
+  <!-- Essay Section -->
 
-</koken:load>
-    <koken:include file="inc/footer.html" />
+<koken:include file="inc/footer.html" />

inc/album/album-grid.html

@@ -2,7 +2,7 @@
         <koken:link>
             <div class="col-xs-{{ settings.columns_sm_album }} col-sm-{{ settings.columns_sm_album }} col-md-{{ settings.columns_sm_album }} col-lg-{{ settings.columns_md_album }} col-xl-{{ settings.columns_md_album }}">
                 <div class="card">
-                    <koken:img size="3:2" lazy="true" fade="true" style="object-fit: cover;" />
+                    <koken:img class="timeline-photo" size="1:1" lazy="true" fade="true" />
                     <div class="card-header">
                         <span class="card-title text-truncate">{{ album.title }}</span>
                     </div>

inc/content/content-nav.html

@@ -1,15 +1,15 @@
 <div class="col-xs-12 text-xs-center">
   <div class="btn-group" role="group" aria-label="Content Nav">
     <koken:previous>
-    <koken:link class="btn btn-secondary" bind_to_key="left" id="nav-back">
+    <koken:link class="btn" bind_to_key="left" id="nav-back">
       <i class="fa fa-angle-left"></i>
     </koken:link>
     </koken:previous>
-    <koken:link class="btn btn-secondary" lightbox="true">
+    <koken:link class="btn" lightbox="true">
       <i class="fa fa-expand"></i>
     </koken:link>
     <koken:next>
-    <koken:link class="btn btn-secondary" bind_to_key="right" id="nav-forward">
+    <koken:link class="btn" bind_to_key="right" id="nav-forward">
       <i class="fa fa-angle-right"></i>
     </koken:link>
     </koken:next>