DARK: Some slider content alignment changes

youcan-shop · Jan 3, 2024 · 1ad607e · 1ad607e
1 parent f734ebe
commit 1ad607e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/sections/desktop-slider.liquid b/sections/desktop-slider.liquid
@@ -1,6 +1,10 @@
 {% assign id = 100 | rand: 2000 %}
 
 {% style %}
+  .section-slider-{{ id }} #yc_slider_{{ id }} .splide__arrow {
+    --slider-height: {{- section.settings.slider_height_percentage -}}vh;
+  }
+
   .section-slider-{{ id }} #yc_slider_{{ id }} .splide__arrow svg {
     height: {{ section.settings.slider_arrows_size }}px;
     width: {{ section.settings.slider_arrows_size }}px;

diff --git a/snippets/slider.liquid b/snippets/slider.liquid
@@ -1,5 +1,23 @@
 {% assign count = 0 %}
 
+<style>
+.slide-box {
+  -webkit-justify-content: flex-end;
+  align-items: flex-end;
+  -webkit-align-items: flex-end;
+}
+
+.slide-content-box {
+  padding: 80px 20px;
+}
+
+.slide-content-box-button {
+  margin-top: calc(var(--slider-height) / 5);
+  width: max-content;
+  padding: 12px 42px;
+}
+</style>
+
 <div
   class='splide yc-slider__{{ view }}'
   id='yc_slider_{{ id }}'
@@ -17,15 +35,15 @@
             src='{%- if block.settings.image.src -%} {{ block.settings.image.src }} {%- else -%} {{ 'hero.png' | asset_url }} {%- endif -%}'
           >
           {%- if block.settings.caption %}
-            <div class='content flex items-center h-full w-full'>
-              <div class='container flex items-center justify-center'>
+            <div class='content flex items-center h-full w-full slide-box'>
+              <div class='container flex items-center justify-center slide-content-box'>
                 <div>
                   <div class='caption'>{{ block.settings.caption }}</div>
                   {% if block.settings.product %}
                     <div class='btn-holder'>
                       <a
                         href='{{ block.settings.product.url }}'
-                        class='yc-btn'
+                        class='yc-btn slide-content-box-button'
                         style='font-weight: {{ block.settings.button_font_weight }}!important'
                       >
                         {{ block.settings.button_text }}