diff --git a/web/static/public.css b/web/static/public.css
index 14ae7c3..0ec34da 100644
--- a/web/static/public.css
+++ b/web/static/public.css
@@ -116,7 +116,7 @@ body {
max-width: 200rem;
margin-left: auto;
margin-right: auto;
- overflow-x: hidden;
+ overflow-x: hidden;
}
img, picture, video, canvas, svg {
@@ -192,11 +192,41 @@ body > header {
top: 0;
z-index: 999;
padding: 1rem 2.5rem;
- display: flex;
+ display: grid;
+ grid-template-columns: auto 1fr;
align-items: center;
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 {
background-color: rgba(var(--clar-rgb), 0.7);
backdrop-filter: blur(10px);
@@ -290,7 +320,6 @@ nav .has-submenu:hover ul, nav .has-submenu:focus-within ul {
@media (max-width: 80rem) {
body > header {
- display: grid;
grid-template-columns: 1fr 1fr;
}
@@ -413,7 +442,7 @@ dl, .nature div + div, .outside_activities > div {
display: block;
width: 100%;
height: 20rem;
- border-radius: 5px;
+ border-radius: 5px;
}
.nature section a span {
@@ -445,7 +474,7 @@ dl, .nature div + div, .outside_activities > div {
}
.campsite_services {
- margin: 0 0 40px 0;
+ margin: 0 0 40px 0;
}
.carousel {
@@ -542,14 +571,14 @@ dl {
dl div {
flex-basis: calc(25% - 5rem + 5rem / 4);
- min-height: 220px;
- padding: 12.5px;
- border-radius: 5px;
- transition: all 0.5s ease;
+ min-height: 220px;
+ padding: 12.5px;
+ border-radius: 5px;
+ transition: all 0.5s ease;
}
dl div:hover {
-background-color: var(--accent-2);
+ background-color: var(--accent-2);
}
dt {
@@ -576,21 +605,23 @@ dt {
/* autside-activities tablet & mobile */
@media (max-width: 64rem) {
-dl, .nature div + div, .outside_activities > div {
- flex-direction: column;
-}
-
-.outside_activities > div:first-of-type p {
- width: 100% !important;
- margin-top: 0 !important;
+ dl, .nature div + div, .outside_activities > div {
+ flex-direction: column;
+ }
+
+ .outside_activities > div:first-of-type p {
+ width: 100% !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 {
- width: 100% !important;
- margin-top: 0 !important;
-}
-
-} /* end autside-activities tablet & mobile */
+/* end autside-activities tablet & mobile */
.outside_activities {
margin-top: 2rem;
@@ -607,7 +638,7 @@ dl, .nature div + div, .outside_activities > div {
}
.outside_activities img {
- border-radius: 5px;
+ border-radius: 5px;
}
.outside_activities > div {
@@ -763,7 +794,7 @@ dl, .nature div + div, .outside_activities > div {
}
.campsite_type_prices dl div:hover {
- background-color: transparent;
+ background-color: transparent;
}
.campsite_type_prices div {
@@ -932,18 +963,19 @@ dl, .nature div + div, .outside_activities > div {
/* form */
input {
- height: 60px;
- border-radius: 5px;
- border: 1px solid;
+ height: 60px;
+ border-radius: 5px;
+ border: 1px solid;
}
select {
- min-height: 60px;
- border-radius: 5px;
- border: 1px solid;
- background: white;
- padding: 20px;
+ min-height: 60px;
+ border-radius: 5px;
+ border: 1px solid;
+ background: white;
+ padding: 20px;
}
+
/*
label {
display: flex;
@@ -953,86 +985,83 @@ label {
*/
fieldset {
- display: flex;
- justify-content: space-between;
+ display: flex;
+ justify-content: space-between;
}
button {
- font-size: 4rem;
- background: var(--accent);
- border-radius: 5px;
- border: 1px solid var(--accent);
- color: var(--contrast);
+ font-size: 4rem;
+ background: var(--accent);
+ border-radius: 5px;
+ border: 1px solid var(--accent);
+ color: var(--contrast);
}
-
/* radio buttins + checkbox */
/* Context for relative positioning */
label {
- position: relative;
+ position: relative;
}
/* Base styles for both types of inputs */
input[type="radio"],
input[type="checkbox"] {
- appearance: none;
- background: #fff;
- border: 2px solid #777;
- height: 1.5em !important;
- width: 1.5em !important;
- margin: 0 10px 0 30px;
- border-radius: 100%;
- vertical-align: text-bottom;
- position: relative;
+ appearance: none;
+ background: #fff;
+ border: 2px solid #777;
+ height: 1.5em !important;
+ width: 1.5em !important;
+ margin: 0 10px 0 30px;
+ border-radius: 100%;
+ vertical-align: text-bottom;
+ position: relative;
}
/* Remove the circular shape from checkboxes */
input[type="checkbox"] {
- border-radius: 0;
+ border-radius: 0;
}
/* Styles for the pseudo-elements */
input[type="radio"]::before,
input[type="checkbox"]::before {
- content: "";
- position: absolute;
- margin: auto;
- left: 0;
- right: 0;
- bottom: 0;
- overflow: hidden;
- top: 0;
+ content: "";
+ position: absolute;
+ margin: auto;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: hidden;
+ top: 0;
}
/* Center of the checked radio button */
input[type="radio"]:checked::before {
- border: 5px solid transparent;
- border-radius: 100%;
- background: var(--accent);
- margin: 4px;
+ border: 5px solid transparent;
+ border-radius: 100%;
+ background: var(--accent);
+ margin: 4px;
}
/* The checkmark shape */
input[type="checkbox"]:checked::before {
- border-right: 5px solid var(--accent);
- border-bottom: 6px solid var(--accent);
- height: 90%;
- width: 50%;
- transform: rotate(50deg) translateY(-20%) translateX(-10%);
+ border-right: 5px solid var(--accent);
+ border-bottom: 6px solid var(--accent);
+ height: 90%;
+ width: 50%;
+ transform: rotate(50deg) translateY(-20%) translateX(-10%);
}
/* Some focus styles for accessibility */
input[type="radio"]:focus,
input[type="checkbox"]:focus {
- outline-offset: 2px;
+ outline-offset: 2px;
}
-
-
#booking fieldset {
border: none;
}
@@ -1044,7 +1073,7 @@ input[type="checkbox"]:focus {
#booking input:not([type="radio"]):not([type="checkbox"]),
#booking select {
width: 100%;
- padding: 20px;
+ padding: 20px;
}
#booking fieldset {
@@ -1098,19 +1127,22 @@ input[type="checkbox"]:focus {
/* footer responsive */
@media (max-width: 48rem) {
- body > footer div {
- display: flex;
- flex-direction: column;
- }
- body > footer section {
- width: 100% !important;
- margin: 40px 0 0 0;
- }
+ body > footer div {
+ display: flex;
+ flex-direction: column;
+ }
-}/* end footer responsive */
+ body > footer section {
+ width: 100% !important;
+ margin: 40px 0 0 0;
+ }
+
+}
+
+/* end footer responsive */
footer {
- margin: 120px 0 0 0;
+ margin: 120px 0 0 0;
}
body > footer {
@@ -1173,126 +1205,126 @@ body > footer span {
/* contact */
@media (max-width: 64rem) {
- .contact-page {
- grid-template-columns: 1fr !important;
- }
+ .contact-page {
+ grid-template-columns: 1fr !important;
+ }
}
.contact-page {
- display: grid;
- grid-template-columns: 1fr 4fr;
- grid-gap: 20px;
+ display: grid;
+ grid-template-columns: 1fr 4fr;
+ grid-gap: 20px;
}
address {
- font-size: calc(16px + .4vw);
- margin: 30px 0 30px 0;
+ font-size: calc(16px + .4vw);
+ margin: 30px 0 30px 0;
}
#map {
- border-radius: 5px;
+ border-radius: 5px;
}
.leaflet-popup-content-wrapper {
- border-radius: 5px !important;
+ border-radius: 5px !important;
}
.leaflet-popup-content {
- font-size: 2rem !important;
+ font-size: 2rem !important;
}
/* camping map */
#arbres {
- mix-blend-mode: multiply;
+ mix-blend-mode: multiply;
}
/* surrounding */
.ad-container {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- margin: 50px 0;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ margin: 50px 0;
}
.ad-image-container {
- width: 50%;
- min-height: 300px;
- border-top-left-radius: 5px;
- border-bottom-left-radius: 5px;
- background-image: url(https://camper.tandem.ws/media/0c0625998215b6caec6e871ab26d791c330f34bb46a2facc9d502d769d207e7b/barranquisme.jpg);
- background-repeat: no-repeat;
- background-position: center center;
- background-size: cover;
+ width: 50%;
+ min-height: 300px;
+ border-top-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+ background-image: url(https://camper.tandem.ws/media/0c0625998215b6caec6e871ab26d791c330f34bb46a2facc9d502d769d207e7b/barranquisme.jpg);
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: cover;
}
.ad-description-container {
- width: 50%;
- min-height: 300px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- padding: 50px;
- border-top-right-radius: 5px;
- border-bottom-right-radius: 5px;
- background-color: var(--accent-2);
+ width: 50%;
+ min-height: 300px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: 50px;
+ border-top-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+ background-color: var(--accent-2);
}
.ad-description-container h3 {
- font-size: calc(16px + .7vw);
- font-weight: 400;
- line-height: 9rem;
+ font-size: calc(16px + .7vw);
+ font-weight: 400;
+ line-height: 9rem;
}
.ad-button {
- font-size: calc(18px + 1.7vw);
- font-weight: 600;
- line-height: 0.9em;
- display: flex;
- align-items: flex-start;
- column-gap: 0.5em;
- border-radius: 5px;
- color: var(--contrast);
+ font-size: calc(18px + 1.7vw);
+ font-weight: 600;
+ line-height: 0.9em;
+ display: flex;
+ align-items: flex-start;
+ column-gap: 0.5em;
+ border-radius: 5px;
+ color: var(--contrast);
}
.ad-button .ad-icon svg {
- width: 40px;
- transform: rotate(320deg) translate3d(-5px,-10px,0);
- transition: all 0.5s ease;
+ width: 40px;
+ transform: rotate(320deg) translate3d(-5px, -10px, 0);
+ transition: all 0.5s ease;
}
.ad-button:hover .gb-icon svg {
- transform: rotate(320deg) translate3d(10px,0,0);
+ transform: rotate(320deg) translate3d(10px, 0, 0);
}
.arrow_link {
- fill: var(--contrast);
+ fill: var(--contrast);
}
/* services */
-.services_icon {
- position: relative;
- z-index: 2;
+.services_icon {
+ position: relative;
+ z-index: 2;
}
dt {
- position: relative;
- z-index: 3;
+ position: relative;
+ z-index: 3;
}
.services_icon::before {
- content: '';
- background: var(--accent-2);
- position: absolute;
- width: 60px;
- height: 60px;
- top: 2px;
- left: 2px;
- border-radius: 50px;
- z-index: 1;
+ content: '';
+ background: var(--accent-2);
+ position: absolute;
+ width: 60px;
+ height: 60px;
+ top: 2px;
+ left: 2px;
+ border-radius: 50px;
+ z-index: 1;
}
/*
@@ -1302,6 +1334,6 @@ dt {
*/
.services_icon a {
- color: var(--accent);
- text-decoration: var(--accent) wavy underline;
+ color: var(--accent);
+ text-decoration: var(--accent) wavy underline;
}
diff --git a/web/templates/public/layout.gohtml b/web/templates/public/layout.gohtml
index 1edec33..0db9d35 100644
--- a/web/templates/public/layout.gohtml
+++ b/web/templates/public/layout.gohtml
@@ -22,7 +22,14 @@
{{( gettext "Skip to main content" )}}