tandem
/
camper
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add the email and phone numbers at the very top 

Requested by the customer
This commit is contained in:
jordi fita mas 2023-12-20 20:39:26 +01:00
parent 34081a50f4
commit 7b6bae5062
2 changed files with 188 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

328
web/static/public.css
View File

@ -116,7 +116,7 @@ body {
max-width: 200rem; max-width: 200rem;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
overflow-x: hidden; overflow-x: hidden;
} }
img, picture, video, canvas, svg { img, picture, video, canvas, svg {
@ -192,11 +192,41 @@ body > header {
top: 0; top: 0;
z-index: 999; z-index: 999;
padding: 1rem 2.5rem; padding: 1rem 2.5rem;
display: flex; display: grid;
grid-template-columns: auto 1fr;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
body > header > address {
grid-column: 1 / span 2;
margin: 0 0 1em;
font-size: 1.3rem;
display: flex;
gap: 2em;
}
body > header > address a {
display: flex;
gap: .5em;
}
body > header > address a::before {
display: inline-block;
width: 1.2rem;
aspect-ratio: 1;
content: '';
background: left center / 100% no-repeat;
}
body > header > address a[href^='tel:']::before {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Crect width="256" height="256" fill="none"/%3E%3Cpath d="M164.39,145.34a8,8,0,0,1,7.59-.69l47.16,21.13a8,8,0,0,1,4.8,8.3A48.33,48.33,0,0,1,176,216,136,136,0,0,1,40,80,48.33,48.33,0,0,1,81.92,32.06a8,8,0,0,1,8.3,4.8l21.13,47.2a8,8,0,0,1-.66,7.53L89.32,117a7.93,7.93,0,0,0-.54,7.81c8.27,16.93,25.77,34.22,42.75,42.41a7.92,7.92,0,0,0,7.83-.59Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3C/svg%3E');
}
body > header > address a[href^='mailto:']::before {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Crect width="256" height="256" fill="none"/%3E%3Cpolyline points="224 56 128 144 32 56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3Cpath d="M32,56H224a0,0,0,0,1,0,0V192a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V56A0,0,0,0,1,32,56Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3Cline x1="110.55" y1="128" x2="34.47" y2="197.74" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3Cline x1="221.53" y1="197.74" x2="145.45" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3C/svg%3E');
}
body > header, nav .has-submenu ul { body > header, nav .has-submenu ul {
background-color: rgba(var(--clar-rgb), 0.7); background-color: rgba(var(--clar-rgb), 0.7);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
@ -290,7 +320,6 @@ nav .has-submenu:hover ul, nav .has-submenu:focus-within ul {
@media (max-width: 80rem) { @media (max-width: 80rem) {
body > header { body > header {
display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
@ -413,7 +442,7 @@ dl, .nature div + div, .outside_activities > div {
display: block; display: block;
width: 100%; width: 100%;
height: 20rem; height: 20rem;
border-radius: 5px; border-radius: 5px;
} }
.nature section a span { .nature section a span {
@ -445,7 +474,7 @@ dl, .nature div + div, .outside_activities > div {
} }
.campsite_services { .campsite_services {
margin: 0 0 40px 0; margin: 0 0 40px 0;
} }
.carousel { .carousel {
@ -542,14 +571,14 @@ dl {
dl div { dl div {
flex-basis: calc(25% - 5rem + 5rem / 4); flex-basis: calc(25% - 5rem + 5rem / 4);
min-height: 220px; min-height: 220px;
padding: 12.5px; padding: 12.5px;
border-radius: 5px; border-radius: 5px;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
dl div:hover { dl div:hover {
background-color: var(--accent-2); background-color: var(--accent-2);
} }
dt { dt {
@ -576,21 +605,23 @@ dt {
/* autside-activities tablet & mobile */ /* autside-activities tablet & mobile */
@media (max-width: 64rem) { @media (max-width: 64rem) {
dl, .nature div + div, .outside_activities > div { dl, .nature div + div, .outside_activities > div {
flex-direction: column; flex-direction: column;
} }
.outside_activities > div:first-of-type p { .outside_activities > div:first-of-type p {
width: 100% !important; width: 100% !important;
margin-top: 0 !important; margin-top: 0 !important;
}
.outside_activities > div:first-of-type img:last-child {
width: 100% !important;
margin-top: 0 !important;
}
} }
.outside_activities > div:first-of-type img:last-child { /* end autside-activities tablet & mobile */
width: 100% !important;
margin-top: 0 !important;
}
} /* end autside-activities tablet & mobile */
.outside_activities { .outside_activities {
margin-top: 2rem; margin-top: 2rem;
@ -607,7 +638,7 @@ dl, .nature div + div, .outside_activities > div {
} }
.outside_activities img { .outside_activities img {
border-radius: 5px; border-radius: 5px;
} }
.outside_activities > div { .outside_activities > div {
@ -763,7 +794,7 @@ dl, .nature div + div, .outside_activities > div {
} }
.campsite_type_prices dl div:hover { .campsite_type_prices dl div:hover {
background-color: transparent; background-color: transparent;
} }
.campsite_type_prices div { .campsite_type_prices div {
@ -932,18 +963,19 @@ dl, .nature div + div, .outside_activities > div {
/* form */ /* form */
input { input {
height: 60px; height: 60px;
border-radius: 5px; border-radius: 5px;
border: 1px solid; border: 1px solid;
} }
select { select {
min-height: 60px; min-height: 60px;
border-radius: 5px; border-radius: 5px;
border: 1px solid; border: 1px solid;
background: white; background: white;
padding: 20px; padding: 20px;
} }
/* /*
label { label {
display: flex; display: flex;
@ -953,86 +985,83 @@ label {
*/ */
fieldset { fieldset {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
button { button {
font-size: 4rem; font-size: 4rem;
background: var(--accent); background: var(--accent);
border-radius: 5px; border-radius: 5px;
border: 1px solid var(--accent); border: 1px solid var(--accent);
color: var(--contrast); color: var(--contrast);
} }
/* radio buttins + checkbox */ /* radio buttins + checkbox */
/* Context for relative positioning */ /* Context for relative positioning */
label { label {
position: relative; position: relative;
} }
/* Base styles for both types of inputs */ /* Base styles for both types of inputs */
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
appearance: none; appearance: none;
background: #fff; background: #fff;
border: 2px solid #777; border: 2px solid #777;
height: 1.5em !important; height: 1.5em !important;
width: 1.5em !important; width: 1.5em !important;
margin: 0 10px 0 30px; margin: 0 10px 0 30px;
border-radius: 100%; border-radius: 100%;
vertical-align: text-bottom; vertical-align: text-bottom;
position: relative; position: relative;
} }
/* Remove the circular shape from checkboxes */ /* Remove the circular shape from checkboxes */
input[type="checkbox"] { input[type="checkbox"] {
border-radius: 0; border-radius: 0;
} }
/* Styles for the pseudo-elements */ /* Styles for the pseudo-elements */
input[type="radio"]::before, input[type="radio"]::before,
input[type="checkbox"]::before { input[type="checkbox"]::before {
content: ""; content: "";
position: absolute; position: absolute;
margin: auto; margin: auto;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
overflow: hidden; overflow: hidden;
top: 0; top: 0;
} }
/* Center of the checked radio button */ /* Center of the checked radio button */
input[type="radio"]:checked::before { input[type="radio"]:checked::before {
border: 5px solid transparent; border: 5px solid transparent;
border-radius: 100%; border-radius: 100%;
background: var(--accent); background: var(--accent);
margin: 4px; margin: 4px;
} }
/* The checkmark shape */ /* The checkmark shape */
input[type="checkbox"]:checked::before { input[type="checkbox"]:checked::before {
border-right: 5px solid var(--accent); border-right: 5px solid var(--accent);
border-bottom: 6px solid var(--accent); border-bottom: 6px solid var(--accent);
height: 90%; height: 90%;
width: 50%; width: 50%;
transform: rotate(50deg) translateY(-20%) translateX(-10%); transform: rotate(50deg) translateY(-20%) translateX(-10%);
} }
/* Some focus styles for accessibility */ /* Some focus styles for accessibility */
input[type="radio"]:focus, input[type="radio"]:focus,
input[type="checkbox"]:focus { input[type="checkbox"]:focus {
outline-offset: 2px; outline-offset: 2px;
} }
#booking fieldset { #booking fieldset {
border: none; border: none;
} }
@ -1044,7 +1073,7 @@ input[type="checkbox"]:focus {
#booking input:not([type="radio"]):not([type="checkbox"]), #booking input:not([type="radio"]):not([type="checkbox"]),
#booking select { #booking select {
width: 100%; width: 100%;
padding: 20px; padding: 20px;
} }
#booking fieldset { #booking fieldset {
@ -1098,19 +1127,22 @@ input[type="checkbox"]:focus {
/* footer responsive */ /* footer responsive */
@media (max-width: 48rem) { @media (max-width: 48rem) {
body > footer div { body > footer div {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
body > footer section {
width: 100% !important;
margin: 40px 0 0 0;
}
}/* end footer responsive */ body > footer section {
width: 100% !important;
margin: 40px 0 0 0;
}
}
/* end footer responsive */
footer { footer {
margin: 120px 0 0 0; margin: 120px 0 0 0;
} }
body > footer { body > footer {
@ -1173,126 +1205,126 @@ body > footer span {
/* contact */ /* contact */
@media (max-width: 64rem) { @media (max-width: 64rem) {
.contact-page { .contact-page {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
} }
} }
.contact-page { .contact-page {
display: grid; display: grid;
grid-template-columns: 1fr 4fr; grid-template-columns: 1fr 4fr;
grid-gap: 20px; grid-gap: 20px;
} }
address { address {
font-size: calc(16px + .4vw); font-size: calc(16px + .4vw);
margin: 30px 0 30px 0; margin: 30px 0 30px 0;
} }
#map { #map {
border-radius: 5px; border-radius: 5px;
} }
.leaflet-popup-content-wrapper { .leaflet-popup-content-wrapper {
border-radius: 5px !important; border-radius: 5px !important;
} }
.leaflet-popup-content { .leaflet-popup-content {
font-size: 2rem !important; font-size: 2rem !important;
} }
/* camping map */ /* camping map */
#arbres { #arbres {
mix-blend-mode: multiply; mix-blend-mode: multiply;
} }
/* surrounding */ /* surrounding */
.ad-container { .ad-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
margin: 50px 0; margin: 50px 0;
} }
.ad-image-container { .ad-image-container {
width: 50%; width: 50%;
min-height: 300px; min-height: 300px;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
background-image: url(https://camper.tandem.ws/media/0c0625998215b6caec6e871ab26d791c330f34bb46a2facc9d502d769d207e7b/barranquisme.jpg); background-image: url(https://camper.tandem.ws/media/0c0625998215b6caec6e871ab26d791c330f34bb46a2facc9d502d769d207e7b/barranquisme.jpg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
} }
.ad-description-container { .ad-description-container {
width: 50%; width: 50%;
min-height: 300px; min-height: 300px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: 50px; padding: 50px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
background-color: var(--accent-2); background-color: var(--accent-2);
} }
.ad-description-container h3 { .ad-description-container h3 {
font-size: calc(16px + .7vw); font-size: calc(16px + .7vw);
font-weight: 400; font-weight: 400;
line-height: 9rem; line-height: 9rem;
} }
.ad-button { .ad-button {
font-size: calc(18px + 1.7vw); font-size: calc(18px + 1.7vw);
font-weight: 600; font-weight: 600;
line-height: 0.9em; line-height: 0.9em;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
column-gap: 0.5em; column-gap: 0.5em;
border-radius: 5px; border-radius: 5px;
color: var(--contrast); color: var(--contrast);
} }
.ad-button .ad-icon svg { .ad-button .ad-icon svg {
width: 40px; width: 40px;
transform: rotate(320deg) translate3d(-5px,-10px,0); transform: rotate(320deg) translate3d(-5px, -10px, 0);
transition: all 0.5s ease; transition: all 0.5s ease;
} }
.ad-button:hover .gb-icon svg { .ad-button:hover .gb-icon svg {
transform: rotate(320deg) translate3d(10px,0,0); transform: rotate(320deg) translate3d(10px, 0, 0);
} }
.arrow_link { .arrow_link {
fill: var(--contrast); fill: var(--contrast);
} }
/* services */ /* services */
.services_icon { .services_icon {
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
dt { dt {
position: relative; position: relative;
z-index: 3; z-index: 3;
} }
.services_icon::before { .services_icon::before {
content: ''; content: '';
background: var(--accent-2); background: var(--accent-2);
position: absolute; position: absolute;
width: 60px; width: 60px;
height: 60px; height: 60px;
top: 2px; top: 2px;
left: 2px; left: 2px;
border-radius: 50px; border-radius: 50px;
z-index: 1; z-index: 1;
} }
/* /*
@ -1302,6 +1334,6 @@ dt {
*/ */
.services_icon a { .services_icon a {
color: var(--accent); color: var(--accent);
text-decoration: var(--accent) wavy underline; text-decoration: var(--accent) wavy underline;
} }

9
web/templates/public/layout.gohtml
View File

@ -22,7 +22,14 @@
<body> <body>
<a href="#content">{{( gettext "Skip to main content" )}}</a> <a href="#content">{{( gettext "Skip to main content" )}}</a>
<header> <header>
<h1><a href="/{{ currentLocale }}/"><span class="logo">◭</span><span class="name">{{( gettext "Campsite Montagut" )}}</span></a></h1> {{ with .CompanyAddress -}}
<address>
<a href="tel:{{ replaceAll .Phone " " "" }}">{{ .Phone }}</a>
<a href="mailto:{{ .Email }}">{{ .Email }}</a>
</address>
{{- end }}
<h1><a href="/{{ currentLocale }}/"><span class="logo">◭</span><span
class="name">{{( gettext "Campsite Montagut" )}}</span></a></h1>
<input type="checkbox" id="menuShowHide"> <input type="checkbox" id="menuShowHide">
<label for="menuShowHide"></label> <label for="menuShowHide"></label>
<nav> <nav>