tandem
/
camper
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update styles

This commit is contained in:
oriol carbonell pujolàs 2024-01-18 03:27:07 +01:00
parent 72bc89ae0f
commit 0431532ad5
2 changed files with 43 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/static/camper.css
View File

@ -623,6 +623,11 @@ fieldset img {
align-items: center; align-items: center;
} }
.sortable img {
max-width: 20rem;
border-radius: 5px;
}
#slide-index img { #slide-index img {
width: 192px; width: 192px;
aspect-ratio: 4 / 3; aspect-ratio: 4 / 3;

71
web/static/public.css
View File

@ -346,7 +346,7 @@ nav:last-of-type > ul > li:last-child {
.boto-reserva { .boto-reserva {
border: 2px solid; border: 2px solid;
border-radius: 5px; border-radius: .6rem;
height: 40px; height: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -425,7 +425,7 @@ nav:last-of-type > ul > li:last-child {
.hero { .hero {
position: relative; position: relative;
margin-bottom: 2rem; margin-bottom: 5rem;
} }
.nature, .services { .nature, .services {
@ -433,7 +433,7 @@ nav:last-of-type > ul > li:last-child {
} }
.hero .slick-slide, .nature section, .services { .hero .slick-slide, .nature section, .services {
border-radius: 5px; border-radius: .6rem;
} }
.hero .slick-initialized .slick-slide { .hero .slick-initialized .slick-slide {
@ -459,18 +459,17 @@ nav:last-of-type > ul > li:last-child {
} }
.hero .slick-slide span, .hero a { .hero .slick-slide span, .hero a {
border-radius: 5px; border-radius: .6rem;
background-color: var(--clar); background-color: var(--clar);
} }
.hero .slick-slide > span { .hero .slick-slide > span {
width: 50%; width: 50%;
margin-bottom: 0; margin-bottom: 0;
font-size: calc(2rem + 4vw); font-size: calc(2rem + 2.7vw);
display: block; display: block;
background: transparent; background: transparent;
color: var(--base); color: var(--base);
text-shadow: 0 1px 0 black;
} }
.hero a, .services h2, .surroundings .spiel a { .hero a, .services h2, .surroundings .spiel a {
@ -488,8 +487,8 @@ nav:last-of-type > ul > li:last-child {
.hero a { .hero a {
position: absolute; position: absolute;
bottom: 1.5rem; bottom: 1rem;
right: 3.5rem; right: 1rem;
} }
.hero a:hover span, .services a:hover span, .spiel a:hover span, .campsite_type_booking button:hover span { .hero a:hover span, .services a:hover span, .spiel a:hover span, .campsite_type_booking button:hover span {
@ -523,7 +522,7 @@ dl, .nature > div, .outside_activities > div {
display: block; display: block;
width: 100%; width: 100%;
height: 20rem; height: 20rem;
border-radius: 5px; border-radius: .6rem;
} }
.nature section a span { .nature section a span {
@ -531,8 +530,8 @@ dl, .nature > div, .outside_activities > div {
padding: .55rem 1.5rem 1rem; padding: .55rem 1.5rem 1rem;
background-color: var(--accent); background-color: var(--accent);
color: var(--base); color: var(--base);
border-top-left-radius: 5px; border-top-left-radius: .6rem;
border-bottom-right-radius: 5px; border-bottom-right-radius: .6rem;
} }
@media (max-width: 64rem) { @media (max-width: 64rem) {
@ -571,7 +570,7 @@ dl, .nature > div, .outside_activities > div {
.carousel img { .carousel img {
height: 30rem; height: 30rem;
width: 100%; width: 100%;
border-radius: 5px; border-radius: .6rem;
object-fit: cover; object-fit: cover;
} }
@ -583,7 +582,7 @@ dl, .nature > div, .outside_activities > div {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
border-top-left-radius: 5px; border-top-left-radius: .6rem;
font-size: 1.7rem; font-size: 1.7rem;
} }
@ -593,7 +592,8 @@ dl, .nature > div, .outside_activities > div {
} }
.slick-slider .slick-arrow { .slick-slider .slick-arrow {
font-size: 4rem; font-weight: 600;
font-size: calc(1rem + 1.2vw);
line-height: 1; line-height: 1;
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
@ -641,7 +641,7 @@ dl div {
flex-basis: calc(25% - 5rem + 5rem / 4); flex-basis: calc(25% - 5rem + 5rem / 4);
min-height: 220px; min-height: 220px;
padding: 12.5px; padding: 12.5px;
border-radius: 5px; border-radius: .6rem;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
@ -674,6 +674,10 @@ dt {
margin-top: 2rem; margin-top: 2rem;
} }
.outside_activities img {
border-radius: .6rem;
}
.outside_activities h3, .campsite_services .spiel { .outside_activities h3, .campsite_services .spiel {
font-size: calc(2.2rem + 4vw); font-size: calc(2.2rem + 4vw);
font-weight: 600; font-weight: 600;
@ -688,7 +692,7 @@ dt {
max-width: 108rem; max-width: 108rem;
margin: 0 auto; margin: 0 auto;
flex-direction: column; flex-direction: column;
gap: 2.7rem; gap: 5rem;
} }
.outside_activities article { .outside_activities article {
@ -699,6 +703,7 @@ dt {
.outside_activities > ul > li:nth-child(2n) article { .outside_activities > ul > li:nth-child(2n) article {
flex-direction: row-reverse; flex-direction: row-reverse;
text-align: right;
} }
.outside_activities article h4 { .outside_activities article h4 {
@ -814,7 +819,7 @@ dt {
.campsite_type_booking button, .campsite_type_booking button,
.campsite_type_booking input { .campsite_type_booking input {
border: none; border: none;
border-radius: 5px; border-radius: .6rem;
} }
.campsite_type_calendar_prices { .campsite_type_calendar_prices {
@ -830,7 +835,7 @@ dt {
.campsite_type_prices { .campsite_type_prices {
padding: 2.5rem; padding: 2.5rem;
border-radius: 5px; border-radius: .6rem;
flex: .5; flex: .5;
} }
@ -927,7 +932,7 @@ dt {
} }
.campsite_type_detail section:last-child { .campsite_type_detail section:last-child {
flex: 2; flex: 1;
} }
.campsite_type_detail h4 { .campsite_type_detail h4 {
@ -1100,13 +1105,13 @@ dt {
input { input {
height: 60px; height: 60px;
border-radius: 5px; border-radius: .6rem;
border: 1px solid; border: 1px solid;
} }
select { select {
min-height: 60px; min-height: 60px;
border-radius: 5px; border-radius: .6rem;
border: 1px solid; border: 1px solid;
background: white; background: white;
padding: 20px; padding: 20px;
@ -1129,7 +1134,7 @@ fieldset {
button { button {
font-size: 4rem; font-size: 4rem;
background: var(--accent); background: var(--accent);
border-radius: 5px; border-radius: .6rem;
border: 1px solid var(--accent); border: 1px solid var(--accent);
color: var(--contrast); color: var(--contrast);
} }
@ -1301,8 +1306,8 @@ body > footer {
margin: 120px 20px 0 20px; margin: 120px 20px 0 20px;
background: var(--contrast); background: var(--contrast);
color: var(--base); color: var(--base);
border-top-left-radius: 5px; border-top-left-radius: .6rem;
border-top-right-radius: 5px; border-top-right-radius: .6rem;
} }
body > footer a { body > footer a {
@ -1315,7 +1320,7 @@ body > footer > div, .campsite_type_features, .campsite_type_detail {
/* highlight footer season */ /* highlight footer season */
body > footer section:nth-child(3) { body > footer section:nth-child(3) {
border-radius: 5px; border-radius: .6rem;
background: var(--accent-2); background: var(--accent-2);
padding: 0 15px; padding: 0 15px;
color: var(--contrast); color: var(--contrast);
@ -1412,7 +1417,7 @@ address {
} }
#map { #map {
border-radius: 5px; border-radius: .6rem;
} }
.leaflet-popup-content-wrapper { .leaflet-popup-content-wrapper {
@ -1426,7 +1431,7 @@ address {
/* camping map */ /* camping map */
#campground_map { #campground_map {
border-radius: 5px; border-radius: .6rem;
} }
#arbres { #arbres {
@ -1451,9 +1456,9 @@ address {
.ad-image-container { .ad-image-container {
width: 50%; width: 50%;
min-height: 300px; min-height: 300px;
border-top-left-radius: 5px; border-top-left-radius: .6rem;
border-bottom-left-radius: 5px; border-bottom-left-radius:.8rem;
background-image: url(https://camper.tandem.ws/media/0c0625998215b6caec6e871ab26d791c330f34bb46a2facc9d502d769d207e7b/barranquisme.jpg); background-image: url(https://campingmontagut.tandem.ws/media/0c0625998215b6caec6e871ab26d791c330f34bb46a2facc9d502d769d207e7b/barranquisme.jpg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
@ -1466,8 +1471,8 @@ address {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: 50px; padding: 50px;
border-top-right-radius: 5px; border-top-right-radius: .6rem;
border-bottom-right-radius: 5px; border-bottom-right-radius: .6rem;
background-color: var(--accent-2); background-color: var(--accent-2);
} }
@ -1484,7 +1489,7 @@ address {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
column-gap: 0.5em; column-gap: 0.5em;
border-radius: 5px; border-radius: .6rem;
color: var(--contrast); color: var(--contrast);
} }