jekyll-theme-saifas 0.1.6 → 1.0.0

data/_sass/_base.sass

@@ -1,216 +1,17 @@
 //Base fonts import
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap')
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap')
-
+  
 *
   margin: 0
-  box-sizing: border-box
-
-html
-  height: 100%
   padding: 0
-  margin: 0
-  font-family: var(--main-font-family)
-  background: white
+  box-sizing: border-box
 
 body
   display: flex
   flex-direction: column
   min-height: 100vh
   font-family: var(--main-font-family)
-  background: white
-
-iframe
-  flex: 1
-
-.cards__container
-  display: flex
-  flex: 4
-  flex-direction: row
-  flex-wrap: wrap
-  justify-content: center
-  /* max-width: 1268px */
-
-.custom-visual__card, .custom-visual-report__card
-  display: flex
-  flex-direction: column
-  background-color: var(--color-grey)
-  width: 300px
-  height: 300px
-  margin: 10px
-  padding: 20px
-  border-radius: 5px
-  -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
-  -moz-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
-  -o-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -o-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
-  -ms-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -ms-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
-  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
-  -webkit-transition-delay: 0s
-  -moz-transition-delay: 0s
-  -o-transition-delay: 0s
-  -ms-transition-delay: 0s
-  transition-delay: 0s
-  -webkit-transform: translateY(0px)
-  -moz-transform: translateY(0px)
-  -o-transform: translateY(0px)
-  -ms-transform: translateY(0px)
-  transform: translateY(0px)
-  cursor: pointer
-  &:hover
-    -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
-    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
-    background: rgba(200,200,200,0.2)
-    -webkit-transform: translateY(-1px)
-    -moz-transform: translateY(-1px)
-    -o-transform: translateY(-1px)
-    -ms-transform: translateY(-1px)
-    transform: translateY(-1px)
-
-.card__top-section
-  display: flex
-
-.top-section__icon
-  img
-    height: 64px
-    width: 64px
-    border-radius: 10px
-
-.top-section__title
-  display: flex
-  flex-direction: column
-  padding-left: 10px
-  font-family: var(--main-font-family)
-  font-size: 20px
-  color: var(--text-color)
-  width: 100%
-
-.top-section__description
-  font-size: 14px
-  font-weight: 400
-  margin-top: 6px
-  img
-    width: 14px
-    height: 14px
-
-.main-section
-  display: flex
-  flex-direction: column
-  margin-top: 10px
-
-.main-section__description
-  font-size: 16px
-  color: var(--text-color)
-
-.cards-section
-  display: none
-  height: 100%
-  align-items: flex-end
-
-.report-cards-section
-  display: none
-  height: 100%
-  align-items: center
-  flex-direction: column
-  justify-content: flex-end
-  .cards-section__top
-    width: 100%
-    a
-      margin: 0 5px
-      width: auto
-      padding: 0
-  .cards-section__bottom
-    margin-top: 10px
-    width: 100%
-    display: flex
-    a
-      margin: 0
-      width: 100%
-      margin: 0 5px
-
-.custom-visual__card:hover
-  .cards-section
-    display: flex
-
-.custom-visual-report__card:hover
-  .report-cards-section
-    display: flex
-
-.body-separator
-  height: 2px
-  background-color: var(--color-grey)
-  margin: 20px
-
-.contact-link-container
-  display: flex
-  align-items: center
-  justify-content: center
-  border: 2px solid var(--color-grey)
-  height: 64px
-  border-radius: 5px
-
-.contact-link-container__link
-  font-style: normal
-  margin: 0 20px
-
-.card
-  display: flex
-  flex-direction: column
-  background-color: var(--color-grey)
-  margin: 10px
-  padding: 20px
-  height: fit-content
-  border-radius: 5px
-  min-width: 295px
-  -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
-  -moz-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
-  -o-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -o-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
-  -ms-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -ms-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
-  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
-  -webkit-transition-delay: 0s
-  -moz-transition-delay: 0s
-  -o-transition-delay: 0s
-  -ms-transition-delay: 0s
-  transition-delay: 0s
-  -webkit-transform: translateY(0px)
-  -moz-transform: translateY(0px)
-  -o-transform: translateY(0px)
-  -ms-transform: translateY(0px)
-  transform: translateY(0px)
-  .btn
-    margin-top: 10px
-  &:hover
-    -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
-    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
-    background: rgba(200,200,200,0.2)
-    -webkit-transform: translateY(-1px)
-    -moz-transform: translateY(-1px)
-    -o-transform: translateY(-1px)
-    -ms-transform: translateY(-1px)
-    transform: translateY(-1px)
-    .card__description
-      display: none
-    .card__buttons-container
-      display: flex
-    .card__buttons-container
-      transition: .3s
-      opacity: 1
-
-.card__title
-  color: var(--text-color)
-  font-size: var(--font-size-title)
-  margin-bottom: 20px
-
-.card__description
-  color: var(--text-color)
-  font-size: var(--font-size-description)
-  margin-top: 20px
-  height: 40px
-
-.home-body
-  display: flex
-  align-items: center
-  justify-content: center
-  flex-direction: column
 
 .headline
   margin: 18px
@@ -221,257 +22,6 @@ iframe
   font-size: 30px
   color: var(--text-color)
 
-.card__image
-  display: flex
-  justify-content: center
-  img
-    width: 100%
-    max-width: 200px
-    height: auto
-
-.footer__contact-us
-  display: flex
-  height: 100%
-  width: fit-content
-  font-family: var(--main-font-family)
-  align-items: center
-  margin-left: 20px
-  font-style: normal
-
-.watermark
-  display: flex
-  font-family: var(--main-font-family)
-  margin-right: 20px
-
-.details__card
-  margin: 20px
-  display: flex
-  background-color: var(--color-grey)
-  padding: 20px
-
-.details__card-text
-  margin-left: 20px
-  a
-    margin-top: 20px
-
-.details__card-title
-  color: var(--text-color)
-  font-size: var(--font-size-title)
-
-.details__card-description
-  color: var(--text-color)
-  font-size: var(--font-size-description)
-  margin-top: 10px
-  img
-    height: 14px
-    width: 14px
-
-
-.details__card-image
-  img
-    width: 150px
-    height: auto
-
-.details__card-buttons
-  margin-left: 20px
-  .btn
-    margin-bottom: 15px
-
-.details__card-cost
-  margin: 10px 0
-  display: flex
-  flex-direction: row
-  font-size: 16px
-  font-family: var(--main-font-family)
-  color: var(--text-color)
-
-.details__card-cost
-  .cost
-    margin-left: 4px
-    font-weight: 700
-
-.get-it-now-button
-  background-color: #0271b6
-  color: white
-  &:hover
-    background-color: #0271b6
-
-.card__buttons-container
-  display: none
-  margin-top: 20px
-  transition: .3s
-  opacity: 0
-  height: 40px
-
-.breadcrumbs-separator
-  display: flex
-  align-items: center
-  justify-content: center
-  margin: 0 6px
-
-.breadcrumbs-text
-  margin: 0
-  display: block /* or in-line block according to your requirement */
-  overflow: hidden
-  white-space: nowrap
-  text-overflow: ellipsis
-
-.columns-container
-  display: grid
-  grid-template-columns: 400px auto
-  height: 100%
-
-.left-column
-  display: flex
-  flex-direction: column
-  padding-left: 20px
-  .btn
-    margin-bottom: 10px
-
-.left-column__title
-  color: var(--text-color)
-  font-family: var(--main-font-family)
-  font-size: 20px
-  margin-bottom: 20px
-
-.disabled
-  opacity: .5
-  pointer-events: none
-  cursor: not-allowed
-
-.custom-visual__description
-  margin: 20px
-  display: flex
-  flex-direction: column
-  font-family: var(--main-font-family)
-  color: var(--text-color)
-
-.main-features__title, .most-popular-use-cases__title
-  font-size: 18px
-  font-weight: 600
-  margin-bottom: 20px
-
-.custom-visual__description-text
-  font-size: 16px
-  font-weight: 400
-  margin-top: 10px
-
-.reports-card
-  display: flex
-  flex-direction: column
-  background: var(--color-grey)
-  border-radius: 5px
-  min-width: 480px
-  max-height: 240px
-  position: relative
-
-.reports-card__top-section
-  display: flex
-  align-items: center
-  padding: 20px
-
-.reports-card-buttons__container
-  display: flex
-  justify-content: center
-  flex-direction: column
-  opacity: 0
-  position: absolute
-  bottom: 0
-  transition: .3s
-  width: 100%
-
-.reports-card__wrapper
-  position: relative
-  &:hover
-    .reports-card
-      filter: grayscale(70%)
-      filter: brightness(0.4)
-    .reports-card-buttons__container
-      opacity: 1
-      transition: .3s
-      .reports-card-buttons__container-bottom
-        display: flex
-        .btn
-          background: var(--color-grey)
-          width: 100%
-          margin: 10px
-
-.reports-card-details-button
-  .btn
-    width: auto
-    margin: 10px 10px 0 10px
-    background: var(--color-grey)
-
-.power-bi__buttons-container
-  display: flex
-  align-content: flex-start
-  align-items: center
-  justify-content: center
-  flex-direction: row
-  flex-wrap: wrap
-  max-width: 1400px
-
-.power-bi__buttons-container--btn
-  background: var(--color-grey)
-  height: 240px
-  width: 320px
-  border-radius: 5px
-  margin: 10px
-  display: flex
-  padding-top: 20px
-  flex-direction: column
-  color: var(--text-color)
-  font-size: 20px
-  font-family: var(--main-font-family)
-  text-decoration: none
-  text-align: center
-  -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
-  -moz-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
-  -o-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -o-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
-  -ms-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -ms-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
-  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
-  -webkit-transition-delay: 0s
-  -moz-transition-delay: 0s
-  -o-transition-delay: 0s
-  -ms-transition-delay: 0s
-  transition-delay: 0s
-  -webkit-transform: translateY(0px)
-  -moz-transform: translateY(0px)
-  -o-transform: translateY(0px)
-  -ms-transform: translateY(0px)
-  transform: translateY(0px)
-  cursor: pointer
-  &:hover
-    -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
-    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
-    background: rgba(200,200,200,0.2)
-    -webkit-transform: translateY(-1px)
-    -moz-transform: translateY(-1px)
-    -o-transform: translateY(-1px)
-    -ms-transform: translateY(-1px)
-    transform: translateY(-1px)
-  i
-    margin-top: 20px
-
-.power-bi__buttons-container--tag
-  font-family: var(--main-font-family)
-  font-size: 16px
-  color: var(--text-color)
-  margin-top: 30px
-  display: flex
-  padding-left: 20px
-  justify-content: flex-start
-
-.conctact-us-btn
-  margin-left: 20px
-  cursor: pointer
-  display: flex
-  align-items: center
-  i
-    margin-right: 8px
-
-/*Modal styles*/
-
 #modal
   display: none
   position: fixed
@@ -593,84 +143,4 @@ iframe
     margin-right: 10px
 
 .form-current-page
-  display: none
-
-.circle-container
-  width: 100%
-  height: 100%
-  display: flex
-  align-items: center
-  justify-content: center
-  flex-direction: column
-  a
-    margin-top: 20px
-
-.circle
-  margin: 10px
-  display: flex
-  align-items: center
-  justify-content: center
-  max-width: 300px
-  width: 300px
-  max-height: 300px
-  height: 300px
-  border-radius: 50%
-  -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
-  -moz-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
-  -o-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -o-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
-  -ms-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -ms-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
-  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
-  -webkit-transition-delay: 0s
-  -moz-transition-delay: 0s
-  -o-transition-delay: 0s
-  -ms-transition-delay: 0s
-  transition-delay: 0s
-  -webkit-transform: translateY(0px)
-  -moz-transform: translateY(0px)
-  -o-transform: translateY(0px)
-  -ms-transform: translateY(0px)
-  transform: translateY(0px)
-  cursor: pointer
-  background: var(--color-grey)
-  color: var(--text-color)
-  font-size: 20px
-  text-decoration: none
-  z-index: 2
-  &:visited
-    color: var(--text-color)
-  &:hover
-    -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
-    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
-    background: rgba(200,200,200,0.2)
-    -webkit-transform: translateY(-1px)
-    -moz-transform: translateY(-1px)
-    -o-transform: translateY(-1px)
-    -ms-transform: translateY(-1px)
-    transform: translateY(-1px)
-
-/*Flex styles*/
-
-.flex-direction-column
-  display: flex
-  flex-direction: column
-
-.flex-align-items-start
-  display: flex
-  align-items: flex-start
-
-.flex-justify-content-center
-  display: flex
-  justify-content: center
-
-.full-centering
-  display: flex
-  align-items: center
-  justify-content: center
-
-article
-  margin: 20px 20px 0 20px
-  padding: 10px
-  display: flex
-  flex-direction: column
-  background: var(--color-grey)
-  border-radius: 5px
+  display: none

data/_sass/_layout.sass

@@ -11,9 +11,10 @@ header
   height: var(--header-height)
   min-height: 64px
   background-color: var(--header-color)
-  box-shadow: 0px 10px 20px -9px rgba(34, 60, 80, 0.4)
+  box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3)
   display: flex
   align-items: center
+  justify-content: space-between
   a
     color: var(--text-color)
     overflow: hidden
@@ -27,11 +28,16 @@ header
     text-decoration: none
     &:visited
       color: var(--text-color)
-    .logo-text
+    .logo__title
       display: flex
       align-items: center
-      margin-left: 8px
+      margin-left: 10px
       color: var(--text-color)
+    .logo__plug
+      width: 50px
+      height: 50px
+      border-radius: 100%
+      background: #FFFFFF
     img
       max-width: 50px
       max-height: 50px
@@ -44,7 +50,30 @@ header
     transition: background-size .3s
   a:hover:not(:first-child)
     background-size: 100% 2px
-
+  .header-navbar
+    height: 100%
+    display: flex
+    align-items: center
+  .header-navbar
+    a
+      display: flex
+      margin-right: 10px
+      font-size: 16px
+      color: var(--color-text)
+      text-decoration: none
+      background-image: linear-gradient(var(--text-color), var(--text-color))
+      background-position: 0% 100%
+      background-repeat: no-repeat
+      background-size: 0% 2px
+      transition: background-size .3s
+    a:last-child
+      margin-right: 20px
+    a:visited
+      color: var(--text-color)
+    a.active
+      background-size: 100% 2px
+    a:hover
+      background-size: 100% 2px
 footer
   display: flex
   align-items: center
@@ -54,14 +83,25 @@ footer
   width: 100%
   height: var(--footer-height)
   background-color: var(--color-grey)
-  box-shadow: 0px -10px 20px -9px rgba(34, 60, 80, 0.25)
+  box-shadow: 0 -3px 5px rgba(57, 63, 72, 0.3)
   justify-content: space-between
+  .contact-us__btn
+    margin-left: 20px
+    cursor: pointer
+    display: flex
+    align-items: center
+    i
+      margin-right: 8px
 
-.socials
-  a
-    color: black
-    text-decoration: none
-    &:visited
+.watermark
+  display: flex
+  font-family: var(--main-font-family)
+  margin-right: 20px
+  .socials
+    a
       color: black
-    i
-      margin-right: 10px
+      text-decoration: none
+      &:visited
+        color: black
+      i
+        margin-right: 10px

data/_sass/_variables.sass

@@ -5,6 +5,7 @@
 
   /*Colors*/
   --font-color: #525252
+  
   --header-color: #F0F0F0
 
   --color-grey: #F0F0F0

data/_sass/buttons.sass

@@ -45,8 +45,4 @@
     -moz-transform: translateY(-1px)
     -o-transform: translateY(-1px)
     -ms-transform: translateY(-1px)
-    transform: translateY(-1px)
-  &.btn--purchase
-    background-color: #55d96b
-    &:hover
-      background-color: #55d96b
+    transform: translateY(-1px)

data/_sass/initialize.sass

@@ -1,7 +1,5 @@
-@import "_base.sass"
-@import "_layout.sass"
-@import "_variables.sass"
-@import "buttons.sass"
-@import "media-requests.sass"
-@import "custom-styles.sass"
-@import "custom-variables.sass"
+@import "_base"
+@import "_variables"
+@import "_layout"
+@import "preloader"
+@import "buttons"

data/assets/graphics/fonts/readme.md

@@ -1 +0,0 @@
-Fonts should be placed in this folder

data/assets/scripts/index.js

@@ -12,7 +12,7 @@ window.onload = function () {
 /// contact form
 
 $(document).ready(function(){
-	$('.conctact-us-btn').on('click', function(e){
+	$('.contact-us__btn').on('click', function(e){
 		e.preventDefault();
 		$('#modal').fadeIn(100);
 		$('.modalBody').slideDown(300);