tandem/camper
tandem
/
camper
2
0
Fork 0
Code Issues 7 Pull Requests Packages Projects Releases Wiki Activity
camper/web/static/public.css

1549 lines
39 KiB
CSS
Raw Normal View History

Split templates and handlers into admin and public I need to check that the user is an employee (or admin) in administration handlers, but i do not want to do it for each handler, because i am bound to forget it. Thus, i added the /admin sub-path for these resources. The public-facing web is the rest of the resources outside /admin, but for now there is only home, to test whether it works as expected or not. The public-facing web can not relay on the user’s language settings, as the guest user has no way to set that. I would be happy to just use the Accept-Language header for that, but apparently Google does not use that header[0], and they give four alternatives: a country-specific domain, a subdomain with a generic top-level domain (gTLD), subdirectories with a gTLD, or URL parameters (e.g., site.com?loc=de). Of the four, Google does not recommend URL parameters, and the customer is already using subdirectories with the current site, therefor that’s what i have chosen. Google also tells me that it is a very good idea to have links between localized version of the same resources, either with <link> elements, Link HTTP response headers, or a sitemap file[1]; they are all equivalent in the eyes of Google. I have choosen the Link response headers way, because for that i can simply “augment” ResponseHeader to automatically add these headers when the response status is 2xx, otherwise i would need to pass down the original URL path until it reaches the template. Even though Camper is supposed to be a “generic”, multi-company application, i think i will stick to the easiest route and write the templates for just the “first” customer. [0]: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites [1]: https://developers.google.com/search/docs/specialty/international/localized-versions
2023-08-05 01:42:37 +00:00
/**
* SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
Added copyright statement to files modified by Oriol
2024-01-16 16:58:49 +00:00
* SPDX-FileCopyrightText: 2023 Oriol Carbonell <info@oriolcarbonell.cat>
Split templates and handlers into admin and public I need to check that the user is an employee (or admin) in administration handlers, but i do not want to do it for each handler, because i am bound to forget it. Thus, i added the /admin sub-path for these resources. The public-facing web is the rest of the resources outside /admin, but for now there is only home, to test whether it works as expected or not. The public-facing web can not relay on the user’s language settings, as the guest user has no way to set that. I would be happy to just use the Accept-Language header for that, but apparently Google does not use that header[0], and they give four alternatives: a country-specific domain, a subdomain with a generic top-level domain (gTLD), subdirectories with a gTLD, or URL parameters (e.g., site.com?loc=de). Of the four, Google does not recommend URL parameters, and the customer is already using subdirectories with the current site, therefor that’s what i have chosen. Google also tells me that it is a very good idea to have links between localized version of the same resources, either with <link> elements, Link HTTP response headers, or a sitemap file[1]; they are all equivalent in the eyes of Google. I have choosen the Link response headers way, because for that i can simply “augment” ResponseHeader to automatically add these headers when the response status is 2xx, otherwise i would need to pass down the original URL path until it reaches the template. Even though Camper is supposed to be a “generic”, multi-company application, i think i will stick to the easiest route and write the templates for just the “first” customer. [0]: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites [1]: https://developers.google.com/search/docs/specialty/international/localized-versions
2023-08-05 01:42:37 +00:00
* SPDX-License-Identifier: AGPL-3.0-only
*/
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Bold'), local('MabryPro-Bold'), url('fonts/MabryPro-Bold.woff2') format('woff2');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Medium'), local('MabryPro-Medium'), url('fonts/MabryPro-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Black'), local('MabryPro-Black'), url('fonts/MabryPro-Black.woff2') format('woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Light Italic'), local('MabryPro-LightItalic'), url('fonts/MabryPro-LightItalic.woff2') format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Bold Italic'), local('MabryPro-BoldItalic'), url('fonts/MabryPro-BoldItalic.woff2') format('woff2');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Light'), local('MabryPro-Light'), url('fonts/MabryPro-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Black Italic'), local('MabryPro-BlackItalic'), url('fonts/MabryPro-BlackItalic.woff2') format('woff2');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Medium Italic'), local('MabryPro-MediumItalic'), url('fonts/MabryPro-MediumItalic.woff2') format('woff2');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro Italic'), local('MabryPro-Italic'), url('fonts/MabryPro-Italic.woff2') format('woff2');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Mabry Pro';
src: local('Mabry Pro'), local('MabryPro-Regular'), url('fonts/MabryPro-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
Split templates and handlers into admin and public I need to check that the user is an employee (or admin) in administration handlers, but i do not want to do it for each handler, because i am bound to forget it. Thus, i added the /admin sub-path for these resources. The public-facing web is the rest of the resources outside /admin, but for now there is only home, to test whether it works as expected or not. The public-facing web can not relay on the user’s language settings, as the guest user has no way to set that. I would be happy to just use the Accept-Language header for that, but apparently Google does not use that header[0], and they give four alternatives: a country-specific domain, a subdomain with a generic top-level domain (gTLD), subdirectories with a gTLD, or URL parameters (e.g., site.com?loc=de). Of the four, Google does not recommend URL parameters, and the customer is already using subdirectories with the current site, therefor that’s what i have chosen. Google also tells me that it is a very good idea to have links between localized version of the same resources, either with <link> elements, Link HTTP response headers, or a sitemap file[1]; they are all equivalent in the eyes of Google. I have choosen the Link response headers way, because for that i can simply “augment” ResponseHeader to automatically add these headers when the response status is 2xx, otherwise i would need to pass down the original URL path until it reaches the template. Even though Camper is supposed to be a “generic”, multi-company application, i think i will stick to the easiest route and write the templates for just the “first” customer. [0]: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites [1]: https://developers.google.com/search/docs/specialty/international/localized-versions
2023-08-05 01:42:37 +00:00
*, *::before, *::after {
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
box-sizing: inherit;
Split templates and handlers into admin and public I need to check that the user is an employee (or admin) in administration handlers, but i do not want to do it for each handler, because i am bound to forget it. Thus, i added the /admin sub-path for these resources. The public-facing web is the rest of the resources outside /admin, but for now there is only home, to test whether it works as expected or not. The public-facing web can not relay on the user’s language settings, as the guest user has no way to set that. I would be happy to just use the Accept-Language header for that, but apparently Google does not use that header[0], and they give four alternatives: a country-specific domain, a subdomain with a generic top-level domain (gTLD), subdirectories with a gTLD, or URL parameters (e.g., site.com?loc=de). Of the four, Google does not recommend URL parameters, and the customer is already using subdirectories with the current site, therefor that’s what i have chosen. Google also tells me that it is a very good idea to have links between localized version of the same resources, either with <link> elements, Link HTTP response headers, or a sitemap file[1]; they are all equivalent in the eyes of Google. I have choosen the Link response headers way, because for that i can simply “augment” ResponseHeader to automatically add these headers when the response status is 2xx, otherwise i would need to pass down the original URL path until it reaches the template. Even though Camper is supposed to be a “generic”, multi-company application, i think i will stick to the easiest route and write the templates for just the “first” customer. [0]: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites [1]: https://developers.google.com/search/docs/specialty/international/localized-versions
2023-08-05 01:42:37 +00:00
}
* {
margin: 0;
}
html {
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
box-sizing: border-box;
Split templates and handlers into admin and public I need to check that the user is an employee (or admin) in administration handlers, but i do not want to do it for each handler, because i am bound to forget it. Thus, i added the /admin sub-path for these resources. The public-facing web is the rest of the resources outside /admin, but for now there is only home, to test whether it works as expected or not. The public-facing web can not relay on the user’s language settings, as the guest user has no way to set that. I would be happy to just use the Accept-Language header for that, but apparently Google does not use that header[0], and they give four alternatives: a country-specific domain, a subdomain with a generic top-level domain (gTLD), subdirectories with a gTLD, or URL parameters (e.g., site.com?loc=de). Of the four, Google does not recommend URL parameters, and the customer is already using subdirectories with the current site, therefor that’s what i have chosen. Google also tells me that it is a very good idea to have links between localized version of the same resources, either with <link> elements, Link HTTP response headers, or a sitemap file[1]; they are all equivalent in the eyes of Google. I have choosen the Link response headers way, because for that i can simply “augment” ResponseHeader to automatically add these headers when the response status is 2xx, otherwise i would need to pass down the original URL path until it reaches the template. Even though Camper is supposed to be a “generic”, multi-company application, i think i will stick to the easiest route and write the templates for just the “first” customer. [0]: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites [1]: https://developers.google.com/search/docs/specialty/international/localized-versions
2023-08-05 01:42:37 +00:00
font-size: 62.5%;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
--contrast: #303334;
--contrast-2: #5f6158;
--contrast-3: #b2b2be;
--base: #f0f0f0;
--base-2: #f7f8f9;
--base-3: #ffffff;
--accent: #00aa7d;
--accent-2: #FFE37F;
--accent-3: #9adff4;
--clar-rgb: 239, 237, 236;
--clar: rgb(var(--clar-rgb));
Split templates and handlers into admin and public I need to check that the user is an employee (or admin) in administration handlers, but i do not want to do it for each handler, because i am bound to forget it. Thus, i added the /admin sub-path for these resources. The public-facing web is the rest of the resources outside /admin, but for now there is only home, to test whether it works as expected or not. The public-facing web can not relay on the user’s language settings, as the guest user has no way to set that. I would be happy to just use the Accept-Language header for that, but apparently Google does not use that header[0], and they give four alternatives: a country-specific domain, a subdomain with a generic top-level domain (gTLD), subdirectories with a gTLD, or URL parameters (e.g., site.com?loc=de). Of the four, Google does not recommend URL parameters, and the customer is already using subdirectories with the current site, therefor that’s what i have chosen. Google also tells me that it is a very good idea to have links between localized version of the same resources, either with <link> elements, Link HTTP response headers, or a sitemap file[1]; they are all equivalent in the eyes of Google. I have choosen the Link response headers way, because for that i can simply “augment” ResponseHeader to automatically add these headers when the response status is 2xx, otherwise i would need to pass down the original URL path until it reaches the template. Even though Camper is supposed to be a “generic”, multi-company application, i think i will stick to the easiest route and write the templates for just the “first” customer. [0]: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites [1]: https://developers.google.com/search/docs/specialty/international/localized-versions
2023-08-05 01:42:37 +00:00
}
body {
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
font-family: 'Mabry Pro', sans-serif;
Split templates and handlers into admin and public I need to check that the user is an employee (or admin) in administration handlers, but i do not want to do it for each handler, because i am bound to forget it. Thus, i added the /admin sub-path for these resources. The public-facing web is the rest of the resources outside /admin, but for now there is only home, to test whether it works as expected or not. The public-facing web can not relay on the user’s language settings, as the guest user has no way to set that. I would be happy to just use the Accept-Language header for that, but apparently Google does not use that header[0], and they give four alternatives: a country-specific domain, a subdomain with a generic top-level domain (gTLD), subdirectories with a gTLD, or URL parameters (e.g., site.com?loc=de). Of the four, Google does not recommend URL parameters, and the customer is already using subdirectories with the current site, therefor that’s what i have chosen. Google also tells me that it is a very good idea to have links between localized version of the same resources, either with <link> elements, Link HTTP response headers, or a sitemap file[1]; they are all equivalent in the eyes of Google. I have choosen the Link response headers way, because for that i can simply “augment” ResponseHeader to automatically add these headers when the response status is 2xx, otherwise i would need to pass down the original URL path until it reaches the template. Even though Camper is supposed to be a “generic”, multi-company application, i think i will stick to the easiest route and write the templates for just the “first” customer. [0]: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites [1]: https://developers.google.com/search/docs/specialty/international/localized-versions
2023-08-05 01:42:37 +00:00
font-size: 1.6rem;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
background-color: var(--clar);
color: var(--contrast);
max-width: 200rem;
margin-left: auto;
margin-right: auto;
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
overflow-x: hidden;
Split templates and handlers into admin and public I need to check that the user is an employee (or admin) in administration handlers, but i do not want to do it for each handler, because i am bound to forget it. Thus, i added the /admin sub-path for these resources. The public-facing web is the rest of the resources outside /admin, but for now there is only home, to test whether it works as expected or not. The public-facing web can not relay on the user’s language settings, as the guest user has no way to set that. I would be happy to just use the Accept-Language header for that, but apparently Google does not use that header[0], and they give four alternatives: a country-specific domain, a subdomain with a generic top-level domain (gTLD), subdirectories with a gTLD, or URL parameters (e.g., site.com?loc=de). Of the four, Google does not recommend URL parameters, and the customer is already using subdirectories with the current site, therefor that’s what i have chosen. Google also tells me that it is a very good idea to have links between localized version of the same resources, either with <link> elements, Link HTTP response headers, or a sitemap file[1]; they are all equivalent in the eyes of Google. I have choosen the Link response headers way, because for that i can simply “augment” ResponseHeader to automatically add these headers when the response status is 2xx, otherwise i would need to pass down the original URL path until it reaches the template. Even though Camper is supposed to be a “generic”, multi-company application, i think i will stick to the easiest route and write the templates for just the “first” customer. [0]: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites [1]: https://developers.google.com/search/docs/specialty/international/localized-versions
2023-08-05 01:42:37 +00:00
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
Add the surroundings static page This page is “highly stylized”, with a masonry-like grid, that i did not know how to generate automatically from data defined in PostgreSQL, therefore with Oriol we agreed to have this one as a static page and we will see what we can do if the customer asks to be able to change it. I was a bit undecided on whether the icons in the bottom part of the page should be defined in the CSS or with style="" and CSS variables, like i do for the campsite type in the home page. At first i thought that it should use CSS variables, mostly for coherence: if another section of the web does it for its background image, why no this one. The difference is that the home page is dynamically created from the database, while this page is static and we know what icons we need, thus it makes more sense to move it to the stylesheet file, because then it will be downloaded by user agents that actually want to use it (e.g., browsers, but not Braille terminals).
2023-09-16 22:11:39 +00:00
img {
height: auto;
}
Split templates and handlers into admin and public I need to check that the user is an employee (or admin) in administration handlers, but i do not want to do it for each handler, because i am bound to forget it. Thus, i added the /admin sub-path for these resources. The public-facing web is the rest of the resources outside /admin, but for now there is only home, to test whether it works as expected or not. The public-facing web can not relay on the user’s language settings, as the guest user has no way to set that. I would be happy to just use the Accept-Language header for that, but apparently Google does not use that header[0], and they give four alternatives: a country-specific domain, a subdomain with a generic top-level domain (gTLD), subdirectories with a gTLD, or URL parameters (e.g., site.com?loc=de). Of the four, Google does not recommend URL parameters, and the customer is already using subdirectories with the current site, therefor that’s what i have chosen. Google also tells me that it is a very good idea to have links between localized version of the same resources, either with <link> elements, Link HTTP response headers, or a sitemap file[1]; they are all equivalent in the eyes of Google. I have choosen the Link response headers way, because for that i can simply “augment” ResponseHeader to automatically add these headers when the response status is 2xx, otherwise i would need to pass down the original URL path until it reaches the template. Even though Camper is supposed to be a “generic”, multi-company application, i think i will stick to the easiest route and write the templates for just the “first” customer. [0]: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites [1]: https://developers.google.com/search/docs/specialty/international/localized-versions
2023-08-05 01:42:37 +00:00
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
Add VAT and tourist tax information Since i need the number of decimals to format the price in the template, i added them to the company, and used them in the call to price_parse().
2024-01-15 00:45:58 +00:00
p + p, dl + p {
Add the services page This page is more or less similar to home, in terms of database: it has a carousel and a list of items; in this case, the definition of campsite services. As i said early, when adding the home carousel, this carousel has its own relation and set of functions to manage slides. They are also duplicated in Go code, but i think i will need to refactor it later to a carousel package or something like that, because both relations have the exact same fields and types, so it makes no sense to have twice the same code. I already did it with the CSS and JavaScript code, mostly because it was easier to replace the `.surroundings div` selector with `.carousel`, and because that way i can have a single template that loads and initializes Slick. There is no UI to create or edit service definitions, although there are the SQL functions, because i have no more time now, and Oriol needs to check that the style is correct for that page.
2023-09-17 01:42:16 +00:00
margin-top: 1.5em;
}
Add the surroundings static page This page is “highly stylized”, with a masonry-like grid, that i did not know how to generate automatically from data defined in PostgreSQL, therefore with Oriol we agreed to have this one as a static page and we will see what we can do if the customer asks to be able to change it. I was a bit undecided on whether the icons in the bottom part of the page should be defined in the CSS or with style="" and CSS variables, like i do for the campsite type in the home page. At first i thought that it should use CSS variables, mostly for coherence: if another section of the web does it for its background image, why no this one. The difference is that the home page is dynamically created from the database, while this page is static and we know what icons we need, thus it makes more sense to move it to the stylesheet file, because then it will be downloaded by user agents that actually want to use it (e.g., browsers, but not Braille terminals).
2023-09-16 22:11:39 +00:00
h2 {
font-size: 4.2rem;
font-weight: 400;
}
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
a {
color: var(--contrast);
text-decoration: none;
}
Add the footer site map I created a common template to show the company address in the footer and the contact page, and then i realized Go did not like to output my phone URL in the anchor without having the tel: schema in the template. I then removed that variable and now the URL is created with tel: and the phone number with its spaces removed.
2023-10-06 20:02:59 +00:00
address {
font-style: normal;
}
Change cover’s carousel to slick, and move arrows of all to top-right Oriol did not like that this carousel was different from the rest, and wanted to have it like the rest, but showing only one slide at a time, like the customer wants. He also wanted the arrows for **all** carousels to be in the top-right corner instead of bottom-right, mostly because the customer complains that she does not see the arrows if they are on the bottom, and Oriol does not like the arrows to the sides.
2024-01-17 12:22:47 +00:00
body > a[href="#content"], .sr-only {
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
body > a[href="#content"]:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 1.4rem;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
body > header {
position: sticky;
top: 0;
Show campground map using leaflet It is better for mobile users, as they can zoom and pan the map in their small screens. Had to increase header’s z-index or the zoom controls would be on top of it.
2024-01-14 21:31:13 +00:00
z-index: 9999;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
padding: 1rem 2.5rem;
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
display: grid;
grid-template-columns: auto 1fr;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
align-items: center;
justify-content: space-between;
}
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
body > header > address {
margin: 0 0 1em;
display: flex;
gap: 2em;
}
Add the language switch on the header’s top most in desktop sizes Customer wants the language switch at the same level as the email and phone links, because that’s what they have on the old website.
2023-12-21 21:39:58 +00:00
body > header > address, nav:first-of-type a {
font-size: 1.3rem;
}
nav:first-of-type .has-submenu > a {
line-height: 1.2;
}
nav:first-of-type .has-submenu > a::after {
top: .5rem;
}
nav:first-of-type .has-submenu ul {
top: 2rem;
}
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
body > header > address a {
display: flex;
gap: .5em;
}
body > header > address a::before {
display: inline-block;
width: 1.2rem;
aspect-ratio: 1;
content: '';
background: left center / 100% no-repeat;
}
body > header > address a[href^='tel:']::before {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Crect width="256" height="256" fill="none"/%3E%3Cpath d="M164.39,145.34a8,8,0,0,1,7.59-.69l47.16,21.13a8,8,0,0,1,4.8,8.3A48.33,48.33,0,0,1,176,216,136,136,0,0,1,40,80,48.33,48.33,0,0,1,81.92,32.06a8,8,0,0,1,8.3,4.8l21.13,47.2a8,8,0,0,1-.66,7.53L89.32,117a7.93,7.93,0,0,0-.54,7.81c8.27,16.93,25.77,34.22,42.75,42.41a7.92,7.92,0,0,0,7.83-.59Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3C/svg%3E');
}
body > header > address a[href^='mailto:']::before {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Crect width="256" height="256" fill="none"/%3E%3Cpolyline points="224 56 128 144 32 56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3Cpath d="M32,56H224a0,0,0,0,1,0,0V192a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V56A0,0,0,0,1,32,56Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3Cline x1="110.55" y1="128" x2="34.47" y2="197.74" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3Cline x1="221.53" y1="197.74" x2="145.45" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3C/svg%3E');
}
Integrate lodges’ and languages’ submenus to the main menu There is a big difference between the item that has the submenu for lodges and languages: languages is a link to the “alternate” version of the page, while the lodges has no page to link to. Therefore, one is an anchor while the other is a button, to make a semantic difference, but both have the exact same appearance here.
2023-09-11 03:13:57 +00:00
body > header, nav .has-submenu ul {
background-color: rgba(var(--clar-rgb), 0.7);
Update style
2024-01-13 00:20:31 +00:00
/* background: linear-gradient(180deg, rgba(0,170,125,0.7021009087228641) 35%, rgba(240,240,240,0.7021009087228641) 35%); */
Integrate lodges’ and languages’ submenus to the main menu There is a big difference between the item that has the submenu for lodges and languages: languages is a link to the “alternate” version of the page, while the lodges has no page to link to. Therefore, one is an anchor while the other is a button, to make a semantic difference, but both have the exact same appearance here.
2023-09-11 03:13:57 +00:00
backdrop-filter: blur(10px);
Add bottom border to heading and add camping association images
2023-12-21 23:20:53 +00:00
border-bottom: 1px solid;
Integrate lodges’ and languages’ submenus to the main menu There is a big difference between the item that has the submenu for lodges and languages: languages is a link to the “alternate” version of the page, while the lodges has no page to link to. Therefore, one is an anchor while the other is a button, to make a semantic difference, but both have the exact same appearance here.
2023-09-11 03:13:57 +00:00
}
Fix the vertical alignment of site’s h1
2023-09-12 10:49:46 +00:00
h1 a {
display: flex;
align-items: center;
}
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
h1 a span {
display: inline-block;
}
h1 a .logo {
Update the company’s logo to use the final version
2023-10-14 19:28:24 +00:00
width: 9rem;
height: 5.1633rem;
background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 209.62463 120.27728"%3E%3Cpath d="m102.10584,21.36518s15.78382,27.66469,51.74793,31.08194l-1.43503,10.41504s-7.02735,3.85898-7.51532,4.45149c-.48786.5924-17.41148,7.42712-20.34098,7.59008-2.92939.16307-13.72109.10905-14.04701-.62769-.32603-.73675-16.96005-28.72295-16.95779-32.16343,0-.18506,3.01532-26.44336,8.54819-20.74742Z" fill="%23a4c480" stroke-width="0"/%3E%3Cpath d="m154.60698,63.26961l11.07138.63548s5.45032-48.4924-22.5546-52.25112l-.18608,1.29294,10.33565,13.93141,1.24885,16.53929-.4229,16.65601.5077,3.19599Z" fill="%23969189" stroke-width="0"/%3E%3Cpath d="m59.98896,13.07467s26.34299,16.24631,33.85829,32.03453h2.18499v-9.02184l2.23121-6.99542,5.14967-9.73333,3.96251-2.62987s8.53287-9.22889,29.83861-5.08471c21.30463,4.14418,22.90476,11.23106,26.57542,23.12839,3.67064,11.8962,1.89537,28.65032,1.89537,28.65032l11.17265,3.52303s-.09146-9.67818,2.9162-17.32566c3.00766-7.64736,5.56715-24.27484,19.32456-37.32302l1.35125-1.72351L132.62842,1.12773,59.72236,10.71343l.2666,2.36124Z" fill="%23d1c7b8" stroke-width="0"/%3E%3Cpath d="m175.91826,101.64108s11.48323-14.95787,10.31478-21.95104c-1.16855-6.99328-8.30382-14.01521-16.6462-15.6803-8.34227-1.66521-11.83564,0-11.83564,0l-3.14422-.74013-.92508-5.81706-2.4041-.75986s-7.30826-1.80944-9.24761.75986c-1.93936,2.56829-10.35775,5.34352-10.35775,5.34352l-6.4734,2.03409s-6.74439,3.44048-9.43154,2.48349c-2.68716-.9571-10.13413,6.76413-10.13413,6.76413l-6.14083,7.02734-1.08375,4.51092,4.27421.72581s31.57746,3.08581,33.05873,3.08581c1.48015,0,9.98774,1.85027,9.98774,1.85027l17.20003,5.9172,12.98874,4.44596Z" fill="%23b0dbea" stroke-width="0"/%3E%3Cpath d="m96.47827,44.56732c-.00067-.0108-.00549-.10791-.00989-.27209v.49615c.00708-.07379.01459-.14758.00989-.22406Z" fill="none" stroke-width="0"/%3E%3Cpath d="m154.30634,65.09119c.3075-.00421.61816-.00604.92975-.00702h-1.00415c.0238.00128.05182.00665.0744.00702Z" fill="none" stroke-width="0"/%3E%3Cpath d="m115.49664,65.26294c3.7135-.74225,6.41833-.75543,7.27844-.73346.75879-.15302,3.80713-1.50214,4.39526-1.90857.36786-.25543.96246-.47028,2.38763-.97681,2.26318-.80286,6.04944-2.14532,8.03943-3.67395,3.02869-2.32764,11.24426-2.55499,14.82135-2.39087v-2.58807c-30.22626,0-46.91541-23.68726-50.24347-28.9433-5.68298,8.39807-5.75269,18.2829-5.70831,20.19055.00012.00391.00012.00598.00024.01001l.00116-.00195v.04871c.00439.16418.00922.26129.00989.27209.0047.07648-.00281.15027-.00989.22406v1.46252c6.60834,10.5589,10.33264,19.86877,11.60651,23.32941,2.42841-1.9151,5.34241-3.90509,7.42175-4.32037Z" fill="none" stroke-width="0"/%3E%3Cpath d="m132.65265,8.35669c10.40503.30835,18.67029,3.9845,24.56561,10.92816,13.32343,15.69019,9.93256,42.32843,9.78168,43.45618-.01428.10895-.06281.20264-.09912.30164,3.02527.51666,5.72345,1.26544,8.10999,2.22583,2.9295-30.71533,13.64392-45.85205,22.27155-53.17957L132.03918,3.1828,62.6452,12.43805c8.8457,4.99109,16.0592,11.3692,21.73309,17.66266,3.46472,3.84235,6.51636,7.82147,9.19141,11.72217.24237-5.02301,1.72693-15.47211,9.44702-23.44989,6.79944-7.02747,16.76282-10.38971,29.63593-10.0163Z" fill="none" stroke-width="0"/%3E%3Cpath d="m133.47638,11.40063c-.08368-.01318-.14539-.05841-.22137-.08423-.23016-.0105-.45697-.02808-.68939-.03473-11.99207-.35455-21.22534,2.70929-27.42676,9.10553-.39752.40967-.76978.8299-1.13098,1.25439.17615.31549,16.2937,28.53033,48.41089,28.53033v-14.09778c0-.94934,1.03522-21.547-18.94238-24.67352Z" fill="none" stroke-width="0"/%3E%3Cpath d="m154.98254,21.17133c-1.96252-2.30884-4.22461-4.21466-6.77295-5.72064,8.00757,8.26025,7.52295,20.52759,7.51306,20.69946l.01544,26.00714c2.99548.00995,5.78503.17841,8.38086.48676-.00665-.09686-.03308-.19049-.0199-.29187.03534-.26318,3.36334-26.4939-9.11652-41.18085Z" fill="none" stroke-width="0"/%3E%3Cpath d="m183.75952,77.11957c-3.5838-9.8241-17.01001-12.02271-28.15991-12.0354h-.36353c-.31158.00098-.62225.00281-.92975.00702-.02258-.00037-.0506-.00574-.0744-.00702h-1.80408v-1.41315c-.00098-.01465-.00909-.02875-.00909-.04346v-5.13818c-2.9162-.14581-10.83899.11072-13.0
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
background-size: 100%;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
margin-right: 1.7rem;
}
h1 a .name {
Style changes
2023-12-13 22:23:28 +00:00
font-size: calc(1.5rem + .8vw);
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
line-height: 1em;
text-indent: -.4em;
word-wrap: break-word;
font-weight: 700;
width: 50%;
}
Add checkbox and style for a mobile “hamburger” menu
2023-09-11 03:43:36 +00:00
#menuShowHide, label[for="menuShowHide"] {
position: absolute;
left: -9999em;
}
Add management of surroundings’ highlights (points of interest) Customer does not want the new “masonry-like” design of the surroundings page, and wants the same style they already had: a regular list with text and photo, alternating the photo’s side. And, of course, they want to be able to add and edit them themselves. It is like another carousel, but with an additional rich-text description. The photos that we had in that page are no longer of use.
2024-01-16 00:25:25 +00:00
nav ul, .campsite_type_features ul, .outside_activities > ul {
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
list-style: none;
padding-left: 0;
display: flex;
Add the list of features for campsite type
2023-10-13 18:30:31 +00:00
}
nav ul {
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
flex-wrap: wrap;
align-items: center;
Justify nav’s content to the end This is to bring back the old behaviour when header was a flex with space-between, that pushed the menu as far to the right as possible.
2023-12-21 15:24:39 +00:00
justify-content: end;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
}
Add checkbox and style for a mobile “hamburger” menu
2023-09-11 03:43:36 +00:00
nav a, nav button, label[for="menuShowHide"] {
Style changes
2023-12-13 22:23:28 +00:00
font-size: 1.5rem;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
font-weight: 500;
text-transform: uppercase;
padding: 0 2rem;
line-height: 6rem;
}
Integrate lodges’ and languages’ submenus to the main menu There is a big difference between the item that has the submenu for lodges and languages: languages is a link to the “alternate” version of the page, while the lodges has no page to link to. Therefore, one is an anchor while the other is a button, to make a semantic difference, but both have the exact same appearance here.
2023-09-11 03:13:57 +00:00
nav button {
cursor: pointer;
background: none;
border: none;
}
nav .has-submenu {
position: relative;
}
nav .has-submenu > a::after, nav .has-submenu > button::after {
Update web/static/public.css change symbol "has-submenu : after" for "↓"
2023-09-26 06:04:43 +00:00
content: "↓";
Integrate lodges’ and languages’ submenus to the main menu There is a big difference between the item that has the submenu for lodges and languages: languages is a link to the “alternate” version of the page, while the lodges has no page to link to. Therefore, one is an anchor while the other is a button, to make a semantic difference, but both have the exact same appearance here.
2023-09-11 03:13:57 +00:00
position: absolute;
right: -0.05rem;
}
nav .has-submenu ul {
flex-direction: column;
align-items: start;
display: none;
position: absolute;
top: 5rem;
}
nav .has-submenu ul a {
line-height: 4rem;
white-space: nowrap;
}
nav .has-submenu:hover ul, nav .has-submenu:focus-within ul {
display: flex;
}
Add the language switch on the header’s top most in desktop sizes Customer wants the language switch at the same level as the email and phone links, because that’s what they have on the old website.
2023-12-21 21:39:58 +00:00
nav:last-of-type > ul > li:last-child {
display: none;
}
Add style for booking menu item and operture footer section
2023-12-21 20:18:22 +00:00
.boto-reserva a {
Add the language switch on the header’s top most in desktop sizes Customer wants the language switch at the same level as the email and phone links, because that’s what they have on the old website.
2023-12-21 21:39:58 +00:00
padding-top: 3px;
Add style for booking menu item and operture footer section
2023-12-21 20:18:22 +00:00
}
.boto-reserva {
Add the language switch on the header’s top most in desktop sizes Customer wants the language switch at the same level as the email and phone links, because that’s what they have on the old website.
2023-12-21 21:39:58 +00:00
border: 2px solid;
Update styles
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
Add the language switch on the header’s top most in desktop sizes Customer wants the language switch at the same level as the email and phone links, because that’s what they have on the old website.
2023-12-21 21:39:58 +00:00
height: 40px;
display: flex;
align-items: center;
margin-bottom: 3px;
transition: 0.5s ease;
Add style for booking menu item and operture footer section
2023-12-21 20:18:22 +00:00
}
.boto-reserva:hover {
Add the language switch on the header’s top most in desktop sizes Customer wants the language switch at the same level as the email and phone links, because that’s what they have on the old website.
2023-12-21 21:39:58 +00:00
background: var(--accent);
transition: 0.5s ease;
Add style for booking menu item and operture footer section
2023-12-21 20:18:22 +00:00
}
Style changes
2023-12-13 22:23:28 +00:00
@media (max-width: 80rem) {
Add checkbox and style for a mobile “hamburger” menu
2023-09-11 03:43:36 +00:00
body > header {
Add the language switch on the header’s top most in desktop sizes Customer wants the language switch at the same level as the email and phone links, because that’s what they have on the old website.
2023-12-21 21:39:58 +00:00
grid-template-columns: 1fr auto;
Add checkbox and style for a mobile “hamburger” menu
2023-09-11 03:43:36 +00:00
}
label[for="menuShowHide"] {
position: static;
cursor: pointer;
justify-self: end;
}
label[for="menuShowHide"]::before {
content: "\2630";
Add “Menu” next to the trigram symbol (“hamburger”)
2024-01-10 18:41:57 +00:00
margin-right: .20em;
Add checkbox and style for a mobile “hamburger” menu
2023-09-11 03:43:36 +00:00
}
Add the language switch on the header’s top most in desktop sizes Customer wants the language switch at the same level as the email and phone links, because that’s what they have on the old website.
2023-12-21 21:39:58 +00:00
nav:last-of-type {
Add checkbox and style for a mobile “hamburger” menu
2023-09-11 03:43:36 +00:00
display: none;
grid-column: 1 / span 2;
}
#menuShowHide:checked ~ nav {
display: block;
}
Add the services page This page is more or less similar to home, in terms of database: it has a carousel and a list of items; in this case, the definition of campsite services. As i said early, when adding the home carousel, this carousel has its own relation and set of functions to manage slides. They are also duplicated in Go code, but i think i will need to refactor it later to a carousel package or something like that, because both relations have the exact same fields and types, so it makes no sense to have twice the same code. I already did it with the CSS and JavaScript code, mostly because it was easier to replace the `.surroundings div` selector with `.carousel`, and because that way i can have a single template that loads and initializes Slick. There is no UI to create or edit service definitions, although there are the SQL functions, because i have no more time now, and Oriol needs to check that the style is correct for that page.
2023-09-17 01:42:16 +00:00
Add checkbox and style for a mobile “hamburger” menu
2023-09-11 03:43:36 +00:00
#menuShowHide:checked ~ label[for="menuShowHide"]::before {
content: "✕";
}
Add the services page This page is more or less similar to home, in terms of database: it has a carousel and a list of items; in this case, the definition of campsite services. As i said early, when adding the home carousel, this carousel has its own relation and set of functions to manage slides. They are also duplicated in Go code, but i think i will need to refactor it later to a carousel package or something like that, because both relations have the exact same fields and types, so it makes no sense to have twice the same code. I already did it with the CSS and JavaScript code, mostly because it was easier to replace the `.surroundings div` selector with `.carousel`, and because that way i can have a single template that loads and initializes Slick. There is no UI to create or edit service definitions, although there are the SQL functions, because i have no more time now, and Oriol needs to check that the style is correct for that page.
2023-09-17 01:42:16 +00:00
Add the language switch on the header’s top most in desktop sizes Customer wants the language switch at the same level as the email and phone links, because that’s what they have on the old website.
2023-12-21 21:39:58 +00:00
nav:last-of-type ul {
Add checkbox and style for a mobile “hamburger” menu
2023-09-11 03:43:36 +00:00
flex-direction: column;
align-items: start;
}
Add the services page This page is more or less similar to home, in terms of database: it has a carousel and a list of items; in this case, the definition of campsite services. As i said early, when adding the home carousel, this carousel has its own relation and set of functions to manage slides. They are also duplicated in Go code, but i think i will need to refactor it later to a carousel package or something like that, because both relations have the exact same fields and types, so it makes no sense to have twice the same code. I already did it with the CSS and JavaScript code, mostly because it was easier to replace the `.surroundings div` selector with `.carousel`, and because that way i can have a single template that loads and initializes Slick. There is no UI to create or edit service definitions, although there are the SQL functions, because i have no more time now, and Oriol needs to check that the style is correct for that page.
2023-09-17 01:42:16 +00:00
Add the language switch on the header’s top most in desktop sizes Customer wants the language switch at the same level as the email and phone links, because that’s what they have on the old website.
2023-12-21 21:39:58 +00:00
nav:last-of-type .has-submenu ul {
Add checkbox and style for a mobile “hamburger” menu
2023-09-11 03:43:36 +00:00
display: flex;
position: static;
padding-left: 2rem;
margin-top: -1rem;
background: none;
}
Merge remote-tracking branch 'origin/upcoming'
2023-12-21 23:22:06 +00:00
Add the language switch on the header’s top most in desktop sizes Customer wants the language switch at the same level as the email and phone links, because that’s what they have on the old website.
2023-12-21 21:39:58 +00:00
nav:last-of-type > ul > li:last-child {
display: unset;
}
Merge remote-tracking branch 'origin/upcoming'
2023-12-21 23:22:06 +00:00
Add the language switch on the header’s top most in desktop sizes Customer wants the language switch at the same level as the email and phone links, because that’s what they have on the old website.
2023-12-21 21:39:58 +00:00
nav:first-of-type {
display: none;
}
Merge remote-tracking branch 'origin/upcoming'
2023-12-21 23:22:06 +00:00
Add the language switch on the header’s top most in desktop sizes Customer wants the language switch at the same level as the email and phone links, because that’s what they have on the old website.
2023-12-21 21:39:58 +00:00
body > header > address {
grid-column: 1 / span 2;
}
Add checkbox and style for a mobile “hamburger” menu
2023-09-11 03:43:36 +00:00
}
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
#content {
padding: 2.5rem;
}
Change cover’s carousel to slick, and move arrows of all to top-right Oriol did not like that this carousel was different from the rest, and wanted to have it like the rest, but showing only one slide at a time, like the customer wants. He also wanted the arrows for **all** carousels to be in the top-right corner instead of bottom-right, mostly because the customer complains that she does not see the arrows if they are on the bottom, and Oriol does not like the arrows to the sides.
2024-01-17 12:22:47 +00:00
.hero .slick-slide, .nature section a {
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
background: var(--background-image) center center no-repeat;
background-size: cover;
}
Add position relative, and reduce margin of hero Without the position relative, the booking button is no longer on top of the carousel depending on the screen resolution, and Oriol wants less gap between the carrousel and the next section.
2024-01-17 16:54:05 +00:00
.hero {
position: relative;
Update styles
2024-01-18 02:27:07 +00:00
margin-bottom: 5rem;
Add position relative, and reduce margin of hero Without the position relative, the booking button is no longer on top of the carousel depending on the screen resolution, and Oriol wants less gap between the carrousel and the next section.
2024-01-17 16:54:05 +00:00
}
.nature, .services {
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
margin-bottom: 5rem;
}
Change cover’s carousel to slick, and move arrows of all to top-right Oriol did not like that this carousel was different from the rest, and wanted to have it like the rest, but showing only one slide at a time, like the customer wants. He also wanted the arrows for **all** carousels to be in the top-right corner instead of bottom-right, mostly because the customer complains that she does not see the arrows if they are on the bottom, and Oriol does not like the arrows to the sides.
2024-01-17 12:22:47 +00:00
.hero .slick-slide, .nature section, .services {
Update styles
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
}
Change cover’s carousel to slick, and move arrows of all to top-right Oriol did not like that this carousel was different from the rest, and wanted to have it like the rest, but showing only one slide at a time, like the customer wants. He also wanted the arrows for **all** carousels to be in the top-right corner instead of bottom-right, mostly because the customer complains that she does not see the arrows if they are on the bottom, and Oriol does not like the arrows to the sides.
2024-01-17 12:22:47 +00:00
.hero .slick-initialized .slick-slide {
Update style
2024-01-13 00:20:31 +00:00
display: flex;
align-items: flex-end;
Add home’s cover carousel This is a separate carousel from the one displayed at the bottom with location info; it is, i suppose, a carousel for the hero image. For the database, it works exactly as the home carousel, but on the front had to use AlpineJS instead of Slick because it needs to show a text popping up from the bottom when the slide is show, something i do not know how to do in Slick. It now makes no sense to have the carousel inside the “nature” section, because the heading is no longer in there, and moved it out into a new “hero” div. Since i now have two carousels in home, i had to add additional attributes to carousel.AdminHandler to know which URL to point to when POSTing, PUTting, or redirecting.
2024-01-16 20:05:52 +00:00
justify-content: space-between;
Update style
2024-01-13 00:20:31 +00:00
gap: 5rem;
padding: 5rem;
Change cover’s carousel to slick, and move arrows of all to top-right Oriol did not like that this carousel was different from the rest, and wanted to have it like the rest, but showing only one slide at a time, like the customer wants. He also wanted the arrows for **all** carousels to be in the top-right corner instead of bottom-right, mostly because the customer complains that she does not see the arrows if they are on the bottom, and Oriol does not like the arrows to the sides.
2024-01-17 12:22:47 +00:00
height: 65vh;
Update style
2024-01-13 00:20:31 +00:00
}
.services {
min-height: 8rem;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
display: flex;
align-items: flex-end;
Add media queries to public.css to match original design
2023-09-07 09:47:18 +00:00
gap: 5rem;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
padding: 5rem;
}
Change cover’s carousel to slick, and move arrows of all to top-right Oriol did not like that this carousel was different from the rest, and wanted to have it like the rest, but showing only one slide at a time, like the customer wants. He also wanted the arrows for **all** carousels to be in the top-right corner instead of bottom-right, mostly because the customer complains that she does not see the arrows if they are on the bottom, and Oriol does not like the arrows to the sides.
2024-01-17 12:22:47 +00:00
.hero .slick-slide span, .hero a, .services h2, .surroundings .spiel a {
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
font-weight: bold;
line-height: .9em;
}
Change cover’s carousel to slick, and move arrows of all to top-right Oriol did not like that this carousel was different from the rest, and wanted to have it like the rest, but showing only one slide at a time, like the customer wants. He also wanted the arrows for **all** carousels to be in the top-right corner instead of bottom-right, mostly because the customer complains that she does not see the arrows if they are on the bottom, and Oriol does not like the arrows to the sides.
2024-01-17 12:22:47 +00:00
.hero .slick-slide span, .hero a {
Update styles
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
background-color: var(--clar);
}
Change cover’s carousel to slick, and move arrows of all to top-right Oriol did not like that this carousel was different from the rest, and wanted to have it like the rest, but showing only one slide at a time, like the customer wants. He also wanted the arrows for **all** carousels to be in the top-right corner instead of bottom-right, mostly because the customer complains that she does not see the arrows if they are on the bottom, and Oriol does not like the arrows to the sides.
2024-01-17 12:22:47 +00:00
.hero .slick-slide > span {
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
width: 50%;
margin-bottom: 0;
Update styles
2024-01-18 02:27:07 +00:00
font-size: calc(2rem + 2.7vw);
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
display: block;
Add home’s cover carousel This is a separate carousel from the one displayed at the bottom with location info; it is, i suppose, a carousel for the hero image. For the database, it works exactly as the home carousel, but on the front had to use AlpineJS instead of Slick because it needs to show a text popping up from the bottom when the slide is show, something i do not know how to do in Slick. It now makes no sense to have the carousel inside the “nature” section, because the heading is no longer in there, and moved it out into a new “hero” div. Since i now have two carousels in home, i had to add additional attributes to carousel.AdminHandler to know which URL to point to when POSTing, PUTting, or redirecting.
2024-01-16 20:05:52 +00:00
background: transparent;
Update style
2024-01-13 00:20:31 +00:00
color: var(--base);
Add home’s cover carousel This is a separate carousel from the one displayed at the bottom with location info; it is, i suppose, a carousel for the hero image. For the database, it works exactly as the home carousel, but on the front had to use AlpineJS instead of Slick because it needs to show a text popping up from the bottom when the slide is show, something i do not know how to do in Slick. It now makes no sense to have the carousel inside the “nature” section, because the heading is no longer in there, and moved it out into a new “hero” div. Since i now have two carousels in home, i had to add additional attributes to carousel.AdminHandler to know which URL to point to when POSTing, PUTting, or redirecting.
2024-01-16 20:05:52 +00:00
}
.hero a, .services h2, .surroundings .spiel a {
Update style
2024-01-13 00:20:31 +00:00
font-size: calc(1rem + 1.2vw);
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
}
Add home’s cover carousel This is a separate carousel from the one displayed at the bottom with location info; it is, i suppose, a carousel for the hero image. For the database, it works exactly as the home carousel, but on the front had to use AlpineJS instead of Slick because it needs to show a text popping up from the bottom when the slide is show, something i do not know how to do in Slick. It now makes no sense to have the carousel inside the “nature” section, because the heading is no longer in there, and moved it out into a new “hero” div. Since i now have two carousels in home, i had to add additional attributes to carousel.AdminHandler to know which URL to point to when POSTing, PUTting, or redirecting.
2024-01-16 20:05:52 +00:00
.hero a, .services a {
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
padding: 1.5rem 2rem;
}
Add home’s cover carousel This is a separate carousel from the one displayed at the bottom with location info; it is, i suppose, a carousel for the hero image. For the database, it works exactly as the home carousel, but on the front had to use AlpineJS instead of Slick because it needs to show a text popping up from the bottom when the slide is show, something i do not know how to do in Slick. It now makes no sense to have the carousel inside the “nature” section, because the heading is no longer in there, and moved it out into a new “hero” div. Since i now have two carousels in home, i had to add additional attributes to carousel.AdminHandler to know which URL to point to when POSTing, PUTting, or redirecting.
2024-01-16 20:05:52 +00:00
.hero a span, .services a span, .surroundings .spiel a:hover span, .campsite_type_booking button span {
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
display: inline-block;
transition: transform 0.5s ease;
}
Change cover’s carousel to slick, and move arrows of all to top-right Oriol did not like that this carousel was different from the rest, and wanted to have it like the rest, but showing only one slide at a time, like the customer wants. He also wanted the arrows for **all** carousels to be in the top-right corner instead of bottom-right, mostly because the customer complains that she does not see the arrows if they are on the bottom, and Oriol does not like the arrows to the sides.
2024-01-17 12:22:47 +00:00
.hero a {
position: absolute;
Update styles
2024-01-18 02:27:07 +00:00
bottom: 1rem;
right: 1rem;
Change cover’s carousel to slick, and move arrows of all to top-right Oriol did not like that this carousel was different from the rest, and wanted to have it like the rest, but showing only one slide at a time, like the customer wants. He also wanted the arrows for **all** carousels to be in the top-right corner instead of bottom-right, mostly because the customer complains that she does not see the arrows if they are on the bottom, and Oriol does not like the arrows to the sides.
2024-01-17 12:22:47 +00:00
}
Clean up a bit the credit card div from booking page
2024-01-17 12:40:32 +00:00
Add home’s cover carousel This is a separate carousel from the one displayed at the bottom with location info; it is, i suppose, a carousel for the hero image. For the database, it works exactly as the home carousel, but on the front had to use AlpineJS instead of Slick because it needs to show a text popping up from the bottom when the slide is show, something i do not know how to do in Slick. It now makes no sense to have the carousel inside the “nature” section, because the heading is no longer in there, and moved it out into a new “hero” div. Since i now have two carousels in home, i had to add additional attributes to carousel.AdminHandler to know which URL to point to when POSTing, PUTting, or redirecting.
2024-01-16 20:05:52 +00:00
.hero a:hover span, .services a:hover span, .spiel a:hover span, .campsite_type_booking button:hover span {
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
transform: translateX(1.3rem);
}
Add home’s cover carousel This is a separate carousel from the one displayed at the bottom with location info; it is, i suppose, a carousel for the hero image. For the database, it works exactly as the home carousel, but on the front had to use AlpineJS instead of Slick because it needs to show a text popping up from the bottom when the slide is show, something i do not know how to do in Slick. It now makes no sense to have the carousel inside the “nature” section, because the heading is no longer in there, and moved it out into a new “hero” div. Since i now have two carousels in home, i had to add additional attributes to carousel.AdminHandler to know which URL to point to when POSTing, PUTting, or redirecting.
2024-01-16 20:05:52 +00:00
@media (max-width: 48rem) {
Change cover’s carousel to slick, and move arrows of all to top-right Oriol did not like that this carousel was different from the rest, and wanted to have it like the rest, but showing only one slide at a time, like the customer wants. He also wanted the arrows for **all** carousels to be in the top-right corner instead of bottom-right, mostly because the customer complains that she does not see the arrows if they are on the bottom, and Oriol does not like the arrows to the sides.
2024-01-17 12:22:47 +00:00
.hero .slick-slide {
Add home’s cover carousel This is a separate carousel from the one displayed at the bottom with location info; it is, i suppose, a carousel for the hero image. For the database, it works exactly as the home carousel, but on the front had to use AlpineJS instead of Slick because it needs to show a text popping up from the bottom when the slide is show, something i do not know how to do in Slick. It now makes no sense to have the carousel inside the “nature” section, because the heading is no longer in there, and moved it out into a new “hero” div. Since i now have two carousels in home, i had to add additional attributes to carousel.AdminHandler to know which URL to point to when POSTing, PUTting, or redirecting.
2024-01-16 20:05:52 +00:00
flex-direction: column;
}
Change cover’s carousel to slick, and move arrows of all to top-right Oriol did not like that this carousel was different from the rest, and wanted to have it like the rest, but showing only one slide at a time, like the customer wants. He also wanted the arrows for **all** carousels to be in the top-right corner instead of bottom-right, mostly because the customer complains that she does not see the arrows if they are on the bottom, and Oriol does not like the arrows to the sides.
2024-01-17 12:22:47 +00:00
.hero .slick-slide span {
Add home’s cover carousel This is a separate carousel from the one displayed at the bottom with location info; it is, i suppose, a carousel for the hero image. For the database, it works exactly as the home carousel, but on the front had to use AlpineJS instead of Slick because it needs to show a text popping up from the bottom when the slide is show, something i do not know how to do in Slick. It now makes no sense to have the carousel inside the “nature” section, because the heading is no longer in there, and moved it out into a new “hero” div. Since i now have two carousels in home, i had to add additional attributes to carousel.AdminHandler to know which URL to point to when POSTing, PUTting, or redirecting.
2024-01-16 20:05:52 +00:00
width: 100%;
}
}
dl, .nature > div, .outside_activities > div {
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
display: flex;
Add media queries to public.css to match original design
2023-09-07 09:47:18 +00:00
gap: 5rem;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
}
.nature section {
flex: 1;
}
.nature section h3 {
font-size: 2.4rem;
}
.nature section a {
display: block;
width: 100%;
height: 20rem;
Update styles
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
}
.nature section a span {
z-index: 2;
Update style
2024-01-13 00:20:31 +00:00
padding: .55rem 1.5rem 1rem;
background-color: var(--accent);
Add home’s cover carousel This is a separate carousel from the one displayed at the bottom with location info; it is, i suppose, a carousel for the hero image. For the database, it works exactly as the home carousel, but on the front had to use AlpineJS instead of Slick because it needs to show a text popping up from the bottom when the slide is show, something i do not know how to do in Slick. It now makes no sense to have the carousel inside the “nature” section, because the heading is no longer in there, and moved it out into a new “hero” div. Since i now have two carousels in home, i had to add additional attributes to carousel.AdminHandler to know which URL to point to when POSTing, PUTting, or redirecting.
2024-01-16 20:05:52 +00:00
color: var(--base);
Update styles
2024-01-18 02:27:07 +00:00
border-top-left-radius: .6rem;
border-bottom-right-radius: .6rem;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
}
Show only active campsite types Relaxed the `max-width: 25%` to fill the whole row in the home page; it is very unlikely that they will have lees than four types, though.
2023-09-12 10:47:50 +00:00
@media (max-width: 64rem) {
Add home’s cover carousel This is a separate carousel from the one displayed at the bottom with location info; it is, i suppose, a carousel for the hero image. For the database, it works exactly as the home carousel, but on the front had to use AlpineJS instead of Slick because it needs to show a text popping up from the bottom when the slide is show, something i do not know how to do in Slick. It now makes no sense to have the carousel inside the “nature” section, because the heading is no longer in there, and moved it out into a new “hero” div. Since i now have two carousels in home, i had to add additional attributes to carousel.AdminHandler to know which URL to point to when POSTing, PUTting, or redirecting.
2024-01-16 20:05:52 +00:00
.nature > div {
Show only active campsite types Relaxed the `max-width: 25%` to fill the whole row in the home page; it is very unlikely that they will have lees than four types, though.
2023-09-12 10:47:50 +00:00
flex-direction: column;
}
}
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
.services {
justify-content: end;
background-color: var(--accent);
}
Style changes
2023-12-13 22:23:28 +00:00
.campsite_services {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
margin: 0 0 40px 0;
Style changes
2023-12-13 22:23:28 +00:00
}
Add the services page This page is more or less similar to home, in terms of database: it has a carousel and a list of items; in this case, the definition of campsite services. As i said early, when adding the home carousel, this carousel has its own relation and set of functions to manage slides. They are also duplicated in Go code, but i think i will need to refactor it later to a carousel package or something like that, because both relations have the exact same fields and types, so it makes no sense to have twice the same code. I already did it with the CSS and JavaScript code, mostly because it was easier to replace the `.surroundings div` selector with `.carousel`, and because that way i can have a single template that loads and initializes Slick. There is no UI to create or edit service definitions, although there are the SQL functions, because i have no more time now, and Oriol needs to check that the style is correct for that page.
2023-09-17 01:42:16 +00:00
.carousel {
display: none;
}
.carousel .spiel {
Update style
2024-01-13 00:20:31 +00:00
font-size: 1.8rem;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
}
Add the services page This page is more or less similar to home, in terms of database: it has a carousel and a list of items; in this case, the definition of campsite services. As i said early, when adding the home carousel, this carousel has its own relation and set of functions to manage slides. They are also duplicated in Go code, but i think i will need to refactor it later to a carousel package or something like that, because both relations have the exact same fields and types, so it makes no sense to have twice the same code. I already did it with the CSS and JavaScript code, mostly because it was easier to replace the `.surroundings div` selector with `.carousel`, and because that way i can have a single template that loads and initializes Slick. There is no UI to create or edit service definitions, although there are the SQL functions, because i have no more time now, and Oriol needs to check that the style is correct for that page.
2023-09-17 01:42:16 +00:00
.carousel .spiel p {
margin-top: 0;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
margin-bottom: 2rem;
}
Show “full slides in the carousels, 3 slides in the biggest breakpoint Customer does not want the next slide to show partially; either it shows theo whole slide, or not at all. Had to remove the min-width for campsite type’s spiel, or it would make the whole thing fall over, i do not know why; possibly because slick could not reduce the width to its expected value.
2023-12-20 19:11:39 +00:00
.carousel .spiel, .carousel figure, .carousel .slick-track > img {
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
margin-right: 5rem;
position: relative;
}
Add the services page This page is more or less similar to home, in terms of database: it has a carousel and a list of items; in this case, the definition of campsite services. As i said early, when adding the home carousel, this carousel has its own relation and set of functions to manage slides. They are also duplicated in Go code, but i think i will need to refactor it later to a carousel package or something like that, because both relations have the exact same fields and types, so it makes no sense to have twice the same code. I already did it with the CSS and JavaScript code, mostly because it was easier to replace the `.surroundings div` selector with `.carousel`, and because that way i can have a single template that loads and initializes Slick. There is no UI to create or edit service definitions, although there are the SQL functions, because i have no more time now, and Oriol needs to check that the style is correct for that page.
2023-09-17 01:42:16 +00:00
.carousel img {
Update style
2024-01-13 00:20:31 +00:00
height: 30rem;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
width: 100%;
Update styles
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
object-fit: cover;
}
Add the services page This page is more or less similar to home, in terms of database: it has a carousel and a list of items; in this case, the definition of campsite services. As i said early, when adding the home carousel, this carousel has its own relation and set of functions to manage slides. They are also duplicated in Go code, but i think i will need to refactor it later to a carousel package or something like that, because both relations have the exact same fields and types, so it makes no sense to have twice the same code. I already did it with the CSS and JavaScript code, mostly because it was easier to replace the `.surroundings div` selector with `.carousel`, and because that way i can have a single template that loads and initializes Slick. There is no UI to create or edit service definitions, although there are the SQL functions, because i have no more time now, and Oriol needs to check that the style is correct for that page.
2023-09-17 01:42:16 +00:00
.carousel figcaption {
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
padding: 10px 15px;
background: var(--clar);
width: fit-content;
float: right;
position: absolute;
bottom: 0;
right: 0;
Update styles
2024-01-18 02:27:07 +00:00
border-top-left-radius: .6rem;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
font-size: 1.7rem;
}
Add the services page This page is more or less similar to home, in terms of database: it has a carousel and a list of items; in this case, the definition of campsite services. As i said early, when adding the home carousel, this carousel has its own relation and set of functions to manage slides. They are also duplicated in Go code, but i think i will need to refactor it later to a carousel package or something like that, because both relations have the exact same fields and types, so it makes no sense to have twice the same code. I already did it with the CSS and JavaScript code, mostly because it was easier to replace the `.surroundings div` selector with `.carousel`, and because that way i can have a single template that loads and initializes Slick. There is no UI to create or edit service definitions, although there are the SQL functions, because i have no more time now, and Oriol needs to check that the style is correct for that page.
2023-09-17 01:42:16 +00:00
.carousel .slick-list {
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
order: 1;
Show “full slides in the carousels, 3 slides in the biggest breakpoint Customer does not want the next slide to show partially; either it shows theo whole slide, or not at all. Had to remove the min-width for campsite type’s spiel, or it would make the whole thing fall over, i do not know why; possibly because slick could not reduce the width to its expected value.
2023-12-20 19:11:39 +00:00
margin-right: -5rem;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
}
Change cover’s carousel to slick, and move arrows of all to top-right Oriol did not like that this carousel was different from the rest, and wanted to have it like the rest, but showing only one slide at a time, like the customer wants. He also wanted the arrows for **all** carousels to be in the top-right corner instead of bottom-right, mostly because the customer complains that she does not see the arrows if they are on the bottom, and Oriol does not like the arrows to the sides.
2024-01-17 12:22:47 +00:00
.slick-slider .slick-arrow {
Update styles
2024-01-18 02:27:07 +00:00
font-weight: 600;
font-size: calc(1rem + 1.2vw);
Add media queries to public.css to match original design
2023-09-07 09:47:18 +00:00
line-height: 1;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
width: 5rem;
height: 5rem;
border: none !important;
Move carousel arrows inside the carousel, in the top-right I misunderstood Oriol, and what he really wanted was to have the arrows on top of the image, not just move the arrows from below to above. Thus, I no longer need the carrousel to be a flex because the buttons are now absolutely position (slick.css already sets the container to relative position). These arrows need to be visually inside a single container, to have a white background, but Slick adds the two arrows separately. I had to move them close together, remove the radius from the “common edge”, and use padding to “move” the arrows, rather than translation, in order to avoid showing a gap.
2024-01-17 16:51:02 +00:00
background: var(--base);
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
cursor: pointer;
Move carousel arrows inside the carousel, in the top-right I misunderstood Oriol, and what he really wanted was to have the arrows on top of the image, not just move the arrows from below to above. Thus, I no longer need the carrousel to be a flex because the buttons are now absolutely position (slick.css already sets the container to relative position). These arrows need to be visually inside a single container, to have a white background, but Slick adds the two arrows separately. I had to move them close together, remove the radius from the “common edge”, and use padding to “move” the arrows, rather than translation, in order to avoid showing a gap.
2024-01-17 16:51:02 +00:00
transition: padding 0.5s ease;
position: absolute;
top: 1rem;
z-index: 1;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
}
Change cover’s carousel to slick, and move arrows of all to top-right Oriol did not like that this carousel was different from the rest, and wanted to have it like the rest, but showing only one slide at a time, like the customer wants. He also wanted the arrows for **all** carousels to be in the top-right corner instead of bottom-right, mostly because the customer complains that she does not see the arrows if they are on the bottom, and Oriol does not like the arrows to the sides.
2024-01-17 12:22:47 +00:00
.slick-slider .slick-prev {
Move carousel arrows inside the carousel, in the top-right I misunderstood Oriol, and what he really wanted was to have the arrows on top of the image, not just move the arrows from below to above. Thus, I no longer need the carrousel to be a flex because the buttons are now absolutely position (slick.css already sets the container to relative position). These arrows need to be visually inside a single container, to have a white background, but Slick adds the two arrows separately. I had to move them close together, remove the radius from the “common edge”, and use padding to “move” the arrows, rather than translation, in order to avoid showing a gap.
2024-01-17 16:51:02 +00:00
right: 6rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
}
Change cover’s carousel to slick, and move arrows of all to top-right Oriol did not like that this carousel was different from the rest, and wanted to have it like the rest, but showing only one slide at a time, like the customer wants. He also wanted the arrows for **all** carousels to be in the top-right corner instead of bottom-right, mostly because the customer complains that she does not see the arrows if they are on the bottom, and Oriol does not like the arrows to the sides.
2024-01-17 12:22:47 +00:00
.slick-slider .slick-prev:hover {
Move carousel arrows inside the carousel, in the top-right I misunderstood Oriol, and what he really wanted was to have the arrows on top of the image, not just move the arrows from below to above. Thus, I no longer need the carrousel to be a flex because the buttons are now absolutely position (slick.css already sets the container to relative position). These arrows need to be visually inside a single container, to have a white background, but Slick adds the two arrows separately. I had to move them close together, remove the radius from the “common edge”, and use padding to “move” the arrows, rather than translation, in order to avoid showing a gap.
2024-01-17 16:51:02 +00:00
padding-right: 1.3rem;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
}
Change cover’s carousel to slick, and move arrows of all to top-right Oriol did not like that this carousel was different from the rest, and wanted to have it like the rest, but showing only one slide at a time, like the customer wants. He also wanted the arrows for **all** carousels to be in the top-right corner instead of bottom-right, mostly because the customer complains that she does not see the arrows if they are on the bottom, and Oriol does not like the arrows to the sides.
2024-01-17 12:22:47 +00:00
.slick-slider .slick-next {
Move carousel arrows inside the carousel, in the top-right I misunderstood Oriol, and what he really wanted was to have the arrows on top of the image, not just move the arrows from below to above. Thus, I no longer need the carrousel to be a flex because the buttons are now absolutely position (slick.css already sets the container to relative position). These arrows need to be visually inside a single container, to have a white background, but Slick adds the two arrows separately. I had to move them close together, remove the radius from the “common edge”, and use padding to “move” the arrows, rather than translation, in order to avoid showing a gap.
2024-01-17 16:51:02 +00:00
right: 1rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
}
Change cover’s carousel to slick, and move arrows of all to top-right Oriol did not like that this carousel was different from the rest, and wanted to have it like the rest, but showing only one slide at a time, like the customer wants. He also wanted the arrows for **all** carousels to be in the top-right corner instead of bottom-right, mostly because the customer complains that she does not see the arrows if they are on the bottom, and Oriol does not like the arrows to the sides.
2024-01-17 12:22:47 +00:00
.slick-slider .slick-next:hover {
Move carousel arrows inside the carousel, in the top-right I misunderstood Oriol, and what he really wanted was to have the arrows on top of the image, not just move the arrows from below to above. Thus, I no longer need the carrousel to be a flex because the buttons are now absolutely position (slick.css already sets the container to relative position). These arrows need to be visually inside a single container, to have a white background, but Slick adds the two arrows separately. I had to move them close together, remove the radius from the “common edge”, and use padding to “move” the arrows, rather than translation, in order to avoid showing a gap.
2024-01-17 16:51:02 +00:00
padding-left: 1.3rem;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
}
.enjoy {
font-weight: 900;
Update public style
2024-01-15 11:32:52 +00:00
font-size: calc(2rem + 4vw);
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
line-height: 1.2em;
Add media queries to public.css to match original design
2023-09-07 09:47:18 +00:00
margin: 10rem 0;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
}
Add the surroundings static page This page is “highly stylized”, with a masonry-like grid, that i did not know how to generate automatically from data defined in PostgreSQL, therefore with Oriol we agreed to have this one as a static page and we will see what we can do if the customer asks to be able to change it. I was a bit undecided on whether the icons in the bottom part of the page should be defined in the CSS or with style="" and CSS variables, like i do for the campsite type in the home page. At first i thought that it should use CSS variables, mostly for coherence: if another section of the web does it for its background image, why no this one. The difference is that the home page is dynamically created from the database, while this page is static and we know what icons we need, thus it makes more sense to move it to the stylesheet file, because then it will be downloaded by user agents that actually want to use it (e.g., browsers, but not Braille terminals).
2023-09-16 22:11:39 +00:00
dl {
flex-wrap: wrap;
}
dl div {
Add the services page This page is more or less similar to home, in terms of database: it has a carousel and a list of items; in this case, the definition of campsite services. As i said early, when adding the home carousel, this carousel has its own relation and set of functions to manage slides. They are also duplicated in Go code, but i think i will need to refactor it later to a carousel package or something like that, because both relations have the exact same fields and types, so it makes no sense to have twice the same code. I already did it with the CSS and JavaScript code, mostly because it was easier to replace the `.surroundings div` selector with `.carousel`, and because that way i can have a single template that loads and initializes Slick. There is no UI to create or edit service definitions, although there are the SQL functions, because i have no more time now, and Oriol needs to check that the style is correct for that page.
2023-09-17 01:42:16 +00:00
flex-basis: calc(25% - 5rem + 5rem / 4);
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
min-height: 220px;
padding: 12.5px;
Update styles
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
transition: all 0.5s ease;
Style changes
2023-12-13 22:23:28 +00:00
}
dl div:hover {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
background-color: var(--accent-2);
Add the surroundings static page This page is “highly stylized”, with a masonry-like grid, that i did not know how to generate automatically from data defined in PostgreSQL, therefore with Oriol we agreed to have this one as a static page and we will see what we can do if the customer asks to be able to change it. I was a bit undecided on whether the icons in the bottom part of the page should be defined in the CSS or with style="" and CSS variables, like i do for the campsite type in the home page. At first i thought that it should use CSS variables, mostly for coherence: if another section of the web does it for its background image, why no this one. The difference is that the home page is dynamically created from the database, while this page is static and we know what icons we need, thus it makes more sense to move it to the stylesheet file, because then it will be downloaded by user agents that actually want to use it (e.g., browsers, but not Braille terminals).
2023-09-16 22:11:39 +00:00
}
dt {
font-size: 2rem;
font-weight: 600;
padding: 5rem 0 .5rem;
margin-bottom: 2rem;
border-bottom: 1px solid black;
background-size: 2em 2em;
background-repeat: no-repeat;
background-position: top left;
}
@media (max-width: 48rem) {
dl {
flex-direction: column;
}
Add the services page This page is more or less similar to home, in terms of database: it has a carousel and a list of items; in this case, the definition of campsite services. As i said early, when adding the home carousel, this carousel has its own relation and set of functions to manage slides. They are also duplicated in Go code, but i think i will need to refactor it later to a carousel package or something like that, because both relations have the exact same fields and types, so it makes no sense to have twice the same code. I already did it with the CSS and JavaScript code, mostly because it was easier to replace the `.surroundings div` selector with `.carousel`, and because that way i can have a single template that loads and initializes Slick. There is no UI to create or edit service definitions, although there are the SQL functions, because i have no more time now, and Oriol needs to check that the style is correct for that page.
2023-09-17 01:42:16 +00:00
del div {
flex-basis: 100%;
}
}
Add the surroundings static page This page is “highly stylized”, with a masonry-like grid, that i did not know how to generate automatically from data defined in PostgreSQL, therefore with Oriol we agreed to have this one as a static page and we will see what we can do if the customer asks to be able to change it. I was a bit undecided on whether the icons in the bottom part of the page should be defined in the CSS or with style="" and CSS variables, like i do for the campsite type in the home page. At first i thought that it should use CSS variables, mostly for coherence: if another section of the web does it for its background image, why no this one. The difference is that the home page is dynamically created from the database, while this page is static and we know what icons we need, thus it makes more sense to move it to the stylesheet file, because then it will be downloaded by user agents that actually want to use it (e.g., browsers, but not Braille terminals).
2023-09-16 22:11:39 +00:00
.outside_activities {
margin-top: 2rem;
}
Update styles
2024-01-18 02:27:07 +00:00
.outside_activities img {
border-radius: .6rem;
}
Add the “spiel” for campsite types This is the text that introduces the carousel; it is not a spiel, but this is what i call it. It turns out that this text needs to have paragraphs and headings, much like home’s slider, rather than the one in services page, thus no need to change its font size or to align all items in the carousel in the middle.
2023-10-12 16:47:08 +00:00
.outside_activities h3, .campsite_services .spiel {
Add the surroundings static page This page is “highly stylized”, with a masonry-like grid, that i did not know how to generate automatically from data defined in PostgreSQL, therefore with Oriol we agreed to have this one as a static page and we will see what we can do if the customer asks to be able to change it. I was a bit undecided on whether the icons in the bottom part of the page should be defined in the CSS or with style="" and CSS variables, like i do for the campsite type in the home page. At first i thought that it should use CSS variables, mostly for coherence: if another section of the web does it for its background image, why no this one. The difference is that the home page is dynamically created from the database, while this page is static and we know what icons we need, thus it makes more sense to move it to the stylesheet file, because then it will be downloaded by user agents that actually want to use it (e.g., browsers, but not Braille terminals).
2023-09-16 22:11:39 +00:00
font-size: calc(2.2rem + 4vw);
font-weight: 600;
line-height: .9em;
Add the services page This page is more or less similar to home, in terms of database: it has a carousel and a list of items; in this case, the definition of campsite services. As i said early, when adding the home carousel, this carousel has its own relation and set of functions to manage slides. They are also duplicated in Go code, but i think i will need to refactor it later to a carousel package or something like that, because both relations have the exact same fields and types, so it makes no sense to have twice the same code. I already did it with the CSS and JavaScript code, mostly because it was easier to replace the `.surroundings div` selector with `.carousel`, and because that way i can have a single template that loads and initializes Slick. There is no UI to create or edit service definitions, although there are the SQL functions, because i have no more time now, and Oriol needs to check that the style is correct for that page.
2023-09-17 01:42:16 +00:00
}
.outside_activities h3 {
Add the surroundings static page This page is “highly stylized”, with a masonry-like grid, that i did not know how to generate automatically from data defined in PostgreSQL, therefore with Oriol we agreed to have this one as a static page and we will see what we can do if the customer asks to be able to change it. I was a bit undecided on whether the icons in the bottom part of the page should be defined in the CSS or with style="" and CSS variables, like i do for the campsite type in the home page. At first i thought that it should use CSS variables, mostly for coherence: if another section of the web does it for its background image, why no this one. The difference is that the home page is dynamically created from the database, while this page is static and we know what icons we need, thus it makes more sense to move it to the stylesheet file, because then it will be downloaded by user agents that actually want to use it (e.g., browsers, but not Braille terminals).
2023-09-16 22:11:39 +00:00
margin-bottom: 10rem;
}
Add management of surroundings’ highlights (points of interest) Customer does not want the new “masonry-like” design of the surroundings page, and wants the same style they already had: a regular list with text and photo, alternating the photo’s side. And, of course, they want to be able to add and edit them themselves. It is like another carousel, but with an additional rich-text description. The photos that we had in that page are no longer of use.
2024-01-16 00:25:25 +00:00
.outside_activities > ul {
max-width: 108rem;
margin: 0 auto;
flex-direction: column;
Update styles
2024-01-18 02:27:07 +00:00
gap: 5rem;
Add the surroundings static page This page is “highly stylized”, with a masonry-like grid, that i did not know how to generate automatically from data defined in PostgreSQL, therefore with Oriol we agreed to have this one as a static page and we will see what we can do if the customer asks to be able to change it. I was a bit undecided on whether the icons in the bottom part of the page should be defined in the CSS or with style="" and CSS variables, like i do for the campsite type in the home page. At first i thought that it should use CSS variables, mostly for coherence: if another section of the web does it for its background image, why no this one. The difference is that the home page is dynamically created from the database, while this page is static and we know what icons we need, thus it makes more sense to move it to the stylesheet file, because then it will be downloaded by user agents that actually want to use it (e.g., browsers, but not Braille terminals).
2023-09-16 22:11:39 +00:00
}
Add management of surroundings’ highlights (points of interest) Customer does not want the new “masonry-like” design of the surroundings page, and wants the same style they already had: a regular list with text and photo, alternating the photo’s side. And, of course, they want to be able to add and edit them themselves. It is like another carousel, but with an additional rich-text description. The photos that we had in that page are no longer of use.
2024-01-16 00:25:25 +00:00
.outside_activities article {
display: flex;
gap: 5.5%;
justify-content: space-between;
Add the surroundings static page This page is “highly stylized”, with a masonry-like grid, that i did not know how to generate automatically from data defined in PostgreSQL, therefore with Oriol we agreed to have this one as a static page and we will see what we can do if the customer asks to be able to change it. I was a bit undecided on whether the icons in the bottom part of the page should be defined in the CSS or with style="" and CSS variables, like i do for the campsite type in the home page. At first i thought that it should use CSS variables, mostly for coherence: if another section of the web does it for its background image, why no this one. The difference is that the home page is dynamically created from the database, while this page is static and we know what icons we need, thus it makes more sense to move it to the stylesheet file, because then it will be downloaded by user agents that actually want to use it (e.g., browsers, but not Braille terminals).
2023-09-16 22:11:39 +00:00
}
Add management of surroundings’ highlights (points of interest) Customer does not want the new “masonry-like” design of the surroundings page, and wants the same style they already had: a regular list with text and photo, alternating the photo’s side. And, of course, they want to be able to add and edit them themselves. It is like another carousel, but with an additional rich-text description. The photos that we had in that page are no longer of use.
2024-01-16 00:25:25 +00:00
.outside_activities > ul > li:nth-child(2n) article {
flex-direction: row-reverse;
Update styles
2024-01-18 02:27:07 +00:00
text-align: right;
Add the surroundings static page This page is “highly stylized”, with a masonry-like grid, that i did not know how to generate automatically from data defined in PostgreSQL, therefore with Oriol we agreed to have this one as a static page and we will see what we can do if the customer asks to be able to change it. I was a bit undecided on whether the icons in the bottom part of the page should be defined in the CSS or with style="" and CSS variables, like i do for the campsite type in the home page. At first i thought that it should use CSS variables, mostly for coherence: if another section of the web does it for its background image, why no this one. The difference is that the home page is dynamically created from the database, while this page is static and we know what icons we need, thus it makes more sense to move it to the stylesheet file, because then it will be downloaded by user agents that actually want to use it (e.g., browsers, but not Braille terminals).
2023-09-16 22:11:39 +00:00
}
Add management of surroundings’ highlights (points of interest) Customer does not want the new “masonry-like” design of the surroundings page, and wants the same style they already had: a regular list with text and photo, alternating the photo’s side. And, of course, they want to be able to add and edit them themselves. It is like another carousel, but with an additional rich-text description. The photos that we had in that page are no longer of use.
2024-01-16 00:25:25 +00:00
.outside_activities article h4 {
font-size: 2.3rem;
Add the surroundings static page This page is “highly stylized”, with a masonry-like grid, that i did not know how to generate automatically from data defined in PostgreSQL, therefore with Oriol we agreed to have this one as a static page and we will see what we can do if the customer asks to be able to change it. I was a bit undecided on whether the icons in the bottom part of the page should be defined in the CSS or with style="" and CSS variables, like i do for the campsite type in the home page. At first i thought that it should use CSS variables, mostly for coherence: if another section of the web does it for its background image, why no this one. The difference is that the home page is dynamically created from the database, while this page is static and we know what icons we need, thus it makes more sense to move it to the stylesheet file, because then it will be downloaded by user agents that actually want to use it (e.g., browsers, but not Braille terminals).
2023-09-16 22:11:39 +00:00
}
Add management of surroundings’ highlights (points of interest) Customer does not want the new “masonry-like” design of the surroundings page, and wants the same style they already had: a regular list with text and photo, alternating the photo’s side. And, of course, they want to be able to add and edit them themselves. It is like another carousel, but with an additional rich-text description. The photos that we had in that page are no longer of use.
2024-01-16 00:25:25 +00:00
.outside_activities article > div {
width: 29.5%;
Add the surroundings static page This page is “highly stylized”, with a masonry-like grid, that i did not know how to generate automatically from data defined in PostgreSQL, therefore with Oriol we agreed to have this one as a static page and we will see what we can do if the customer asks to be able to change it. I was a bit undecided on whether the icons in the bottom part of the page should be defined in the CSS or with style="" and CSS variables, like i do for the campsite type in the home page. At first i thought that it should use CSS variables, mostly for coherence: if another section of the web does it for its background image, why no this one. The difference is that the home page is dynamically created from the database, while this page is static and we know what icons we need, thus it makes more sense to move it to the stylesheet file, because then it will be downloaded by user agents that actually want to use it (e.g., browsers, but not Braille terminals).
2023-09-16 22:11:39 +00:00
}
Add management of surroundings’ highlights (points of interest) Customer does not want the new “masonry-like” design of the surroundings page, and wants the same style they already had: a regular list with text and photo, alternating the photo’s side. And, of course, they want to be able to add and edit them themselves. It is like another carousel, but with an additional rich-text description. The photos that we had in that page are no longer of use.
2024-01-16 00:25:25 +00:00
.outside_activities article > img {
width: 64%;
aspect-ratio: 16/9;
object-fit: cover;
Add the surroundings static page This page is “highly stylized”, with a masonry-like grid, that i did not know how to generate automatically from data defined in PostgreSQL, therefore with Oriol we agreed to have this one as a static page and we will see what we can do if the customer asks to be able to change it. I was a bit undecided on whether the icons in the bottom part of the page should be defined in the CSS or with style="" and CSS variables, like i do for the campsite type in the home page. At first i thought that it should use CSS variables, mostly for coherence: if another section of the web does it for its background image, why no this one. The difference is that the home page is dynamically created from the database, while this page is static and we know what icons we need, thus it makes more sense to move it to the stylesheet file, because then it will be downloaded by user agents that actually want to use it (e.g., browsers, but not Braille terminals).
2023-09-16 22:11:39 +00:00
}
Add management of surroundings’ highlights (points of interest) Customer does not want the new “masonry-like” design of the surroundings page, and wants the same style they already had: a regular list with text and photo, alternating the photo’s side. And, of course, they want to be able to add and edit them themselves. It is like another carousel, but with an additional rich-text description. The photos that we had in that page are no longer of use.
2024-01-16 00:25:25 +00:00
@media (max-width: 64rem) {
.outside_activities > ul {
gap: 5rem;
}
Add the surroundings static page This page is “highly stylized”, with a masonry-like grid, that i did not know how to generate automatically from data defined in PostgreSQL, therefore with Oriol we agreed to have this one as a static page and we will see what we can do if the customer asks to be able to change it. I was a bit undecided on whether the icons in the bottom part of the page should be defined in the CSS or with style="" and CSS variables, like i do for the campsite type in the home page. At first i thought that it should use CSS variables, mostly for coherence: if another section of the web does it for its background image, why no this one. The difference is that the home page is dynamically created from the database, while this page is static and we know what icons we need, thus it makes more sense to move it to the stylesheet file, because then it will be downloaded by user agents that actually want to use it (e.g., browsers, but not Braille terminals).
2023-09-16 22:11:39 +00:00
Add management of surroundings’ highlights (points of interest) Customer does not want the new “masonry-like” design of the surroundings page, and wants the same style they already had: a regular list with text and photo, alternating the photo’s side. And, of course, they want to be able to add and edit them themselves. It is like another carousel, but with an additional rich-text description. The photos that we had in that page are no longer of use.
2024-01-16 00:25:25 +00:00
.outside_activities article, .outside_activities > ul > li:nth-child(2n) article {
flex-direction: column;
gap: 1rem;
}
Add the surroundings static page This page is “highly stylized”, with a masonry-like grid, that i did not know how to generate automatically from data defined in PostgreSQL, therefore with Oriol we agreed to have this one as a static page and we will see what we can do if the customer asks to be able to change it. I was a bit undecided on whether the icons in the bottom part of the page should be defined in the CSS or with style="" and CSS variables, like i do for the campsite type in the home page. At first i thought that it should use CSS variables, mostly for coherence: if another section of the web does it for its background image, why no this one. The difference is that the home page is dynamically created from the database, while this page is static and we know what icons we need, thus it makes more sense to move it to the stylesheet file, because then it will be downloaded by user agents that actually want to use it (e.g., browsers, but not Braille terminals).
2023-09-16 22:11:39 +00:00
Add management of surroundings’ highlights (points of interest) Customer does not want the new “masonry-like” design of the surroundings page, and wants the same style they already had: a regular list with text and photo, alternating the photo’s side. And, of course, they want to be able to add and edit them themselves. It is like another carousel, but with an additional rich-text description. The photos that we had in that page are no longer of use.
2024-01-16 00:25:25 +00:00
.outside_activities article > div, .outside_activities article > img {
width: 100%;
}
Add the surroundings static page This page is “highly stylized”, with a masonry-like grid, that i did not know how to generate automatically from data defined in PostgreSQL, therefore with Oriol we agreed to have this one as a static page and we will see what we can do if the customer asks to be able to change it. I was a bit undecided on whether the icons in the bottom part of the page should be defined in the CSS or with style="" and CSS variables, like i do for the campsite type in the home page. At first i thought that it should use CSS variables, mostly for coherence: if another section of the web does it for its background image, why no this one. The difference is that the home page is dynamically created from the database, while this page is static and we know what icons we need, thus it makes more sense to move it to the stylesheet file, because then it will be downloaded by user agents that actually want to use it (e.g., browsers, but not Braille terminals).
2023-09-16 22:11:39 +00:00
}
.campsite_activities {
margin-top: 10rem;
padding-top: 10rem;
border-top: 1px solid black;
}
.campsite_activities h3 {
font-size: 2.9rem;
font-weight: 400;
line-height: 1.2;
margin-bottom: 5rem;
}
Add the “spiel” for campsite types This is the text that introduces the carousel; it is not a spiel, but this is what i call it. It turns out that this text needs to have paragraphs and headings, much like home’s slider, rather than the one in services page, thus no need to change its font size or to align all items in the carousel in the middle.
2023-10-12 16:47:08 +00:00
.campsite_services.carousel .slick-track {
Add the services page This page is more or less similar to home, in terms of database: it has a carousel and a list of items; in this case, the definition of campsite services. As i said early, when adding the home carousel, this carousel has its own relation and set of functions to manage slides. They are also duplicated in Go code, but i think i will need to refactor it later to a carousel package or something like that, because both relations have the exact same fields and types, so it makes no sense to have twice the same code. I already did it with the CSS and JavaScript code, mostly because it was easier to replace the `.surroundings div` selector with `.carousel`, and because that way i can have a single template that loads and initializes Slick. There is no UI to create or edit service definitions, although there are the SQL functions, because i have no more time now, and Oriol needs to check that the style is correct for that page.
2023-09-17 01:42:16 +00:00
align-items: center;
}
Fix the font size and weight of campsite type headings These are according to the design
2023-10-13 20:10:44 +00:00
.campsite_type.carousel .spiel h3 {
font-size: calc(1.8rem + 1.7vw);
font-weight: 700;
}
.campsite_type_title {
font-size: 3.6rem;
}
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
.campsite_type_booking {
margin-top: 2.5rem;
display: flex;
gap: 5rem;
}
@media (max-width: 48rem) {
.campsite_type_booking {
flex-direction: column;
}
}
Bring back the whole list of options in type page, but in accordion This is how the customer wants it.
2023-12-22 02:27:49 +00:00
.campsite_type_booking fieldset, .campsite_type_booking footer {
flex: 1;
}
.campsite_type_booking {
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
background-color: var(--accent);
padding: 2rem;
}
Bring back the whole list of options in type page, but in accordion This is how the customer wants it.
2023-12-22 02:27:49 +00:00
.campsite_type_booking fieldset {
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
display: flex;
gap: 2.5rem;
padding: 0;
border: none;
}
Bring back the whole list of options in type page, but in accordion This is how the customer wants it.
2023-12-22 02:27:49 +00:00
.campsite_type_booking label {
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
flex: 1;
font-size: 2rem;
}
Bring back the whole list of options in type page, but in accordion This is how the customer wants it.
2023-12-22 02:27:49 +00:00
.campsite_type_booking input {
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
padding: 1.5rem .5rem;
width: 100%;
background-color: var(--base);
}
Bring back the whole list of options in type page, but in accordion This is how the customer wants it.
2023-12-22 02:27:49 +00:00
.campsite_type_booking footer {
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
margin-top: 2rem;
Bring back the whole list of options in type page, but in accordion This is how the customer wants it.
2023-12-22 02:27:49 +00:00
text-align: right;
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
}
Bring back the whole list of options in type page, but in accordion This is how the customer wants it.
2023-12-22 02:27:49 +00:00
.campsite_type_booking button {
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
background-color: var(--clar);
padding: 1.5rem 2rem;
cursor: pointer;
font-size: calc(1.8rem + .8vw);
font-weight: 600;
line-height: 0.9em;
}
Bring back the whole list of options in type page, but in accordion This is how the customer wants it.
2023-12-22 02:27:49 +00:00
.campsite_type_booking,
.campsite_type_booking button,
.campsite_type_booking input {
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
border: none;
Update styles
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
}
Bring back the whole list of options in type page, but in accordion This is how the customer wants it.
2023-12-22 02:27:49 +00:00
.campsite_type_calendar_prices {
display: flex;
flex-direction: row-reverse;
}
@media (max-width: 48rem) {
.campsite_type_calendar_prices {
flex-direction: column;
}
}
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
.campsite_type_prices {
padding: 2.5rem;
Update styles
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
Bring back the whole list of options in type page, but in accordion This is how the customer wants it.
2023-12-22 02:27:49 +00:00
flex: .5;
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
}
.campsite_type_prices dl {
display: flex;
Bring back the whole list of options in type page, but in accordion This is how the customer wants it.
2023-12-22 02:27:49 +00:00
flex-direction: column;
Update styles
2023-12-20 12:02:56 +00:00
gap: 1rem;
Bring back the whole list of options in type page, but in accordion This is how the customer wants it.
2023-12-22 02:27:49 +00:00
border-bottom: 1px solid black;
Update styles
2023-12-20 12:02:56 +00:00
}
.campsite_type_prices dl div:hover {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
background-color: transparent;
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
}
.campsite_type_prices div {
flex-basis: unset;
Bring back the whole list of options in type page, but in accordion This is how the customer wants it.
2023-12-22 02:27:49 +00:00
min-height: 0;
padding: 0;
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
}
.campsite_type_prices dt {
display: flex;
align-items: center;
Bring back the whole list of options in type page, but in accordion This is how the customer wants it.
2023-12-22 02:27:49 +00:00
gap: 1.5rem;
border-top: 1px solid black;
Add check-in and check-out time information to campsite type’s page
2024-01-15 00:02:50 +00:00
border-bottom: none;
Bring back the whole list of options in type page, but in accordion This is how the customer wants it.
2023-12-22 02:27:49 +00:00
padding: .5em 0 0;
cursor: pointer;
position: relative;
}
.campsite_type_prices dt::after {
position: absolute;
right: 0;
top: 50%;
content: '+';
width: 1em;
aspect-ratio: 1;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
color: white;
border-radius: 50%;
line-height: 0;
}
.campsite_type_prices dt.open::after {
content: '-';
}
.campsite_type_prices dd {
padding: 0 0 0 calc(30px + 1.5rem);
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
}
Added note about dogs to the campsite type page The pets icon is just the same as the notpet but without the diagonal bar. The price is hardcoded in the query for now, as there is no field in the campsite type.
2024-01-15 01:07:32 +00:00
.campsite_type_prices .pets_warning {
display: flex;
align-items: center;
min-height: 4.8rem;
padding-left: 5.8rem;
background-size: 4.8rem;
background-repeat: no-repeat;
background-position: left center;
}
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
.campsite_type_calendar {
Bring back the whole list of options in type page, but in accordion This is how the customer wants it.
2023-12-22 02:27:49 +00:00
padding: 2.5rem 0;
min-width: 0;
flex: 1;
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
}
Add the list of features for campsite type
2023-10-13 18:30:31 +00:00
.campsite_type_features li {
flex: 1;
font-size: 2.4rem;
text-align: center;
justify-content: space-between;
background-repeat: no-repeat;
background-position: top center;
background-size: 7.2rem 7.2rem;
padding-top: 7.2rem;
}
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
.campsite_type_features ul {
gap: 2.5rem;
}
.campsite_type_detail {
display: flex;
gap: 5rem;
}
.campsite_type_detail section {
flex: 1;
}
.campsite_type_detail section:last-child {
Update styles
2024-01-18 02:27:07 +00:00
flex: 1;
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
}
.campsite_type_detail h4 {
font-size: 2.4rem;
font-weight: 400;
margin-bottom: 1.5rem;
}
.campsite_type_detail ul + h4 {
margin-top: 2.5rem;
}
@media (max-width: 64rem) {
.campsite_type_features ul, .campsite_type_detail {
flex-wrap: wrap;
}
.campsite_type_features li {
flex: unset;
width: calc((100% - 2.5rem * 2) / 3);
}
.campsite_type_detail section {
flex: unset;
width: calc((100% - 5rem) / 2);
}
.campsite_type_detail section:last-child {
width: 100%;
}
}
@media (max-width: 48rem) {
.campsite_type_features ul, .campsite_type_detail {
flex-wrap: nowrap;
flex-direction: column;
}
.campsite_type_features li, .campsite_type_detail section {
width: 100%;
}
}
Add the calendar to the public campsite type page I had to export the Calendar type from Season to use it from campsite/types, and also renamed them because season.SeasonCalendar is a bit redundant compared to just season.Calendar. I still have not added the HTMx code to switch year because i am not sure whether Oriol will want to show a whole year or just half a year. The calculation for the text color taking into account the contrast with the background is from [0]. [0]: https://www.smashingmagazine.com/2020/07/css-techniques-legibility/#foreground-contrast
2023-10-14 21:14:23 +00:00
.campsite_type_calendar button {
display: flex;
gap: 1em;
Bring back the whole list of options in type page, but in accordion This is how the customer wants it.
2023-12-22 02:27:49 +00:00
font-size: 2.5rem;
Add the calendar to the public campsite type page I had to export the Calendar type from Season to use it from campsite/types, and also renamed them because season.SeasonCalendar is a bit redundant compared to just season.Calendar. I still have not added the HTMx code to switch year because i am not sure whether Oriol will want to show a whole year or just half a year. The calculation for the text color taking into account the contrast with the background is from [0]. [0]: https://www.smashingmagazine.com/2020/07/css-techniques-legibility/#foreground-contrast
2023-10-14 21:14:23 +00:00
border: none;
cursor: pointer;
}
.campsite_type_calendar form button:first-child, .campsite_type_calendar > header button {
min-width: 0;
}
.campsite_type_calendar > header {
display: flex;
gap: 2rem;
Show the campsite type’s calendar in an “infinite scroll” carousel Oriol does not want to waste so much vertical space for the calendar, and wants it to show in a carousel, initially with only 6 months, and loading the next three each time the user scrolls past the last. I now use HTMx in the public page too for this auto-loading behavior, based on their “infinite scroll” example[0]. Had to put the /calendar URI inside campsites because in the calendar.gohtml i do not know the current type’s UUID, and can not use a relative URL to “add subdirectories”, because the type does not end with a slash. Had to change season.CollectCalendar to expect the first month and a number of months to show, to be able to load only 6 or 3 months after the current, for the initial carousel content, or after the last month of the carousel. [0]: https://htmx.org/examples/infinite-scroll/
2023-10-18 19:06:41 +00:00
justify-content: space-between;
Add the calendar to the public campsite type page I had to export the Calendar type from Season to use it from campsite/types, and also renamed them because season.SeasonCalendar is a bit redundant compared to just season.Calendar. I still have not added the HTMx code to switch year because i am not sure whether Oriol will want to show a whole year or just half a year. The calculation for the text color taking into account the contrast with the background is from [0]. [0]: https://www.smashingmagazine.com/2020/07/css-techniques-legibility/#foreground-contrast
2023-10-14 21:14:23 +00:00
align-items: center;
}
.campsite_type_calendar > header button:first-of-type::before {
content: "←";
}
.campsite_type_calendar > header button:last-of-type::before {
content: "→";
}
.campsite_type_calendar > div {
Show the campsite type’s calendar in an “infinite scroll” carousel Oriol does not want to waste so much vertical space for the calendar, and wants it to show in a carousel, initially with only 6 months, and loading the next three each time the user scrolls past the last. I now use HTMx in the public page too for this auto-loading behavior, based on their “infinite scroll” example[0]. Had to put the /calendar URI inside campsites because in the calendar.gohtml i do not know the current type’s UUID, and can not use a relative URL to “add subdirectories”, because the type does not end with a slash. Had to change season.CollectCalendar to expect the first month and a number of months to show, to be able to load only 6 or 3 months after the current, for the initial carousel content, or after the last month of the carousel. [0]: https://htmx.org/examples/infinite-scroll/
2023-10-18 19:06:41 +00:00
display: flex;
flex-wrap: nowrap;
Add the calendar to the public campsite type page I had to export the Calendar type from Season to use it from campsite/types, and also renamed them because season.SeasonCalendar is a bit redundant compared to just season.Calendar. I still have not added the HTMx code to switch year because i am not sure whether Oriol will want to show a whole year or just half a year. The calculation for the text color taking into account the contrast with the background is from [0]. [0]: https://www.smashingmagazine.com/2020/07/css-techniques-legibility/#foreground-contrast
2023-10-14 21:14:23 +00:00
gap: 1em;
Show the campsite type’s calendar in an “infinite scroll” carousel Oriol does not want to waste so much vertical space for the calendar, and wants it to show in a carousel, initially with only 6 months, and loading the next three each time the user scrolls past the last. I now use HTMx in the public page too for this auto-loading behavior, based on their “infinite scroll” example[0]. Had to put the /calendar URI inside campsites because in the calendar.gohtml i do not know the current type’s UUID, and can not use a relative URL to “add subdirectories”, because the type does not end with a slash. Had to change season.CollectCalendar to expect the first month and a number of months to show, to be able to load only 6 or 3 months after the current, for the initial carousel content, or after the last month of the carousel. [0]: https://htmx.org/examples/infinite-scroll/
2023-10-18 19:06:41 +00:00
overflow-x: scroll;
scroll-behavior: smooth;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
Add the calendar to the public campsite type page I had to export the Calendar type from Season to use it from campsite/types, and also renamed them because season.SeasonCalendar is a bit redundant compared to just season.Calendar. I still have not added the HTMx code to switch year because i am not sure whether Oriol will want to show a whole year or just half a year. The calculation for the text color taking into account the contrast with the background is from [0]. [0]: https://www.smashingmagazine.com/2020/07/css-techniques-legibility/#foreground-contrast
2023-10-14 21:14:23 +00:00
}
.campsite_type_calendar table {
border-collapse: collapse;
Show the campsite type’s calendar in an “infinite scroll” carousel Oriol does not want to waste so much vertical space for the calendar, and wants it to show in a carousel, initially with only 6 months, and loading the next three each time the user scrolls past the last. I now use HTMx in the public page too for this auto-loading behavior, based on their “infinite scroll” example[0]. Had to put the /calendar URI inside campsites because in the calendar.gohtml i do not know the current type’s UUID, and can not use a relative URL to “add subdirectories”, because the type does not end with a slash. Had to change season.CollectCalendar to expect the first month and a number of months to show, to be able to load only 6 or 3 months after the current, for the initial carousel content, or after the last month of the carousel. [0]: https://htmx.org/examples/infinite-scroll/
2023-10-18 19:06:41 +00:00
flex: 0 0 27rem;
height: 100%;
Add the calendar to the public campsite type page I had to export the Calendar type from Season to use it from campsite/types, and also renamed them because season.SeasonCalendar is a bit redundant compared to just season.Calendar. I still have not added the HTMx code to switch year because i am not sure whether Oriol will want to show a whole year or just half a year. The calculation for the text color taking into account the contrast with the background is from [0]. [0]: https://www.smashingmagazine.com/2020/07/css-techniques-legibility/#foreground-contrast
2023-10-14 21:14:23 +00:00
}
.campsite_type_calendar td {
width: calc(100% / 7);
}
.campsite_type_calendar time {
--aa-brightness: calc(((var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114)) / 1000);
--aa-color: calc((var(--aa-brightness) - 128) * -1000);
background: rgb(var(--red), var(--green), var(--blue));
color: rgb(var(--aa-color), var(--aa-color), var(--aa-color));
display: flex;
width: 100%;
min-width: 3rem;
aspect-ratio: 1;
justify-content: center;
align-items: center;
}
.campsite_type_calendar [aria-checked] {
border: 2px solid var(--camper--color--black);
position: relative;
}
.campsite_type_calendar [aria-checked]::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
background-color: var(--camper--color--black);
border-radius: 50%;
width: .8rem;
height: .8rem;
}
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
Add check-in and check-out time information to campsite type’s page
2024-01-15 00:02:50 +00:00
.checkin-checkout {
flex-direction: column;
gap: 0;
margin-bottom: 2rem;
font-size: 2rem;
}
.checkin-checkout div {
min-height: 0;
flex-basis: 100%;
padding: .75rem;
display: flex;
gap: .25em;
border: 2px solid #383127;
border-radius: 0;
background-repeat: no-repeat;
background-position: left center;
background-size: 3.2rem;
}
.checkin-checkout div:hover {
background-color: initial;
}
.checkin-checkout div:last-child, .checkin-checkout div:last-child:hover {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Crect width="256" height="256" fill="none"/%3E%3Cpath transform="translate(0 256) scale(1 -1)" d="M30.93,198.72C47.39,181.19,90.6,144,152,144v48l80-80L152,32V80C99.2,80,31.51,130.45,24,195.54A4,4,0,0,0,30.93,198.72Z" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3C/svg%3E');
background-color: #383127;
color: white;
}
.checkin-checkout div:first-child {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Crect width="256" height="256" fill="none"/%3E%3Cpath d="M30.93,198.72C47.39,181.19,90.6,144,152,144v48l80-80L152,32V80C99.2,80,31.51,130.45,24,195.54A4,4,0,0,0,30.93,198.72Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3C/svg%3E');
}
.checkin-checkout dt {
padding: 0 0 0 3.2rem;
margin: 0;
font-size: inherit;
font-weight: normal;
border-bottom: none;
}
.checkin-checkout dt:after {
content: ":";
}
Style changes
2023-12-13 22:23:28 +00:00
/* form */
input {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
height: 60px;
Update styles
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
border: 1px solid;
Style changes
2023-12-13 22:23:28 +00:00
}
select {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
min-height: 60px;
Update styles
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
border: 1px solid;
background: white;
padding: 20px;
Style changes
2023-12-13 22:23:28 +00:00
}
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
Style changes
2023-12-13 22:23:28 +00:00
/*
label {
display: flex;
align-items: center;
gap: 20px;
}
*/
fieldset {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
display: flex;
justify-content: space-between;
Style changes
2023-12-13 22:23:28 +00:00
}
button {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
font-size: 4rem;
background: var(--accent);
Update styles
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
border: 1px solid var(--accent);
color: var(--contrast);
Style changes
2023-12-13 22:23:28 +00:00
}
/* radio buttins + checkbox */
/* Context for relative positioning */
label {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
position: relative;
Style changes
2023-12-13 22:23:28 +00:00
}
/* Base styles for both types of inputs */
input[type="radio"],
input[type="checkbox"] {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
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;
Style changes
2023-12-13 22:23:28 +00:00
}
/* Remove the circular shape from checkboxes */
input[type="checkbox"] {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
border-radius: 0;
Style changes
2023-12-13 22:23:28 +00:00
}
/* Styles for the pseudo-elements */
input[type="radio"]::before,
input[type="checkbox"]::before {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
content: "";
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
top: 0;
Style changes
2023-12-13 22:23:28 +00:00
}
/* Center of the checked radio button */
input[type="radio"]:checked::before {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
border: 5px solid transparent;
border-radius: 100%;
background: var(--accent);
margin: 4px;
Style changes
2023-12-13 22:23:28 +00:00
}
/* The checkmark shape */
input[type="checkbox"]:checked::before {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
border-right: 5px solid var(--accent);
border-bottom: 6px solid var(--accent);
height: 90%;
width: 50%;
transform: rotate(50deg) translateY(-20%) translateX(-10%);
Style changes
2023-12-13 22:23:28 +00:00
}
/* Some focus styles for accessibility */
input[type="radio"]:focus,
input[type="checkbox"]:focus {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
outline-offset: 2px;
Style changes
2023-12-13 22:23:28 +00:00
}
Remove “Party Details” from booking form, and stylize it a bit
2023-12-12 22:16:04 +00:00
#booking fieldset {
border: none;
}
#booking legend {
font-weight: bold;
}
#booking input:not([type="radio"]):not([type="checkbox"]),
#booking select {
width: 100%;
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
padding: 20px;
Remove “Party Details” from booking form, and stylize it a bit
2023-12-12 22:16:04 +00:00
}
#booking fieldset {
margin-bottom: 1em;
padding-bottom: 1em;
border-bottom: 3px solid black;
}
#booking fieldset:first-of-type,
#booking fieldset:nth-of-type(3),
#booking fieldset:last-of-type {
display: grid;
row-gap: 1em;
column-gap: 1em;
}
#booking fieldset.campsite-options {
transition: opacity .25s ease-in;
}
#booking fieldset.campsite-options:not(.is-visible) {
visibility: hidden;
max-height: 0;
overflow: hidden;
margin: 0;
padding: 0;
border: none;
line-height: 0;
opacity: 0;
}
#booking fieldset:first-of-type {
grid-template-columns: repeat(3, 1fr);
}
#booking fieldset:nth-of-type(3) {
grid-template-columns: repeat(4, 1fr);
}
#booking fieldset:last-of-type {
border-bottom: none;
grid-template-columns: repeat(2, 1fr);
}
Add management of surroundings’ highlights (points of interest) Customer does not want the new “masonry-like” design of the surroundings page, and wants the same style they already had: a regular list with text and photo, alternating the photo’s side. And, of course, they want to be able to add and edit them themselves. It is like another carousel, but with an additional rich-text description. The photos that we had in that page are no longer of use.
2024-01-16 00:25:25 +00:00
#booking a, .outside_activities a {
Add check-in and check-out time information to campsite type’s page
2024-01-15 00:02:50 +00:00
color: var(--accent);
text-decoration: var(--accent) wavy underline;
Add color to booking link and fix footer image sizes
2023-12-22 09:41:02 +00:00
}
Remove “Party Details” from booking form, and stylize it a bit
2023-12-12 22:16:04 +00:00
@media (max-width: 48rem) {
#booking fieldset {
grid-template-columns: 1fr !important;
}
}
Add credit card logos to booking page
2024-01-17 12:31:33 +00:00
/* booking card */
Clean up a bit the credit card div from booking page
2024-01-17 12:40:32 +00:00
.credit-cards {
display: flex;
gap: 10px;
align-items: center;
margin: 30px 10px;
Add credit card logos to booking page
2024-01-17 12:31:33 +00:00
}
Clean up a bit the credit card div from booking page
2024-01-17 12:40:32 +00:00
.credit-cards svg {
width: 4.8rem;
Add credit card logos to booking page
2024-01-17 12:31:33 +00:00
}
Style changes
2023-12-13 22:23:28 +00:00
/* footer responsive */
@media (max-width: 48rem) {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
body > footer div {
display: flex;
flex-direction: column;
}
body > footer section {
width: 100% !important;
margin: 40px 0 0 0;
}
}
Style changes
2023-12-13 22:23:28 +00:00
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
/* end footer responsive */
Style changes
2023-12-13 22:23:28 +00:00
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
body > footer {
Add the footer site map I created a common template to show the company address in the footer and the contact page, and then i realized Go did not like to output my phone URL in the anchor without having the tel: schema in the template. I then removed that variable and now the URL is created with tel: and the phone number with its spaces removed.
2023-10-06 20:02:59 +00:00
display: flex;
flex-direction: column;
gap: 1rem;
Update style
2024-01-13 00:20:31 +00:00
margin: 120px 20px 0 20px;
background: var(--contrast);
color: var(--base);
Update styles
2024-01-18 02:27:07 +00:00
border-top-left-radius: .6rem;
border-top-right-radius: .6rem;
Update style
2024-01-13 00:20:31 +00:00
}
body > footer a {
color: var(--base);
Add the footer site map I created a common template to show the company address in the footer and the contact page, and then i realized Go did not like to output my phone URL in the anchor without having the tel: schema in the template. I then removed that variable and now the URL is created with tel: and the phone number with its spaces removed.
2023-10-06 20:02:59 +00:00
}
Replace contact page with location Customer does not want a contact page, but a page where they can write the direction on how to reach the campground, with a Google map embed instead of using Leaflet, because Google Maps shows the reviews right in the map. That means i had to replace the GPS locations with XML fields for the customer to write. In all four languages. This time i tried a translation approach inspired by PrestaShop: instead of opening a new page for each language, i have all languages in the same page and use AlpineJS to show just a single language. It is far easier to write the translations, even though you do not have the source text visible, specially in this section that there is no place for me to put the language links.
2023-12-21 20:17:04 +00:00
body > footer > div, .campsite_type_features, .campsite_type_detail {
Add the list of features for campsite type
2023-10-13 18:30:31 +00:00
padding: 5rem 0;
}
Set multiply blending mode to campground map’s zones and trees
2023-12-21 15:19:04 +00:00
/* highlight footer season */
body > footer section:nth-child(3) {
Update styles
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
Add check-in and check-out time information to campsite type’s page
2024-01-15 00:02:50 +00:00
background: var(--accent-2);
padding: 0 15px;
color: var(--contrast);
Add style for booking menu item and operture footer section
2023-12-21 20:18:22 +00:00
}
body > footer section:nth-child(3) h2 {
Add check-in and check-out time information to campsite type’s page
2024-01-15 00:02:50 +00:00
border-bottom: 1px solid var(--contrast);
Add style for booking menu item and operture footer section
2023-12-21 20:18:22 +00:00
}
body > footer section:nth-child(3) p {
Add the language switch on the header’s top most in desktop sizes Customer wants the language switch at the same level as the email and phone links, because that’s what they have on the old website.
2023-12-21 21:39:58 +00:00
padding-left: 15px;
Set multiply blending mode to campground map’s zones and trees
2023-12-21 15:19:04 +00:00
}
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
.campsite_type_detail {
padding-bottom: 2.5rem;
}
Replace contact page with location Customer does not want a contact page, but a page where they can write the direction on how to reach the campground, with a Google map embed instead of using Leaflet, because Google Maps shows the reviews right in the map. That means i had to replace the GPS locations with XML fields for the customer to write. In all four languages. This time i tried a translation approach inspired by PrestaShop: instead of opening a new page for each language, i have all languages in the same page and use AlpineJS to show just a single language. It is far easier to write the translations, even though you do not have the source text visible, specially in this section that there is no place for me to put the language links.
2023-12-21 20:17:04 +00:00
body > footer > div {
Add the footer site map I created a common template to show the company address in the footer and the contact page, and then i realized Go did not like to output my phone URL in the anchor without having the tel: schema in the template. I then removed that variable and now the URL is created with tel: and the phone number with its spaces removed.
2023-10-06 20:02:59 +00:00
display: flex;
Update styles
2023-12-20 12:02:56 +00:00
gap: 3rem;
Add the footer site map I created a common template to show the company address in the footer and the contact page, and then i realized Go did not like to output my phone URL in the anchor without having the tel: schema in the template. I then removed that variable and now the URL is created with tel: and the phone number with its spaces removed.
2023-10-06 20:02:59 +00:00
justify-content: space-between;
margin: 0 2.5rem;
Update style
2024-01-13 00:20:31 +00:00
border-bottom: 1px solid var(--base);
Add the footer site map I created a common template to show the company address in the footer and the contact page, and then i realized Go did not like to output my phone URL in the anchor without having the tel: schema in the template. I then removed that variable and now the URL is created with tel: and the phone number with its spaces removed.
2023-10-06 20:02:59 +00:00
}
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
body > footer section {
Add the footer site map I created a common template to show the company address in the footer and the contact page, and then i realized Go did not like to output my phone URL in the anchor without having the tel: schema in the template. I then removed that variable and now the URL is created with tel: and the phone number with its spaces removed.
2023-10-06 20:02:59 +00:00
width: 25%;
}
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
body > footer h2 {
Add the footer site map I created a common template to show the company address in the footer and the contact page, and then i realized Go did not like to output my phone URL in the anchor without having the tel: schema in the template. I then removed that variable and now the URL is created with tel: and the phone number with its spaces removed.
2023-10-06 20:02:59 +00:00
font-size: 2.4rem;
margin-bottom: 2rem;
Update style
2024-01-13 00:20:31 +00:00
border-bottom: 1px solid var(--base);
Add the footer site map I created a common template to show the company address in the footer and the contact page, and then i realized Go did not like to output my phone URL in the anchor without having the tel: schema in the template. I then removed that variable and now the URL is created with tel: and the phone number with its spaces removed.
2023-10-06 20:02:59 +00:00
}
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
body > footer ul {
Add the footer site map I created a common template to show the company address in the footer and the contact page, and then i realized Go did not like to output my phone URL in the anchor without having the tel: schema in the template. I then removed that variable and now the URL is created with tel: and the phone number with its spaces removed.
2023-10-06 20:02:59 +00:00
list-style: none;
padding: 0;
}
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
body > footer li a::before {
Add the footer site map I created a common template to show the company address in the footer and the contact page, and then i realized Go did not like to output my phone URL in the anchor without having the tel: schema in the template. I then removed that variable and now the URL is created with tel: and the phone number with its spaces removed.
2023-10-06 20:02:59 +00:00
font-size: 1.25em;
content: "→";
display: inline-block;
margin-right: .5em;
transition: transform .5s ease;
}
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
body > footer li a:hover::before {
Add the footer site map I created a common template to show the company address in the footer and the contact page, and then i realized Go did not like to output my phone URL in the anchor without having the tel: schema in the template. I then removed that variable and now the URL is created with tel: and the phone number with its spaces removed.
2023-10-06 20:02:59 +00:00
transform: translateX(.6rem);
}
Add the booking form to type, and style page according to design
2023-10-13 19:59:45 +00:00
body > footer span {
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
font-size: 1.5rem;
text-align: center;
padding: 2.5rem;
Add the footer site map I created a common template to show the company address in the footer and the contact page, and then i realized Go did not like to output my phone URL in the anchor without having the tel: schema in the template. I then removed that variable and now the URL is created with tel: and the phone number with its spaces removed.
2023-10-06 20:02:59 +00:00
display: block;
Add the first test for the front end design As previously stated, web made the design with an external tool and had to “convert” it to proper CSS and HTML markup. Unfortunately, the original design uses slick, that requires jQuery; i can’t do anything about it now. Disabled most of the menu and language switcher because it is not in the design yet.
2023-09-05 02:40:48 +00:00
}
Style changes
2023-12-13 22:23:28 +00:00
Add bottom border to heading and add camping association images
2023-12-21 23:20:53 +00:00
.camping-association {
display: flex;
Update style
2024-01-13 00:20:31 +00:00
flex-wrap: wrap;
Add check-in and check-out time information to campsite type’s page
2024-01-15 00:02:50 +00:00
flex-direction: row;
Add bottom border to heading and add camping association images
2023-12-21 23:20:53 +00:00
height: 5rem;
gap: 2rem;
margin: 2rem 0 0;
Add color to booking link and fix footer image sizes
2023-12-22 09:41:02 +00:00
Add bottom border to heading and add camping association images
2023-12-21 23:20:53 +00:00
}
Add color to booking link and fix footer image sizes
2023-12-22 09:41:02 +00:00
.camping-association img {
Add check-in and check-out time information to campsite type’s page
2024-01-15 00:02:50 +00:00
max-height: 35px;;
Add color to booking link and fix footer image sizes
2023-12-22 09:41:02 +00:00
}
Style changes
2023-12-13 22:23:28 +00:00
/* contact */
Update styles
2023-12-20 12:02:56 +00:00
@media (max-width: 64rem) {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
.contact-page {
grid-template-columns: 1fr !important;
}
Update styles
2023-12-20 12:02:56 +00:00
}
Style changes
2023-12-13 22:23:28 +00:00
.contact-page {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
display: grid;
grid-template-columns: 1fr 4fr;
grid-gap: 20px;
Style changes
2023-12-13 22:23:28 +00:00
}
address {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
font-size: calc(16px + .4vw);
margin: 30px 0 30px 0;
Style changes
2023-12-13 22:23:28 +00:00
}
#map {
Update styles
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
Style changes
2023-12-13 22:23:28 +00:00
}
Update styles
2023-12-20 12:02:56 +00:00
.leaflet-popup-content-wrapper {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
border-radius: 5px !important;
Update styles
2023-12-20 12:02:56 +00:00
}
.leaflet-popup-content {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
font-size: 2rem !important;
Update styles
2023-12-20 12:02:56 +00:00
}
Style changes
2023-12-13 22:23:28 +00:00
/* camping map */
Update public style
2024-01-15 11:32:52 +00:00
#campground_map {
Update styles
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
Update public style
2024-01-15 11:32:52 +00:00
}
Style changes
2023-12-13 22:23:28 +00:00
#arbres {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
mix-blend-mode: multiply;
Update campground map
2024-01-14 20:36:03 +00:00
opacity: .5;
Style changes
2023-12-13 22:23:28 +00:00
}
Update styles
2023-12-20 12:02:56 +00:00
Add the language switch on the header’s top most in desktop sizes Customer wants the language switch at the same level as the email and phone links, because that’s what they have on the old website.
2023-12-21 21:39:58 +00:00
#zones {
mix-blend-mode: multiply;
Update campground map
2024-01-14 20:36:03 +00:00
opacity: .3;
Set multiply blending mode to campground map’s zones and trees
2023-12-21 15:19:04 +00:00
}
Update styles
2023-12-20 12:02:56 +00:00
/* surrounding */
.ad-container {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 50px 0;
Update styles
2023-12-20 12:02:56 +00:00
}
.ad-image-container {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
width: 50%;
min-height: 300px;
Update styles
2024-01-18 02:27:07 +00:00
border-top-left-radius: .6rem;
border-bottom-left-radius:.8rem;
background-image: url(https://campingmontagut.tandem.ws/media/0c0625998215b6caec6e871ab26d791c330f34bb46a2facc9d502d769d207e7b/barranquisme.jpg);
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
Update styles
2023-12-20 12:02:56 +00:00
}
.ad-description-container {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
width: 50%;
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 50px;
Update styles
2024-01-18 02:27:07 +00:00
border-top-right-radius: .6rem;
border-bottom-right-radius: .6rem;
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
background-color: var(--accent-2);
Update styles
2023-12-20 12:02:56 +00:00
}
.ad-description-container h3 {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
font-size: calc(16px + .7vw);
font-weight: 400;
line-height: 9rem;
Update styles
2023-12-20 12:02:56 +00:00
}
.ad-button {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
font-size: calc(18px + 1.7vw);
font-weight: 600;
line-height: 0.9em;
display: flex;
align-items: flex-start;
column-gap: 0.5em;
Update styles
2024-01-18 02:27:07 +00:00
border-radius: .6rem;
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
color: var(--contrast);
Update styles
2023-12-20 12:02:56 +00:00
}
.ad-button .ad-icon svg {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
width: 40px;
transform: rotate(320deg) translate3d(-5px, -10px, 0);
transition: all 0.5s ease;
Update styles
2023-12-20 12:02:56 +00:00
}
.ad-button:hover .gb-icon svg {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
transform: rotate(320deg) translate3d(10px, 0, 0);
Update styles
2023-12-20 12:02:56 +00:00
}
.arrow_link {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
fill: var(--contrast);
Update styles
2023-12-20 12:02:56 +00:00
}
/* services */
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
.services_icon {
position: relative;
z-index: 2;
Update styles
2023-12-20 12:02:56 +00:00
}
dt {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
position: relative;
z-index: 3;
Update styles
2023-12-20 12:02:56 +00:00
}
.services_icon::before {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
content: '';
background: var(--accent-2);
position: absolute;
width: 60px;
height: 60px;
top: 2px;
left: 2px;
border-radius: 50px;
z-index: 1;
Update styles
2023-12-20 12:02:56 +00:00
}
/*
.services_icon:hover::before {
background: var(--accent-2);
}
*/
.services_icon a {
Add the email and phone numbers at the very top Requested by the customer
2023-12-20 19:39:26 +00:00
color: var(--accent);
text-decoration: var(--accent) wavy underline;
Show “full slides in the carousels, 3 slides in the biggest breakpoint Customer does not want the next slide to show partially; either it shows theo whole slide, or not at all. Had to remove the min-width for campsite type’s spiel, or it would make the whole thing fall over, i do not know why; possibly because slick could not reduce the width to its expected value.
2023-12-20 19:11:39 +00:00
}
Add home’s cover carousel This is a separate carousel from the one displayed at the bottom with location info; it is, i suppose, a carousel for the hero image. For the database, it works exactly as the home carousel, but on the front had to use AlpineJS instead of Slick because it needs to show a text popping up from the bottom when the slide is show, something i do not know how to do in Slick. It now makes no sense to have the carousel inside the “nature” section, because the heading is no longer in there, and moved it out into a new “hero” div. Since i now have two carousels in home, i had to add additional attributes to carousel.AdminHandler to know which URL to point to when POSTing, PUTting, or redirecting.
2024-01-16 20:05:52 +00:00
[x-cloak] {
display: none !important;
}