From b8f8cc19d6cd732374e21d69a79fb19b093fbcc6 Mon Sep 17 00:00:00 2001
From: Xavier Del Campo Romero <xavi.dcr@tutanota.com>
Date: Wed, 22 Jan 2025 00:05:36 +0100
Subject: El Cau dels Nanos v1

---
 layouts/index.html           | 182 +++++++++++++++++++------------------------
 layouts/partials/footer.html |  14 +++-
 layouts/partials/head.html   |   2 +-
 layouts/partials/slider.html |  92 ++++++++++++++++++++++
 4 files changed, 186 insertions(+), 104 deletions(-)
 create mode 100644 layouts/partials/slider.html

(limited to 'layouts')

diff --git a/layouts/index.html b/layouts/index.html
index f81afc0..03ce667 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -9,9 +9,12 @@
                 <div class="d-flex justify-content-center">
                     <div class="text-center">
                         {{ with site.Data.homepage.main }}
-                        <h1 class="mx-auto my-0 text-uppercase">{{ .header.title }}</h1>
-                        <h2 class="text-white-75 mx-auto mt-2 mb-2 text-uppercase">{{ .header.description }}</h2>
-                        <a class="btn btn-primary" href="{{ .header.button.url }}">{{ .header.button.text }}</a>
+                        <img class="img-fluid" src="{{ .header.logo }}"/>
+                        <h2 class="text-white mx-auto mt-2 mb-2 chilanka">
+                            {{ .header.description | markdownify | safeHTML }}
+                        </h2>
+                        <a class="btn btn-primary fw-bold" href="{{ .header.button.url }}">{{ .header.button.text }}</a>
+                        <a class="btn btn-secondary" href="{{ .header.button2.url }}">{{ .header.button2.text }}</a>
                         {{ end }}
                     </div>
                 </div>
@@ -20,127 +23,102 @@
         <!-- About-->
         {{ with site.Data.homepage.about }}
         <section class="about-section text-center" id="about">
-            <div class="container px-4 px-lg-5">
+            <div class="overflow-x container px-4 px-lg-5">
                 <div class="row gx-4 gx-lg-5 justify-content-center">
                     <div class="col-lg-8">
-                        <h2 class="text-white mb-4 text-uppercase">{{ .title }}</h2>
-                        <p class="text-white-75">{{ .desc }}</p>
+                        <h1 class="text-white mb-4 text-uppercase shadows-into-light">{{ .title }}</h1>
                         {{ if .button.enable }}
                         <a class="btn btn-primary about-btn" href="{{ .button.url }}">{{ .button.text }}</a>
                         {{ end }}
                     </div>
-                    <div class="about-row">
-                        <figure class="column text-center">
-                            <img class="about-img" src="{{ .image0.src }}" alt="A live picture of {{ .image0.text }}"/>
-                            <figcaption class="text-white-75 mx-auto mt-2 mb-5 text-uppercase">{{ .image0.text }}</figcaption>
-                        </figure>
-                        <figure class="column text-center">
-                            <img class="about-img" src="{{ .image1.src }}" alt="A live picture of {{ .image1.text }}"/>
-                            <figcaption class="text-white-75 mx-auto mt-2 mb-5 text-uppercase">{{ .image1.text }}</figcaption>
-                        </figure>
-                        <figure class="column text-center">
-                            <img class="about-img" src="{{ .image2.src }}" alt="A live picture of {{ .image2.text }}"/>
-                            <figcaption class="text-white-75 mx-auto mt-2 mb-5 text-uppercase">{{ .image2.text }}</figcaption>
-                        </figure>
-                        <figure class="column text-center">
-                            <img class="about-img" src="{{ .image3.src }}" alt="A live picture of {{ .image3.text }}"/>
-                            <figcaption class="text-white-75 mx-auto mt-2 mb-3 text-uppercase">{{ .image3.text }}</figcaption>
-                        </figure>
-                    </div>
-                </div>
-            </div>
-        </section>
-        {{ end }}
-        {{ with site.Data.homepage.musicvideo }}
-        <!-- Listen-->
-        <section class="watch-section" id="watch">
-            <div class="container px-4 px-lg-5">
-                <div class="d-flex justify-content-center">
-                    <div class="col-lg-8 text-center">
-                        <h2 class="text-white mb-4 text-uppercase">{{ .title }}</h2>
-                        <p class="text-white-75 h2">{{ .desc }}</p>
-                    </div>
-                </div>
-                <div class="text-center gx-4 gx-lg-5 justify-content-center about-row">
-                    <video class="musicvideo mx-auto" controls preload="metadata" alt="Music video for Path of Emotions">
-                        <source src='{{ .src }}' type="audio/ogg">
-                    </video>
-                </div>
-            </div>
-        </section>
-        {{ end }}
-        {{ with site.Data.homepage.listen }}
-        <!-- Listen-->
-        <section class="listen-section" id="listen">
-            <div class="container px-4 px-lg-5">
-                <div class="d-flex justify-content-center">
-                    <div class="col-lg-8 text-center">
-                        <h2 class="text-white mb-4 text-uppercase">{{ .title }}</h2>
-                        <p class="text-white-75 h2">{{ .desc }}</p>
-                    </div>
-                </div>
-                <div class="text-center mx-auto mt-2 mb-2">
-                    <img class="listen-img" src="{{ .image }}" alt="Workart for our EP Take Away"/>
-                </div>
-                <div class="text-center gx-4 gx-lg-5 justify-content-center about-row">
-                    <section class="text-white-75 text-uppercase"> {{ .audio0.title }} </section>
-                    <audio class="mx-auto mt-1 mb-1" controls preload="metadata">
-                        <source src='{{ .audio0.src }}' type="audio/ogg">
-                    </audio>
+                    <div class="">
+                        {{ with .image0 }}
+                        <div class="about py-lg-1 align-items-center">
+                            <img class="about-img order-0" src="{{ .src }}"/>
+                            <div class="text-white order-1 justify-content-center  px-sm-2">
+                                <h2 class="text-uppercase shadows-into-light">{{ .title }}</h2>
+                                <div class="chilanka">
+                                    {{ .text }}
+                                </div>
+                            </div>
+                        </div>
+                        {{ end }}
 
-                    <section class="text-white-75 text-uppercase"> {{ .audio1.title }} </section>
-                    <audio class="mx-auto mt-1 mb-1" controls preload="metadata">
-                        <source src='{{ .audio1.src }}' type="audio/ogg">
-                    </audio>
+                        {{ with .image1 }}
+                        <div class="about-right py-lg-1 align-items-center">
+                            <img class="about-img order-0" src="{{ .src }}"/>
+                            <div class="text-white order-1 justify-content-center  px-sm-2">
+                                <h2 class="text-uppercase shadows-into-light">{{ .title }}</h2>
+                                <div class="chilanka">
+                                    {{ .text }}
+                                </div>
+                            </div>
+                        </div>
+                        {{ end }}
 
-                    <section class="text-white-75 text-uppercase"> {{ .audio2.title }} </section>
-                    <audio class="mx-auto mt-1 mb-1" controls preload="metadata">
-                        <source src='{{ .audio2.src }}' type="audio/ogg">
-                    </audio>
+                        {{ with .image2 }}
+                        <div class="about py-lg-1 align-items-center">
+                            <img class="about-img order-0" src="{{ .src }}"/>
+                            <div class="text-white order-1 justify-content-center  px-sm-2">
+                                <h2 class="text-uppercase shadows-into-light">{{ .title }}</h2>
+                                <div class="chilanka">
+                                    {{ .text }}
+                                </div>
+                            </div>
+                        </div>
+                        {{ end }}
 
-                    <section class="text-white-75 text-uppercase"> {{ .audio3.title }} </section>
-                    <audio class="mx-auto mt-1 mb-1" controls preload="metadata">
-                        <source src='{{ .audio3.src }}' type="audio/ogg">
-                    </audio>
+                        {{ with .image3 }}
+                        <div class="about-right py-lg-1 align-items-center">
+                            <img class="about-img order-0" src="{{ .src }}"/>
+                            <div class="text-white order-1 justify-content-center  px-sm-2">
+                                <h2 class="text-uppercase shadows-into-light">{{ .title }}</h2>
+                                <div class="chilanka">
+                                    {{ .text | markdownify | safeHTML }}
+                                </div>
+                            </div>
+                        </div>
+                        {{ end }}
+                    </div>
+                    {{ with site.Data.homepage.gallery }}
+                        <h1 class="mt-4 text-white text-uppercase shadows-into-light">{{ .title }}</h1>
+                    {{ end }}
+                    {{- partial "slider.html" . -}}
+                    {{ with site.Data.homepage.main }}
+                        <a class="btn btn-primary btn-primary-foot fw-bold" href="{{ .header.button.url }}">{{ .header.button.text }}</a>
+                    {{ end }}
                 </div>
             </div>
         </section>
         {{ end }}
+        {{ with site.Data.homepage.booking }}
+        {{ end }}
         <!-- Contact-->
         {{ with site.Data.homepage.contact }}
-        <section class="contact-section bg-black" id="contact">
+        <section class="contact-section" id="contact">
             <div class="d-flex justify-content-center">
                 <div class="col-lg-8 text-center">
-                    <h2 class="text-white mb-4 text-uppercase">{{ .title }}</h2>
+                    <h1 class="text-white mb-4 text-uppercase shadows-into-light">{{ .title }}</h1>
                 </div>
             </div>
             <div class="container px-4 px-lg-5">
                 <div class="row gx-4 gx-lg-5 justify-content-center">
-                    <div class="btn btn-primary mx-2 col-md-4 mb-3 mb-md-0">
-                            <a  href="mailto:{{ .email }}">
-                            <i class="fas fa-envelope text-primary mb-2"></i>
-                            <h4 class="text-uppercase m-4 text-white-75">Email</h4>
-                            <div class="small my-4 text-white-75">{{ .email }}</div>
-                        </a>
-                        </div>
-                    <div class="column btn btn-primary mx-2 col-md-4 mb-3 mb-md-0">
-                            <a href="xmpp:{{ .xmpp }}?message">
-                            <i class="fas fa-envelope text-primary mb-2"></i>
-                            <h4 class="text-uppercase m-4 text-white-75">XMPP</h4>
-                            <div class="small my-4 text-white-75">{{ .xmpp }}</div>
-                        </a>
-                        </div>
-                </div>
-                {{ with site.Data.homepage.social }}
-                <div class="social d-flex justify-content-center">
-                    <a class="mx-2" href="{{ .fediverse.url }}"><img class="social-img" src="{{ .fediverse.src }}" alt="{{ .fediverse.altext }}"/></a>
-                    <a class="mx-2" href="{{ .spotify.url }}"><img class="social-img" src="{{ .spotify.src }}" alt="{{ .spotify.altext }}"/></a>
-                    <a class="mx-2" href="{{ .instagram.url }}"><img class="social-img" src="{{ .instagram.src }}" alt="{{ .instagram.altext }}"/></a>
-                    <a class="mx-2" href="{{ .youtube.url }}"><img class="social-img" src="{{ .youtube.src }}" alt="{{ .youtube.altext }}"/></a>
-                    <a class="mx-2" href="{{ .peertube.url }}"><img class="social-img" src="{{ .peertube.src }}" alt="{{ .peertube.altext }}"/></a>
-                    <a class="mx-2" href="{{ .linktree.url }}"><img class="social-img" src="{{ .linktree.src }}" alt="{{ .linktree.altext }}"/></a>
+                    <div class="text-white">Email: <a class="text-white" href="mailto:{{ .email }}">{{ .email }}</a></div>
+                    <div class="text-white">Adreça: <a class="text-white" href="https://www.openstreetmap.org/?mlat=41.145592&mlon=1.104775#map=19/41.145592/1.104775">{{ .address }}</a></div>
+                    <div class="text-white">Telèfon: <a class="text-white" href="tel:{{ .phonefull }}">{{ .phone }}</a></div>
+                    {{ with site.Data.homepage.social }}
+                    <div class="d-flex justify-content-center py-lg-1">
+                        <a class="social mx-2" href="{{ .instagram.url }}"><img class="social-img" src="{{ .instagram.src }}" alt="{{ .instagram.altext }}"/></a>
+                        <a class="text-white" href="{{ .instagram.url }}">{{ .instagram.profile }}</a>
+                    </div>
+                    {{ end }}
+                    <iframe
+                        width="425"
+                        height="350"
+                        src="https://www.openstreetmap.org/export/embed.html?bbox=1.1030048131942751%2C41.144678988077644%2C1.1065453290939333%2C41.146504897076724&amp;layer=mapnik&amp;marker=41.14559194893249%2C1.104775071144104">
+                    </iframe><br/><small class="text-center"><a class="text-white" href="https://www.openstreetmap.org/?mlat=41.145592&amp;mlon=1.104775#map=19/41.145592/1.104775">Veure a OpenStreetMap</a></small>
                 </div>
-                {{ end }}
+
             </div>
         </section>
         {{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index d69f4df..308fa86 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,2 +1,14 @@
 <!-- Footer-->
-<footer class="footer bg-black small text-center text-white-50"><div class="container px-4 px-lg-5">Copyright &copy; {{ site.Params.Author }} {{ now.Format "2006"}}</div></footer>
+<footer class="footer small text-center text-black">
+    <div class="container px-4 px-lg-5">
+        <div>
+        Copyright &copy; {{ site.Params.Author }} {{ now.Format "2006"}}
+        </div>
+        <div>
+        <a class="text-black" href="https://font.download/font/shadows-into-light">Shadows Into Light</a> Copyright &copy; 2010 Kimberly Geswein (kimberlygeswein.com)
+        </div>
+        <div>
+        <a class="text-black" href="https://gitlab.com/smc/fonts/chilanka">Chilanka</a> Copyright &copy; 2019 The Chilanka Project Authors
+        </div>
+    </div>
+</footer>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 68df436..6b6a6b6 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -3,7 +3,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <meta name="description" content="" />
     <meta name="author" content="" />
-    <link rel="icon" href="{{ site.Params.favicon }}" />
+    <link rel="icon" href="{{ site.Data.favicon }}" />
     <!-- Core theme CSS (includes Bootstrap)-->
     <link href="css/styles.css" rel="stylesheet" />
     {{ $title := print .Site.Title " | " .Title }}
diff --git a/layouts/partials/slider.html b/layouts/partials/slider.html
new file mode 100644
index 0000000..b83a0ea
--- /dev/null
+++ b/layouts/partials/slider.html
@@ -0,0 +1,92 @@
+<!--
+Copyright © 2022 Codeconvey
+
+PLEASE READ THIS POLICY CAREFULLY. BY ACCESSING THIS WEBSITE YOU
+AGREE TO BE BOUND BY THE TERMS AND CONDITIONS BELOW.
+THESE TERMS AND CONDITIONS ARE SUBJECT TO CHANGE WITHOUT NOTICE,
+FROM TIME TO TIME IN OUR SOLE DISCRETION. IF YOU DO NOT
+AGREE WITH THESE TERMS AND CONDITIONS, PLEASE DO NOT
+ACCESS THIS WEBSITE.
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the “Software”),
+to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense,
+and/or sell copies of the Software, and to permit persons to whom the Software
+is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included
+in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR
+THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+<!-- https://codeconvey.com/pure-css-image-slider-with-thumbnails/ -->
+
+<link href="css/slider.css" rel="stylesheet" />
+<section>
+    <div class="rt-container">
+        <div class="col-rt-12">
+            <div class="csslider infinity" id="slider1">
+                <input type="radio" name="slides" checked="checked" id="slides_1" />
+                <input type="radio" name="slides" id="slides_2" />
+                <input type="radio" name="slides" id="slides_3" />
+                <input type="radio" name="slides" id="slides_4" />
+                <input type="radio" name="slides" id="slides_5" />
+                <input type="radio" name="slides" id="slides_6" />
+                <input type="radio" name="slides" id="slides_7" />
+                <input type="radio" name="slides" id="slides_8" />
+                <input type="radio" name="slides" id="slides_9" />
+                <input type="radio" name="slides" id="slides_10" />
+                <ul>
+                    <li><img class="slide" src="slides/1.webp" /></li>
+                    <li><img class="slide" src="slides/2.webp" /></li>
+                    <li><img class="slide" src="slides/3.webp" /></li>
+                    <li><img class="slide" src="slides/4.webp" /></li>
+                    <li><img class="slide" src="slides/5.webp" /></li>
+                    <li><img class="slide" src="slides/6.webp" /></li>
+                    <li><img class="slide" src="slides/7.webp" /></li>
+                    <li><img class="slide" src="slides/8.webp" /></li>
+                    <li><img class="slide" src="slides/9.webp" /></li>
+                    <li><img class="slide" src="slides/10.webp" /></li>
+                </ul>
+                <div class="arrows">
+                    <label for="slides_1"></label>
+                    <label for="slides_2"></label>
+                    <label for="slides_3"></label>
+                    <label for="slides_4"></label>
+                    <label for="slides_5"></label>
+                    <label for="slides_6"></label>
+                    <label for="slides_7"></label>
+                    <label for="slides_8"></label>
+                    <label for="slides_9"></label>
+                    <label for="slides_10"></label>
+                    <label class="goto-first" for="slides_1"></label>
+                    <label class="goto-last" for="slides_10"></label>
+                </div>
+                <!--
+                <div class="navigation">
+                    <div>
+                        <label for="slides_1"><img width="32" height="32"
+                                src="slides/1.webp" /></label>
+                        <label for="slides_2"><img width="32" height="32"
+                                src="slides/2.webp" /></label>
+                        <label for="slides_3"><img width="32" height="32"
+                                src="slides/3.webp" /></label>
+                        <label for="slides_4"><img width="32" height="32"
+                                src="slides/4.webp" /></label>
+                        <label for="slides_5"><img width="32" height="32"
+                                src="slides/5.webp" /></label>
+                    </div>
+                </div>
+                -->
+            </div>
+
+        </div>
+    </div>
+</section>
-- 
cgit v1.2.3