diff options
Diffstat (limited to 'layouts')
| -rw-r--r-- | layouts/index.html | 182 | ||||
| -rw-r--r-- | layouts/partials/footer.html | 14 | ||||
| -rw-r--r-- | layouts/partials/head.html | 2 | ||||
| -rw-r--r-- | layouts/partials/slider.html | 92 |
4 files changed, 186 insertions, 104 deletions
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&layer=mapnik&marker=41.14559194893249%2C1.104775071144104"> + </iframe><br/><small class="text-center"><a class="text-white" href="https://www.openstreetmap.org/?mlat=41.145592&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 © {{ 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 © {{ 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 © 2010 Kimberly Geswein (kimberlygeswein.com) + </div> + <div> + <a class="text-black" href="https://gitlab.com/smc/fonts/chilanka">Chilanka</a> Copyright © 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> |