jekyll-theme-pga-default 0.1.0 → 0.2.0

data/_sass/components/_footer.scss

@@ -0,0 +1,92 @@
+.footer {
+  background-color: theme-color("secondary");
+  padding: 50px 0;
+}
+
+.footer-col {
+  flex: 0 0 100%;
+  max-width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-bottom: 1rem;
+  @include media-breakpoint-up(sm) {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  @include media-breakpoint-up(md) {
+    flex: 0 0 33.33333%;
+    max-width: 33.33333%;
+  }
+  @include media-breakpoint-up(lg) {
+    flex: 0 0 20%;
+    max-width: 20%;
+    margin-bottom: 0;
+  }
+
+  h5 {
+    color: $white;
+    margin-bottom: 0.75rem;
+  }
+
+  ul:not(.social-list) {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+
+    li + li {
+      a {
+        margin-top: 8px;
+      }
+    }
+
+    a {
+      color: $gray-600;
+      font-size: 0.75rem;
+      display: block;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+}
+// Copyright
+
+.copyright {
+  opacity: 0.6;
+  font-size: 10px;
+  color: $gray-600;
+  margin-bottom: 0.125rem;
+}
+// Social list
+
+.social-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  display: flex;
+  margin-left: -5px;
+  margin-top: 1rem;
+
+  li {
+    margin: 0 5px;
+  }
+}
+
+.social-list-item {
+  circle,
+  path {
+    transition: all 0.3s ease-in-out;
+  }
+
+  &:hover {
+    circle {
+      fill: theme-color("primary");
+    }
+
+    path {
+      fill: theme-color("secondary");
+    }
+  }
+}

data/_sass/components/_header.scss

@@ -0,0 +1,336 @@
+.navbar-primary {
+  @extend .navbar;
+  @extend .navbar-expand-lg;
+  @extend .navbar-dark;
+  background-color: theme-color("secondary");
+  height: 53px;
+  box-shadow: $navbar-shadow;
+  @include media-breakpoint-up(md) {
+    height: 80px;
+  }
+
+  .navbar-nav:not(.navbar-icon) {
+    @include media-breakpoint-down(md) {
+      padding: 0 30px;
+
+      .nav-item + .nav-item {
+        border-top: 1px solid rgba(127, 145, 165, 0.5);
+      }
+    }
+
+    .nav-link {
+      font-size: 1rem;
+      font-weight: 500;
+      height: 100%;
+      padding-left: $nav-link-padding-x;
+      padding-right: $nav-link-padding-x;
+      display: flex;
+      align-items: center;
+      position: relative;
+      text-transform: capitalize;
+      @include media-breakpoint-down(md) {
+        padding: 0.75rem;
+        font-size: 1.125rem;
+        width: fit-content;
+      }
+
+      &:after {
+        position: absolute;
+        content: "";
+        left: $nav-link-padding-x;
+        right: $nav-link-padding-x;
+        bottom: 0;
+        border-bottom: 4px solid theme-color("primary");
+        width: 0;
+        -webkit-transition: width cubic-bezier(0.83, 0.01, 0.68, 1) 0.3s;
+        -o-transition: width cubic-bezier(0.83, 0.01, 0.68, 1) 0.3s;
+        transition: width cubic-bezier(0.83, 0.01, 0.68, 1) 0.3s;
+        @include media-breakpoint-down(md) {
+          left: 0.75rem;
+          right: 0.75rem;
+          bottom: 12px;
+        }
+      }
+
+      &:focus:not(.active),
+      &:hover:not(.active) {
+        color: theme-color("primary");
+      }
+
+      &.active {
+        color: $white;
+        font-weight: 700;
+
+        &:after {
+          width: calc(100% - 2.5rem);
+          @include media-breakpoint-down(md) {
+            width: calc(100% - 1.5rem);
+          }
+        }
+      }
+    }
+  }
+
+  .container {
+    height: 100%;
+  }
+}
+
+.navbar-secondary {
+  &.fixed {
+    position: absolute;
+    z-index: 10;
+    top: 80px;
+    left: 0;
+    right: 0;
+  }
+
+  .navbar-nav {
+    margin-left: -$nav-secondary-link-padding-x;
+
+    .nav-link {
+      font-size: 0.75rem;
+      font-weight: 500;
+      text-transform: uppercase;
+      height: 100%;
+      padding: $nav-secondary-link-padding-y $nav-secondary-link-padding-x;
+      position: relative;
+
+      &:after {
+        display: block;
+        content: attr(title);
+        font-weight: bold;
+        height: 0;
+        overflow: hidden;
+        visibility: hidden;
+      }
+    }
+
+    .nav-link {
+      &.active,
+      &:focus,
+      &:hover {
+        font-weight: 700;
+      }
+    }
+  }
+}
+
+.btn-login {
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  padding: 0.7825rem 2rem;
+  text-transform: uppercase;
+  font-weight: 500;
+  font-size: 0.75rem;
+
+  .icon-user {
+    padding-right: 1.5rem;
+  }
+  @include media-breakpoint-down(md) {
+    background-color: transparent;
+    border-color: transparent;
+    position: absolute;
+    bottom: 54px;
+    right: 0;
+  }
+}
+
+.navbar-icon {
+  @extend .flex-row;
+  @extend .ml-md-auto;
+  @extend .d-flex;
+  padding-right: 1.25rem;
+  @include media-breakpoint-down(md) {
+    position: absolute;
+    bottom: 62px;
+    left: 25px;
+  }
+
+  .nav-link-icon {
+    color: theme-color("primary");
+    font-weight: 500;
+    text-transform: uppercase;
+    padding-left: 0.625rem;
+    padding-right: 0;
+    display: -webkit-flex;
+    display: -ms-flex;
+    display: flex;
+
+    &:hover {
+      opacity: 0.8;
+    }
+    @include media-breakpoint-down(md) {
+      svg {
+        height: 19px;
+        width: auto;
+      }
+    }
+
+    svg {
+      margin-right: 5px;
+
+      &.icon-search {
+        margin-right: 10px;
+      }
+    }
+
+    small {
+      font-weight: 500;
+      font-size: 85.75%;
+      line-height: 0.8;
+      align-self: center;
+      @include media-breakpoint-down(md) {
+        display: none;
+      }
+    }
+  }
+}
+
+.navbar-toggler {
+  border-width: 0;
+}
+
+.navbar-brand {
+  margin-right: 70px;
+  @include media-breakpoint-down(md) {
+    padding-top: 0;
+    margin-right: 0;
+
+    img {
+      width: 100px;
+    }
+  }
+}
+
+.mobile-buttons-group {
+  display: flex;
+  align-items: center;
+}
+
+.navbar-search {
+  display: flex;
+  padding-right: 1.25rem;
+  background-color: transparent;
+  border: transparent;
+  @include media-breakpoint-up(lg) {
+    display: none;
+  }
+}
+
+.navbar-collapse {
+  @include media-breakpoint-down(md) {
+    background-color: theme-color("secondary");
+    position: fixed;
+    display: block !important;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 315px;
+    z-index: 2000;
+    height: 100vh;
+    transform: translateX(340px);
+    transition: transform 0.2s ease-in-out;
+    overflow: scroll;
+    -webkit-overflow-scrolling: touch;
+
+    &.show {
+      transform: translateX(0px);
+    }
+  }
+}
+
+.navbar-collapse-header {
+  height: 53px;
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 1.25rem;
+  @include media-breakpoint-up(lg) {
+    display: none;
+  }
+}
+
+.overlay {
+  background-color: $navy-50;
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: none;
+
+  &.show {
+    display: block;
+  }
+}
+
+.navbar-collapse-inner {
+  @include media-breakpoint-down(md) {
+    min-height: 450px;
+    height: 100vh;
+    position: relative;
+  }
+  @include media-breakpoint-up(lg) {
+    width: 100%;
+    display: flex !important;
+    flex-basis: auto;
+    height: 100%;
+    align-items: center;
+  }
+}
+// navs
+
+.nav-tabs {
+  margin-left: -$nav-tabs-link-padding-x;
+  margin-bottom: 40px;
+
+  .nav-link {
+    font-size: 0.75rem;
+    font-weight: 500;
+    padding: 12px 0;
+    text-transform: uppercase;
+    position: relative;
+    color: $white;
+
+    &:after {
+      position: absolute;
+      content: "";
+      left: $nav-tabs-link-padding-x;
+      right: $nav-tabs-link-padding-x;
+      bottom: 0;
+      border-bottom: 4px solid theme-color("primary");
+      width: 0;
+      @include transition(width cubic-bezier(0.83, 0.01, 0.68, 1) 0.3s);
+    }
+
+    &.active,
+    &:focus,
+    &:hover {
+      &:after {
+        width: calc(100% - 1.875rem);
+        @include media-breakpoint-down(xs) {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
+.nav-tabs.nav-fill {
+  @include media-breakpoint-down(xs) {
+    .nav-item {
+      width: 100%;
+    }
+  }
+}
+
+.dropdown-menu .dropdown-item {
+  font-size: 12px;
+}
+
+#dropdown-container {
+  top: 7px !important;
+  left: -100% !important;
+}

data/_sass/components/_nav-sidebar.scss

@@ -0,0 +1,217 @@
+// #nav-sidebar {
+//   .white {
+//     border: solid white;
+//     border-width: 0 2px 2px 0;
+//     display: inline-block;
+//     padding: 3px;
+//   }
+//   .black {
+//     border: solid $blue-grey;
+//     border-width: 0 2px 2px 0;
+//     display: inline-block;
+//     padding: 3px;
+//   }
+//   .right {
+//       transform: rotate(-45deg);
+//       -webkit-transform: rotate(-45deg);
+//   }
+//   .left {
+//       transform: rotate(135deg);
+//       -webkit-transform: rotate(135deg);
+//   }
+//   .up {
+//       transform: rotate(-135deg);
+//       -webkit-transform: rotate(-135deg);
+//   }
+//   .down {
+//       transform: rotate(45deg);
+//       -webkit-transform: rotate(45deg);
+//   }
+//   a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover {
+//     background-color: transparent !important;
+//   }
+//   .navchild-active {
+//     @extend .bl-5;
+//     font-weight: 700;
+//   }
+//   .category-active {
+//     font-weight: 700;
+//     font-size: 1.1rem;
+//   }
+//   .category-inactive {
+//     font-weight: 500;
+//     font-size: 1.1rem;
+//     color: $blue-grey;
+//   }
+//   .collapse {
+//     span {
+//       color: $blue-grey;
+//     }
+//   }
+// }
+// Sidebar
+
+.sidebar {
+  background-color: $white;
+  box-shadow: 0 5px 10px 0 rgba(0, 35, 75, 0.15);
+  margin-bottom: 1rem;
+}
+//  Main category
+
+.main-category__item {
+  > a {
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: -0.2px;
+    line-height: 1.75;
+    padding: 20px;
+    display: block;
+    position: relative;
+    text-transform: uppercase;
+
+    &:after {
+      content: "\e905";
+      font-size: 12px;
+      position: absolute;
+      top: 50%;
+      right: 20px;
+      transform: translateY(-50%);
+      font-family: 'icomoon' !important;
+    }
+  }
+
+  & + .main-category__item {
+    border-top: solid 1px #dee2e3;
+  }
+
+  > a.collapsed {
+    position: relative;
+
+    &:after {
+      content: "\e904";
+    }
+  }
+
+  > a.directed {
+    position: relative;
+
+    &:after {
+      content: "\e900";
+    }
+  }
+}
+//  Secondary category
+
+.secondary-category {
+  position: relative;
+
+  .list-group-item {
+    border: 0;
+  }
+
+  &:not(.active) {
+    position: relative;
+    margin-top: -1px;
+
+    [data-toggle="collapse"] {
+      &:after {
+        color: theme-color("secondary");
+      }
+    }
+
+    &:before {
+      border-top: solid 1px #dee2e3;
+      content: "";
+      display: block;
+      position: absolute;
+      right: 0;
+      left: 0;
+      top: 0;
+      z-index: 10;
+      @include media-breakpoint-up(lg) {
+        right: 20px;
+        left: 20px;
+      }
+    }
+  }
+}
+
+.secondary-category__item {
+  color: $blue-grey;
+  display: block;
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.75;
+  padding: 20px 25px;
+  text-transform: capitalize;
+  @include media-breakpoint-up(lg) {
+    font-size: 16px;
+    padding: 28px 40px;
+  }
+
+  &[data-toggle="collapse"] {
+    position: relative;
+
+    &:after {
+      content: "\e903";
+      font-size: 12px;
+      position: absolute;
+      top: 50%;
+      right: 20px;
+      transform: translateY(-50%);
+      font-family: 'icomoon' !important;
+    }
+
+    &.collapsed {
+      position: relative;
+
+      &:after {
+        content: "\e902";
+      }
+    }
+  }
+}
+
+.secondary-category__item—active {
+  background-color: theme-color("primary");
+  color: $white;
+}
+// Subcategory
+
+.sub-category {
+  padding: 20px 0;
+
+  .sub-category__item {
+    border: none;
+    border: 0;
+    color: theme-color("secondary");
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 1.5;
+    padding: 11px 40px;
+    text-transform: capitalize;
+    display: block;
+    @include media-breakpoint-up(lg) {
+      color: $blue-grey;
+      font-size: 16px;
+      padding: 11px 60px;
+    }
+
+    &.sub-category__item-active {
+      color: theme-color("secondary");
+      position: relative;
+
+      &:before {
+        background-color: theme-color("primary");
+        bottom: 5px;
+        content: "";
+        display: block;
+        left: 0;
+        position: absolute;
+        top: 5px;
+        width: 5px;
+      }
+    }
+  }
+}

data/assets/fonts/icomoon/icomoon.svg

@@ -0,0 +1,16 @@
+<?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 IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="arrow-right" d="M782.858 397.307l-440.304-440.29c-28.009-28.022-73.42-28.022-101.415 0-27.997 27.997-27.997 73.406 0 101.401l389.601 389.589-389.589 389.576c-27.997 28.009-27.997 73.413 0 101.41 27.997 28.009 73.406 28.009 101.415 0l440.304-440.297c13.999-14.005 20.99-32.342 20.99-50.687 0-18.354-7.005-36.704-21.001-50.703z" />
+<glyph unicode="&#xe901;" glyph-name="arrow-left" d="M220.146 448.008c0 18.345 7.005 36.695 20.983 50.687l440.308 440.297c28.009 28.009 73.42 28.009 101.417 0 27.997-27.997 27.997-73.399 0-101.41l-389.603-389.574 389.576-389.589c27.997-27.997 27.997-73.406 0-101.401-27.997-28.022-73.395-28.022-101.404 0l-440.31 440.29c-13.976 13.999-20.967 32.349-20.967 50.701z" />
+<glyph unicode="&#xe902;" glyph-name="icon-plus" d="M457.143 857.6c0 30.297 24.56 54.857 54.857 54.857s54.857-24.56 54.857-54.857v-819.2c0-30.297-24.56-54.857-54.857-54.857s-54.857 24.56-54.857 54.857v819.2zM102.4 393.143c-30.297 0-54.857 24.56-54.857 54.857s24.56 54.857 54.857 54.857h819.2c30.297 0 54.857-24.56 54.857-54.857s-24.56-54.857-54.857-54.857h-819.2z" />
+<glyph unicode="&#xe903;" glyph-name="icon-minus" d="M60.472 387.528c-33.398 0-60.472 27.074-60.472 60.472s27.074 60.472 60.472 60.472h903.055c33.398 0 60.472-27.074 60.472-60.472s-27.074-60.472-60.472-60.472h-903.055z" />
+<glyph unicode="&#xe904;" glyph-name="arrow-down" d="M461.307 177.142l-440.29 440.304c-28.022 28.009-28.022 73.42 0 101.415 27.997 27.997 73.406 27.997 101.401 0l389.589-389.601 389.576 389.589c28.009 27.997 73.413 27.997 101.41 0 28.009-27.997 28.009-73.406 0-101.415l-440.297-440.304c-14.005-13.999-32.342-20.99-50.687-20.99-18.354 0-36.704 7.005-50.703 21.001z" />
+<glyph unicode="&#xe905;" glyph-name="arrow-up" d="M512.008 739.854c18.345 0 36.695-7.005 50.687-20.983l440.297-440.308c28.009-28.009 28.009-73.42 0-101.417-27.997-27.997-73.399-27.997-101.41 0l-389.574 389.603-389.589-389.576c-27.997-27.997-73.406-27.997-101.401 0-28.022 27.997-28.022 73.395 0 101.404l440.29 440.31c13.999 13.976 32.349 20.967 50.701 20.967z" />
+</font></defs></svg>