Add the surroundings static page
This page is “highly stylized”, with a masonry-like grid, that i did not
know how to generate automatically from data defined in PostgreSQL,
therefore with Oriol we agreed to have this one as a static page and
we will see what we can do if the customer asks to be able to change
it.
I was a bit undecided on whether the icons in the bottom part of the
page should be defined in the CSS or with style="" and CSS variables,
like i do for the campsite type in the home page.
At first i thought that it should use CSS variables, mostly for
coherence: if another section of the web does it for its background
image, why no this one. The difference is that the home page is
dynamically created from the database, while this page is static and we
know what icons we need, thus it makes more sense to move it to the
stylesheet file, because then it will be downloaded by user agents that
actually want to use it (e.g., browsers, but not Braille terminals).
2023-09-16 22:11:39 +00:00
<!--
SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
SPDX-License-Identifier: AGPL-3.0-only
-->
{{ define "title" -}}
{{( pgettext "Surroundings" "title" )}}
{{- end }}
{{ define "content" -}}
<h2>{{( pgettext "Surroundings" "title" )}}</h2>
2023-12-20 12:02:56 +00:00
<section>
<div class="ad-container">
<div class="ad-image-container"></div>
<div class="ad-description-container">
<h3 class="ad-title">Vine a fer barranquisme per Sadernes!</h3>
<a class="ad-button" href="#">Reserva el teu dia<span class="ad-icon"><svg viewBox="0 0 93.69895 67.38545" xmlns="http://www.w3.org/2000/svg" class="arrow_link"><path d="m67.38545,67.38545l-13.49997-2.97457c.57203-5.72033,2.74576-10.99256,6.52117-15.8167,3.77542-4.82414,8.04659-7.94172,12.81353-9.35273H0v-11.09743h73.22018c-4.76694-1.41101-9.03812-4.53813-12.81353-9.38134-3.77542-4.84321-5.94914-10.12498-6.52117-15.8453l13.49997-2.91737c.26695,8.38981,2.70762,15.01586,7.32202,19.87813s10.94489,7.61757,18.99148,8.26587v11.09743c-8.04659.6483-14.37709,3.40359-18.99148,8.26587-4.6144,4.86228-7.05507,11.48832-7.32202,19.87813Z"></path></svg></span></a>
</div>
</div>
</section>
Add the surroundings static page
This page is “highly stylized”, with a masonry-like grid, that i did not
know how to generate automatically from data defined in PostgreSQL,
therefore with Oriol we agreed to have this one as a static page and
we will see what we can do if the customer asks to be able to change
it.
I was a bit undecided on whether the icons in the bottom part of the
page should be defined in the CSS or with style="" and CSS variables,
like i do for the campsite type in the home page.
At first i thought that it should use CSS variables, mostly for
coherence: if another section of the web does it for its background
image, why no this one. The difference is that the home page is
dynamically created from the database, while this page is static and we
know what icons we need, thus it makes more sense to move it to the
stylesheet file, because then it will be downloaded by user agents that
actually want to use it (e.g., browsers, but not Braille terminals).
2023-09-16 22:11:39 +00:00
<section class="outside_activities">
<h3>{{( pgettext "What to Do Outside the Campsite?" "title" )}}</h3>
<div>
2023-12-20 12:02:56 +00:00
Add the surroundings static page
This page is “highly stylized”, with a masonry-like grid, that i did not
know how to generate automatically from data defined in PostgreSQL,
therefore with Oriol we agreed to have this one as a static page and
we will see what we can do if the customer asks to be able to change
it.
I was a bit undecided on whether the icons in the bottom part of the
page should be defined in the CSS or with style="" and CSS variables,
like i do for the campsite type in the home page.
At first i thought that it should use CSS variables, mostly for
coherence: if another section of the web does it for its background
image, why no this one. The difference is that the home page is
dynamically created from the database, while this page is static and we
know what icons we need, thus it makes more sense to move it to the
stylesheet file, because then it will be downloaded by user agents that
actually want to use it (e.g., browsers, but not Braille terminals).
2023-09-16 22:11:39 +00:00
<p>{{( gettext "Campsite Montagut is an ideal starting point for quiet outings, climbing, swimming in the river and gorges, volcanoes, the Fageda d’
<img src="/static/images/excusions.webp" alt="" width="640" height="960">
<img src="/static/images/escalada_sadernes.webp" alt="" width="640" height="960">
</div>
<div>
<img src="/static/images/rutes_amb_bicicleta.webp" alt="" width="1000" height="1500">
<div>
<p>{{( gettext "Get to the Costa Brava and enjoy the beaches, the gastronomy or go kayaking….")}}</p>
<img src="/static/images/calella_de_palafrugell.webp" alt="" width="640" height="427">
</div>
<img src="/static/images/caiac_mar.webp" alt="" width="1200" height="800">
</div>
<div>
<img src="/static/images/gastronomia.webp" alt="" width="640" height="426">
<img src="/static/images/museu_dali_figueres.webp" alt="" width="640" height="427">
<div>
<p>{{( gettext "You will also find museums in Olot, Figures, Girona.")}}</p>
<p>{{( gettext "As well as music festivals, dance, theater…." )}}</p>
</div>
</div>
</section>
<section class="campsite_activities">
<h3>{{( pgettext "Once at the Campsite, We Can Inform You about What Activities are Available" "title" )}}</h3>
<dl>
<div>
<dt class="icon_bicycle">{{( gettext "Cycle routes" )}}</dt>
<dd>{{( gettext "There are many bicycle rental companies in Olot." )}}</dd>
</div>
<div>
<dt class="icon_route">{{( gettext "Routes" )}}</dt>
<dd>{{( gettext "Routes of all kinds, climbing, mountain passes, for all levels." )}}</dd>
</div>
<div>
<dt class="icon_outing">{{( gettext "Family outing")}}</dt>
<dd>{{( gettext "Many outing possibilities, for all ages." )}}</dd>
</div>
<div>
<dt class="icon_kayak">{{( gettext "Kayak")}}</dt>
<dd>{{( gettext "There are several points where you can go by kayak, from sections of the Ter river as well as on the coast…." )}}</dd>
</div>
</dl>
</section>
{{- end }}
