Add the first test for the front end design

As previously stated, web made the design with an external tool and
had to “convert” it to proper CSS and HTML markup.

Unfortunately, the original design uses slick, that requires jQuery;
i can’t do anything about it now.

Disabled most of the menu and language switcher because it is not in the
design yet.
This commit is contained in:
jordi fita mas 2023-09-05 04:40:48 +02:00
parent b4919db6c4
commit 1f9668104e
29 changed files with 678 additions and 20 deletions

View File

@ -8,7 +8,7 @@ msgid ""
msgstr "" msgstr ""
"Project-Id-Version: camper\n" "Project-Id-Version: camper\n"
"Report-Msgid-Bugs-To: jordi@tandem.blog\n" "Report-Msgid-Bugs-To: jordi@tandem.blog\n"
"POT-Creation-Date: 2023-08-16 20:03+0200\n" "POT-Creation-Date: 2023-09-05 04:34+0200\n"
"PO-Revision-Date: 2023-07-22 23:45+0200\n" "PO-Revision-Date: 2023-07-22 23:45+0200\n"
"Last-Translator: jordi fita mas <jordi@tandem.blog>\n" "Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
"Language-Team: Catalan <ca@dodds.net>\n" "Language-Team: Catalan <ca@dodds.net>\n"
@ -18,20 +18,50 @@ msgstr ""
"Content-Transfer-Encoding: 8bit\n" "Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n" "Plural-Forms: nplurals=2; plural=(n != 1);\n"
#: web/templates/public/home.gohtml:6 #: web/templates/public/home.gohtml:6 web/templates/public/layout.gohtml:39
msgctxt "title" msgctxt "title"
msgid "Home" msgid "Home"
msgstr "Inici" msgstr "Inici"
#: web/templates/public/layout.gohtml:11 web/templates/public/layout.gohtml:21 #: web/templates/public/home.gohtml:16
msgid "The pleasure of camping in the middle of nature…"
msgstr "El plaer dacampar en plena natura…"
#: web/templates/public/home.gohtml:17
msgctxt "link"
msgid "Booking"
msgstr "Reserva"
#: web/templates/public/home.gohtml:30
msgid "Our services"
msgstr "Els nostres serveis"
#: web/templates/public/home.gohtml:33
msgid "Environment"
msgstr "Entorn"
#: web/templates/public/home.gohtml:48 web/templates/public/home.gohtml:52
#: web/templates/public/home.gohtml:56 web/templates/public/home.gohtml:60
#: web/templates/public/home.gohtml:64 web/templates/public/home.gohtml:68
#: web/templates/public/home.gohtml:72 web/templates/public/home.gohtml:76
#: web/templates/public/home.gohtml:80
msgid "Legend"
msgstr "Llegenda"
#: web/templates/public/home.gohtml:84
msgid "Come and enjoy!"
msgstr "Vine a gaudir!"
#: web/templates/public/layout.gohtml:11 web/templates/public/layout.gohtml:23
#: web/templates/public/layout.gohtml:60
msgid "Campsite Montagut" msgid "Campsite Montagut"
msgstr "Càmping Montagut" msgstr "Càmping Montagut"
#: web/templates/public/layout.gohtml:20 web/templates/admin/layout.gohtml:18 #: web/templates/public/layout.gohtml:21 web/templates/admin/layout.gohtml:18
msgid "Skip to main content" msgid "Skip to main content"
msgstr "Salta al contingut principal" msgstr "Salta al contingut principal"
#: web/templates/public/layout.gohtml:38 #: web/templates/public/layout.gohtml:44
msgid "Singular Lodges" msgid "Singular Lodges"
msgstr "Allotjaments singulars" msgstr "Allotjaments singulars"

View File

@ -8,7 +8,7 @@ msgid ""
msgstr "" msgstr ""
"Project-Id-Version: camper\n" "Project-Id-Version: camper\n"
"Report-Msgid-Bugs-To: jordi@tandem.blog\n" "Report-Msgid-Bugs-To: jordi@tandem.blog\n"
"POT-Creation-Date: 2023-08-16 20:03+0200\n" "POT-Creation-Date: 2023-09-05 04:34+0200\n"
"PO-Revision-Date: 2023-07-22 23:46+0200\n" "PO-Revision-Date: 2023-07-22 23:46+0200\n"
"Last-Translator: jordi fita mas <jordi@tandem.blog>\n" "Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
"Language-Team: Spanish <es@tp.org.es>\n" "Language-Team: Spanish <es@tp.org.es>\n"
@ -18,20 +18,50 @@ msgstr ""
"Content-Transfer-Encoding: 8bit\n" "Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n" "Plural-Forms: nplurals=2; plural=(n != 1);\n"
#: web/templates/public/home.gohtml:6 #: web/templates/public/home.gohtml:6 web/templates/public/layout.gohtml:39
msgctxt "title" msgctxt "title"
msgid "Home" msgid "Home"
msgstr "Inicio" msgstr "Inicio"
#: web/templates/public/layout.gohtml:11 web/templates/public/layout.gohtml:21 #: web/templates/public/home.gohtml:16
msgid "The pleasure of camping in the middle of nature…"
msgstr "El placer de acampar en plena naturaleza…"
#: web/templates/public/home.gohtml:17
msgctxt "link"
msgid "Booking"
msgstr "Reservar"
#: web/templates/public/home.gohtml:30
msgid "Our services"
msgstr "Nuestros servicios"
#: web/templates/public/home.gohtml:33
msgid "Environment"
msgstr "Entorno"
#: web/templates/public/home.gohtml:48 web/templates/public/home.gohtml:52
#: web/templates/public/home.gohtml:56 web/templates/public/home.gohtml:60
#: web/templates/public/home.gohtml:64 web/templates/public/home.gohtml:68
#: web/templates/public/home.gohtml:72 web/templates/public/home.gohtml:76
#: web/templates/public/home.gohtml:80
msgid "Legend"
msgstr "Leyenda"
#: web/templates/public/home.gohtml:84
msgid "Come and enjoy!"
msgstr "¡Ven a disfrutar!"
#: web/templates/public/layout.gohtml:11 web/templates/public/layout.gohtml:23
#: web/templates/public/layout.gohtml:60
msgid "Campsite Montagut" msgid "Campsite Montagut"
msgstr "Camping Montagut" msgstr "Camping Montagut"
#: web/templates/public/layout.gohtml:20 web/templates/admin/layout.gohtml:18 #: web/templates/public/layout.gohtml:21 web/templates/admin/layout.gohtml:18
msgid "Skip to main content" msgid "Skip to main content"
msgstr "Saltar al contenido principal" msgstr "Saltar al contenido principal"
#: web/templates/public/layout.gohtml:38 #: web/templates/public/layout.gohtml:44
msgid "Singular Lodges" msgid "Singular Lodges"
msgstr "Alojamientos singulares" msgstr "Alojamientos singulares"

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 253 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 311 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 315 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 336 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 152 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 194 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 699 KiB

2
web/static/jquery@3.7.1.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -2,29 +2,120 @@
* SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog> * SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
* SPDX-License-Identifier: AGPL-3.0-only * SPDX-License-Identifier: AGPL-3.0-only
*/ */
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Bold'), local('MabryPro-Bold'), url('fonts/MabryPro-Bold.woff2') format('woff2');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Medium'), local('MabryPro-Medium'), url('fonts/MabryPro-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Black'), local('MabryPro-Black'), url('fonts/MabryPro-Black.woff2') format('woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Light Italic'), local('MabryPro-LightItalic'), url('fonts/MabryPro-LightItalic.woff2') format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Bold Italic'), local('MabryPro-BoldItalic'), url('fonts/MabryPro-BoldItalic.woff2') format('woff2');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Light'), local('MabryPro-Light'), url('fonts/MabryPro-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Black Italic'), local('MabryPro-BlackItalic'), url('fonts/MabryPro-BlackItalic.woff2') format('woff2');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Medium Italic'), local('MabryPro-MediumItalic'), url('fonts/MabryPro-MediumItalic.woff2') format('woff2');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Italic'), local('MabryPro-Italic'), url('fonts/MabryPro-Italic.woff2') format('woff2');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro'), local('MabryPro-Regular'), url('fonts/MabryPro-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
*, *::before, *::after { *, *::before, *::after {
box-sizing: border-box; box-sizing: inherit;
} }
* { * {
margin: 0; margin: 0;
} }
html, body {
height: 100%;
}
html { html {
box-sizing: border-box;
font-size: 62.5%; font-size: 62.5%;
--contrast: #303334;
--contrast-2: #5f6158;
--contrast-3: #b2b2be;
--base: #f0f0f0;
--base-2: #f7f8f9;
--base-3: #ffffff;
--accent: #00aa7d;
--accent-2: #FFE37F;
--accent-3: #9adff4;
--clar-rgb: 239, 237, 236;
--clar: rgb(var(--clar-rgb));
} }
body { body {
font-family: 'Mabry Pro', sans-serif;
font-size: 1.6rem; font-size: 1.6rem;
line-height: 1.5; line-height: 1.5;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
background-color: white; background-color: var(--clar);
color: #3f3b37; color: var(--contrast);
max-width: 200rem;
margin-left: auto;
margin-right: auto;
} }
img, picture, video, canvas, svg { img, picture, video, canvas, svg {
@ -39,3 +130,282 @@ input, button, textarea, select {
p, h1, h2, h3, h4, h5, h6 { p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
a {
color: var(--contrast);
text-decoration: none;
}
body > a[href="#content"], .sr-only {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
body > a[href="#content"]:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 1.4rem;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
body > header {
position: sticky;
top: 0;
background-color: rgba(var(--clar-rgb), 0.7);
z-index: 999;
padding: 1rem 2.5rem;
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: space-between;
}
h1 a span {
display: inline-block;
}
h1 a .logo {
width: 5rem;
height: 4.33rem;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 98.72705 85.5'%3E%3Cpath d='m49.36377,0L0,85.5h98.72705L49.36377,0Zm18.61945,46.25l18.61945,32.25h-37.23914l18.61969-32.25Z' fill='%23303234'/%3E%3C/svg%3E") top left no-repeat;
background-size: 100%;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
margin-right: 1.7rem;
}
h1 a .name {
font-size: 2.5rem;
line-height: 1em;
text-indent: -.4em;
word-wrap: break-word;
font-weight: 700;
width: 50%;
}
nav ul {
list-style: none;
padding-left: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
}
nav a {
font-size: 1.8rem;
font-weight: 500;
text-transform: uppercase;
padding: 0 2rem;
line-height: 6rem;
}
#content {
padding: 2.5rem;
}
.nature div, .nature section a {
background: var(--background-image) center center no-repeat;
background-size: cover;
}
.nature div, .services {
margin-bottom: 5rem;
}
.nature div:first-child, .nature section, .services {
border-radius: 5px;
}
.nature div:first-child, .services {
min-height: 6rem;
display: flex;
align-items: flex-end;
column-gap: 5rem;
padding: 5rem;
}
.nature div:first-child {
justify-content: space-between;
}
.nature h2, .nature div:first-child a, .services a, .environment .spiel a {
font-weight: bold;
line-height: .9em;
}
.nature h2, .nature div:first-child a {
border-radius: 5px;
background-color: var(--clar);
}
.nature h2 {
width: 50%;
min-height: 100%;
margin-bottom: 0;
font-size: calc(2rem + 4vw);
display: block;
padding: 3rem;
}
.nature div:first-child a, .services a, .environment .spiel a {
font-size: calc(1.8rem + 1.7vw);
}
.nature div:first-child a, .services a {
padding: 1.5rem 2rem;
}
.nature div:first-child a span, .services a span, .environment .spiel a:hover span {
display: inline-block;
transition: transform 0.5s ease;
}
.nature div:first-child a:hover span, .services a:hover span, .spiel a:hover span {
transform: translateX(1.3rem);
}
.nature div + div {
display: flex;
column-gap: 5rem;
}
.nature section {
flex: 1;
max-width: 25%;
}
.nature section h3 {
font-size: 2.4rem;
}
.nature section a {
display: block;
width: 100%;
height: 20rem;
}
.nature section a span {
z-index: 2;
padding: 1rem 1.5rem;
background-color: var(--clar);
border-bottom-right-radius: 5px;
}
.services {
justify-content: end;
background-color: var(--accent);
}
.environment .spiel {
font-size: 2.4rem;
padding-right: 4rem;
}
.environment .spiel p {
margin-bottom: 2rem;
}
.environment figure {
margin-right: 5rem;
position: relative;
}
.environment figure img {
height: 40rem;
width: 100%;
border-radius: 5px;
object-fit: cover;
}
.environment figcaption {
padding: 10px 15px;
background: var(--clar);
width: fit-content;
float: right;
position: absolute;
bottom: 0;
right: 0;
border-top-left-radius: 5px;
font-size: 1.7rem;
}
.environment .slick-list {
order: 1;
padding: 0 20% 0 0 !important;
}
.environment .slick-track {
display: flex;
align-items: start;
}
.environment .slick-slider {
display: flex;
flex-wrap: wrap;
justify-content: end;
}
.environment .slick-arrow {
font-size: 6rem;
width: 5rem;
height: 5rem;
border: none !important;
background: none;
cursor: pointer;
transition: transform 0.5s ease;
margin-right: 4rem;
}
.environment .slick-prev.slick-arrow, .environment .slick-next.slick-arrow {
opacity: 1;
}
.environment .slick-prev {
order: 2;
}
.environment .slick-prev:hover {
transform: translateX(-1.3rem);
}
.environment .slick-next {
order: 3;
}
.environment .slick-next:hover {
transform: translateX(1.3rem);
}
.enjoy {
font-weight: 900;
font-size: calc(1.8rem + 8vw);
line-height: 1.2em;
}
footer {
font-size: 1.5rem;
text-align: center;
padding: 2.5rem;
}

119
web/static/slick@1.8.1.css Normal file
View File

@ -0,0 +1,119 @@
/* Slider */
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}

1
web/static/slick@1.8.1.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -6,5 +6,103 @@
{{( pgettext "Home" "title" )}} {{( pgettext "Home" "title" )}}
{{- end }} {{- end }}
{{ define "content" -}} {{ define "head" -}}
<link rel="stylesheet" media="screen" href="/static/slick@1.8.1.css">
{{- end }}
{{ define "content" -}}
<section class="nature">
<div style="--background-image:url('/static/images/todd-trapani-5LHzBpiTuzQ-unsplash.jpg')">
<h2>{{ (gettext "The pleasure of camping in the middle of nature…")}}</h2>
<a href="/{{ currentLocale }}/reservation">{{( pgettext "Booking" "link" )}} <span>→</span></a>
</div>
{{ with .Menu.CampsiteTypes -}}
<div>
{{ range . -}}
<section style="--background-image:url('/static/images/camping_montagut_acampada_tenda.jpg')">
<h3><a href="{{ .HRef }}"><span>{{ .Label }}</span></a></h3>
</section>
{{- end }}
</div>
{{- end }}
</section>
<section class="services">
<h2><a href="/{{ currentLocale }}/services">{{( gettext "Our services")}} <span>→</span></a></h2>
</section>
<section class="environment">
<h2 class="sr-only">{{ (gettext "Environment")}}</h2>
<div>
<div class="spiel">
<p>Situats a l<strong>Alta Garrotxa</strong>, entre els <strong>Pirineus</strong> i la <strong>Costa
Brava</strong>.</p>
<p>A prop teniu els <strong>gorgs de Sadernes</strong>, <strong>volcans</strong>, <strong>La Fageda den
Jordà</strong>, el call jueu de <strong>Besalú</strong>, la cinglera basàltica de <strong>Castellfollit
de la Roca</strong>… molt per veure i molt per fer.</p>
<p>A menys duna hora de <strong>Girona</strong>, a una de <strong>La Bisbal dEmpordà</strong> i a dues
de
<strong>Barcelona</strong>.</p>
<p><a href="/{{currentLocale}}/environment/">Descobreix lentorn <span>→</span></a></p>
</div>
<figure>
<img src="/static/images/Volca_de_Santa_Margarida.jpg" alt=""/>
<figcaption>{{( gettext "Legend" )}}</figcaption>
</figure>
<figure>
<img src="/static/images/Gorga_fosca_Sadernes.jpg" alt=""/>
<figcaption>{{( gettext "Legend" )}}</figcaption>
</figure>
<figure>
<img src="/static/images/castellfolit_de_la_roca.jpg" alt=""/>
<figcaption>{{( gettext "Legend" )}}</figcaption>
</figure>
<figure>
<img src="/static/images/besalu.jpg" alt=""/>
<figcaption>{{( gettext "Legend" )}}</figcaption>
</figure>
<figure>
<img src="/static/images/santa_pau.jpg" alt=""/>
<figcaption>{{( gettext "Legend" )}}</figcaption>
</figure>
<figure>
<img src="/static/images/banyoles.jpg" alt=""/>
<figcaption>{{( gettext "Legend" )}}</figcaption>
</figure>
<figure>
<img src="/static/images/girn-a.jpg" alt=""/>
<figcaption>{{( gettext "Legend" )}}</figcaption>
</figure>
<figure>
<img src="/static/images/costa_brava.jpg" alt=""/>
<figcaption>{{( gettext "Legend" )}}</figcaption>
</figure>
<figure>
<img src="/static/images/barcelona-1.jpg" alt=""/>
<figcaption>{{( gettext "Legend" )}}</figcaption>
</figure>
</div>
</section>
<p class="enjoy">{{( gettext "Come and enjoy!")}}</p>
<script src="/static/jquery@3.7.1.min.js"></script>
<script src="/static/slick@1.8.1.min.js"></script>
<script>
jQuery(function () {
jQuery('.environment > div').slick({
slidesToShow: 2,
slidesToScroll: 1,
infinite: false,
arrows: true,
prevArrow: '<button type="button" class="slick-prev">←</button>',
nextArrow: '<button type="button" class="slick-next">→</button>',
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 1,
}
},
]
});
});
</script>
{{- end }} {{- end }}

View File

@ -9,6 +9,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ template "title" . }} — {{( gettext "Campsite Montagut" )}}</title> <title>{{ template "title" . }} — {{( gettext "Campsite Montagut" )}}</title>
<link rel="preload" href="/static/fonts/MabryPro-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/static/fonts/MabryPro-Bold.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" media="screen" href="/static/public.css"> <link rel="stylesheet" media="screen" href="/static/public.css">
{{ range .LocalizedAlternates -}} {{ range .LocalizedAlternates -}}
<link rel="alternate" hreflang="{{ .Lang }}" href="{{ .HRef }}"/> <link rel="alternate" hreflang="{{ .Lang }}" href="{{ .HRef }}"/>
@ -16,9 +18,10 @@
{{- block "head" . }}{{ end }} {{- block "head" . }}{{ end }}
</head> </head>
<body> <body>
<a href="#content">{{( gettext "Skip to main content" )}}</a>
<header> <header>
<a href="#content">{{( gettext "Skip to main content" )}}</a> <h1><a href="/{{ currentLocale }}/"><span class="logo">◭</span><span class="name">{{( gettext "Campsite Montagut" )}}</span></a></h1>
<h1>{{( gettext "Campsite Montagut" )}}</h1> {{/*
{{ if .LocalizedAlternates -}} {{ if .LocalizedAlternates -}}
<nav> <nav>
<ul> <ul>
@ -29,9 +32,12 @@
</ul> </ul>
</nav> </nav>
{{- end }} {{- end }}
*/}}
{{ with .Menu -}} {{ with .Menu -}}
<nav> <nav>
<ul> <ul>
<li><a href="/{{ currentLocale }}/">{{( pgettext "Home" "title" )}}</a></li>
{{/*
{{ if .CampsiteTypes -}} {{ if .CampsiteTypes -}}
<li> <li>
<button type="button" aria-expanded="false" aria-controls="campsite-types-menu" <button type="button" aria-expanded="false" aria-controls="campsite-types-menu"
@ -43,6 +49,7 @@
</ul> </ul>
</li> </li>
{{- end }} {{- end }}
*/}}
</ul> </ul>
</nav> </nav>
{{- end }} {{- end }}
@ -50,5 +57,6 @@
<main id="content"> <main id="content">
{{- template "content" . }} {{- template "content" . }}
</main> </main>
<footer>© {{( gettext "Campsite Montagut" )}} | 19842023</footer>
</body> </body>
</html> </html>