Commit preview bundle

1 files changed, 33 insertions, 0 deletions

diff --git a/themes/ccc/templates/front-featured-large.tmpl b/themes/ccc/templates/front-featured-large.tmpl
new file mode 100644
index 00000000..320f2e31
--- /dev/null
+++ b/themes/ccc/templates/front-featured-large.tmpl
@@ -0,0 +1,33 @@
+## -*- coding: utf-8 -*-
+<%block name="content">
+
+<div class="carousel slide d-lg-none" style="height: 10rem;" data-ride="carousel" data-interval="3000">
+    <div class="carousel-inner">
+        % for post in posts:
+        <div class="carousel-item ${'active' if loop.index == 0 else ''}">
+            <a href="${post.permalink()}">
+                <img class="d-block img-fluid w-100" src="${post.meta('previewimage')}" alt="large carousel slide" style="height: 160px; object-fit: cover;">
+                <div class="carousel-caption d-sm-block">
+                    <h1 style="background: rgba(0, 0, 0, 0.75); display: inline; padding: 0.1em; margin: 0;">${post.meta('previewtext', lang) or post.title(lang)}</h1>
+                </div>
+            </a>
+        </div>
+        % endfor
+    </div>
+</div>
+<div class="row d-none d-lg-flex">
+    % for post in posts:
+    <div class="col-6 col-sm-4">
+        <div class="card text-white bg-light shadow-sm">
+            <div class="card-body">
+                <img class="card-img-top" style="width: 100%; height: 160px; object-fit: cover;" src="${post.meta('previewimage')}" alt="CCC logo">
+                <div class="card-img-overlay d-flex flex-column justify-content-end">
+                    <h1 style="background: rgba(0, 0, 0, 0.75); display: inline; padding: 0.1em; margin: 0;" class="card-title">${post.meta('previewtext', lang) or post.title(lang)}</h1>
+                </div>
+            </div>
+            <a href="${post.permalink()}" class="stretched-link"></a>
+        </div>
+    </div>
+    % endfor
+</div>
+</%block>