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

themes/quark/templates/modular/features.html.twig

@@ -0,0 +1,30 @@
+{% set grid_size = theme_var('grid-size') %}
+{% set columns = page.header.class == 'small' ? 'col-3 col-md-4 col-sm-6' : 'col-4 col-md-6 col-sm-12'  %}
+<section class="section modular-features {{ page.header.class}}">
+        <section class="container {{ grid_size }}">
+            <div class="frame-box">
+
+                {{ content|raw }}
+
+                <div class="columns">
+                {% for feature in page.header.features %}
+                   <div class="column {{ columns }}">
+                      {% if feature.url %}<a href="{{feature.url}}">{% endif %}
+                      <div class="feature-icon">
+                         <i class="fa fa-fw {{ feature.icon }}"></i>
+                         {% if feature.header %}
+                            <h6>{{ feature.header }}</h6>
+                         {% endif %}
+                      </div>
+                      {% if feature.url %}</a>{% endif %}
+                      <div class="feature-content">
+                         {% if feature.text %}
+                         <p>{{ feature.text }}</p>
+                         {% endif %}
+                      </div>
+                   </div>
+                {% endfor %}
+                </div>
+            </div>
+        </section>
+</section>

themes/quark/templates/modular/gallery.html.twig

@@ -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 %}

themes/quark/templates/modular/hero.html.twig

@@ -0,0 +1,4 @@
+{% set grid_size = theme_var('grid-size') %}
+{% set hero_image = page.header.hero_image ? page.media[page.header.hero_image] : page.media.images|first %}
+
+{% include 'partials/hero.html.twig' %}

themes/quark/templates/modular/text.html.twig

@@ -0,0 +1,21 @@
+{% set grid_size = theme_var('grid-size') %}
+{% set image = page.media.images|first %}
+
+<section class="section modular-text {{ page.header.class}} bg-gray">
+    <section class="container {{ grid_size }}">
+        <div class="columns {{ page.header.image_align|default('align-right') }}">
+            {% if image %}
+            <div class="column col-6 col-md-12">
+                {{ content|raw }}
+            </div>
+            <div class="column col-6 col-md-12">
+                {{ image.html|raw }}
+            </div>
+            {% else %}
+            <div class="column col-12">
+                {{ content|raw }}
+            </div>
+            {% endif %}
+        </div>
+    </section>
+</section>