Style changes

web/static/public.css

@@ -116,6 +116,7 @@ body {
     max-width: 200rem;
     margin-left: auto;
     margin-right: auto;
+	overflow-x: hidden;
 }
 
 img, picture, video, canvas, svg {
@@ -222,7 +223,7 @@ h1 a .logo {
 }
 
 h1 a .name {
-    font-size: 2.5rem;
+    font-size: calc(1.5rem + .8vw);
     line-height: 1em;
     text-indent: -.4em;
     word-wrap: break-word;
@@ -247,7 +248,7 @@ nav ul {
 }
 
 nav a, nav button, label[for="menuShowHide"] {
-    font-size: 1.8rem;
+    font-size: 1.5rem;
     font-weight: 500;
     text-transform: uppercase;
     padding: 0 2rem;
@@ -287,7 +288,7 @@ nav .has-submenu:hover ul, nav .has-submenu:focus-within ul {
     display: flex;
 }
 
-@media (max-width: 48rem) {
+@media (max-width: 80rem) {
     body > header {
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -412,6 +413,7 @@ dl, .nature div + div, .outside_activities > div {
     display: block;
     width: 100%;
     height: 20rem;
+	border-radius: 5px;
 }
 
 .nature section a span {
@@ -442,6 +444,10 @@ dl, .nature div + div, .outside_activities > div {
     background-color: var(--accent);
 }
 
+.campsite_services {
+  margin: 0 0 40px 0;
+}
+
 .carousel {
     display: none;
 }
@@ -542,6 +548,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;
+}
+
+dl div:hover {
+background-color: var(--accent-2);
 }
 
 dt {
@@ -565,6 +579,25 @@ 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;
+}
+
+.outside_activities > div:first-of-type img:last-child {
+  width: 100% !important;
+  margin-top: 0 !important;
+}
+
+} /* end autside-activities tablet & mobile */
+
 .outside_activities {
     margin-top: 2rem;
 }
@@ -579,6 +612,10 @@ dt {
     margin-bottom: 10rem;
 }
 
+.outside_activities img {
+  border-radius: 5px;
+}
+
 .outside_activities > div {
     align-items: start;
 }
@@ -589,7 +626,7 @@ dt {
 
 .outside_activities > div:first-of-type p {
     width: 25%;
-    padding-top: 12rem;
+    margin-top: 12rem;
 }
 
 .outside_activities > div:first-of-type img {
@@ -598,7 +635,7 @@ dt {
 
 .outside_activities > div:first-of-type img:last-child {
     width: 35%;
-    padding-top: 22rem;
+    margin-top: 22rem;
 }
 
 .outside_activities > div:nth-of-type(2) > img {
@@ -607,7 +644,7 @@ dt {
 
 .outside_activities > div:nth-of-type(2) > div {
     width: 30%;
-    padding-top: 10rem;
+    margin-top: 10rem;
 }
 
 .outside_activities > div:nth-of-type(2) > div img {
@@ -615,7 +652,7 @@ dt {
 }
 
 .outside_activities > div:nth-of-type(2) > img:last-child {
-    padding-top: 22rem;
+    margin-top: 22rem;
 }
 
 .outside_activities > div:last-child img {
@@ -899,6 +936,111 @@ dt {
     height: .8rem;
 }
 
+/* form */
+
+input {
+  height: 60px;
+  border-radius: 5px;
+  border: 1px solid;
+}
+
+select {
+  min-height: 60px;
+  border-radius: 5px;
+  border: 1px solid;
+  background: white;
+  padding: 20px;
+}
+/*
+label {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+*/
+
+fieldset {
+  display: flex;
+  justify-content: space-between;
+}
+
+
+button {
+  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;
+}
+
+/* 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;
+}
+
+/* Remove the circular shape from checkboxes */
+input[type="checkbox"] {
+  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;
+}
+
+/* Center of the checked radio button */
+input[type="radio"]:checked::before {
+  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%);
+}
+
+/* Some focus styles for accessibility */
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
+  outline: solid 1px;
+  outline-offset: 2px;
+}
+
+
+
+
 #booking fieldset {
     border: none;
 }
@@ -910,6 +1052,7 @@ dt {
 #booking input:not([type="radio"]):not([type="checkbox"]),
 #booking select {
     width: 100%;
+     padding: 20px;
 }
 
 #booking fieldset {
@@ -960,6 +1103,24 @@ dt {
     }
 }
 
+
+/* 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;
+	}
+
+}/* end footer responsive */
+
+footer {
+	margin: 120px 0 0 0;
+}
+
 body > footer {
     display: flex;
     flex-direction: column;
@@ -1015,3 +1176,27 @@ body > footer span {
     padding: 2.5rem;
     display: block;
 }
+
+/* contact */
+
+.contact-page {
+  display: grid;
+  grid-template-columns: 1fr 4fr;
+}
+
+address {
+  font-style: normal;
+  font-size: 2rem;
+  font-size: calc(16px + .4vw);
+  margin: 30px 0 0 0;
+}
+
+#map {
+  border-radius: 5px;
+}
+
+/* camping map */
+
+#arbres {
+  mix-blend-mode: multiply;
+}

web/templates/public/campground.gohtml

@@ -9,5 +9,5 @@
 {{ define "content" -}}
     {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/app.campgroundPage*/ -}}
     <h2>{{( pgettext "Campground" "title" )}}</h2>
-    {{ template "campground_map.svg" }}
+    <div class="camping_map">{{ template "campground_map.svg" }}</div>
 {{- end }}

web/templates/public/contact.gohtml

@@ -12,17 +12,23 @@
 
 {{ define "content" -}}
     {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/app.contactPage*/ -}}
+
+<div class="contact-page">
+	<div class="contact-details">
 		<h2>{{( pgettext "Contact" "title" )}}</h2>
 
 		{{ template "companyAddress" .PublicPage.CompanyAddress }}
+	</div>
+
     <div id="map"></div>
+</div>
 
     {{ if .CompanyGeography -}}
         <script src="/static/leaflet@1.9.4/leaflet.js"></script>
         <script>
             document.addEventListener('DOMContentLoaded', function () {
                 var container = document.getElementById("map");
-                container.style.height = '410px';
+                container.style.height = '600px';
                 var map = L.map(container).setView(['{{ .CompanyGeography.Lat }}', '{{ .CompanyGeography.Lng }}'], '9');
 
                 L