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

Change the footer to a single column in table, rather than on mobile 

Otherwise, the four columns are very difficult to read, and cause
horizontal overflow.
This commit is contained in:
jordi fita mas 2024-02-03 01:03:08 +01:00
parent 593004d0c9
commit daf6326652
1 changed files with 23 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
web/static/public.css
View File

@ -1003,6 +1003,10 @@ dt {
flex: 1;
}
body > footer > div, .campsite_type_features, .campsite_type_detail {
padding: 5rem 0;
}
.campsite_type_features li, .campsite_features li {
text-align: center;
justify-content: space-between;
@ -1024,6 +1028,7 @@ dt {
.campsite_type_detail {
display: flex;
gap: 5rem;
padding-bottom: 2.5rem;
}
.campsite_type_detail section {
@ -1411,27 +1416,11 @@ input[type="checkbox"]:focus {
width: 4.8rem;
}
/* footer responsive */
@media (max-width: 48rem) {
body > footer div {
display: flex;
flex-direction: column;
}
body > footer section {
width: 100% !important;
margin: 4rem 0 0 0;
}
}
/* end footer responsive */
body > footer {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 120px 20px 0 20px;
margin: 12rem 2rem 0 2rem;
background: var(--contrast);
color: var(--base);
border-top-left-radius: .6rem;
@ -1442,10 +1431,6 @@ body > footer a {
color: var(--base);
}
body > footer > div, .campsite_type_features, .campsite_type_detail {
padding: 5rem 0;
}
/* highlight footer season */
body > footer section:nth-child(3) {
border-radius: .6rem;
@ -1462,11 +1447,6 @@ body > footer section:nth-child(3) p {
padding-left: 15px;
}
.campsite_type_detail {
padding-bottom: 2.5rem;
}
body > footer > div {
display: flex;
gap: 3rem;
@ -1509,7 +1489,6 @@ body > footer span {
display: block;
}
.camping-association {
display: flex;
flex-wrap: wrap;
@ -1521,9 +1500,25 @@ body > footer span {
}
.camping-association img {
max-height: 35px;;
max-height: 35px;
}
/*<editor-fold desc="footer responsive">*/
@media (max-width: 64rem) {
body > footer div {
flex-direction: column;
}
body > footer section {
width: 100%;
margin: 4rem 0 0 0;
}
}
/*</editor-fold>*/
/* contact */