appscms-tools-theme 4.0.3 → 4.0.4

data/_includes/infographics/infographics.html

@@ -1,231 +1,231 @@
-<style>
-    .inforgraphics_section {
-        width: 100%;
-        padding: 50px 0px 50px 0px;
-        border-top: 1px solid rgb(224, 224, 224);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .inforgraphics_section .wrapper {
-        display: flex;
-        max-width: 700px;
-        position: relative;
-    }
-
-    .inforgraphics_section .wrapper i {
-        top: 50%;
-        height: 44px;
-        width: 44px;
-        color: #343F4F;
-        cursor: pointer;
-        font-size: 1.15rem;
-        position: absolute;
-        text-align: center;
-        line-height: 44px;
-        background: #eee;
-        border-radius: 50%;
-        transform: translateY(-50%);
-        transition: transform 0.1s linear;
-    }
-
-    .inforgraphics_section .wrapper i:active {
-        transform: translateY(-50%) scale(0.9);
-    }
-
-    .inforgraphics_section .wrapper i:hover {
-        background: #f2f2f2;
-    }
-
-    .inforgraphics_section .wrapper i:first-child {
-        left: 0px;
-        display: none;
-        z-index: 999;
-    }
-
-    .inforgraphics_section .wrapper i:last-child {
-        right: 0px;
-    }
-
-    .carousel {
-        display: flex;
-        max-width: 700px;
-        overflow-x: scroll;
-        scroll-snap-type: x mandatory;
-        scroll-behavior: smooth;
-    }
-
-    .carousel-inner {
-        display: flex;
-        flex-wrap: nowrap;
-    }
-
-    .slide {
-        flex: 0 0 calc(100% / 3);
-        scroll-snap-align: start;
-        padding: 20px;
-    }
-
-    .carousel img {
-        width: 100%;
-        object-fit: contain;
-        max-width: 100%;
-        height: auto;
-        border-radius: 8px;
-    }
-
-    .carousel-inner p {
-        text-align: center;
-        margin: 10px 0;
-        font-size: 14px;
-        white-space: normal;
-        word-wrap: break-word;
-    }
-
-    @media screen and (max-width: 768px) {
-        .inforgraphics_section .wrapper {
-            max-width: 100%;
-        }
-
-
-        .carousel-inner p {
-            font-size: 20px;
-        }
-
-        .inforgraphics_section .wrapper i:first-child {
-            left: 0;
-            /* margin-left: 14px; */
-            z-index: 99;
-        }
-
-        .inforgraphics_section .wrapper i:last-child {
-            right: 0;
-            z-index: 99;
-            display: block !important;
-        }
-
-        .carousel {
-            overflow-x: hidden;
-        }
-
-        .slide {
-            flex: 0 0 100%;
-            margin-right: 0;
-        }
-    }
-</style>
-
-<div class="inforgraphics_section">
-    <h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
-    <div class="wrapper">
-        <i id="left" class="fas fa-angle-left"></i>
-        <div class="carousel">
-            <div class="carousel-inner">
-                {%- if homeData.infographics -%}
-                {% for item in homeData.infographics %}
-                <div class="slide">
-                    <img src="{{ item.image }}" alt="img" draggable="false">
-                    <p class="infographic-desc">{{ item.description | capitalize }}</p>
-                </div>
-                {% endfor %}
-                {%- else -%}
-                {% for item in featureData.infographics %}
-                <div class="slide">
-                    <img src="{{ item.image }}" alt="img" draggable="false">
-                    <p class="infographic-desc">{{ item.description | capitalize }}</p>
-                </div>
-                {% endfor %}
-                {%- endif -%}
-            </div>
-        </div>
-        <i id="right" class="fas fa-angle-right"></i>
-    </div>
-</div>
-
-<script>
-    const carousel = document.querySelector(".carousel-inner"),
-        firstImg = carousel.querySelectorAll("img")[0],
-        arrowIcons = document.querySelectorAll(".wrapper i")
-
-    const numImages = carousel.querySelectorAll("img").length;
-    const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
-
-    if (numImages > 3) {
-        arrowIcons[1].style.display = "block"
-    } else {
-        arrowIcons[0].style.display = "none";
-        arrowIcons[1].style.display = "none";
-    }
-
-    let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;
-    const showHideIcons = () => {
-        let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
-        arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
-        arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";
-    }
-
-    arrowIcons.forEach(icon => {
-        icon.addEventListener("click", () => {
-            let firstImgWidth = firstImg.clientWidth + 40;
-            const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
-            carousel.scrollBy({
-                left: scrollAmount,
-                behavior: "smooth",
-            });
-            setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
-        });
-    });
-
-    // const autoSlide = () => {
-    //   // if there is no image left to scroll then return from here
-    //   if (carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
-
-    //   positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
-    //   let firstImgWidth = firstImg.clientWidth + 14;
-    //   // getting difference value that needs to add or reduce from carousel left to take middle img center
-    //   let valDifference = firstImgWidth - positionDiff;
-
-    //   if (carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
-    //     return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
-    //   }
-    //   // if user is scrolling to the left
-    //   carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
-    // }
-
-    // const dragStart = (e) => {
-    //   // updatating global variables value on mouse down event
-    //   isDragStart = true;
-    //   prevPageX = e.pageX || e.touches[0].pageX;
-    //   prevScrollLeft = carousel.scrollLeft;
-    // }
-
-    // const dragging = (e) => {
-    //   // scrolling images/carousel to left according to mouse pointer
-    //   if (!isDragStart) return;
-    //   e.preventDefault();
-    //   isDragging = true;
-    //   carousel.classList.add("dragging");
-    //   positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
-    //   carousel.scrollLeft = prevScrollLeft - positionDiff;
-    //   showHideIcons();
-    // }
-
-    // const dragStop = () => {
-    //   isDragStart = false;
-    //   carousel.classList.remove("dragging");
-
-    //   if (!isDragging) return;
-    //   isDragging = false;
-    //   autoSlide();
-    // }
-
-    // carousel.addEventListener("mousedown", dragStart);
-    // carousel.addEventListener("touchstart", dragStart);
-
-    // document.addEventListener("mousemove", dragging);
-    // carousel.addEventListener("touchmove", dragging);
-
-    // document.addEventListener("mouseup", dragStop);
-    // carousel.addEventListener("touchend", dragStop);
+<style>
+    .inforgraphics_section {
+        width: 100%;
+        padding: 50px 0px 50px 0px;
+        border-top: 1px solid rgb(224, 224, 224);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .inforgraphics_section .wrapper {
+        display: flex;
+        max-width: 700px;
+        position: relative;
+    }
+
+    .inforgraphics_section .wrapper i {
+        top: 50%;
+        height: 44px;
+        width: 44px;
+        color: #343F4F;
+        cursor: pointer;
+        font-size: 1.15rem;
+        position: absolute;
+        text-align: center;
+        line-height: 44px;
+        background: #eee;
+        border-radius: 50%;
+        transform: translateY(-50%);
+        transition: transform 0.1s linear;
+    }
+
+    .inforgraphics_section .wrapper i:active {
+        transform: translateY(-50%) scale(0.9);
+    }
+
+    .inforgraphics_section .wrapper i:hover {
+        background: #f2f2f2;
+    }
+
+    .inforgraphics_section .wrapper i:first-child {
+        left: 0px;
+        display: none;
+        z-index: 999;
+    }
+
+    .inforgraphics_section .wrapper i:last-child {
+        right: 0px;
+    }
+
+    .carousel {
+        display: flex;
+        max-width: 700px;
+        overflow-x: scroll;
+        scroll-snap-type: x mandatory;
+        scroll-behavior: smooth;
+    }
+
+    .carousel-inner {
+        display: flex;
+        flex-wrap: nowrap;
+    }
+
+    .slide {
+        flex: 0 0 calc(100% / 3);
+        scroll-snap-align: start;
+        padding: 20px;
+    }
+
+    .carousel img {
+        width: 100%;
+        object-fit: contain;
+        max-width: 100%;
+        height: auto;
+        border-radius: 8px;
+    }
+
+    .carousel-inner p {
+        text-align: center;
+        margin: 10px 0;
+        font-size: 14px;
+        white-space: normal;
+        word-wrap: break-word;
+    }
+
+    @media screen and (max-width: 768px) {
+        .inforgraphics_section .wrapper {
+            max-width: 100%;
+        }
+
+
+        .carousel-inner p {
+            font-size: 20px;
+        }
+
+        .inforgraphics_section .wrapper i:first-child {
+            left: 0;
+            /* margin-left: 14px; */
+            z-index: 99;
+        }
+
+        .inforgraphics_section .wrapper i:last-child {
+            right: 0;
+            z-index: 99;
+            display: block !important;
+        }
+
+        .carousel {
+            overflow-x: hidden;
+        }
+
+        .slide {
+            flex: 0 0 100%;
+            margin-right: 0;
+        }
+    }
+</style>
+
+<div class="inforgraphics_section">
+    <h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
+    <div class="wrapper">
+        <i id="left" class="fas fa-angle-left"></i>
+        <div class="carousel">
+            <div class="carousel-inner">
+                {%- if homeData.infographics -%}
+                {% for item in homeData.infographics %}
+                <div class="slide">
+                    <img src="{{ item.image }}" alt="img" draggable="false">
+                    <p class="infographic-desc">{{ item.description | capitalize }}</p>
+                </div>
+                {% endfor %}
+                {%- else -%}
+                {% for item in featureData.infographics %}
+                <div class="slide">
+                    <img src="{{ item.image }}" alt="img" draggable="false">
+                    <p class="infographic-desc">{{ item.description | capitalize }}</p>
+                </div>
+                {% endfor %}
+                {%- endif -%}
+            </div>
+        </div>
+        <i id="right" class="fas fa-angle-right"></i>
+    </div>
+</div>
+
+<script>
+    const carousel = document.querySelector(".carousel-inner"),
+        firstImg = carousel.querySelectorAll("img")[0],
+        arrowIcons = document.querySelectorAll(".wrapper i")
+
+    const numImages = carousel.querySelectorAll("img").length;
+    const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
+
+    if (numImages > 3) {
+        arrowIcons[1].style.display = "block"
+    } else {
+        arrowIcons[0].style.display = "none";
+        arrowIcons[1].style.display = "none";
+    }
+
+    let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;
+    const showHideIcons = () => {
+        let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
+        arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
+        arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";
+    }
+
+    arrowIcons.forEach(icon => {
+        icon.addEventListener("click", () => {
+            let firstImgWidth = firstImg.clientWidth + 40;
+            const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
+            carousel.scrollBy({
+                left: scrollAmount,
+                behavior: "smooth",
+            });
+            setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
+        });
+    });
+
+    // const autoSlide = () => {
+    //   // if there is no image left to scroll then return from here
+    //   if (carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
+
+    //   positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
+    //   let firstImgWidth = firstImg.clientWidth + 14;
+    //   // getting difference value that needs to add or reduce from carousel left to take middle img center
+    //   let valDifference = firstImgWidth - positionDiff;
+
+    //   if (carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
+    //     return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
+    //   }
+    //   // if user is scrolling to the left
+    //   carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
+    // }
+
+    // const dragStart = (e) => {
+    //   // updatating global variables value on mouse down event
+    //   isDragStart = true;
+    //   prevPageX = e.pageX || e.touches[0].pageX;
+    //   prevScrollLeft = carousel.scrollLeft;
+    // }
+
+    // const dragging = (e) => {
+    //   // scrolling images/carousel to left according to mouse pointer
+    //   if (!isDragStart) return;
+    //   e.preventDefault();
+    //   isDragging = true;
+    //   carousel.classList.add("dragging");
+    //   positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
+    //   carousel.scrollLeft = prevScrollLeft - positionDiff;
+    //   showHideIcons();
+    // }
+
+    // const dragStop = () => {
+    //   isDragStart = false;
+    //   carousel.classList.remove("dragging");
+
+    //   if (!isDragging) return;
+    //   isDragging = false;
+    //   autoSlide();
+    // }
+
+    // carousel.addEventListener("mousedown", dragStart);
+    // carousel.addEventListener("touchstart", dragStart);
+
+    // document.addEventListener("mousemove", dragging);
+    // carousel.addEventListener("touchmove", dragging);
+
+    // document.addEventListener("mouseup", dragStop);
+    // carousel.addEventListener("touchend", dragStop);
 </script>

data/_includes/paginationBlogPage.html

@@ -1,70 +1,70 @@
-<!-- pagination -->
-<div class="bottompagination">
-  <div class="pointerup"><i class="fa fa-caret-up"></i></div>
-  <span class="navigation" role="navigation"></span>
-</div>
-
-{%- if page.layout == "blog-1" -%} {%- assign color = site.data.blog.blog.color
--%} {% if paginator.total_pages > 1 %}
-<div class="blog-pagination">
-  {% if paginator.previous_page %}
-  <a
-    style="color: {{color}}; font-weight: 900;"
-    href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}"
-    >&laquo; Prev</a
-  >
-  {% else %}
-  <span class="text-muted">&laquo; Prev</span>
-  {% endif %} {% for page in (1..paginator.total_pages) %} {% if page ==
-  paginator.page %}
-  <span class="webjeda text-muted">{{ page }}</span>
-  {% elsif page == 1 %}
-  <a href="/blog" style="color: {{color}}; font-weight: 900;">{{ page }}</a>
-  {% else %}
-  <a
-    style="color: {{color}}; font-weight: 900;"
-    href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}"
-    >{{ page }}</a
-  >
-  {% endif %} {% endfor %} {% if paginator.next_page %}
-  <a
-    style="color:{{color}}; font-weight: 900;"
-    href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}"
-    >Next &raquo;</a
-  >
-  {% else %}
-  <span class="text-muted">Next &raquo;</span>
-  {% endif %}
-</div>
-{% endif %} {%- else -%} {% if paginator.total_pages > 1 %}
-<div class="blog-pagination">
-  {% if paginator.previous_page %}
-  <a
-    style="color: #000; font-weight: 900"
-    href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}"
-    >&laquo; Prev</a
-  >
-  {% else %}
-  <span class="text-muted">&laquo; Prev</span>
-  {% endif %} {% for page in (1..paginator.total_pages) %} {% if page ==
-  paginator.page %}
-  <span class="webjeda text-muted">{{ page }}</span>
-  {% elsif page == 1 %}
-  <a href="/blog" style="color: #000; font-weight: 900">{{ page }}</a>
-  {% else %}
-  <a
-    style="color: #000; font-weight: 900"
-    href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}"
-    >{{ page }}</a
-  >
-  {% endif %} {% endfor %} {% if paginator.next_page %}
-  <a
-    style="color: #000; font-weight: 900"
-    href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}"
-    >Next &raquo;</a
-  >
-  {% else %}
-  <span class="text-muted">Next &raquo;</span>
-  {% endif %}
-</div>
-{% endif %} {%- endif -%}
+<!-- pagination -->
+<div class="bottompagination">
+  <div class="pointerup"><i class="fa fa-caret-up"></i></div>
+  <span class="navigation" role="navigation"></span>
+</div>
+
+{%- if page.layout == "blog-1" -%} {%- assign color = site.data.blog.blog.color
+-%} {% if paginator.total_pages > 1 %}
+<div class="blog-pagination">
+  {% if paginator.previous_page %}
+  <a
+    style="color: {{color}}; font-weight: 900;"
+    href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}"
+    >&laquo; Prev</a
+  >
+  {% else %}
+  <span class="text-muted">&laquo; Prev</span>
+  {% endif %} {% for page in (1..paginator.total_pages) %} {% if page ==
+  paginator.page %}
+  <span class="webjeda text-muted">{{ page }}</span>
+  {% elsif page == 1 %}
+  <a href="/blog" style="color: {{color}}; font-weight: 900;">{{ page }}</a>
+  {% else %}
+  <a
+    style="color: {{color}}; font-weight: 900;"
+    href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}"
+    >{{ page }}</a
+  >
+  {% endif %} {% endfor %} {% if paginator.next_page %}
+  <a
+    style="color:{{color}}; font-weight: 900;"
+    href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}"
+    >Next &raquo;</a
+  >
+  {% else %}
+  <span class="text-muted">Next &raquo;</span>
+  {% endif %}
+</div>
+{% endif %} {%- else -%} {% if paginator.total_pages > 1 %}
+<div class="blog-pagination">
+  {% if paginator.previous_page %}
+  <a
+    style="color: #000; font-weight: 900"
+    href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}"
+    >&laquo; Prev</a
+  >
+  {% else %}
+  <span class="text-muted">&laquo; Prev</span>
+  {% endif %} {% for page in (1..paginator.total_pages) %} {% if page ==
+  paginator.page %}
+  <span class="webjeda text-muted">{{ page }}</span>
+  {% elsif page == 1 %}
+  <a href="/blog" style="color: #000; font-weight: 900">{{ page }}</a>
+  {% else %}
+  <a
+    style="color: #000; font-weight: 900"
+    href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}"
+    >{{ page }}</a
+  >
+  {% endif %} {% endfor %} {% if paginator.next_page %}
+  <a
+    style="color: #000; font-weight: 900"
+    href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}"
+    >Next &raquo;</a
+  >
+  {% else %}
+  <span class="text-muted">Next &raquo;</span>
+  {% endif %}
+</div>
+{% endif %} {%- endif -%}