diff --git a/assets/accordion.js b/assets/accordion.js new file mode 100644 index 00000000..3341e1e1 --- /dev/null +++ b/assets/accordion.js @@ -0,0 +1,17 @@ +const accordionHeaders = document.querySelectorAll(".accordion-header"); + +accordionHeaders.forEach((accordion) => { + accordion.onclick = function () { + this.classList.toggle("active"); + + let accordionContent = this.nextElementSibling; + + if (accordionContent.style.maxHeight) { + //this is if the accordion is open + accordionContent.style.maxHeight = null; + } else { + //if the accordion is currently closed + accordionContent.style.maxHeight = accordionContent.scrollHeight + "px"; + } + }; +}); diff --git a/assets/footer.css b/assets/footer.css index 30e88ad4..51a08a99 100644 --- a/assets/footer.css +++ b/assets/footer.css @@ -1,20 +1,14 @@ .yc-footer { background-color: var(--yc-footer-background-color); color: var(--yc-footer-text-color); + margin-top: 27px; overflow: hidden; display: block; width: 100%; - padding: 5.4rem 0 6rem; - position: relative; -} -.yc-footer .title { - font-weight: 500; - font-size: 1.3rem; - margin-bottom: 1rem; + padding: 40px 0; } .yc-footer .columns { display: flex; - margin-bottom: 1rem; gap: 1rem; flex-direction: column; } @@ -26,43 +20,93 @@ flex-direction: row; } } -.yc-footer .item, -.yc-footer .description { - font-size: 14px; - margin-bottom: 0.7rem; - opacity: 0.7; +.yc-footer .accordion-item .accordion-header { + display: flex; + justify-content: space-between; + color: inherit; + align-items: center; + column-gap: 12px; + border-bottom: 1px solid #444444; + padding-bottom: 12px; + margin-bottom: 12px; + cursor: pointer; +} +@media (min-width: 768px) { + .yc-footer .accordion-item .accordion-header { + border-color: transparent; + cursor: unset; + } +} +.yc-footer .accordion-item .accordion-header .title { + color: inherit; + font-weight: 700; + font-size: 16px; + line-height: 120%; +} +.yc-footer .accordion-item .accordion-header .arrow { + transform: rotate(180deg); + transition: all 0.25s cubic-bezier(0.5, 0, 0.1, 1); +} +@media (min-width: 768px) { + .yc-footer .accordion-item .accordion-header .arrow { + display: none; + } +} +.yc-footer .accordion-item .accordion-header.active .arrow { + transform: unset; +} +.yc-footer .accordion-item .accordion-content { + max-height: 0; + overflow: hidden; + transition: all 300ms ease; +} +@media (min-width: 768px) { + .yc-footer .accordion-item .accordion-content { + max-height: unset; + overflow: unset; + } +} +.yc-footer .accordion-item .accordion-content .item { display: block; + font-weight: 300; + font-size: 13px; + line-height: 250%; } -.yc-footer .description { - line-height: 1.8; +@media (min-width: 768px) { + .yc-footer .accordion-item .accordion-content .item { + font-size: 15px; + } } -.yc-footer a.item:not(.normal):hover { +.yc-footer .accordion-item .accordion-content .item:hover { text-decoration: underline; - line-height: 1.5; -} -.yc-footer .copyright { - position: absolute; - bottom: 0; - left: 0; - right: 0; - width: 100vw; - font-size: 14px; - text-align: center; - background-color: var(--yc-footer-copyright-background); -} -.yc-footer .copyright .container { - height: 80px; +} +.yc-footer .copyright-wrapper { + width: 100%; display: flex; - justify-content: space-between; + gap: 12px; + flex-direction: row-reverse; align-items: center; + justify-content: space-between; + margin-top: 14px; } -.yc-footer .copyright .container img { - height: 26px; +@media (min-width: 768px) { + .yc-footer .copyright-wrapper { + border-top: 1px solid #444444; + padding-top: 45px; + margin-top: 35px; + } } -.yc-footer .logo { - margin-bottom: 3rem; +.yc-footer .copyright-wrapper .copyright-title { + font-weight: 600; + font-size: 11px; + line-height: 250%; } -.yc-footer .logo img { - max-height: 2.5rem; - object-fit: contain; +.yc-footer .copyright-wrapper .social-media-link { + display: block; + width: 20px; + height: 20px; +} +.yc-footer .copyright-wrapper .social-media-link img { + width: 100%; + height: 100%; } diff --git a/config/settings_data.json b/config/settings_data.json index cbb189db..1b5c75d9 100644 --- a/config/settings_data.json +++ b/config/settings_data.json @@ -1,84 +1,90 @@ { - "current": { - "font_family": "Almarai", - "theme_direction": "rtl", - "primary_color": "#F33520", - "sections": { - "notice-bar": { - "type": "notice-bar", - "settings": { - "notice_bar_content_desktop": "

الشحن المجاني متاح لجميع الطلبات<\/p>", - "notice_bar_content_mobile": "

الشحن المجاني متاح لجميع الطلبات<\/p>", - "notice_bar_content_font_size_desktop": 13, - "notice_bar_content_font_size_mobile": 12, - "notice_bar_height_desktop": 45, - "notice_bar_height_mobile": 45, - "notice_bar_background_color_desktop": "#F33520FF", - "notice_bar_background_color_mobile": "#E72E25FF" - } - }, - "main-navbar": { - "type": "main-navbar", - "blocks": { - "block_gkk8ae6rzniqule": { - "type": "logo", - "settings": {} - }, - "block_glpfko4s63fm6kj": { - "type": "menu", - "settings": {} - }, - "block_gmrv273jdps9sso": { - "type": "search_and_cart", - "settings": {} - } - }, - "order": [ - "block_gkk8ae6rzniqule", - "block_glpfko4s63fm6kj", - "block_gmrv273jdps9sso" - ], - "settings": { - "cart_badge_color": "#B83375FF", - "navbar_logo": "image-2IqyhOl7b1bbMBEPS5JD0G2MrcW.png", - "navbar_links_color": "#000000FF", - "navbar_background_color": "#FFFFFFFF", - "navbar_height": 85, - "navbar_always_on_top": true - } - }, - "main-footer": { - "type": "main-footer", - "blocks": { - "block_e56ztxh3krc44so": { - "type": "column", - "settings": { - "block-title": "نبذة مختصرة عن متجرنا", - "description": "

متجرنا متخصص في بيع مجموعة متنوعة من الملابس للرجال والنساء والأطفال.<\/p>

نحن نقدم مزيجًا من الملابس الرسمية وغير الرسمية ، بدءًا من الجينز والقمصان إلى الفساتين والبدلات.<\/p>" - } - }, - "block_ocqzrg651kw4tf8": { - "type": "copyright", - "settings": { - "copyright": "

جميع الحقوق محفوظة © 2023<\/p>", - "copyright_additonal_image": "image-1-2KSUTbu7UzFbGW1h5Q1sHk9sYpH.png" - } - } - }, - "order": [ - "block_e56ztxh3krc44so", - "block_ocqzrg651kw4tf8" - ], - "settings": { - "footer_background_color": "#222222FF", - "footer_copyright_background": "#111111FF" - } - } - }, - "success_color": "#1EBA54FF", - "error_color": "#DF1E2FFF" - }, - "presets": { - "Default": {} - } + "current": { + "font_family": "Almarai", + "theme_direction": "rtl", + "primary_color": "#F33520", + "sections": { + "notice-bar": { + "type": "notice-bar", + "settings": { + "notice_bar_content_desktop": "

الشحن المجاني متاح لجميع الطلبات<\/p>", + "notice_bar_content_mobile": "

الشحن المجاني متاح لجميع الطلبات<\/p>", + "notice_bar_content_font_size_desktop": 13, + "notice_bar_content_font_size_mobile": 12, + "notice_bar_height_desktop": 45, + "notice_bar_height_mobile": 45, + "notice_bar_background_color_desktop": "#F33520FF", + "notice_bar_background_color_mobile": "#E72E25FF" + } + }, + "main-navbar": { + "type": "main-navbar", + "blocks": { + "block_gkk8ae6rzniqule": { + "type": "logo", + "settings": {} + }, + "block_glpfko4s63fm6kj": { + "type": "menu", + "settings": {} + }, + "block_gmrv273jdps9sso": { + "type": "search_and_cart", + "settings": {} + } + }, + "order": [ + "block_gkk8ae6rzniqule", + "block_glpfko4s63fm6kj", + "block_gmrv273jdps9sso" + ], + "settings": { + "cart_badge_color": "#B83375FF", + "navbar_logo": "image-2IqyhOl7b1bbMBEPS5JD0G2MrcW.png", + "navbar_links_color": "#000000FF", + "navbar_background_color": "#FFFFFFFF", + "navbar_height": 85, + "navbar_always_on_top": true + } + }, + "main-footer": { + "type": "main-footer", + "settings": { + "footer_background_color": "#000000", + "mention_and_social_media": true, + "mention": "

made with ❤️ by YouCan<\/p>" + }, + "blocks": { + "block_social": { + "type": "social-media", + "settings": { + "social_media_icon_image": "InstagramLogo-2Ls7ER18h4Gq3v3Ep9WbRtQJJfx.png" + } + }, + "block_nlltx86k7y4b93k": { + "type": "social-media", + "settings": { + "social_media_icon_image": "FacebookLogo-2Ls8VdaIiSBR4QDXchzGWkuNZgk.png" + } + }, + "block_o07mmbhyf997iu": { + "type": "social-media", + "settings": { + "social_media_icon_image": "WhatsappLogo-2Ls8YMiusO4JlG2IfHjxpaYXJke.png" + } + } + }, + "order": [ + "block_social", + "block_nlltx86k7y4b93k", + "block_o07mmbhyf997iu" + ] + } + }, + "success_color": "#1EBA54FF", + "error_color": "#DF1E2FFF" + }, + "presets": { + "Default": {} + } } diff --git a/sections/main-footer.liquid b/sections/main-footer.liquid index 2599d0df..76c95672 100644 --- a/sections/main-footer.liquid +++ b/sections/main-footer.liquid @@ -11,19 +11,18 @@ } {% endstyle %} -