insights4you-jekyll-theme 0.2.2 → 0.4.0

data/_sass/layout/_animations.scss

@@ -0,0 +1,63 @@
+@keyframes pulse {
+  from {
+    opacity: 1;
+    transform: scale3d(.8, .8, .8)
+  }
+
+  50% {
+    transform: scale3d(1, 1, 1);
+    opacity: 1
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(.8, .8, .8)
+  }
+}
+
+@keyframes tada {
+  0% {
+    transform: scale3d(1, 1, 1)
+  }
+
+  10%, 5% {
+    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg)
+  }
+
+  15%, 25%, 35%, 45% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg)
+  }
+
+  20%, 30%, 40% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg)
+  }
+
+  50% {
+    transform: scale3d(1, 1, 1)
+  }
+}
+
+@keyframes rotate-360 {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes blink {
+  from {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+

data/_sass/layout/_core.scss

@@ -0,0 +1,62 @@
+// stylelint-disable property-no-vendor-prefix
+body {
+  letter-spacing: $body-letter-spacing;
+  touch-action: manipulation;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "liga" 0, "cv03", "cv04", "cv11";
+  position: relative;
+  min-height: 100%;
+  height: 100%;
+  padding: 0 !important;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  @media print {
+    background: transparent;
+  }
+}
+
+@include scrollbar;
+
+//
+// Fluid container
+//
+.layout-fluid {
+  .container,
+  [class^="container-"],
+  [class*=" container-"] {
+    max-width: 100%;
+  }
+}
+
+//
+// Boxed container
+//
+.layout-boxed {
+  --#{$prefix}theme-boxed-border-radius: 0;
+  --#{$prefix}theme-boxed-width: #{map-get($container-max-widths, xxl)};
+
+  @include media-breakpoint-up(md) {
+    background: $dark linear-gradient(to right, rgba(#fff, .1), transparent) fixed;
+    padding: 1rem;
+    --#{$prefix}theme-boxed-border-radius: #{$border-radius};
+  }
+
+  .page {
+    margin: 0 auto;
+    max-width: var(--#{$prefix}theme-boxed-width);
+    border-radius: var(--#{$prefix}theme-boxed-border-radius);
+    color: var(--#{$prefix}body-color);
+
+    @include media-breakpoint-up(md) {
+      border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+      background: var(--#{$prefix}body-bg);
+    }
+
+    > .navbar:first-child {
+      border-top-left-radius: var(--#{$prefix}theme-boxed-border-radius);
+      border-top-right-radius: var(--#{$prefix}theme-boxed-border-radius);
+    }
+  }
+}

data/_sass/layout/_dark.scss

@@ -0,0 +1,77 @@
+@use "sass:color";
+
+// stylelint-disable declaration-no-important
+
+@if $enable-dark-mode {
+  :root {
+    &:not(.theme-dark):not([data-bs-theme="dark"]) {
+      .hide-theme-light {
+        display: none !important;
+      }
+
+      .img-dark {
+        display: none !important;
+      }
+    }
+
+    &.theme-dark,
+    &[data-bs-theme="dark"] {
+      .hide-theme-dark {
+        display: none !important;
+      }
+
+      .img-light {
+        display: none !important;
+      }
+    }
+  }
+
+
+  @include color-mode(dark, true) {
+    color-scheme: dark;
+    --#{$prefix}body-color: var(--#{$prefix}gray-200);
+    --#{$prefix}secondary: var(--#{$prefix}gray-400);
+
+    --#{$prefix}body-bg: var(--#{$prefix}gray-900);
+    --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
+    --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
+
+    --#{$prefix}bg-forms: var(--#{$prefix}gray-900);
+    --#{$prefix}bg-surface: var(--#{$prefix}gray-800);
+    --#{$prefix}bg-surface-inverted: var(--#{$prefix}gray-100);
+    --#{$prefix}bg-surface-secondary: var(--#{$prefix}gray-900);
+    --#{$prefix}bg-surface-tertiary: var(--#{$prefix}gray-800);
+
+    --#{$prefix}text-inverted: var(--#{$prefix}gray-800);
+
+    --#{$prefix}link-color: var(--#{$prefix}primary);
+    --#{$prefix}link-hover-color: color-mix(in srgb, var(--#{$prefix}primary), black 20%);
+
+    --#{$prefix}active-bg: #{$lighten-dark};
+    --#{$prefix}disabled-color: #{color-transparent(var(--#{$prefix}body-color), .4)};
+
+    --#{$prefix}border-color: var(--#{$prefix}gray-700);
+    --#{$prefix}border-color-translucent: var(
+      --#{$prefix}dark-mode-border-color-translucent
+    );
+    --#{$prefix}border-dark-color: var(--#{$prefix}dark-mode-border-dark-color);
+    --#{$prefix}border-active-color: var(
+      --#{$prefix}dark-mode-border-active-color
+    );
+
+    --#{$prefix}btn-color: #{$darken-dark};
+
+    --#{$prefix}code-color: var(--#{$prefix}body-color);
+    --#{$prefix}code-bg: #{$border-dark-color-dark};
+
+    .navbar-brand-autodark {
+      .navbar-brand-image {
+        @include autodark-image;
+      }
+    }
+  }
+
+  body[data-bs-theme=dark] [data-bs-theme=light] {
+    @extend [data-bs-theme=dark];
+  }
+}

data/_sass/layout/_footer.scss

@@ -0,0 +1,12 @@
+.footer {
+  border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $footer-border-color;
+  background-color: $footer-bg;
+  padding: $footer-padding-y 0;
+  color: $footer-color;
+  margin-top: auto;
+}
+
+.footer-transparent {
+  background-color: transparent;
+  border-top: 0;
+}

data/_sass/layout/_navbar.scss

@@ -0,0 +1,392 @@
+@mixin navbar-vertical-nav {
+  .navbar-collapse {
+    flex-direction: column;
+
+    [class^="container"] {
+      flex-direction: column;
+      align-items: stretch;
+      padding: 0;
+    }
+
+    .navbar-nav {
+      margin-left: 0;
+      margin-right: 0;
+
+      .nav-link {
+        padding: 0.5rem calc(#{$container-padding-x} / 2);
+        justify-content: flex-start;
+      }
+    }
+
+    .dropdown-menu-columns {
+      flex-direction: column;
+    }
+
+    .dropdown-menu {
+      padding: 0;
+      background: transparent;
+      position: static;
+      color: inherit;
+      box-shadow: none;
+      border: none;
+      min-width: 0;
+      margin: 0;
+
+      .dropdown-item {
+        min-width: 0;
+        display: flex;
+        width: auto;
+        padding-left: add(calc(#{$container-padding-x} / 2), 1.75rem);
+        color: inherit;
+
+        &.disabled {
+          color: var(--#{$prefix}disabled-color);
+          pointer-events: none;
+          background-color: transparent;
+        }
+
+        &.active,
+        &:active {
+          background: var(--#{$prefix}navbar-active-bg);
+        }
+      }
+
+      .dropdown-menu .dropdown-item {
+        padding-left: add(calc(#{$container-padding-x} / 2), 3.25rem);
+      }
+
+      .dropdown-menu .dropdown-menu .dropdown-item {
+        padding-left: add(calc(#{$container-padding-x} / 2), 4.75rem);
+      }
+    }
+
+    .dropdown-toggle:after {
+      margin-left: auto;
+    }
+
+    .nav-item.active:after {
+      border-bottom-width: 0;
+      border-left-width: 3px;
+      right: auto;
+      top: 0;
+      bottom: 0;
+    }
+  }
+}
+
+/**
+Navbar
+ */
+.navbar {
+  --#{$prefix}navbar-bg: var(--#{$prefix}bg-surface);
+  --#{$prefix}navbar-border-width: #{$navbar-border-width};
+  --#{$prefix}navbar-active-border-color: #{$navbar-active-border-color};
+  --#{$prefix}navbar-active-bg: #{$navbar-light-active-bg};
+  --#{$prefix}navbar-border-color: #{$navbar-border-color};
+  --#{$prefix}navbar-hover-color: #{$navbar-hover-color};
+  align-items: stretch;
+  min-height: $navbar-height;
+  box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 var(--#{$prefix}navbar-border-color);
+  background: var(--#{$prefix}navbar-bg);
+  color: var(--#{$prefix}navbar-color);
+
+  .navbar-collapse & {
+    flex-grow: 1;
+  }
+
+  &.collapsing {
+    min-height: 0;
+  }
+
+  .dropdown-menu {
+    position: absolute;
+    z-index: $zindex-fixed;
+  }
+
+  .navbar-nav {
+    min-height: subtract($navbar-height, 2 * $navbar-padding-y);
+
+    .nav-link {
+      position: relative;
+      min-width: 2.5rem;
+      min-height: 2.5rem;
+      justify-content: center;
+      border-radius: var(--#{$prefix}border-radius);
+
+      .badge {
+        position: absolute;
+        top: 0.375rem;
+        right: 0.375rem;
+        transform: translate(50%, -50%);
+      }
+    }
+  }
+}
+
+.navbar-expand {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
+
+    &#{$infix} {
+      @include media-breakpoint-down(breakpoint-next($breakpoint)) {
+        @include navbar-vertical-nav;
+      }
+
+      @include media-breakpoint-up($next) {
+        .navbar-collapse {
+          width: auto;
+          flex: 1 1 auto;
+        }
+
+        .nav-item.active {
+          position: relative;
+
+          .nav-link {
+            color: var(--#{$prefix}navbar-active-color);
+          }
+
+          &:after {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: -0.25rem;
+            border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
+            border-bottom-width: 2px;
+          }
+        }
+
+        &.navbar-vertical {
+          box-shadow: inset calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
+
+          &.navbar-right {
+            box-shadow: inset calc(1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
+          }
+        }
+
+        &.navbar-vertical {
+          ~ .navbar,
+          ~ .page-wrapper {
+            margin-left: $sidebar-width;
+          }
+        }
+
+        &.navbar-vertical.navbar-right {
+          ~ .navbar,
+          ~ .page-wrapper {
+            margin-left: 0;
+            margin-right: $sidebar-width;
+          }
+        }
+      }
+    }
+  }
+}
+
+/**
+Navbar brand
+ */
+.navbar-brand {
+  display: inline-flex;
+  align-items: center;
+  font-weight: $navbar-brand-font-weight;
+  margin: 0;
+  line-height: 1;
+  gap: $spacer-2;
+}
+
+.navbar-brand-image {
+  height: $navbar-brand-image-height;
+  width: auto;
+}
+
+/**
+Navbar toggler
+ */
+.navbar-toggler {
+  border: 0;
+  width: $navbar-brand-image-height;
+  height: $navbar-brand-image-height;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.navbar-toggler-icon {
+  height: 2px;
+  width: 1.25em;
+  background: currentColor;
+  border-radius: 10px;
+  @include transition(
+    top $navbar-toggler-animation-time $navbar-toggler-animation-time,
+    bottom $navbar-toggler-animation-time $navbar-toggler-animation-time,
+    transform $navbar-toggler-animation-time,
+    opacity 0s $navbar-toggler-animation-time
+  );
+  position: relative;
+
+  &:before,
+  &:after {
+    content: "";
+    display: block;
+    height: inherit;
+    width: inherit;
+    border-radius: inherit;
+    background: inherit;
+    position: absolute;
+    left: 0;
+    @include transition(inherit);
+  }
+
+  &:before {
+    top: -0.45em;
+  }
+
+  &:after {
+    bottom: -0.45em;
+  }
+
+  .navbar-toggler[aria-expanded="true"] & {
+    transform: rotate(45deg);
+    @include transition(top $transition-time, bottom $transition-time, transform $transition-time $transition-time, opacity 0s $transition-time);
+
+    &:before {
+      top: 0;
+      transform: rotate(-90deg);
+    }
+
+    &:after {
+      bottom: 0;
+      opacity: 0;
+    }
+  }
+}
+
+/**
+Navbar transparent
+ */
+.navbar-transparent {
+  --#{$prefix}navbar-border-color: transparent !important;
+  background: transparent !important;
+}
+
+/**
+Navbar nav
+ */
+.navbar-nav {
+  --#{$prefix}nav-link-hover-bg: #{color-transparent(var(--#{$prefix}nav-link-color), 0.08)};
+  margin: 0;
+  padding: 0;
+  align-items: stretch;
+
+  .nav-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+/**
+Navbar side
+ */
+.navbar-side {
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+}
+
+/**
+Navbar vertical
+ */
+@if $enable-navbar-vertical {
+  .navbar-vertical {
+    &.navbar-expand {
+      @each $breakpoint in map-keys($grid-breakpoints) {
+        $next: breakpoint-next($breakpoint, $grid-breakpoints);
+        $infix: breakpoint-infix($next, $grid-breakpoints);
+
+        &#{$infix} {
+          @include media-breakpoint-up($next) {
+            width: $sidebar-width;
+            position: fixed;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            z-index: $zindex-fixed;
+            align-items: flex-start;
+            @include transition(transform $transition-time);
+            overflow-y: scroll;
+            padding: 0;
+
+            &.navbar-right {
+              left: auto;
+              right: 0;
+            }
+
+            .navbar-brand {
+              padding: (($navbar-height - $navbar-brand-image-height) * 0.5) 0;
+              justify-content: center;
+            }
+
+            .navbar-collapse {
+              align-items: stretch;
+            }
+
+            .navbar-nav {
+              flex-direction: column;
+              flex-grow: 1;
+              min-height: auto;
+
+              .nav-link {
+                padding-top: 0.5rem;
+                padding-bottom: 0.5rem;
+              }
+            }
+
+            > [class^="container"] {
+              flex-direction: column;
+              align-items: stretch;
+              min-height: 100%;
+              justify-content: flex-start;
+              padding: 0;
+            }
+
+            ~ .page {
+              padding-left: $sidebar-width;
+
+              [class^="container"] {
+                padding-left: 1.5rem;
+                padding-right: 1.5rem;
+              }
+            }
+
+            &.navbar-right ~ .page {
+              padding-left: 0;
+              padding-right: $sidebar-width;
+            }
+
+            @include navbar-vertical-nav;
+          }
+        }
+      }
+    }
+  }
+}
+
+.navbar-overlap {
+  &:after {
+    content: "";
+    height: $navbar-overlap-height;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: inherit;
+    z-index: -1;
+    box-shadow: inherit;
+  }
+}