jekyll-theme-pirati 1.2.0 → 2.0.0

data/_sass/components/top-sub-nav.scss

@@ -15,7 +15,7 @@ nav.#{$tsb-ns}c-top-sub-nav {
     display: block;
     width: 335px;
     height: 150px;
-    background: url('../img/miscellaneous/vbox.png') no-repeat;
+    // background: url('../img/miscellaneous/vbox.png') no-repeat;
     bottom: -20px;
     right: 10px;
   }

data/_sass/objects/media.scss

@@ -1,55 +1,63 @@
 .o-media {
-    display: table;
-    width: 100%;
+  display: flex;
+  width: 100%;
+  background-color: $white;
 }
 
 .o-media__image,
 .o-media__body {
-    display: table-cell;
-    vertical-align: middle;
-
-    .o-media--top & {
-        vertical-align: top;
-    }
-
-    .o-media--bottom & {
-        vertical-align: bottom;
-    }
-
-    @include breakpoint(mobile down) {
-        display: block;
-    }
-
+  @include breakpoint(mobile down) {
+      display: block;
+  }
 }
 
 .o-media__image {
-    padding-right: 0.85rem;
+  padding-right: 0.85rem;
+  flex-shrink: 0;
+
+  img {
+      display: block;
+      max-width: 100%;
+  }
 
-    > img {
-        display: block;
-        max-width: none;
-    }
+  .o-media--rev & {
+      padding-right: 0;
+      padding-left: 0.85rem;
+  }
 
-    .o-media--rev & {
-        padding-right: 0;
-        padding-left: 0.85rem;
-    }
+  &.o-media__image--lgspace {
+      padding-right: 1.75rem;
+  }
 
-    &.o-media__image--lgspace {
-        padding-right: 1.75rem;
-    }
+  &.o-media__image--round img {
+      border-radius: 50%;
+  }
 
 }
 
 .o-media__body {
-    width: 100%;
+  width: 100%;
+
+  > p:last-of-type {
+      margin-bottom: 0;
+  }
 
-    @include breakpoint(mobile down) {
-        margin-top: 2rem;
-    }
+  @include breakpoint(mobile down) {
+      margin-top: 2rem;
+  }
 
-    .o-media__headline {
-        font-size: 1.4rem;
-        color: $primary-color;
-    }
-}
+  .o-media__headline {
+      font-size: 1.4rem;
+      color: $primary-color;
+  }
+}
+
+.o-media__body-inner {
+  &.o-media__body-inner--padded {
+      padding: .85rem .85rem .85rem 0;
+  }
+}
+
+.o-media-list + .o-media-list {
+  margin-top: .65rem;
+}

data/_sass/utilities/utilities.scss

@@ -67,13 +67,13 @@
 
 .u-center-medium-only {
 
-
-  @media screen and #{breakpoint(mobile)} and #{breakpoint(medium down)} {
-    text-align: center;
-    margin: 0 auto;
-    display: block;
+  @include breakpoint(medium down) {
+    @include breakpoint(mobile) {
+      text-align: center;
+      margin: 0 auto;
+      display: block;
+    }
   }
-
 }
 
 .u-center-mobile-down {

data/assets/css/main.scss

@@ -1,110 +1,44 @@
 ---
-# Only the main Sass file needs front matter (the dashes are enough)
+# this ensures Jekyll reads the file to be transformed into CSS later
+# only Main files contain this front matter, not partials.
 ---
-@charset "utf-8";
-
-@import 'main.scss';
-
-.pricing-table {
-
-  border: solid 1px #DDDDDD;
-background: #eee}
-
-  .pricing-table li {
-
-    border-bottom: dotted 1px #DDDDDD;
-
-//    font-size: 0.75rem;
-
-    padding: 0.875rem 1.125rem; }
-
-    .pricing-table li:last-child {
-
-      border-bottom: 0; }
-
-  .pricing-table .title {
-
-    background-color: red;
-
-    color: #EEEEEE;
-
-    font-size: 0.875rem;
-
-    border-bottom: 0; }
-
-  .pricing-table .price {
-
-    color: #333333;
-
-    font-size: 1.75rem;
 
-    border-bottom: 0; }
-
-  .pricing-table .description {
-
-    color: #777777;
-
-//    font-size: 0.625rem;
-}
-
-.pricing-table .small {
-
-  color: #777777;
-font-size: 0.625rem;
-text-align:right;
-}
-
-#mc_embed_signup label {
-    font-size: 1rem;
-
-
-}
-
-  .pricing-table .button {
-
-    margin: 0; }
-
-.pricing-table .pricing-table-header-img {
-
-padding:0px;margin:0px;height:98px;
-background-position: 55% 0px;
-     background-repeat:no-repeat;
-}
-
-#tabs {
-    padding: 0px;
-    background: none;
-    border-width: 0px;
-}
-#tabs .ui-tabs-nav {
-    padding-left: 0px;
-    background: transparent;
-    border-width: 0px 0px 1px 0px;
-    -moz-border-radius: 0px;
-    -webkit-border-radius: 0px;
-    border-radius: 0px;
-}
-
-.ui-tabs .ui-tabs-nav li {
-    margin-right: 0.34em;
-    background: #eee;
-}
-
-.ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
-    background: #007fff !important;}
-
-#tabs .ui-tabs-panel {
-    background: #eee;
-    border-width: 0px 1px 1px 1px;
-}
-
-.asterisk {color:red}
+@charset "utf-8";
 
-#mc_embed_signup_scroll .c-cta-button--primary {
-color: rgb(255, 255, 255);
-background-color: rgb(92, 184, 92);
-border-color: rgb(92, 184, 92);
-width:100%;
-text-align:center;
-margin-top:10px;
-}
+@import 'settings';
+
+@import "foundation-sites/scss/foundation";
+@include foundation-everything;
+
+@import 'base';
+@import 'utilities/utilities';
+
+// Import Components
+@import 'components/program';
+@import 'components/BlogPosting';
+@import 'components/Person';
+@import 'components/BasicPage';
+@import 'components/vertical-navigation';
+@import 'components/icon';
+@import 'components/contact-bar';
+@import 'components/header-bar';
+@import 'components/top-bar';
+@import 'components/banner';
+@import 'components/top-sub-nav';
+@import 'components/widget-accordion';
+@import 'components/content-card';
+@import 'components/card';
+@import 'components/tag';
+@import 'components/widget-share-box';
+@import 'components/widget-simple-text';
+@import 'components/pagination';
+@import 'components/Slider';
+@import 'components/simple-accordion';
+@import 'components/hero';
+@import 'components/blockquote';
+@import 'components/cta-button';
+
+// Import Objects
+@import 'objects/section';
+@import 'objects/media';
+@import 'objects/space';

data/assets/js/apps.js

@@ -0,0 +1,8 @@
+
+import SiteSearch from './apps/site-search';
+import ScrollTop from './apps/scroll-top';
+
+export default {
+  SiteSearch,
+  ScrollTop
+};

data/assets/js/apps/scroll-top/ScrollTop.vue

@@ -0,0 +1,83 @@
+<template>
+  <transition :name="'back-top-fade'" :duration="300">
+    <div class="scroll-top" v-show="showBackToTop" @click="toTop">
+        <slot><div class="scroll-top__area icon"><i class="fa fa-4x fa-angle-up"></i></div></slot>
+    </div>
+  </transition>
+</template>
+
+<script>
+  import { throttle } from 'throttle-debounce';
+  import SmoothScroll from 'smoothscroll-polyfill';
+
+  SmoothScroll.polyfill();
+
+  export default {
+    props: {
+      hover: {
+        type: Boolean
+      },
+      scrollFunction: {
+        type: Function,
+        default: () => {
+          window.scroll({ top: 0, left: 0, behavior: "smooth" });
+        }
+      }
+    },
+    data() {
+      return {
+        showBackToTop: false,
+        timeout: 0,
+        scrollInterval: 20
+      };
+    },
+    methods: {
+      toTop() {
+        this.showBackToTop = false;
+        this.scrollFunction();
+      },
+      onScroll() {
+        const currentScroll = document.body.scrollTop || document.documentElement.scrollTop;
+        this.showBackToTop = currentScroll >= 0.1 * document.body.clientHeight;
+      }
+    },
+    mounted() {
+      this.throttledScrollHandler = throttle(300, this.onScroll);
+      document.addEventListener("scroll", this.throttledScrollHandler);
+    },
+    beforeDestroy() {
+      document.removeEventListener("scroll", this.throttledScrollHandler);
+    }
+  };
+</script>
+
+<style lang="scss">
+  @import 'settings';
+
+  .scroll-top {
+    position: fixed;
+    right: 30px;
+    bottom: 50px;
+
+
+    background: $light-gray;
+    cursor: pointer;
+    opacity: 1;
+    transition: 0.3s;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    opacity: 1;
+  }
+
+  .scroll-top__area {
+    padding:20px;
+  }
+
+  .back-top-fade-enter,
+  .back-top-fade-leave-active {
+    transform: translateY(-30px);
+    opacity: 0;
+  }
+</style>

data/assets/js/apps/scroll-top/index.js

@@ -0,0 +1,9 @@
+import Vue from 'vue';
+import ScrollTop from './ScrollTop.vue';
+
+const appFactory = (el, attrs) => {
+  // Bootstrap Vue.js.
+  new Vue({el, render: h => h(ScrollTop, {attrs})});
+};
+
+export default appFactory;

data/assets/js/apps/site-search/SiteSearch.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="c-search">
+    <v-autocomplete
+      class="autocomplete"
+      v-model="item"
+      :input-attrs="{class: 'autocomplete__input c-search__input', placeholder: 'Hledaný výraz'}"
+      :items="items"
+      :get-label="getLabel"
+      :component-item="itemTemplate"
+      :auto-select-one-item="false"
+      :wait="0"
+      :min-len="0"
+      @item-selected="onItemSelected"
+      @update-items="onUpdateItems"></v-autocomplete>
+    <button type="button" class="c-search__confirm"><i class="fa fa-search" aria-hidden="true"></i></button>
+  </div>
+</template>
+
+<script>
+import ItemTemplate from './SiteSearchItemTemplate.vue';
+
+export default {
+  name: 'SiteSearch',
+  data () {
+    return {
+      item: null,
+      items: [],
+      itemTemplate: ItemTemplate
+    }
+  },
+  methods: {
+    getLabel (item) {
+      return item.label;
+    },
+    onItemSelected(item) {
+      // Redir
+      window.location.href = item.value;
+    },
+    onUpdateItems(searchText) {
+      this.items = this.allItems.filter(i => i.label.toLowerCase().indexOf(searchText.toLowerCase()) !== -1);
+    }
+  },
+  mounted() {
+    this.$http.get('/api/search.json').then(resp => {
+      this.allItems = this.items = resp.body.filter(i => !! i.label);
+    });
+  }
+}
+</script>
+
+<style lang="scss">
+  @import 'settings';
+
+  .v-autocomplete {
+    position: relative;
+  }
+
+  .v-autocomplete-list {
+    position: absolute;
+    z-index: 9999;
+    width: 100%;
+    top: 40px;
+    min-width: 400px;
+    text-align: left;
+    max-height: 300px;
+    overflow-y: auto;
+    border: $input-border;
+  }
+
+  .v-autocomplete-list-item {
+    cursor: pointer;
+    background-color: $white;
+    padding: .75em;
+    border-bottom: $input-border;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    &:hover {
+      background-color: $light-gray;
+    }
+  }
+</style>
+