Style changes
This commit is contained in:
parent
117638a6f1
commit
6e1d5b14bc
|
|
@ -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 |
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -12,17 +12,23 @@
|
|||
|
||||
{{ define "content" -}}
|
||||
{{- /*gotype: dev.tandem.ws/tandem/camper/pkg/app.contactPage*/ -}}
|
||||
<h2>{{( pgettext "Contact" "title" )}}</h2>
|
||||
|
||||
{{ template "companyAddress" .PublicPage.CompanyAddress }}
|
||||
<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
|
||||
|
|
|
|||
Loading…
Reference in New Issue