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:
parent
b4919db6c4
commit
1f9668104e
40
po/ca.po
40
po/ca.po
|
|
@ -8,7 +8,7 @@ msgid ""
|
|||
msgstr ""
|
||||
"Project-Id-Version: camper\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"
|
||||
"Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
|
||||
"Language-Team: Catalan <ca@dodds.net>\n"
|
||||
|
|
@ -18,20 +18,50 @@ msgstr ""
|
|||
"Content-Transfer-Encoding: 8bit\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"
|
||||
msgid "Home"
|
||||
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 d’acampar 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"
|
||||
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"
|
||||
msgstr "Salta al contingut principal"
|
||||
|
||||
#: web/templates/public/layout.gohtml:38
|
||||
#: web/templates/public/layout.gohtml:44
|
||||
msgid "Singular Lodges"
|
||||
msgstr "Allotjaments singulars"
|
||||
|
||||
|
|
|
|||
40
po/es.po
40
po/es.po
|
|
@ -8,7 +8,7 @@ msgid ""
|
|||
msgstr ""
|
||||
"Project-Id-Version: camper\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"
|
||||
"Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
|
||||
"Language-Team: Spanish <es@tp.org.es>\n"
|
||||
|
|
@ -18,20 +18,50 @@ msgstr ""
|
|||
"Content-Transfer-Encoding: 8bit\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"
|
||||
msgid "Home"
|
||||
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"
|
||||
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"
|
||||
msgstr "Saltar al contenido principal"
|
||||
|
||||
#: web/templates/public/layout.gohtml:38
|
||||
#: web/templates/public/layout.gohtml:44
|
||||
msgid "Singular Lodges"
|
||||
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 |
File diff suppressed because one or more lines are too long
|
|
@ -2,29 +2,120 @@
|
|||
* SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
|
||||
* 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 {
|
||||
box-sizing: border-box;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
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 {
|
||||
font-family: 'Mabry Pro', sans-serif;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: white;
|
||||
color: #3f3b37;
|
||||
background-color: var(--clar);
|
||||
color: var(--contrast);
|
||||
max-width: 200rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
img, picture, video, canvas, svg {
|
||||
|
|
@ -39,3 +130,282 @@ input, button, textarea, select {
|
|||
p, h1, h2, h3, h4, h5, h6 {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -6,5 +6,103 @@
|
|||
{{( pgettext "Home" "title" )}}
|
||||
{{- 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 d’en
|
||||
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 d’una hora de <strong>Girona</strong>, a una de <strong>La Bisbal d’Empordà</strong> i a dues
|
||||
de
|
||||
<strong>Barcelona</strong>.</p>
|
||||
<p><a href="/{{currentLocale}}/environment/">Descobreix l’entorn <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 }}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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">
|
||||
{{ range .LocalizedAlternates -}}
|
||||
<link rel="alternate" hreflang="{{ .Lang }}" href="{{ .HRef }}"/>
|
||||
|
|
@ -16,9 +18,10 @@
|
|||
{{- block "head" . }}{{ end }}
|
||||
</head>
|
||||
<body>
|
||||
<a href="#content">{{( gettext "Skip to main content" )}}</a>
|
||||
<header>
|
||||
<a href="#content">{{( gettext "Skip to main content" )}}</a>
|
||||
<h1>{{( gettext "Campsite Montagut" )}}</h1>
|
||||
<h1><a href="/{{ currentLocale }}/"><span class="logo">◭</span><span class="name">{{( gettext "Campsite Montagut" )}}</span></a></h1>
|
||||
{{/*
|
||||
{{ if .LocalizedAlternates -}}
|
||||
<nav>
|
||||
<ul>
|
||||
|
|
@ -29,9 +32,12 @@
|
|||
</ul>
|
||||
</nav>
|
||||
{{- end }}
|
||||
*/}}
|
||||
{{ with .Menu -}}
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/{{ currentLocale }}/">{{( pgettext "Home" "title" )}}</a></li>
|
||||
{{/*
|
||||
{{ if .CampsiteTypes -}}
|
||||
<li>
|
||||
<button type="button" aria-expanded="false" aria-controls="campsite-types-menu"
|
||||
|
|
@ -43,6 +49,7 @@
|
|||
</ul>
|
||||
</li>
|
||||
{{- end }}
|
||||
*/}}
|
||||
</ul>
|
||||
</nav>
|
||||
{{- end }}
|
||||
|
|
@ -50,5 +57,6 @@
|
|||
<main id="content">
|
||||
{{- template "content" . }}
|
||||
</main>
|
||||
<footer>© {{( gettext "Campsite Montagut" )}} | 1984–2023</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue