feat(demo): add story 1 — Sorano: Rock and Time

2026-06-20 21:19:57 +02:00
parent 42ed59a6b3
commit 8f87155c1d
5508 changed files with 1595740 additions and 124 deletions
@@ -0,0 +1,83 @@
+{% set styling %}
+.lightbox-gallery {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.lightbox-gallery .lightbox-gallery__columns {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -10px;
+}
+
+.lightbox-gallery .lightbox-gallery__column {
+  width: 50%;
+  padding: 0 10px;
+  margin-bottom: 20px;
+}
+
+.lightbox-gallery img {
+  display: block;
+  border-radius: 5px;
+  transition: all .2s ease-in-out;
+}
+
+.lightbox-gallery img:hover {
+  filter: brightness(60%);
+  transform: scale(1.05);
+}
+
+@media only screen and (min-width: 600px) {
+  .lightbox-gallery .lightbox-gallery__column {
+    width: calc(100% / 3);
+  }
+}
+
+@media only screen and (min-width: 1000px) {
+  .lightbox-gallery .lightbox-gallery__column {
+    width: 25%;
+  }
+}
+
+.lightbox-gallery .hidden {
+  display: none;
+}
+{% endset %}
+
+{% do assets.addInlineCss(styling) %}
+
+{% block module_content %}
+  {% set data = page.header.gallery %}
+  {% set thumb_width = data.thumb.width|default(600) %}
+  {% set thumb_height = data.thumb.height|default(450) %}
+
+  <div class="lightbox-gallery">
+    <div class="lightbox-gallery__columns">
+      {% set gallery = md5(page.url) %}
+      {% for item in data.items %}
+        <div class="lightbox-gallery__column">
+          {% set item_image = page.media[item.image] %}
+          {% if item.title %}
+            {% set title = item.title %}
+          {% endif %}
+          {% if item.desc %}
+            {% set desc = ".desc-" ~ md5(item.desc) %}
+          {% endif %}
+          {% set content = item_image.cropZoom(thumb_width,thumb_height).html(title, title) %}
+          {% set image =  item_image.url %}
+          {% include "partials/lightbox.html.twig" %}
+        </div>
+      {% endfor %}
+    </div>
+    <div class="hidden">
+      {% for item in data.items %}
+        {% if item.desc %}
+          <div class="glightbox-desc desc-{{ md5(item.desc) }}">
+            <p>{{ item.desc|markdown(false) }}</p>
+          </div>
+        {% endif %}
+      {% endfor %}
+    </div>
+  </div>
+{% endblock %}