jekyll-theme-saifas 0.1.0

data/_sass/_layout.sass

@@ -0,0 +1,67 @@
+main
+  display: flex
+  flex-direction: column
+  flex: 1
+
+header
+  width: 100%
+  position: sticky
+  top: 0
+  z-index: 1
+  height: var(--header-height)
+  min-height: 64px
+  background-color: var(--header-color)
+  box-shadow: 0px 10px 20px -9px rgba(34, 60, 80, 0.4)
+  display: flex
+  align-items: center
+  a
+    color: var(--text-color)
+    overflow: hidden
+    white-space: nowrap
+    text-overflow: ellipsis
+    display: flex
+    align-items: center
+    margin-left: 10px
+    font-size: 22px
+    font-style: normal
+    text-decoration: none
+    &:visited
+      color: var(--text-color)
+    .logo-text
+      display: flex
+      align-items: center
+      margin-left: 8px
+      color: var(--text-color)
+    img
+      max-width: 50px
+      max-height: 50px
+  a:not(:first-child)
+    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:hover:not(:first-child)
+    background-size: 100% 2px
+
+footer
+  display: flex
+  align-items: center
+  min-height: 64px
+  position: sticky
+  bottom: 0
+  width: 100%
+  height: var(--footer-height)
+  background-color: var(--color-grey)
+  box-shadow: 0px -10px 20px -9px rgba(34, 60, 80, 0.25)
+  justify-content: space-between
+
+.socials
+  a
+    color: black
+    text-decoration: none
+    &:visited
+      color: black
+    i
+      margin-right: 10px

data/_sass/_variables.sass

@@ -0,0 +1,27 @@
+*
+  /*Sizes*/
+  --header-height: 64px
+  --footer-height: 64px
+
+  /*Colors*/
+  --font-color: #525252
+  --header-color: #F0F0F0
+
+  --color-grey: #F0F0F0
+
+  --text-color: #5f6368
+
+  /*Shadows*/
+  --box-shadow-btn: 0 2px 5px 0 rgb(0 0 0 / 26%)
+
+  --box-shadow-form: 0 2px 5px 0 rgb(0 0 0 / 26%)
+
+  /*Font-families*/
+  --main-font-family: 'Open Sans', sans-serif
+
+  /*Font sizes*/
+
+  --font-size-title: 26px
+
+  /*Font weights*/
+  --font-weight-light: 100

data/_sass/buttons.sass

@@ -0,0 +1,52 @@
+/*Buttons*/
+.btn
+  -webkit-appearance: none
+  -moz-appearance: none
+  appearance: none
+  display: flex
+  align-items: center
+  justify-content: center
+  font-size: 18px
+  background-color: #F0F0F0
+  padding: 0 18px
+  margin: 0 18px 4px 0
+  width: fit-content
+  text-decoration: none
+  font-family: var(--main-font-family)
+  height: 40px
+  color: var(--font-color)
+  box-shadow: var(--box-shadow-btn)
+  -webkit-border-radius: 3px
+  border-radius: 3px
+  border: 0
+  -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
+  &:visited
+    color: var(--font-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)
+  &.btn--purchase
+    background-color: #55d96b
+    &:hover
+      background-color: #55d96b

data/_sass/custom-styles.sass

@@ -0,0 +1,153 @@
+.home-page__header
+  justify-content: space-between
+
+.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
+
+.home-page__section
+  display: flex
+  flex-direction: column
+  flex: 1
+  min-height: 850px
+  position: relative
+  margin: 0 20px
+  padding-top: 50px
+  margin-top: -50px
+  -webkit-background-clip: content-box
+  background-clip: content-box
+
+.dropdown
+  display: none
+  position: relative
+  height: 100%
+  align-items: center
+  &:hover
+    .dropdown-btn
+      background: #dbdbdb
+    .dropdown-content
+      display: block
+
+.dropdown-content
+  display: none
+  position: absolute
+  background-color: #f1f1f1
+  right: 0
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
+  z-index: 1
+  a
+    display: flex
+    font-size: 20px
+    padding: 10px
+    color: var(--color-text)
+    text-decoration: none
+    margin: 0
+  a.active
+    background: #dbdbdb
+  a:visited
+    color: var(--text-color)
+
+.dropdown-btn
+  height: 100%
+  cursor: pointer
+  display: flex
+  align-items: center
+  color: var(--text-color)
+  padding: 0 20px
+  &:hover
+    background: var(--color-grey)
+    .dropdown-content
+      display: flex
+
+#container
+  margin: 0 auto
+
+subheader
+  position: sticky
+  top: 0
+  width: 100%
+  height: 40px
+  display: flex
+  align-items: center
+  #breadcrumbs
+    color: var(--font-color)
+    padding: 0 20px
+    a
+      text-decoration: none
+      color: var(--font-color)
+      font-weight: var(--font-weight-light)
+    a:visited
+      text-decoration: none
+      color: var(--font-color)
+
+.chart-container
+  display: flex
+  flex: 1
+  align-items: center
+
+.engineering-activities-btn
+  background: radial-gradient(circle at 0 100%, rgba(0,0,0,0) 150px, #e3e3e3 10px), radial-gradient(circle at 100% 100%, rgba(0,0,0,0) 150px, #e3e3e3 10px), radial-gradient(circle at 100% 0, rgba(0,0,0,0) 150px, #e3e3e3 10px), radial-gradient(circle at 0 0, rgba(0,0,0,0) 150px, #e3e3e3 10px)
+  background-position: bottom left, bottom right, top right, top left
+  background-size: 50% 50%
+  background-repeat: no-repeat
+  font-size: 16px
+  line-height: 22px
+  text-align: center
+  display: flex
+  height: 300px
+  width: 300px
+  align-items: center
+  justify-content: center
+  position: absolute
+  top: 25%
+  color: var(--text-color)
+  text-decoration: none
+  font-size: 20px
+  line-height: 26px
+  cursor: pointer
+  transition: background .3s
+  &:hover
+    background: radial-gradient(circle at 0 100%, rgba(0,0,0,0) 150px, #f0f0f0 10px), radial-gradient(circle at 100% 100%, rgba(0,0,0,0) 150px, #f0f0f0 10px), radial-gradient(circle at 100% 0, rgba(0,0,0,0) 150px, #f0f0f0 10px), radial-gradient(circle at 0 0, rgba(0,0,0,0) 150px, #f0f0f0 10px)
+    background-position: bottom left, bottom right, top right, top left
+    background-size: 50% 50%
+    background-repeat: no-repeat
+    transition: background .3s
+
+.highcharts-root
+  width: 100% !important
+  height: 100% !important
+
+.highcharts-container
+  width: auto !important
+  height: auto !important
+
+#lightgallery
+  display: flex
+  flex-wrap: wrap
+  a
+    margin: 10px
+    img
+      width: 640px
+      height: 320px

data/_sass/initialize.sass

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

data/_sass/media-requests.sass

@@ -0,0 +1,104 @@
+/*Media requests*/
+@media (max-width: 350px)
+  .post-buttons__container
+    flex-direction: column
+    align-items: center
+    padding: 20px 0 0 0
+
+  .container__left-buttons
+    width: 100%
+    a
+      width: auto
+      margin: 0 20px 20px 20px
+
+  .buy-button__container
+    display: flex
+    width: 100%
+    margin: 0
+    .btn
+      width: 100%
+      margin: 0 20px 20px 20px
+
+@media (max-width: 490px)
+  .container__left-buttons
+    flex-direction: column
+    a
+      margin-bottom: 18px
+
+  .post-buttons__container
+    align-items: flex-end
+    padding-bottom: 2px
+    padding-right: 2px
+
+  .buy-button__container
+    margin: 0 18px 18px 0
+
+@media (max-width: 560px)
+  .details__card
+    flex-direction: column
+
+  .details__card-buttons
+    margin: 0
+    margin-top: 20px
+
+  .details__card-text
+    margin-left: 0
+
+@media (max-width: 600px)
+  .products
+    display: flex
+    flex-direction: column
+
+  .product
+    margin: 10px
+
+@media (max-width: 746px)
+  .product
+    img
+      max-width: 150px !important
+
+@media (max-width: 867px)
+  .product
+    img
+      max-width: 200px !important
+
+@media (max-width: 1069px)
+  .columns-container
+    display: flex
+    flex-direction: column
+
+  #lightgallery
+    a
+      img
+        width: 100%
+        height: auto
+
+@media (max-width: 600px)
+  .header-navbar
+    display: none
+
+  .dropdown
+    display: inline-block
+
+@media (max-width: 680px)
+  .circle-container
+    max-width: 500px
+
+  .circle
+    width: 200px
+    height: 200px
+    font-size: 15px
+
+  .engineering-activities-btn
+    transform: scale(0.7)
+    top: 15.5%
+
+@media (max-width: 460px)
+  .engineering-activities-btn
+    transform: scale(0.5)
+    top: 5.5%
+
+  .circle
+    width: 150px
+    height: 150px
+    font-size: 12px

data/_sass/preloader.sass

@@ -0,0 +1,57 @@
+.preloader
+  /*фиксированное позиционирование*/
+  position: fixed
+  /* координаты положения */
+  left: 0
+  top: 0
+  right: 0
+  bottom: 0
+  /* фоновый цвет элемента */
+  background: #e0e0e0
+  /* размещаем блок над всеми элементами на странице (это значение должно быть больше, чем у любого другого позиционированного элемента на странице) */
+  z-index: 1001
+
+.preloader__row
+  position: relative
+  top: 50%
+  left: 50%
+  width: 70px
+  height: 70px
+  margin-top: -35px
+  margin-left: -35px
+  text-align: center
+  animation: preloader-rotate 2s infinite linear
+
+.preloader__item
+  position: absolute
+  display: inline-block
+  top: 0
+  background-color: #337ab7
+  border-radius: 100%
+  width: 35px
+  height: 35px
+  animation: preloader-bounce 2s infinite ease-in-out
+  &:last-child
+    top: auto
+    bottom: 0
+    animation-delay: -1s
+
+@keyframes preloader-rotate
+  100%
+    transform: rotate(360deg)
+
+@keyframes preloader-bounce
+  0%,
+  100%
+    transform: scale(0)
+  50%
+    transform: scale(1)
+
+.loaded_hiding
+  .preloader
+    transition: 0.3s opacity
+    opacity: 0
+
+.loaded
+  .preloader
+    display: none

data/assets/css/styles.sass

@@ -0,0 +1,4 @@
+---
+  # Only the main Sass file needs front matter (the dashes are enough)
+---
+@import "initialize"

data/assets/graphics/fonts/readme.md

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

data/assets/scripts/gallery.js

@@ -0,0 +1,3 @@
+jQuery(document).ready(($) => {
+  $(lightgallery).lightGallery();
+});

data/assets/scripts/highchart.js

@@ -0,0 +1,104 @@
+Highcharts.setOptions({
+  colors: ['#01BAF2', '#71BF45', '#FAA74B', '#E83535']
+});
+Highcharts.chart('container', {
+  credits: {
+    enabled: false
+  },
+  exporting: {
+    enabled: false
+  },
+  chart: {
+    plotBackgroundColor: null,
+    plotBorderWidth: null,
+    plotShadow: false,
+    type: 'pie',
+    height: 600,
+    width: 600,
+    responsive: {
+      rules: {
+        condition: {
+          maxHeight: 600,
+          maxWidth: 600,
+          minHeight: 200,
+          minWidth: 200
+        },
+        chartOptions: {
+          legend: {
+            align: 'center',
+            verticalAlign: 'bottom',
+            layout: 'horizontal'
+          },
+          yAxis: {
+            labels: {
+              align: 'left',
+              x: 0,
+              y: -5
+            },
+            title: {
+              text: null
+            }
+          },
+          subtitle: {
+            text: null
+          },
+          credits: {
+            enabled: true
+          }
+        }
+      }
+    }
+  },
+  title: {
+    text: ''
+  },
+  legend: {
+    // align: 'right',
+    // verticalAlign: 'middle',
+    // layout: 'vertical',
+    // align: 'right',
+    // verticalAlign: 'middle',
+    // layout: 'vertical',
+    itemMarginBottom: 10,
+    itemStyle: {
+      fontSize: 16,
+      color: '#525252',
+      fontFamily: 'Open Sans',
+      fontWeight: 400
+    }
+  },
+  tooltip: {
+    pointFormat: ''
+  },
+  plotOptions: {
+    pie: {
+      allowPointSelect: false,
+      cursor: 'pointer',
+      dataLabels: {
+        enabled: false
+      },
+      showInLegend: true
+    }
+  },
+  series: [{
+    name: 'Composition',
+    colorByPoint: true,
+    data: [{
+      name: 'PowerBI',
+      y: 67,
+      events: {
+        click: () => {document.location.href = "/powerbi/"}
+      },
+      sliced: true
+    }, {
+      name: 'Tableau',
+      y: 13,
+    }, {
+      name: 'Google Data Studio',
+      y: 10
+    }, {
+      name: 'Qlik',
+      y: 10
+    }]
+  }]
+});

data/assets/scripts/index.js

@@ -0,0 +1,50 @@
+/// preloader
+
+window.onload = function () {
+  document.body.classList.add('loaded_hiding');
+  window.setTimeout(function () {
+    document.body.classList.add('loaded');
+    document.body.classList.remove('loaded_hiding');
+  }, 500);
+}
+
+
+/// contact form
+
+$(document).ready(function(){
+	$('.conctact-us-btn').on('click', function(e){
+		e.preventDefault();
+		$('#modal').fadeIn(100);
+		$('.modalBody').slideDown(300);
+
+	});
+	$('.modal-close, #modal').on('click', function(e){
+		e.preventDefault();
+		$('.modalBody').slideUp(100);
+		$('#modal').fadeOut(300);
+	});
+});
+
+
+/// navbar
+
+$(window).scroll(function(){
+ var $sections = $('section');
+	$sections.each(function(i,el){
+    var top  = $(el).offset().top-100;
+    var bottom = top +$(el).height();
+    var scroll = $(window).scrollTop();
+    var id = $(el).attr('id');
+  	if( scroll > top && scroll < bottom){
+      $('a.active').removeClass('active');
+      $('a[href="#'+id+'"]').addClass('active');
+    }
+  })
+ });
+
+$("nav").on("click","a", function (event) {
+  event.preventDefault();
+  var id  = $(this).attr('href'),
+  top = $(id).offset().top;
+  $('body,html').animate({scrollTop: top}, 800);
+});