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).
This commit is contained in:
jordi fita mas 2023-09-17 00:11:39 +02:00
parent d08fa31c81
commit 8b8dda7969
12 changed files with 430 additions and 6 deletions

View File

@ -13,6 +13,7 @@ import (
"dev.tandem.ws/tandem/camper/pkg/database"
"dev.tandem.ws/tandem/camper/pkg/home"
httplib "dev.tandem.ws/tandem/camper/pkg/http"
"dev.tandem.ws/tandem/camper/pkg/template"
)
type publicHandler struct {
@ -36,6 +37,28 @@ func (h *publicHandler) Handler(user *auth.User, company *auth.Company, conn *da
h.home.Handler(user, company, conn).ServeHTTP(w, r)
case "campsites":
h.campsite.Handler(user, company, conn).ServeHTTP(w, r)
case "surroundings":
surroundingsHandler(user, company, conn).ServeHTTP(w, r)
default:
http.NotFound(w, r)
}
})
}
func surroundingsHandler(user *auth.User, company *auth.Company, conn *database.Conn) http.Handler {
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
var head string
head, r.URL.Path = httplib.ShiftPath(r.URL.Path)
switch head {
case "":
switch r.Method {
case http.MethodGet:
page := template.NewPublicPage()
page.Setup(r, user, company, conn)
template.MustRenderPublic(w, r, user, company, "surroundings.gohtml", page)
default:
httplib.MethodNotAllowed(w, r, http.MethodGet)
}
default:
http.NotFound(w, r)
}

105
po/ca.po
View File

@ -8,7 +8,7 @@ msgid ""
msgstr ""
"Project-Id-Version: camper\n"
"Report-Msgid-Bugs-To: jordi@tandem.blog\n"
"POT-Creation-Date: 2023-09-15 01:21+0200\n"
"POT-Creation-Date: 2023-09-16 23:43+0200\n"
"PO-Revision-Date: 2023-07-22 23:45+0200\n"
"Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
"Language-Team: Catalan <ca@dodds.net>\n"
@ -60,6 +60,70 @@ msgstr "Descobreix lentorn"
msgid "Come and enjoy!"
msgstr "Vine a gaudir!"
#: web/templates/public/surroundings.gohtml:6
#: web/templates/public/surroundings.gohtml:10
msgctxt "title"
msgid "Surroundings"
msgstr "Lentorn"
#: web/templates/public/surroundings.gohtml:13
msgctxt "title"
msgid "What to Do Outside the Campsite?"
msgstr "Què fer des del càmping?"
#: web/templates/public/surroundings.gohtml:15
msgid "Campsite Montagut is an ideal starting point for quiet outings, climbing, swimming in the river and gorges, volcanoes, the Fageda den Jordà, cycle tours for all ages…."
msgstr "El Càmping Montagut és ideal com a punt de partida dexcursions tranquil·les, escalada, banyar-se en el riu i gorgues, volcans, la Fageda den Jordà, sortides amb bicicleta per a tots els nivells…."
#: web/templates/public/surroundings.gohtml:22
msgid "Get to the Costa Brava and enjoy the beaches, the gastronomy or go kayaking…."
msgstr "Arribar fins a la costa brava i gaudir de les platges, la gastronomia o anar amb caiac…."
#: web/templates/public/surroundings.gohtml:31
msgid "You will also find museums in Olot, Figures, Girona."
msgstr "També trobareu museus a Olot, Figueres, Girona."
#: web/templates/public/surroundings.gohtml:32
msgid "As well as music festivals, dance, theater…."
msgstr "Com festivals de música, dansa, teatre…."
#: web/templates/public/surroundings.gohtml:38
msgctxt "title"
msgid "Once at the Campsite, We Can Inform You about What Activities are Available"
msgstr "Un cop en el càmping, us podem informar de quines activitats fer"
#: web/templates/public/surroundings.gohtml:41
msgid "Cycle routes"
msgstr "Rutes amb bicicleta"
#: web/templates/public/surroundings.gohtml:42
msgid "There are many bicycle rental companies in Olot."
msgstr "A Olot podeu trobar empreses de lloguer de bicicletes."
#: web/templates/public/surroundings.gohtml:46
msgid "Routes"
msgstr "Rutes"
#: web/templates/public/surroundings.gohtml:47
msgid "Routes of all kinds, climbing, mountain passes, for all levels."
msgstr "Rutes de tota mena, escalada, ports de muntanya, per a tots els nivells."
#: web/templates/public/surroundings.gohtml:51
msgid "Family outing"
msgstr "Excursions familiars"
#: web/templates/public/surroundings.gohtml:52
msgid "Many outing possibilities, for all ages."
msgstr "Múltiples excursions per a totes les edats."
#: web/templates/public/surroundings.gohtml:56
msgid "Kayak"
msgstr "Caiac"
#: web/templates/public/surroundings.gohtml:57
msgid "There are several points where you can go by kayak, from sections of the Ter river as well as on the coast…."
msgstr "Hi ha diversos punts on poder anar amb caiac, des de trams del riu Ter com també a la costa…."
#: web/templates/public/layout.gohtml:11 web/templates/public/layout.gohtml:23
#: web/templates/public/layout.gohtml:58
msgid "Campsite Montagut"
@ -504,6 +568,41 @@ msgstr "Esborra"
msgid "No slides added yet."
msgstr "No sha afegit cap diapositiva encara."
#: web/templates/admin/media/index.gohtml:6
#: web/templates/admin/media/index.gohtml:12
msgctxt "title"
msgid "Media"
msgstr "Mèdia"
#: web/templates/admin/media/index.gohtml:13
msgctxt "action"
msgid "Upload media"
msgstr "Puja mèdia"
#: web/templates/admin/media/index.gohtml:21
msgid "No media uploaded yet."
msgstr "No sha pujat cap mèdia encara."
#: web/templates/admin/media/upload.gohtml:6
#: web/templates/admin/media/upload.gohtml:13
msgctxt "title"
msgid "Upload Media"
msgstr "Pujada de mèdia"
#: web/templates/admin/media/upload.gohtml:18
msgctxt "input"
msgid "File"
msgstr "Fitxer"
#: web/templates/admin/media/upload.gohtml:22
msgid "Maximum upload file size: %s"
msgstr "Mida màxima del fitxer a pujar: %s"
#: web/templates/admin/media/upload.gohtml:27
msgctxt "action"
msgid "Upload"
msgstr "Puja"
#: pkg/app/login.go:56 pkg/app/user.go:246 pkg/company/admin.go:203
msgid "Email can not be empty."
msgstr "No podeu deixar el correu-e en blanc."
@ -634,6 +733,10 @@ msgstr "Sha detectat un intent de falsificació de petició a llocs creuats."
msgid "Slide image can not be empty."
msgstr "No podeu deixar la imatge de la diapositiva en blanc."
#: pkg/media/admin.go:164
msgid "Uploaded file can not be empty."
msgstr "No podeu deixar el fitxer del mèdia en blanc."
#~ msgid "Legend"
#~ msgstr "Llegenda"

108
po/es.po
View File

@ -8,7 +8,7 @@ msgid ""
msgstr ""
"Project-Id-Version: camper\n"
"Report-Msgid-Bugs-To: jordi@tandem.blog\n"
"POT-Creation-Date: 2023-09-15 01:21+0200\n"
"POT-Creation-Date: 2023-09-16 23:55+0200\n"
"PO-Revision-Date: 2023-07-22 23:46+0200\n"
"Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
"Language-Team: Spanish <es@tp.org.es>\n"
@ -46,7 +46,7 @@ msgstr "Situados en la <strong>Alta Garrotxa</strong>, entre los <strong>Pirineo
#: web/templates/public/home.gohtml:38
msgid "Nearby there are the <strong>gorges of Sadernes</strong>, <strong>volcanoes</strong>, <strong>La Fageda den Jordà</strong>, the Jewish quarter of <strong>Besalú</strong>, the basaltic cliff of <strong>Castellfollit de la Roca</strong>… much to see and much to do."
msgstr "Cerca tenéis los <strong>gorgs de Sadernes</strong>, <strong>volcanes</strong>, <strong>La Fageda den Jordà</strong>, la judería de <strong>Besalú</strong>, el riscal basáltico de <strong>Castellfollit de la Roca</strong>… mucho por ver y mucho por hacer."
msgstr "Cerca tenéis los <strong>piletones de Sadernes</strong>, <strong>volcanes</strong>, <strong>La Fageda den Jordà</strong>, la judería de <strong>Besalú</strong>, el riscal basáltico de <strong>Castellfollit de la Roca</strong>… mucho por ver y mucho por hacer."
#: web/templates/public/home.gohtml:39
msgid "Less than an hour from <strong>Girona</strong>, one from <strong>La Bisbal dEmpordà</strong>, and two from <strong>Barcelona</strong>."
@ -60,6 +60,71 @@ msgstr "Descubre el entorno"
msgid "Come and enjoy!"
msgstr "¡Ven a disfrutar!"
#: web/templates/public/surroundings.gohtml:6
#: web/templates/public/surroundings.gohtml:10
msgctxt "title"
msgid "Surroundings"
msgstr "El entorno"
#: web/templates/public/surroundings.gohtml:13
msgctxt "title"
msgid "What to Do Outside the Campsite?"
msgstr "¿Qué hacer desde el camping?"
#: web/templates/public/surroundings.gohtml:15
#, fuzzy
msgid "Campsite Montagut is an ideal starting point for quiet outings, climbing, swimming in the river and gorges, volcanoes, the Fageda den Jordà, cycle tours for all ages…."
msgstr "El Camping Montagut es ideal como punto de salida de excursiones tranquilas, escalada, bañarse en el río y piletones, volcanes, la Fageda den Jordà, salidas en bicicleta para todos los niveles…."
#: web/templates/public/surroundings.gohtml:22
msgid "Get to the Costa Brava and enjoy the beaches, the gastronomy or go kayaking…."
msgstr "Llegar hasta la Costa Brava y disfrutar de las playas, la gastronomía o ir en kayak…."
#: web/templates/public/surroundings.gohtml:31
msgid "You will also find museums in Olot, Figures, Girona."
msgstr "También encontraréis museos en Olot, Figueres, Girona."
#: web/templates/public/surroundings.gohtml:32
msgid "As well as music festivals, dance, theater…."
msgstr "Como festivales de música, danza, teatro…."
#: web/templates/public/surroundings.gohtml:38
msgctxt "title"
msgid "Once at the Campsite, We Can Inform You about What Activities are Available"
msgstr "Una vez en el camping, os podemos informar de qué actividades hacer"
#: web/templates/public/surroundings.gohtml:41
msgid "Cycle routes"
msgstr "Rutas en bicicleta"
#: web/templates/public/surroundings.gohtml:42
msgid "There are many bicycle rental companies in Olot."
msgstr "A Olot podéis encontrar empresas de alquiler de bicicletas."
#: web/templates/public/surroundings.gohtml:46
msgid "Routes"
msgstr "Rutas"
#: web/templates/public/surroundings.gohtml:47
msgid "Routes of all kinds, climbing, mountain passes, for all levels."
msgstr "Rutas de todo tipo, escalada, puertos de montaña, para todos los niveles."
#: web/templates/public/surroundings.gohtml:51
msgid "Family outing"
msgstr "Excusiones familiares"
#: web/templates/public/surroundings.gohtml:52
msgid "Many outing possibilities, for all ages."
msgstr "Múltiples excursiones para todas las edades."
#: web/templates/public/surroundings.gohtml:56
msgid "Kayak"
msgstr "Kayak"
#: web/templates/public/surroundings.gohtml:57
msgid "There are several points where you can go by kayak, from sections of the Ter river as well as on the coast…."
msgstr "Hay diversos puntos dónde podéis ir en kayak, desde tramos del río Ter como también en la costa…."
#: web/templates/public/layout.gohtml:11 web/templates/public/layout.gohtml:23
#: web/templates/public/layout.gohtml:58
msgid "Campsite Montagut"
@ -504,6 +569,41 @@ msgstr "Borrar"
msgid "No slides added yet."
msgstr "No se ha añadido ninguna diapositiva todavía."
#: web/templates/admin/media/index.gohtml:6
#: web/templates/admin/media/index.gohtml:12
msgctxt "title"
msgid "Media"
msgstr "Medios"
#: web/templates/admin/media/index.gohtml:13
msgctxt "action"
msgid "Upload media"
msgstr "Subir medio"
#: web/templates/admin/media/index.gohtml:21
msgid "No media uploaded yet."
msgstr "No se ha subido ningún medio todavía."
#: web/templates/admin/media/upload.gohtml:6
#: web/templates/admin/media/upload.gohtml:13
msgctxt "title"
msgid "Upload Media"
msgstr "Subida de medio"
#: web/templates/admin/media/upload.gohtml:18
msgctxt "input"
msgid "File"
msgstr "Archivo"
#: web/templates/admin/media/upload.gohtml:22
msgid "Maximum upload file size: %s"
msgstr "Tamaño máximo del archivos a subir: %s"
#: web/templates/admin/media/upload.gohtml:27
msgctxt "action"
msgid "Upload"
msgstr "Subir"
#: pkg/app/login.go:56 pkg/app/user.go:246 pkg/company/admin.go:203
msgid "Email can not be empty."
msgstr "No podéis dejar el correo-e en blanco."
@ -634,6 +734,10 @@ msgstr "Se ha detectado un intento de falsificación de petición en sitios cruz
msgid "Slide image can not be empty."
msgstr "No podéis dejar la imagen de la diapositiva en blanco."
#: pkg/media/admin.go:164
msgid "Uploaded file can not be empty."
msgstr "No podéis dejar el archivo del medio en blanco."
#~ msgid "Legend"
#~ msgstr "Leyenda"

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 166 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 91 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 218 KiB

View File

@ -123,6 +123,10 @@ img, picture, video, canvas, svg {
max-width: 100%;
}
img {
height: auto;
}
input, button, textarea, select {
font: inherit;
}
@ -131,6 +135,11 @@ p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
h2 {
font-size: 4.2rem;
font-weight: 400;
}
a {
color: var(--contrast);
text-decoration: none;
@ -340,7 +349,7 @@ nav .has-submenu:hover ul, nav .has-submenu:focus-within ul {
justify-content: space-between;
}
.nature h2, .nature div:first-child a, .services a, .surroundings .spiel a {
.nature h2, .nature div:first-child a, .services h2, .surroundings .spiel a {
font-weight: bold;
line-height: .9em;
}
@ -359,7 +368,7 @@ nav .has-submenu:hover ul, nav .has-submenu:focus-within ul {
padding: 3rem;
}
.nature div:first-child a, .services a, .surroundings .spiel a {
.nature div:first-child a, .services h2, .surroundings .spiel a {
font-size: calc(1.8rem + 1.7vw);
}
@ -376,7 +385,7 @@ nav .has-submenu:hover ul, nav .has-submenu:focus-within ul {
transform: translateX(1.3rem);
}
.nature div + div {
dl, .nature div + div, .outside_activities > div {
display: flex;
gap: 5rem;
}
@ -512,6 +521,130 @@ nav .has-submenu:hover ul, nav .has-submenu:focus-within ul {
margin: 10rem 0;
}
dl {
flex-wrap: wrap;
}
dl div {
flex: 1;
}
dt {
font-size: 2rem;
font-weight: 600;
padding: 5rem 0 .5rem;
margin-bottom: 2rem;
border-bottom: 1px solid black;
background-size: 2em 2em;
background-repeat: no-repeat;
background-position: top left;
}
@media (max-width: 48rem) {
dl {
flex-direction: column;
}
}
.icon_bicycle {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="%23000000" height="32" width="32"%3E%3Cpath d="M208,116a43.66,43.66,0,0,0-18.62,4.15L159,68h33a12,12,0,0,1,12,12,4,4,0,0,0,8,0,20,20,0,0,0-20-20H152a4,4,0,0,0-3.46,6L163.7,92H97L79.46,62A4,4,0,0,0,76,60H48a4,4,0,0,0,0,8H73.7L89.89,95.76,70.57,122.25A44.21,44.21,0,1,0,77,127L94.29,103.3,128.54,162a4,4,0,0,0,3.46,2,4.11,4.11,0,0,0,2-.54,4,4,0,0,0,1.44-5.48l-33.83-58h66.74l14.11,24.19A44,44,0,1,0,208,116ZM84,160a36,36,0,1,1-18.16-31.25L44.77,157.64a4,4,0,0,0,6.46,4.72l21.07-28.9A35.92,35.92,0,0,1,84,160Zm124,36a36,36,0,0,1-21.47-64.88l18,30.9a4,4,0,0,0,3.46,2,4.11,4.11,0,0,0,2-.54,4,4,0,0,0,1.44-5.48l-18-30.89A36,36,0,1,1,208,196Z"/%3E%3C/svg%3E');
}
.icon_route {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="%23000000" height="32" width="32"%3E%3Cpath d="M226.46,52.85a4,4,0,0,0-3.43-.73L160.47,67.76,97.79,36.42a4,4,0,0,0-2.76-.3l-64,16A4,4,0,0,0,28,56V200a4,4,0,0,0,5,3.88l62.56-15.64,62.68,31.34a4,4,0,0,0,2.76.3l64-16a4,4,0,0,0,3-3.88V56A4,4,0,0,0,226.46,52.85ZM100,46.47l56,28V209.53l-56-28ZM36,59.12l56-14V180.88l-56,14ZM220,196.88l-56,14V75.12l56-14Z"/%3E%3C/svg%3E');
}
.icon_outing {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="%23000000" height="32" width="32"%3E%3Cpath d="M164,44.17V32a20,20,0,0,0-20-20H112A20,20,0,0,0,92,32V44.17A52.05,52.05,0,0,0,44,96V216a12,12,0,0,0,12,12H200a12,12,0,0,0,12-12V96A52.05,52.05,0,0,0,164,44.17ZM112,20h32a12,12,0,0,1,12,12V44H100V32A12,12,0,0,1,112,20Zm60,144H84V152a12,12,0,0,1,12-12h64a12,12,0,0,1,12,12Zm-88,8h56v12a4,4,0,0,0,8,0V172h24v48H84Zm120,44a4,4,0,0,1-4,4H180V152a20,20,0,0,0-20-20H96a20,20,0,0,0-20,20v68H56a4,4,0,0,1-4-4V96A44.05,44.05,0,0,1,96,52h64a44.05,44.05,0,0,1,44,44ZM148,88a4,4,0,0,1-4,4H112a4,4,0,0,1,0-8h32A4,4,0,0,1,148,88Z"/%3E%3C/svg%3E');
}
.icon_kayak {
background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 29.52905 28.08545" xmlns="http://www.w3.org/2000/svg" id="uuid-87ec619a-4896-40b8-8478-aa076dee3f7c"%3E%3Cpath stroke-width="0" d="m29.46728,11.26074l-.57617-2.15186c-.08398-.31299-.24609-.59229-.45801-.78613-.26758-.24658-.59863-.3418-.90625-.25879l-3.4834.93213c-.26953.07227-.48535.26807-.6084.54932l-.5752,1.30713c-.0719.16376-.10333.34686-.10742.53485l-3.05627.81787c-.23956-3.37067-1.03204-8.79126-2.35193-10.66425l-.22363-.31836C16.58057.45752,15.69971.00049,14.76318,0h-.00049c-.94873,0-1.80566.44434-2.35156,1.21875-1.71973,2.44043-2.65771,9.75146-2.65771,12.82422,0,.24457.00812.52399.0199.81769l-3.25604.87134c-.09741-.16071-.21613-.30347-.36005-.40924l-1.15088-.84424c-.24854-.18213-.53125-.24463-.80127-.17236l-3.48389.93164c-.56689.15234-.85693.84961-.65918,1.58691l.57617,2.15137c.0835.31348.24561.59277.45654.78613.20508.18848.4458.28809.68506.28809.07471,0,.14893-.00879.22168-.02832l3.48486-.93359c.26807-.07227.48389-.26758.60693-.54883l.57568-1.30664c.07172-.16357.10309-.3465.10718-.5343l3.05591-.81793c.25531,3.52673,1.14368,8.94983,2.5791,10.98602.5459.77441,1.40332,1.21875,2.35205,1.21875.93652,0,1.81738-.45703,2.35645-1.22266l.22461-.31738c1.60352-2.27637,2.43066-9.79492,2.43066-12.50244,0-.23499-.00854-.51709-.021-.81805l3.25732-.87183c.09747.16071.21625.30347.36035.40912l1.15039.84473c.18066.13281.38086.20166.5791.20166.07422,0,.14941-.00977.22168-.0293l3.48535-.93262c.56641-.15234.85645-.84863.65918-1.58594Zm-24.24072,6.86182l-3.41602.93262c-.03516-.01465-.14844-.12109-.20654-.33691l-.57617-2.15137c-.05713-.21484-.01318-.3623-.04688-.3623h-.00098l3.4165-.93164s.00586.00293.01709.01074c.00049,0,.00098.00098.00098.00098l1.00842.74017-1.90881.5108c-.2666.07227-.4248.3457-.35352.6123.05957.22363.26172.37109.48242.37109.04297,0,.08643-.00586.12988-.0166l1.91559-.5127-.46198,1.13281Zm5.52686-4.07959c0-3.07959.93994-10.06934,2.4751-12.24805.35596-.50488.91504-.79492,1.53418-.79492.62109.00049,1.18213.2915,1.54053.79932l.22266.31689c1.17902,1.67261,1.96533,7.08936,2.18457,10.35278l-1.50305.40228c-.19397-2.55505-1.02423-4.83514-2.44324-4.83514-1.63379,0-2.48828,3.02197-2.48828,6.00684,0,.04913.00214.09814.00262.14728l-1.51538.40552c-.00574-.19403-.0097-.38147-.0097-.5528Zm2.52692-.12079c.02441-2.93951.89984-4.88605,1.48383-4.88605.53003,0,1.29828,1.6062,1.45496,4.09961l-2.93878.78644Zm2.96765.24115c-.02441,2.93933-.89978,4.88599-1.48383,4.88599-.53003,0-1.29834-1.60632-1.45496-4.09937l2.93878-.78662Zm2.52692-.12036c0,2.66846-.84961,9.94092-2.24902,11.92725l-.22363.31641c-.71387,1.01367-2.36084,1.01562-3.07373.00391-1.31152-1.86127-2.18622-7.22681-2.414-10.67285l1.50641-.4032c.19397,2.55505,1.02417,4.83484,2.44324,4.83484,1.63379,0,2.48828-3.02148,2.48828-6.00635,0-.04926-.00214-.09845-.00262-.14777l1.51514-.40558c.00659.20087.00995.38617.00995.55334Zm6.35742-1.23047s-.00684-.00293-.01855-.01123l-1.00897-.74091,1.90936-.51105c.26758-.07129.42578-.34521.35449-.6123-.07227-.26562-.3418-.42725-.6123-.35352l-1.91577.5127.46069-1.13379,3.41699-.93164c.03516.01416.14844.12012.20605.33691l.57617,2.15186c.05957.21973.01953.36816.04883.36133l-3.41699.93164Z"/%3E%3C/svg%3E');
}
.outside_activities {
margin-top: 2rem;
}
.outside_activities h3 {
font-size: calc(2.2rem + 4vw);
font-weight: 600;
line-height: .9em;
margin-bottom: 10rem;
}
.outside_activities > div {
align-items: start;
}
.outside_activities > div:first-of-type {
margin-bottom: 5rem;
}
.outside_activities > div:first-of-type p {
width: 25%;
padding-top: 12rem;
}
.outside_activities > div:first-of-type img {
width: 40%;
}
.outside_activities > div:first-of-type img:last-child {
width: 35%;
padding-top: 22rem;
}
.outside_activities > div:nth-of-type(2) > img {
width: 35%;
}
.outside_activities > div:nth-of-type(2) > div {
width: 30%;
padding-top: 10rem;
}
.outside_activities > div:nth-of-type(2) > div img {
margin-top: 20rem;
}
.outside_activities > div:nth-of-type(2) > img:last-child {
padding-top: 22rem;
}
.outside_activities > div:last-child img {
width: 40%;
}
.outside_activities > div:last-child img:first-child {
margin-top: 10rem;
}
.outside_activities > div:last-child img:nth-child(2) {
margin-top: 22rem;
}
.outside_activities > div:last-child div {
width: 20%;
}
.outside_activities > div:last-child p {
margin-bottom: 1.5em;
}
.campsite_activities {
margin-top: 10rem;
padding-top: 10rem;
border-top: 1px solid black;
}
.campsite_activities h3 {
font-size: 2.9rem;
font-weight: 400;
line-height: 1.2;
margin-bottom: 5rem;
}
footer {
font-size: 1.5rem;
text-align: center;

View File

@ -0,0 +1,61 @@
<!--
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>
<section class="outside_activities">
<h3>{{( pgettext "What to Do Outside the Campsite?" "title" )}}</h3>
<div>
<p>{{( gettext "Campsite Montagut is an ideal starting point for quiet outings, climbing, swimming in the river and gorges, volcanoes, the Fageda den Jordà, cycle tours for all ages…." )}}</p>
<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 }}