diff --git a/layout/theme.liquid b/layout/theme.liquid index 5f64718..d87273f 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -153,143 +153,137 @@ --media-shadow-blur-radius: {{ settings.media_shadow_blur }}px; --media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %}; - --page-width: {{ settings.page_width | divided_by: 10 }}rem; - --page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem; + --page-width: {{ settings.page_width | divided_by: 10 }}rem; + --page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem; - --product-card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem; - --product-card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem; - --product-card-text-alignment: {{ settings.card_text_alignment }}; - --product-card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem; - --product-card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }}; - --product-card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }}; - --product-card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %}; - --product-card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem; - --product-card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem; - --product-card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem; + --product-card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem; + --product-card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem; + --product-card-text-alignment: {{ settings.card_text_alignment }}; + --product-card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem; + --product-card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }}; + --product-card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }}; + --product-card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %}; + --product-card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem; + --product-card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem; + --product-card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem; - --collection-card-image-padding: {{ settings.collection_card_image_padding | divided_by: 10.0 }}rem; - --collection-card-corner-radius: {{ settings.collection_card_corner_radius | divided_by: 10.0 }}rem; - --collection-card-text-alignment: {{ settings.collection_card_text_alignment }}; - --collection-card-border-width: {{ settings.collection_card_border_thickness | divided_by: 10.0 }}rem; - --collection-card-border-opacity: {{ settings.collection_card_border_opacity | divided_by: 100.0 }}; - --collection-card-shadow-opacity: {{ settings.collection_card_shadow_opacity | divided_by: 100.0 }}; - --collection-card-shadow-visible: {% if settings.collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %}; - --collection-card-shadow-horizontal-offset: {{ settings.collection_card_shadow_horizontal_offset | divided_by: 10.0 }}rem; - --collection-card-shadow-vertical-offset: {{ settings.collection_card_shadow_vertical_offset | divided_by: 10.0 }}rem; - --collection-card-shadow-blur-radius: {{ settings.collection_card_shadow_blur | divided_by: 10.0 }}rem; + --collection-card-image-padding: {{ settings.collection_card_image_padding | divided_by: 10.0 }}rem; + --collection-card-corner-radius: {{ settings.collection_card_corner_radius | divided_by: 10.0 }}rem; + --collection-card-text-alignment: {{ settings.collection_card_text_alignment }}; + --collection-card-border-width: {{ settings.collection_card_border_thickness | divided_by: 10.0 }}rem; + --collection-card-border-opacity: {{ settings.collection_card_border_opacity | divided_by: 100.0 }}; + --collection-card-shadow-opacity: {{ settings.collection_card_shadow_opacity | divided_by: 100.0 }}; + --collection-card-shadow-visible: {% if settings.collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %}; + --collection-card-shadow-horizontal-offset: {{ settings.collection_card_shadow_horizontal_offset | divided_by: 10.0 }}rem; + --collection-card-shadow-vertical-offset: {{ settings.collection_card_shadow_vertical_offset | divided_by: 10.0 }}rem; + --collection-card-shadow-blur-radius: {{ settings.collection_card_shadow_blur | divided_by: 10.0 }}rem; - --blog-card-image-padding: {{ settings.blog_card_image_padding | divided_by: 10.0 }}rem; - --blog-card-corner-radius: {{ settings.blog_card_corner_radius | divided_by: 10.0 }}rem; - --blog-card-text-alignment: {{ settings.blog_card_text_alignment }}; - --blog-card-border-width: {{ settings.blog_card_border_thickness | divided_by: 10.0 }}rem; - --blog-card-border-opacity: {{ settings.blog_card_border_opacity | divided_by: 100.0 }}; - --blog-card-shadow-opacity: {{ settings.blog_card_shadow_opacity | divided_by: 100.0 }}; - --blog-card-shadow-visible: {% if settings.blog_card_shadow_opacity > 0 %}1{% else %}0{% endif %}; - --blog-card-shadow-horizontal-offset: {{ settings.blog_card_shadow_horizontal_offset | divided_by: 10.0 }}rem; - --blog-card-shadow-vertical-offset: {{ settings.blog_card_shadow_vertical_offset | divided_by: 10.0 }}rem; - --blog-card-shadow-blur-radius: {{ settings.blog_card_shadow_blur | divided_by: 10.0 }}rem; + --blog-card-image-padding: {{ settings.blog_card_image_padding | divided_by: 10.0 }}rem; + --blog-card-corner-radius: {{ settings.blog_card_corner_radius | divided_by: 10.0 }}rem; + --blog-card-text-alignment: {{ settings.blog_card_text_alignment }}; + --blog-card-border-width: {{ settings.blog_card_border_thickness | divided_by: 10.0 }}rem; + --blog-card-border-opacity: {{ settings.blog_card_border_opacity | divided_by: 100.0 }}; + --blog-card-shadow-opacity: {{ settings.blog_card_shadow_opacity | divided_by: 100.0 }}; + --blog-card-shadow-visible: {% if settings.blog_card_shadow_opacity > 0 %}1{% else %}0{% endif %}; + --blog-card-shadow-horizontal-offset: {{ settings.blog_card_shadow_horizontal_offset | divided_by: 10.0 }}rem; + --blog-card-shadow-vertical-offset: {{ settings.blog_card_shadow_vertical_offset | divided_by: 10.0 }}rem; + --blog-card-shadow-blur-radius: {{ settings.blog_card_shadow_blur | divided_by: 10.0 }}rem; - --badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem; + --badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem; - --popup-border-width: {{ settings.popup_border_thickness }}px; - --popup-border-opacity: {{ settings.popup_border_opacity | divided_by: 100.0 }}; - --popup-corner-radius: {{ settings.popup_corner_radius }}px; - --popup-shadow-opacity: {{ settings.popup_shadow_opacity | divided_by: 100.0 }}; - --popup-shadow-horizontal-offset: {{ settings.popup_shadow_horizontal_offset }}px; - --popup-shadow-vertical-offset: {{ settings.popup_shadow_vertical_offset }}px; - --popup-shadow-blur-radius: {{ settings.popup_shadow_blur }}px; + --popup-border-width: {{ settings.popup_border_thickness }}px; + --popup-border-opacity: {{ settings.popup_border_opacity | divided_by: 100.0 }}; + --popup-corner-radius: {{ settings.popup_corner_radius }}px; + --popup-shadow-opacity: {{ settings.popup_shadow_opacity | divided_by: 100.0 }}; + --popup-shadow-horizontal-offset: {{ settings.popup_shadow_horizontal_offset }}px; + --popup-shadow-vertical-offset: {{ settings.popup_shadow_vertical_offset }}px; + --popup-shadow-blur-radius: {{ settings.popup_shadow_blur }}px; - --drawer-border-width: {{ settings.drawer_border_thickness }}px; - --drawer-border-opacity: {{ settings.drawer_border_opacity | divided_by: 100.0 }}; - --drawer-shadow-opacity: {{ settings.drawer_shadow_opacity | divided_by: 100.0 }}; - --drawer-shadow-horizontal-offset: {{ settings.drawer_shadow_horizontal_offset }}px; - --drawer-shadow-vertical-offset: {{ settings.drawer_shadow_vertical_offset }}px; - --drawer-shadow-blur-radius: {{ settings.drawer_shadow_blur }}px; + --drawer-border-width: {{ settings.drawer_border_thickness }}px; + --drawer-border-opacity: {{ settings.drawer_border_opacity | divided_by: 100.0 }}; + --drawer-shadow-opacity: {{ settings.drawer_shadow_opacity | divided_by: 100.0 }}; + --drawer-shadow-horizontal-offset: {{ settings.drawer_shadow_horizontal_offset }}px; + --drawer-shadow-vertical-offset: {{ settings.drawer_shadow_vertical_offset }}px; + --drawer-shadow-blur-radius: {{ settings.drawer_shadow_blur }}px; - --spacing-sections-desktop: {{ settings.spacing_sections }}px; - --spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }} -{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }} -{% endif %}px; + --spacing-sections-desktop: {{ settings.spacing_sections }}px; + --spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}{% endif %}px; + + --grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px; + --grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px; + --grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px; + --grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px; - --grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px; - --grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px; - --grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px; - --grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px; + --text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }}; + --text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px; + --text-boxes-radius: {{ settings.text_boxes_radius }}px; + --text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }}; + --text-boxes-shadow-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %}; + --text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px; + --text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px; + --text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px; - --text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }}; - --text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px; - --text-boxes-radius: {{ settings.text_boxes_radius }}px; - --text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }}; - --text-boxes-shadow-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %}; - --text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px; - --text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px; - --text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px; + --buttons-radius: {{ settings.buttons_radius }}px; + --buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }}{% else %}0{% endif %}px; + --buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px; + --buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }}; + --buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }}; + --buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %}; + --buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px; + --buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px; + --buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px; + --buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px; - --buttons-radius: {{ settings.buttons_radius }}px; - --buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }} -{% else %}0{% endif %}px; - --buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }} -{% else %}0{% endif %}px; - --buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }}; - --buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }}; - --buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %}; - --buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px; - --buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px; - --buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px; - --buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px; + --inputs-radius: {{ settings.inputs_radius }}px; + --inputs-border-width: {{ settings.inputs_border_thickness }}px; + --inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }}; + --inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }}; + --inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px; + --inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }}{% else %}0{% endif %}px; + --inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px; + --inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px; + --inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }}{% else %}0{% endif %}px; - --inputs-radius: {{ settings.inputs_radius }}px; - --inputs-border-width: {{ settings.inputs_border_thickness }}px; - --inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }}; - --inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }}; - --inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px; - --inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }} -{% else %}0{% endif %}px; - --inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px; - --inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px; - --inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }} -{% else %}0{% endif %}px; + --variant-pills-radius: {{ settings.variant_pills_radius }}px; + --variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px; + --variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }}; + --variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }}; + --variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px; + --variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px; + --variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px; + } - --variant-pills-radius: {{ settings.variant_pills_radius }}px; - --variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px; - --variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }}; - --variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }}; - --variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px; - --variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px; - --variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px; -} + *, + *::before, + *::after { + box-sizing: inherit; + } -*, -*::before, -*::after { - box-sizing: inherit; -} + html { + box-sizing: border-box; + font-size: calc(var(--font-body-scale) * 62.5%); + height: 100%; + } -html { - box-sizing: border-box; - font-size: calc(var(--font-body-scale) * 62.5%); - height: 100%; -} + body { + display: grid; + grid-template-rows: auto auto 1fr auto; + grid-template-columns: 100%; + min-height: 100%; + margin: 0; + font-size: 1.5rem; + letter-spacing: 0.06rem; + line-height: calc(1 + 0.8 / var(--font-body-scale)); + font-family: var(--font-body-family); + font-style: var(--font-body-style); + font-weight: var(--font-body-weight); + } -body { - display: grid; - grid-template-rows: auto auto 1fr auto; - grid-template-columns: 100%; - min-height: 100%; - margin: 0; - font-size: 1.5rem; - letter-spacing: 0.06rem; - line-height: calc(1 + 0.8 / var(--font-body-scale)); - font-family: var(--font-body-family); - font-style: var(--font-body-style); - font-weight: var(--font-body-weight); -} - -@media screen and (min-width: 750px) { - body { - font-size: 1.6rem; - } -} + @media screen and (min-width: 750px) { + body { + font-size: 1.6rem; + } + } {% endstyle %} {{ 'base.css' | asset_url | stylesheet_tag }}