init

themes/editor-hugo/assets/js/script.js

@@ -0,0 +1,90 @@
+(function ($) {
+	'use strict';
+
+	// prelaoder
+	$('.preloader').delay(100).fadeOut(10);
+	
+	// sidenav-menu
+	function sidenav() {
+		$('[data-toggle="sidenav-menu"]').on('click', function () {
+			$('.sidenav-menu, .sidenav-overlay').toggleClass('show');
+		});
+	}
+	sidenav();
+
+	// search-popup
+	function searchPopup() {
+		$('[data-toggle="search"]').on('click', function () {
+			$('.search-block').fadeIn(200);
+			setTimeout(function () {
+				$('.search-block').addClass('is-visible');
+				var value = $('#search-field').val();
+				$('#search-field').focus().val('').val(value);
+			}, 250);
+		});
+		$('[data-toggle="search-close"]').on('click', function () {
+			$('.search-block').fadeOut(200).removeClass('is-visible');
+		});
+	}
+	searchPopup();
+
+	// menuHumBurger icon toggle Init
+	function menuHumBurgerIcon() {
+		$('.navbar-toggler').on('click', function () {
+			$('i').toggleClass('d-inline d-none');
+		});
+	}
+	menuHumBurgerIcon();
+
+
+	// tab
+	$('.tab-content').find('.tab-pane').each(function (idx, item) {
+		var navTabs = $(this).closest('.code-tabs').find('.nav-tabs'),
+			title = $(this).attr('title');
+		navTabs.append('<li class="nav-item"><a class="nav-link" href="#">' + title + '</a></li>');
+	});
+
+	$('.code-tabs ul.nav-tabs').each(function () {
+		$(this).find("li:first").addClass('active');
+	})
+
+	$('.code-tabs .tab-content').each(function () {
+		$(this).find("div:first").addClass('active');
+	});
+
+	$('.nav-tabs a').click(function (e) {
+		e.preventDefault();
+		var tab = $(this).parent(),
+			tabIndex = tab.index(),
+			tabPanel = $(this).closest('.code-tabs'),
+			tabPane = tabPanel.find('.tab-pane').eq(tabIndex);
+		tabPanel.find('.active').removeClass('active');
+		tab.addClass('active');
+		tabPane.addClass('active');
+	});
+
+
+	// Accordions
+	$('.collapse').on('shown.bs.collapse', function () {
+		$(this).parent().find('.fas fa-plus').removeClass('fas fa-plus').addClass('fas fa-minus');
+	}).on('hidden.bs.collapse', function () {
+		$(this).parent().find('.fas fa-minus').removeClass('fas fa-minus').addClass('fas fa-plus');
+	});
+
+
+	//post slider
+	$('.post-slider').slick({
+		slidesToShow: 1,
+		slidesToScroll: 1,
+		autoplay: true,
+		autoplaySpeed: 1500,
+		fade: true,
+  	cssEase: 'linear',
+		dots: false,
+		arrows: true,
+		prevArrow: '<button type=\'button\' class=\'prevArrow\'><i class=\'fas fa-angle-left\'></i></button>',
+		nextArrow: '<button type=\'button\' class=\'nextArrow\'><i class=\'fas fa-angle-right\'></i></button>'
+	});
+	
+
+})(jQuery);

themes/editor-hugo/assets/plugins/search/search.js

@@ -0,0 +1,101 @@
+summaryInclude=60;
+var fuseOptions = {
+  shouldSort: true,
+  includeMatches: true,
+  threshold: 0.0,
+  tokenize:true,
+  location: 0,
+  distance: 100,
+  maxPatternLength: 32,
+  minMatchCharLength: 1,
+  keys: [
+    {name:"title",weight:0.8},
+    {name:"contents",weight:0.5},
+    {name:"tags",weight:0.3},
+    {name:"categories",weight:0.3}
+  ]
+};
+
+var searchQuery = param("s");
+if(searchQuery){
+  $("#search-query").val(searchQuery);
+  executeSearch(searchQuery);
+}
+
+function executeSearch(searchQuery){
+  $.getJSON( indexURL, function( data ) {
+    var pages = data;
+    var fuse = new Fuse(pages, fuseOptions);
+    var result = fuse.search(searchQuery);
+    console.log({"matches":result});
+    if(result.length > 0){
+      populateResults(result);
+    }else{
+      $('#search-results').append("<div class=\"text-center mx-auto\"><img class=\"img-fluid mb-5\" src=\"https://user-images.githubusercontent.com/17677384/110205559-d77c9580-7ea2-11eb-82b4-f1334db99530.png\"><h3 class=\"mb-5\">No Search Found</h3></div>");
+    }
+  });
+}
+
+function populateResults(result){
+  $.each(result,function(key,value){
+    var contents= value.item.contents;
+    var snippet = "";
+    var snippetHighlights=[];
+    var tags =[];
+    if( fuseOptions.tokenize ){
+      snippetHighlights.push(searchQuery);
+    }else{
+      $.each(value.matches,function(matchKey,mvalue){
+        if(mvalue.key == "tags" || mvalue.key == "categories" ){
+          snippetHighlights.push(mvalue.value);
+        }else if(mvalue.key == "contents"){
+          start = mvalue.indices[0][0]-summaryInclude>0?mvalue.indices[0][0]-summaryInclude:0;
+          end = mvalue.indices[0][1]+summaryInclude<contents.length?mvalue.indices[0][1]+summaryInclude:contents.length;
+          snippet += contents.substring(start,end);
+          snippetHighlights.push(mvalue.value.substring(mvalue.indices[0][0],mvalue.indices[0][1]-mvalue.indices[0][0]+1));
+        }
+      });
+    }
+
+    if(snippet.length<1){
+      snippet += contents.substring(0,summaryInclude*2);
+    }
+    //pull template from hugo templarte definition
+    var templateDefinition = $('#search-result-template').html();
+    var output = render(templateDefinition,{key:key,title:value.item.title,image:value.item.image,date:value.item.date,month:value.item.month,link:value.item.permalink,tags:value.item.tags,categories:value.item.categories,snippet:snippet});
+    $('#search-results').append(output);
+
+    $.each(snippetHighlights,function(snipkey,snipvalue){
+      $("#summary-"+key).mark(snipvalue);
+    });
+  });
+}
+
+function param(name) {
+    return decodeURIComponent((location.search.split(name + '=')[1] || '').split('&')[0]).replace(/\+/g, ' ');
+}
+
+function render(templateString, data) {
+  var conditionalMatches,conditionalPattern,copy;
+  conditionalPattern = /\$\{\s*isset ([a-zA-Z]*) \s*\}(.*)\$\{\s*end\s*}/g;
+  //since loop below depends on re.lastInxdex, we use a copy to capture any manipulations whilst inside the loop
+  copy = templateString;
+  while ((conditionalMatches = conditionalPattern.exec(templateString)) !== null) {
+    if(data[conditionalMatches[1]]){
+      //valid key, remove conditionals, leave contents.
+      copy = copy.replace(conditionalMatches[0],conditionalMatches[2]);
+    }else{
+      //not valid, remove entire section
+      copy = copy.replace(conditionalMatches[0],'');
+    }
+  }
+  templateString = copy;
+  //now any conditionals removed we can do simple substitution
+  var key, find, re;
+  for (key in data) {
+    find = '\\$\\{\\s*' + key + '\\s*\\}';
+    re = new RegExp(find, 'g');
+    templateString = templateString.replace(re, data[key]);
+  }
+  return templateString;
+}

themes/editor-hugo/assets/plugins/slick/fonts/slick.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by Fontastic.me</metadata>
+<defs>
+<font id="slick" horiz-adv-x="512">
+<font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/>
+<missing-glyph horiz-adv-x="512" />
+
+<glyph unicode="&#8594;" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph unicode="&#8592;" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph unicode="&#8226;" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph unicode="&#97;" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/>
+</font></defs></svg>

themes/editor-hugo/assets/plugins/slick/slick.css

@@ -0,0 +1 @@
+.slick-list,.slick-slider,.slick-track{position:relative;display:block}.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}.slick-slider{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{top:0;left:0;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}

themes/editor-hugo/assets/scss/_buttons.scss

@@ -0,0 +1,63 @@
+// button style
+.btn {
+  font-size: 14px;
+  padding: 15px 24px;
+  color: $white;
+  border-radius: 0;
+  transition: .2s ease-out;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+  border: 0;
+
+  &:active,
+  &:focus {
+    border: 0;
+    box-shadow: none !important;
+  }
+
+  &.btn-lg {
+    font-size: 16px;
+    padding: 12px 28px;
+  }
+
+  &:hover {
+    box-shadow: 0px 10px 25px rgba($black, 0.1);
+  }
+
+  &.btn-primary {
+    background-color: $primary-color !important;
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: $white;
+      background-color: $dark !important;
+    }
+  }
+
+  &.btn-outline-primary {
+    color: $primary-color;
+    border: 1px solid $primary-color;
+    background-color: transparent !important;
+
+    &::after {
+      background-color: $primary-color !important;
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: $white;
+      background-color: $primary-color !important;
+    }
+  }
+}
+
+.text-underline {
+  text-decoration: underline;
+}
+a.text-underline:hover {
+  color: $primary-color;
+  text-decoration: underline;
+}

themes/editor-hugo/assets/scss/_common.scss

@@ -0,0 +1,478 @@
+body {
+  color: $gray;
+  background-color: $white;
+  font-family: $secondary-font;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.65;
+  &::-webkit-scrollbar {
+    width: 10px;
+    @extend .bg-primary-light;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba($primary-color, .5);
+  }
+}
+
+::selection {
+  color: $white;
+  background-color: darken($primary-color, 5);
+  text-shadow: none;
+}
+
+:focus {
+  outline: 0;
+}
+
+mark,
+.mark {
+  padding: 0;
+}
+.page-header {
+  mark,
+  .mark {
+    padding: 3px 5px;
+    text-transform: lowercase;
+  }
+  .title {
+    font-weight: bold;
+    color: $dark;
+    position: relative;
+    padding-left: 20px;
+    margin-bottom: 0;
+    &::before {
+      position: absolute;
+      content: "";
+      height: 100%;
+      width: 7px;
+      border-radius: 50px;
+      background-color: $primary-color;
+      left: 0;
+      top: 0;
+    }
+  }
+}
+
+/*------------------------------------------------------------------
+ # default styles
+-------------------------------------------------------------------*/
+.section {
+  padding: 24px 0;
+}
+
+.section-title {
+  h1 {
+    font-size: $h1-lg;
+    text-transform: capitalize;
+    margin-bottom: 20px;
+    position: relative;
+    padding-top: 25px;
+
+    @include desktop-xl {
+      font-size: 42px;
+    }
+    @include tablet {
+      font-size: 34px;
+    }
+  }
+}
+
+// social-links
+.social-links {
+  a {
+    font-size: 15px;
+    padding: 7px;
+    color: rgba($black, .8);
+    &:hover {
+      color: $primary-color;
+    }
+  }
+  &.is-circled {
+    a {
+      padding: 7px 9px;
+      color: $white;
+      &:hover {
+        opacity: .7;
+      }
+    }
+  }
+  &.is-circled {
+    a {
+      display: block;
+      text-align: center;
+      font-size: 12px;
+      text-transform: uppercase;
+      color: $dark;
+      .icon {
+        display: block;
+        height: 42px;
+        width: 42px;
+        padding: 13px;
+        border: 1px solid $dark;
+        border-radius: 50%;
+        margin-left: auto;
+        margin-right: auto;
+        margin-bottom: 8px;
+        font-size: 16px;
+        transition: .3s;
+        color: $dark;
+      }
+      &:hover svg {
+        border-color: $primary-color;
+        background-color: $primary-color;
+        color: $white;
+      }
+    }
+  }
+}
+
+// preloader
+.preloader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: $white;
+  z-index: 999889898;
+
+  img {
+    vertical-align: middle;
+    border: 0;
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+// card style
+.card.post-card {
+  border-radius: 0px;
+  border: 0;
+  text-align: center;
+  .card-body {
+    padding: 0;
+    padding-top: 20px;
+  }
+  .card-footer {
+    margin-bottom: 50px;
+    background-color: transparent;
+    padding: 0;
+    padding-top: 10px;
+  }
+}
+.post-title {
+  font-weight: 600;
+  color: $dark;
+  font-family: $primary-font;
+  display: inline-block;
+  line-height: 1.3;
+}
+a.post-title:hover,
+.post-title:hover a {
+  color: $primary-color;
+}
+
+.card-meta-tag {
+  text-transform: uppercase;
+  .list-inline-item:not(:last-child) {
+    margin-right: .5rem;
+  }
+
+  a {
+    font-size: 14px;
+    font-weight: 500;
+    color: $primary-color;
+    &:hover {color: $dark}
+  }
+}
+
+.card-meta {
+  font-size: 12px;
+
+  .list-inline-item:not(:last-child) {
+    margin-right: 1.2rem;
+  }
+
+  .card-meta-author {
+    display: inline-block;
+    &:hover {
+      color: $primary-color;
+    }
+  }
+  .card-meta-author,
+  .card-meta-date {
+    color: #9598a2;
+    text-transform: uppercase;
+  }
+}
+
+
+// content
+.content {
+  font-family: $secondary-font;
+  font-size: 17px;
+  p {
+    margin-bottom: 25px;
+  }
+  img {
+    margin-bottom: 30px;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: $secondary-font;
+    color: $dark;
+    font-weight: 600;
+    margin-bottom: 20px;
+    margin-top: 30px;
+  }
+  ol, ul {
+    margin-bottom: 25px;
+    padding-left: 0;
+    li {
+      margin-bottom: 10px;
+    }
+  }
+
+  img {
+    margin-top: 10px;
+    margin-bottom: 35px;
+  }
+
+  blockquote {
+    padding: 20px 30px;
+    padding-left: 70px;
+    border: 1px solid rgba($primary-color, .2);
+    font-family: $primary-font;
+    color: $dark;
+    font-weight: 600;
+    font-size: 18px;
+    margin: 30px 0;
+    position: relative;
+    p {
+      margin-bottom: 15px;
+    }
+    &::before {
+      content: "\f10d";
+      font-weight: 900;
+    }
+    svg {
+      position: absolute;
+      font-size: 28px;
+      left: 20px;
+      top: 25px;
+      opacity: .5;
+      color: $primary-color;
+    }
+    cite {
+      opacity: .7;
+      font-style: normal;
+      text-transform: uppercase;
+      font-size: 13px;
+      position: relative;
+      &::before {
+        position: absolute;
+        content: "";
+        height: 1px;
+        width: 20px;
+        left: -30px;
+        top: 50%;
+        background-color: $dark;
+        opacity: .5;
+      }
+    }
+  }
+
+  table {
+    text-align: left;
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 1rem;
+    border: 1px solid #dee2e6;
+    th,
+    td {
+      padding: .75rem;
+      vertical-align: top;
+      border: 1px solid #dee2e6
+    }
+    thead {
+      background: darken(#f7f7f7, 2);
+    }
+    tbody {
+      background: #f7f7f7;
+    }
+  }
+  
+  a.collapse-head {
+    border-bottom: 1px solid #dee2e6;
+  }
+  .notices {
+    margin: 2rem 0;
+    position: relative;
+    overflow: hidden;
+  }
+  .notices p {
+    padding: 10px;
+    margin-bottom: 0;
+  }
+  .notices.note p {
+    border-top: 30px solid #6ab0de;
+    background: #f7f7f7;
+  }
+  .notices.note p::after {
+    content: 'Note';
+    position: absolute;
+    top: 2px;
+    color: $white;
+    left: 2rem;
+  }
+  .notices.tip p {
+    border-top: 30px solid #78C578;
+    background: #f7f7f7;
+  }
+  .notices.tip p::after {
+    content: 'Tip';
+    position: absolute;
+    top: 2px;
+    color: $white;
+    left: 2rem;
+  }
+  .notices.info p {
+    border-top: 30px solid #F0B37E;
+    background: #f7f7f7;
+  }
+  .notices.info p::after {
+    content: 'Info';
+    position: absolute;
+    top: 2px;
+    color: $white;
+    left: 2rem;
+  }
+  .notices.warning p {
+    border-top: 30px solid #E06F6C;
+    background: $light;
+  }
+  .notices.warning p::after {
+    content: 'Warning';
+    position: absolute;
+    top: 2px;
+    color: #fff;
+    left: 2rem;
+  }
+}
+
+// code-tab
+.code-tabs {
+  border: 1px solid #ddd;
+  overflow: hidden;
+  margin-bottom: 20px;
+  .nav-tabs {
+    margin-bottom: 0;
+    padding: 0;
+    .nav-item {
+      padding-left: 0;
+      border-right: 1px solid #ddd;
+      .nav-link {
+        text-decoration: none;
+        font-weight: 500;
+        border: 0;
+        text-transform: capitalize;
+      }
+      &::before {
+        display: none;
+      }
+      &.active {
+        background: $primary-color;
+        .nav-link {
+          color: $white;
+        }
+      }
+    }
+  }
+  .tab-content {
+    padding: 20px 15px;
+  }
+}
+
+// pagination
+.pagination {
+  .page-link {
+    padding: 0;
+    margin-left: 0;
+    color: $dark;
+    border: 0;
+    height: 48px;
+    width: 48px;
+    line-height: 48px;
+    text-align: center;
+    font-weight: 600;
+    border-radius: 0 !important;
+    &.active,
+    &:focus,
+    &:hover {
+      box-shadow: none;
+      color: $white;
+      background-color: $primary-color;
+    }
+  }
+}
+
+
+// form-control
+.form-control {
+  padding: 0;
+  border: 0;
+  border-bottom: 1px solid #999;
+  border-radius: 0 !important;
+  height: 56px;
+  font-size: 17px;
+  font-weight: 500;
+  transition: .3s ease;
+  &:focus {
+    box-shadow: none;
+    color: $dark;
+    border-bottom-color: $dark;
+    ~ .input-group-append {
+      .input-group-text {
+        border-bottom-color: $dark;
+      }
+    }
+  }
+}
+.input-group-text {
+  background-color: transparent;
+  border: 0;
+  border-bottom: 1px solid #999;
+  border-radius: 0 !important;
+  transition: .3s ease;
+  padding-right: 0;
+  .icon {
+    font-size: 22px;
+  }
+}
+button.input-group-text {
+  &:hover {
+    color: $primary-color;
+  }
+}
+
+/*------------------------------------------------------------------
+ # helper classes
+-------------------------------------------------------------------*/
+.font-primary {font-family: $primary-font}
+.font-secondary {font-family: $secondary-font}
+.font-weight-500 {font-weight: 500}
+.font-weight-600 {font-weight: 600}
+
+.text-primary {color: $primary-color !important}
+a.text-primary:hover {color: darken($primary-color, 10) !important}
+.bg-primary {background-color: $primary-color !important}
+.bg-primary-light {background-color: rgba($primary-color, .1)}
+
+.text-dark {color: $dark}
+.text-light {color: #a8aab2 !important}
+a.text-dark:hover, a.text-light:hover {
+  color: $primary-color !important
+}
+
+.bg-light {background-color: $light !important}
+.bg-dark {background-color: $dark !important}

themes/editor-hugo/assets/scss/_mixins.scss

@@ -0,0 +1,34 @@
+@mixin mobile-xs{
+  @media(max-width:400px){
+    @content;
+  }
+}
+@mixin mobile{
+  @media(max-width:575px){
+    @content;
+  }
+}
+@mixin tablet{
+  @media(max-width:767px){
+    @content;
+  }
+}
+@mixin desktop{
+  @media(max-width:991px){
+    @content;
+  }
+}
+@mixin desktop-lg{
+  @media(max-width:1200px){
+    @content;
+  }
+}
+@mixin desktop-xl {
+   @media(max-width:1466px) {
+      @content;
+   }
+}
+
+@mixin size($size){
+  width: $size; height: $size;
+}

themes/editor-hugo/assets/scss/_typography.scss

@@ -0,0 +1,47 @@
+h1, .h1 {
+  font-size: $h1;
+  @include desktop-xl {
+    font-size: $h1-lg;
+  }
+  @include desktop {
+    font-size: $h1-md;
+  }
+}
+h2, .h2 {
+  font-size: $h2;
+  @include desktop {
+    font-size: $h2-md;
+  }
+}
+h3, .h3 {
+  font-size: $h3;
+  @include desktop {
+    font-size: $h3-md;
+  }
+}
+h4, .h4 {
+  font-size: $h4;
+}
+h5, .h5 {
+  font-size: $h5;
+}
+h6, .h6 {
+  font-size: $h6;
+}
+a:focus,
+button:focus {
+outline: 0;
+}
+a {
+  color: $gray;
+  transition: all .3s;
+  &:hover {
+    text-decoration: none;
+    color: #222;
+  }
+}
+ul, li {
+  padding: 0;
+  margin: 0;
+  list-style-position: inside;
+}

themes/editor-hugo/assets/scss/style.scss

@@ -0,0 +1,34 @@
+// Color Variables
+{{ with site.Params.variables }}
+$primary-color: {{.primary_color}};
+$secondary-color: {{.secondary_color}};
+$white: {{.white}};
+$black: {{.black}};
+$dark: {{.dark}};
+$gray: {{.gray}};
+$light: {{.light}};
+
+$h1: {{.h1}};
+$h1_lg: {{.h1_lg}};
+$h1_md: {{.h1_md}};
+$h2: {{.h2}};
+$h2_md: {{.h2_md}};
+$h3: {{.h3}};
+$h3_md: {{.h3_md}};
+$h4: {{.h4}};
+$h5: {{.h5}};
+$h6: {{.h6}};
+
+// Font Variables
+$primary-font: '{{ replaceRE ":[ital,]*wght@[0-9,;]+" "" .primary_font }}', sans-serif;
+$secondary-font: '{{ replaceRE ":[ital,]*wght@[0-9,;]+" "" .secondary_font }}', sans-serif;
+$icon-font: '{{.icon_font}}';
+{{ end }}
+
+@import 'mixins';
+@import 'typography';
+@import 'buttons';
+@import 'common';
+@import 'templates/navigation.scss';
+@import 'templates/main.scss';
+@import 'custom.scss';

themes/editor-hugo/assets/scss/templates/_main.scss

@@ -0,0 +1,280 @@
+// page-content
+.page-content {
+  margin-left: 110px;
+  @include tablet {
+    margin-left: 0;
+    margin-top: 56px;
+  }
+}
+
+// author-banner
+.author-banner {
+  padding: 30px 35px;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  overflow-y: auto;
+  width: calc(25% - 60px);
+  max-width: 100%;
+  @include desktop-lg {
+    width: calc(33.333333% - 70px);
+  }
+  @include desktop {
+    position: static;
+    width: initial;
+    margin-top: 15px;
+    padding: 60px 35px;
+    height: auto;
+  }
+  @include tablet {
+    margin-top: 40px;
+  }
+  @media screen and (max-height: 470px) {
+    display: block !important;
+  }
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba($primary-color, .2);
+  }
+}
+
+// partner-logos
+.partner-logos {
+  li {
+    background-color: $white;
+    padding: 15px 20px;
+    border: 1px solid #eee;
+    margin-top: 14px;
+    img {
+      max-height: 25px;
+      max-width: 130px;
+    }
+  }
+}
+
+// newsletter-block
+.newsletter-block {
+  color: $dark;
+  padding: 80px 60px;
+  @include tablet {
+    padding: 80px 30px;
+  }
+  .input-group-text,
+  .form-control {
+    background-color: transparent;
+    color: $dark;
+  }
+  .form-control {
+    &:focus {
+      border-bottom-color: $dark;
+      ~ .input-group-append {
+        .input-group-text {
+          border-bottom-color: $dark;
+        }
+      }
+    }
+  }
+  ::-webkit-input-placeholder {
+    color: rgba($dark, .7);
+  }
+  :-ms-input-placeholder {
+    color: rgba($dark, .7);
+  }
+  ::placeholder {
+    color: rgba($dark, .7);
+  }
+  button.input-group-text {
+    color: rgba($dark, .7);
+    &:hover {
+      color: $dark;
+    }
+  }
+}
+footer .newsletter-block{
+  padding: 15px;
+  .input-group {
+    max-width: 350px;
+    margin: auto;
+  }
+}
+
+// blog post
+.single-post-meta,
+.single-post-similer {
+  margin-top: 70px;
+}
+.single-post-author {
+  margin-top: 50px;
+}
+.post-meta-tags {
+  a {
+    display: inline-block;
+    background-color: #f7f8fa;
+    color: $dark;
+    padding: 6px 13px;
+    font-weight: 500;
+    font-size: 15px;
+    &:hover {
+      background-color: transparent;
+      color: $primary-color;
+    }
+  }
+}
+
+.widget {
+  margin-bottom: 45px;
+  .widget-title {
+    width: calc(100% - 8px);
+    height: calc(100% - 8px);
+    background: rgba(#f9f3ef, .5);
+    display: block;
+    margin: 4px;
+    line-height: 40px;
+    text-align: center;
+    font-weight: 600;
+    text-transform: uppercase;
+    font-size: 14px;
+    outline: 1px solid #f9f3ef;
+    border: 1px solid #f9f3ef;
+    outline-offset: 4px;
+    padding-top: 2px;
+    margin-bottom: 35px;
+  }
+}
+
+.sidebar-recent-post {
+  counter-reset: rc-counter;
+  .recent-post-item {
+    margin-top: 35px;
+    padding: 0 10px;
+    a {
+      display: inline-block;
+      &:hover {
+        color: $primary-color;
+      }
+    }
+    .recent-post-image {
+      height: 80px;
+      width: 80px;
+      position: relative;
+      z-index: 1;
+      img {
+        height: 100%;
+        object-fit: cover;
+      } 
+      &::after {
+        counter-increment: rc-counter;
+        content: counter(rc-counter);
+        position: absolute;
+        background-color: $primary-color;
+        border: 2px solid $white;
+        top: -3px;
+        right: -3px;
+        z-index: 222;
+        height: 30px;
+        width: 30px;
+        text-align: center;
+        font-size: 12px;
+        font-weight: bold;
+        color: $white;
+        border-radius: 50px;
+        line-height: 26px;
+      }
+    }
+  }
+}
+
+.sidebar-post-categories li {
+  a {
+    border-top: 1px dotted #ddd;
+    padding: 8px 0;
+    display: block;
+    font-size: 15px;
+    span {
+      float: right;
+      background-color: #ddd;
+      font-size: 12px;
+      padding: 5px 8px;
+      line-height: 1;
+      border-radius: 50px;
+      color: black;
+    }
+    &:hover {
+      color: $primary-color;
+      span {
+        background-color: $primary-color;
+        color: $white;
+      }
+    }
+  }
+  &:last-child a {
+    border-bottom: 1px dotted #ddd;
+  }
+}
+
+.sidebar-post-tags li a {
+  border: 1px dotted #ddd;
+  padding: 4px 10px;
+  display: block;
+  font-size: 15px;
+  margin-bottom: 10px;
+  &:hover {
+    border-color: $primary-color;
+    color: $primary-color;
+  }
+}
+
+// slick slider style
+.slick-slide {
+  outline: 0;
+}
+.post-slider {
+  overflow: hidden;
+  position: relative;
+  &:hover {
+    .prevArrow {
+      left: 20px;
+    }
+    .nextArrow {
+      right: 20px;
+    }
+  }
+}
+.slider-sm {
+  .slick-arrow {
+    height: 38px;
+    width: 38px;
+    line-height: 38px;
+  }
+}
+.slick-arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 9;
+  height: 50px;
+  width: 50px;
+  line-height: 50px;
+  border-radius: 50%;
+  background: rgba($primary-color, .5);
+  color: $white;
+  border: 0;
+  transition: 0.3s;
+  @include mobile {
+    display: none;
+  }
+  &:focus {
+    outline: 0;
+  }
+  &:hover {
+    background: $primary-color;
+  }
+}
+.prevArrow {
+  left: -60px;
+}
+.nextArrow {
+  right: -60px;
+}

themes/editor-hugo/assets/scss/templates/_navigation.scss

@@ -0,0 +1,245 @@
+// start header style
+header.sidenav {
+  position: fixed;
+  width: 110px;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  background-color: $white;
+  transition: .25s ease;
+  padding-top: 15px;
+  padding-bottom: 40px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  @include tablet {
+    width: 100%;
+    height: 80px;
+    background-color: lighten(desaturate(adjust-hue($primary-color, 4), 2.87), 36.67);
+    padding: 0;
+    flex-direction: row;
+
+    .is-top {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      align-items: center;
+      padding-left: 25px;
+      > div {
+        order: 1;
+        display: flex;
+        align-items: center;
+      }
+      .navbar-brand {
+        order: 0;
+      }
+    }
+  }
+
+  .sidenav-toggler {
+    background-color: transparent;
+    border: 0;
+    margin-bottom: 55px;
+
+    &.logo-plain {
+      margin-bottom: 25px;
+    }
+
+    @include tablet {
+        margin-bottom: 0;
+    }
+    .toggler-icon {
+      cursor: pointer;
+      -webkit-tap-highlight-color: transparent;
+      transition: transform 400ms;
+      user-select: none;
+      .line {
+        fill:none;
+        transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
+        stroke: $dark;
+        stroke-width:3;
+        stroke-linecap:round;
+      }
+      .top {
+        stroke-dasharray: 40 139;
+      }
+      .bottom {
+        stroke-dasharray: 40 180;
+      }
+      &.active {
+        transform: rotate(45deg);
+        .top {
+            stroke-dashoffset: -98px;
+        }
+        .bottom {
+            stroke-dashoffset: -138px;
+        }
+      }
+    }
+  }
+
+  .navbar-brand {
+    transform: rotate(-90deg);
+    display: inline-flex;
+    padding: 0;
+    &.plain {
+      transform: rotate(0);
+    }
+
+    @include tablet {
+      transform: rotate(0);
+    }
+  }
+}
+
+.sidenav-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba($primary-color, 0.2);
+  z-index: 15;
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+  cursor: pointer;
+  opacity: 0;
+  visibility: hidden;
+  transition: .3s ease;
+  &.show {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+
+// sidenav-menu
+nav.sidenav-menu {
+  position: fixed;
+  top: 0;
+  left: 110px;
+  z-index: 99;
+  background: darken($white, 1);
+  height: 100%;
+  width: 280px;
+  display: flex;
+  overflow-y: auto;
+  padding: 15px 30px 44px 30px;
+  transform: translate3d(-100%, 0, 0);
+  transition: .2s ease;
+
+  &.show {
+    transform: translate3d(0, 0, 0);
+    transition: .3s ease;
+  }
+  
+  @include tablet {
+    top: 0;
+    left: 0;
+    z-index: 99992;
+  }
+
+  .nav-item {
+    display: block;
+
+    &.active .nav-link {
+      color: $primary-color !important;
+    }
+
+    &:first-child {
+      margin-top: 8px;
+    }
+    &:last-child {
+      margin-bottom: 8px;
+    }
+
+    .nav-link {
+      font-weight: 500;
+      color: $dark;
+      position: relative;
+      padding: 10px;
+
+      &:hover {
+        color: $primary-color;
+      }
+      
+      &[data-toggle="collapse"]::after {
+        content: "+";
+        float: right;
+        font-size: 24px;
+        line-height: 1;
+      }
+      &[aria-expanded="true"]::after {
+        content: "_";
+        line-height: 0.3;
+        font-size: 22px;
+      }
+    }
+  }
+  .nav-item ul li {
+    a {
+      font-size: 15px;
+      padding: 7px 18px;
+      display: inline-block;
+      font-weight: 500;
+    }
+  }
+}
+
+
+// search block style
+.search-toggle {
+  background-color: transparent;
+  border: 0;
+  transition: .3s ease;
+  padding: 10px;
+  font-size: 22px;
+  &:hover {
+    color: $primary-color;
+  }
+}
+.search-block {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  background-color: $white;
+  z-index: 9999988999889;
+  padding: 0 50px;
+  display: none;
+  form {
+    position: relative;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+  input {
+    border: 0;
+    border-bottom: 1px solid #ddd;
+    font-size: 22px;
+    width: 500px;
+    max-width: 100%;
+    padding: 15px 0;
+    margin: auto;
+    letter-spacing: -1px;
+    transition: .3s ease;
+  }
+  &.is-visible {
+    input {
+        border-bottom-color: $primary-color;
+    }
+  }
+  [data-toggle="search-close"] {
+    cursor: pointer;
+    position: absolute;
+    top: 20px;
+    right: 40px;
+  }
+}
+
+// end header style