Style changes

This commit is contained in:
oriol carbonell pujolàs 2023-12-13 23:23:28 +01:00
parent 117638a6f1
commit 6e1d5b14bc
4 changed files with 5465 additions and 2139 deletions

View File

@ -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;
}

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 179 KiB

After

Width:  |  Height:  |  Size: 436 KiB

View File

@ -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 }}

View File

@ -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