From 7b6bae5062e092ca3e62ef2ffa96bdea0fce97c5 Mon Sep 17 00:00:00 2001
From: jordi fita mas <jordi@tandem.blog>
Date: Wed, 20 Dec 2023 20:39:26 +0100
Subject: [PATCH] Add the email and phone numbers at the very top

Requested by the customer
---
 web/static/public.css              | 328 ++++++++++++++++-------------
 web/templates/public/layout.gohtml |   9 +-
 2 files changed, 188 insertions(+), 149 deletions(-)

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 @@
 <body>
 <a href="#content">{{( gettext "Skip to main content" )}}</a>
 <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">
     <label for="menuShowHide"></label>
     <nav>