Enhanced appearance

Author: natokpe

assets/css/style.css

@@ -7,7 +7,6 @@ import { EffectFade, Navigation, Pagination, Autoplay } from 'swiper/modules';
 $(document).ready(function() {
     "use strict";
 
-    const searchBarOpenClass    = 'searchbar-open';
     const mobileNavOpenClass    = 'mobile-nav-open';
     const splashscreenOpenClass = 'splashscreen';
     const pageScrollClass       = 'page-scroll';
@@ -52,18 +51,17 @@ $(document).ready(function() {
         },
     });
 
-    $(".backtotop").each(function (i, e)
+    $(".back-to-top").each(function (i, e)
     {
         $(this).on('click', function (e)
         {
-            e.preventDefault();
-            $(window).scrollTop = 0;
+            window.scrollTop = 0;
         });
     });
 
     var transformNavbar = function () {
         let $scr = $(window).scrollTop();
-        if ($scr > 0) {
+        if ($scr > 100) {
             $('body').addClass(pageScrollClass);
         } else {
             $('body').removeClass(pageScrollClass);
@@ -98,31 +96,6 @@ $(document).ready(function() {
         });
     });
 
-    $(".searchbar-close").each(function (i, e)
-    {
-        $(this).on('click', function (e)
-        {
-            $('body').removeClass(searchBarOpenClass);
-        });
-    });
-
-    $(".navbar .searchbar-toggle").each(function (i, e)
-    {
-        $(this).on('click', function (e)
-        {
-            $('body').toggleClass(searchBarOpenClass);
-        });
-    });
-
-    // $(".navbar .nav-search-toggle").each(function (i, e)
-    // {
-    //     $(this).on('click', function (e)
-    //     {
-    //         $('body').toggleClass(searchBarOpenClass);
-    //         console.log($(".navbar-search").children(".search-bar"));//.trigger("focus");
-    //     });
-    // });
-
     // $("body").on('click', function (e) {
     //     if ($('body').hasClass(searchBarOpenClass)) {
     //         var navSearch = $(".navbar-search .navbar-search-form, .navbar .nav-search-toggle");
@@ -134,35 +107,5 @@ $(document).ready(function() {
     //     }
     // });
 
-    // $(".navbar-search .navbar-search-form .search-bar").each(function (i, e)
-    // {
-    //     var fld = $(this);
-    //     var srh = fld.siblings("button[type=submit]");
-    //     var ico = srh.children(".fi");
-
-    //     fld.on('change keypress keyup', function (e)
-    //     {
-    //         if (fld.val().toString().length > 0) {
-    //             ico.removeClass("fi-rs-search").addClass("fi-rs-cross");
-    //         } else {
-    //             ico.removeClass("fi-rs-cross").addClass("fi-rs-search");
-    //         }
-    //     });
-
-    //     srh.on("click", function (e) {
-    //         e.preventDefault();
-
-    //         if (ico.hasClass("fi-rs-cross")) {
-    //             fld.val("");
-    //             ico.removeClass("fi-rs-cross").addClass("fi-rs-search");
-    //             fld.trigger("focus");
-
-    //             return false;
-    //         }
-
-    //         return true;
-    //     });
-    // });
-
     $('body').removeClass(splashscreenOpenClass);
 });

assets/fonts/OpenSans-Regular.eot

@@ -0,0 +1,89 @@
+@use 'variables' as *;
+
+.back-to-top {
+    position: fixed;
+    cursor: pointer;
+    bottom: 40px;
+    right: 16px;
+    color: #fff;
+    background-color: $color-primary;
+    z-index: $z-index-nav;
+    width: 40px;
+    text-align: center;
+    height: 40px;
+    line-height: 40px;
+    -webkit-transition: $transition;
+    transition: $transition;
+    border-radius: 50%;
+    opacity: 0;
+    visibility: hidden;
+
+    @at-root {
+        body.page-scroll-x100 & {
+            bottom: 70px;
+            opacity: 1;
+            visibility: visible;
+        }
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+        color: #fff;
+    }
+
+    &:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        background: #393953;
+        opacity: 0;
+        visibility: hidden;
+        -webkit-transition: 0.6s;
+        transition: 0.6s;
+        border-radius: 50%;
+    }
+
+    &:hover:before,
+    &:focus:before {
+        opacity: 1;
+        visibility: visible;
+    }
+
+    &:hover,
+    &:focus {
+        i:first-child {
+            opacity: 0;
+            top: 0;
+            visibility: hidden;
+        }
+
+        i:last-child {
+            opacity: 1;
+            visibility: visible;
+            top: 50%;
+        }
+    }
+
+    i {
+        position: absolute;
+        top: 50%;
+        -webkit-transform: translateY(-50%);
+        transform: translateY(-50%);
+        left: 0;
+        right: 0;
+        margin: 0 auto;
+        -webkit-transition: 0.6s;
+        transition: 0.6s;
+
+        &:last-child {
+            opacity: 0;
+            visibility: hidden;
+            top: 60%;
+        }
+    }
+}

assets/fonts/OpenSans-Regular.svg

@@ -0,0 +1,111 @@
+@use 'variables' as *;
+
+// .blog {
+//     margin: 0;
+//     padding: 0;
+//     width: 100%;
+//     display: block;
+//     background-color: $color-white;
+//     box-shadow: 6px 12px 24px rgba(0, 0, 0, 0.08);
+//     border-radius: $border-radius;
+//     overflow: hidden;
+
+//     &-image {
+//         margin: 0 0 10px;
+//         padding: 0;
+//         width: 100%;
+//         display: block;
+//         background-color: rgba(0, 0, 0, .1);
+//         overflow: hidden;
+//         position: relative;
+
+//         @include keep-aspect-ratio(60);
+
+//         img {
+//             margin: 0;
+//             display: block;
+//             width: 100%;
+//             height: 100%;
+//             object-fit: cover;
+//             position: absolute;
+//             top: 0;
+//             right: 0;
+//             bottom: 0;
+//             left: 0;
+//         }
+//     }
+
+//     &-body {
+//         padding: 16px;
+//     }
+
+//     &-tax {
+//         margin: 0 0 16px;
+//         padding: 0;
+//         width: 100%;
+//     }
+
+//     &-title {
+//         margin: 0;
+//         padding: 0;
+//         width: 100%;
+//         height: 70px;
+//         overflow: hidden;
+
+//         &:hover,
+//         &:focus,
+//         &:active {
+//             // color: $color-primary;
+//         }
+
+//         a {
+//             // display: inline-block;
+//             color: inherit;
+
+//             // @include text-ellipsis();
+//         }
+//     }
+
+//     &-excerpt {
+//         // display: inline-block;
+//         height: 48px;
+//         overflow: hidden;
+
+//         // @include text-ellipsis();
+//     }
+
+//     &-footer {
+//         margin: 0;
+//         padding: 16px;
+//     }
+
+//     &-date {
+//         margin: 0;
+//         padding: 0;
+//         display: flex;
+//         justify-content: flex-start;
+//         align-items: center;
+//         align-content: center;
+//         color: $color-text-normal;
+
+//         i {
+//             display: inline-block;
+//         }
+
+//         .date {
+//             margin: 0 {
+//                 left: 10px;
+//             };
+//             padding: 0;
+//             display: inline-block;
+//             font-size: $font-size;
+//         }
+//     }
+
+//     &-action {
+//         margin: 20px 0 0;
+//         padding: 0;
+//         display: block;
+//         align-items: left;
+//     }
+// }

assets/fonts/OpenSans-Regular.ttf

@@ -0,0 +1,42 @@
+@use 'variables' as *;
+
+.breadcrumb {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+
+    ol {
+        margin: 0;
+        padding: 0;
+        display: block;
+        width: 100%;
+        list-style-type: none;
+
+        li {
+            margin: 0;
+            padding: 0;
+            display: inline-block;
+            color: $color-white;
+
+            &.active {
+                // color: $color-text-normal;
+            }
+
+            &:not(:last-child):after {
+                font-size: 14px;
+                margin: 0 10px;
+                @include icon-font("\f061");
+            }
+
+            a {
+                color: inherit;
+
+                &:hover,
+                &:focus,
+                &:active {
+                    color: $color-primary;
+                }
+            }
+        }
+    }
+}