insights4you-jekyll-theme 0.2.0 → 0.4.0

data/_sass/layout/_page.scss

@@ -0,0 +1,169 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  min-height: 100%;
+}
+
+.page-center {
+  justify-content: center;
+}
+
+.page-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  @media print {
+    margin: 0 !important;
+  }
+}
+
+.page-wrapper-full {
+  .page-body:first-child {
+    margin: 0;
+    border-top: 0;
+  }
+}
+
+// Content body
+.page-body {
+  margin-top: var(--#{$prefix}page-padding-y);
+  margin-bottom: var(--#{$prefix}page-padding-y);
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.page-body-card {
+  background: var(--#{$prefix}bg-surface);
+  border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $card-border-color;
+  padding: var(--#{$prefix}page-padding) 0;
+  margin-bottom: 0;
+  flex: 1;
+
+  .page-body ~ & {
+    margin-top: 0;
+  }
+}
+
+.page-cover {
+  background: no-repeat center/cover;
+  min-height: 9rem;
+
+  @include media-breakpoint-up(md) {
+    min-height: 12rem;
+  }
+
+  @include media-breakpoint-up(lg) {
+    min-height: 15rem;
+  }
+}
+
+.page-cover-overlay {
+  position: relative;
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: $overlay-gradient;
+  }
+}
+
+
+.page-header {
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 2.25rem;
+  flex-direction: column;
+  justify-content: center;
+
+  .page-wrapper & {
+    margin: var(--#{$prefix}page-padding-y) 0 0;
+  }
+}
+
+.page-header-border {
+  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+  padding: var(--#{$prefix}page-padding-y) 0;
+  margin: 0 !important;
+  background-color: var(--#{$prefix}bg-surface);
+}
+
+.page-pretitle {
+  @include subheader;
+}
+
+.page-title {
+  margin: 0;
+  font-size: $page-title-font-size;
+  line-height: $page-title-line-height;
+  font-weight: $page-title-font-weight;
+  color: inherit;
+  display: flex;
+  align-items: center;
+
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-right: .25rem;
+  }
+}
+
+.page-title-lg {
+  font-size: $h1-font-size;
+  line-height: $h1-line-height;
+}
+
+.page-subtitle {
+  margin-top: .25rem;
+  color: var(--#{$prefix}secondary);
+}
+
+//
+// Page cover
+//
+.page-cover {
+  --#{$prefix}page-cover-blur: 20px;
+  --#{$prefix}page-cover-padding: 1rem;
+  min-height: 6rem;
+  padding: var(--#{$prefix}page-cover-padding) 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.page-cover-img {
+  position: absolute;
+  top: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+  left: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+  right: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+  bottom: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+  pointer-events: none;
+  filter: blur(var(--#{$prefix}page-cover-blur));
+  object-fit: cover;
+  background-size: cover;
+  background-position: center;
+  z-index: -1;
+}
+
+//
+// Page tabs
+//
+.page-tabs {
+  margin-top: .5rem;
+  position: relative;
+}
+
+.page-header-tabs {
+  .nav-bordered {
+    border: 0;
+  }
+
+  + .page-body-card {
+    margin-top: 0;
+  }
+}

data/_sass/layout/_root.scss

@@ -0,0 +1,64 @@
+:root,
+:host {
+  font-size: 16px;
+  height: 100%;
+
+  @include media-breakpoint-up(lg) {
+    margin-left: calc(100vw - 100%);
+    margin-right: 0;
+  }
+}
+
+:root,
+:host,
+[data-bs-theme="light"] {
+  color-scheme: light;
+  --#{$prefix}spacer: var(--#{$prefix}spacer-2);
+
+  --#{$prefix}bg-surface: var(--#{$prefix}bg-surface-primary);
+  --#{$prefix}bg-surface-primary: var(--#{$prefix}white);
+  --#{$prefix}bg-surface-secondary: var(--#{$prefix}gray-50);
+  --#{$prefix}bg-surface-tertiary: var(--#{$prefix}gray-50);
+  --#{$prefix}bg-surface-dark: var(--#{$prefix}gray-900);
+  --#{$prefix}bg-surface-inverted: var(--#{$prefix}gray-900);
+  --#{$prefix}bg-forms: var(--#{$prefix}bg-surface);
+
+  --#{$prefix}text-inverted: var(--#{$prefix}gray-100);
+
+  --#{$prefix}body-color: var(--#{$prefix}gray-700);
+  --#{$prefix}body-bg: var(--#{$prefix}bg-surface-secondary);
+
+  --#{$prefix}link-color: var(--#{$prefix}primary);
+  --#{$prefix}link-hover-color: color-mix(in srgb, var(--#{$prefix}primary), #000 20%);
+
+  --#{$prefix}secondary: var(--#{$prefix}gray-500);
+  --#{$prefix}tertiary: var(--#{$prefix}gray-400);
+
+  --#{$prefix}border-color: #{$border-color};
+  --#{$prefix}border-color-translucent: #{$border-color-translucent};
+  --#{$prefix}border-dark-color: #{$border-dark-color};
+  --#{$prefix}border-dark-color-translucent: #{$border-dark-color-translucent};
+  --#{$prefix}border-active-color: #{$border-active-color};
+
+  --#{$prefix}icon-color: #{$icon-color};
+
+  --#{$prefix}active-bg: #{$active-bg};
+
+  --#{$prefix}disabled-bg: #{$disabled-bg};
+  --#{$prefix}disabled-color: #{$disabled-color};
+
+  --#{$prefix}code-color: #{$code-color};
+  --#{$prefix}code-bg: #{$code-bg};
+
+  --#{$prefix}dark-mode-border-color: #{$border-color-dark};
+  --#{$prefix}dark-mode-border-color-translucent: #{$border-color-translucent-dark};
+  --#{$prefix}dark-mode-border-active-color: #{$border-active-color-dark};
+  --#{$prefix}dark-mode-border-dark-color: #{$border-dark-color-dark};
+
+  --#{$prefix}page-padding: #{$page-padding};
+  --#{$prefix}page-padding-y: #{$page-padding-y};
+
+  @include media-breakpoint-down($cards-grid-breakpoint) {
+    --#{$prefix}page-padding: #{$page-padding-sm};
+  }
+}

data/_sass/marketing/_browser.scss

@@ -0,0 +1,67 @@
+//
+// Browser
+//
+.browser {
+  border-radius: var(--#{$prefix}border-radius-lg);
+  box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
+  background: var(--#{$prefix}bg-surface-secondary);
+  overflow: hidden;
+}
+
+.browser-header {
+  padding: .25rem 1rem;
+  background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .03));
+  border-bottom: 1px solid var(--#{$prefix}border-color);
+  border-radius: calc(var(--#{$prefix}border-radius-lg) - 1px) calc(var(--#{$prefix}border-radius-lg) - 1px) 0 0;
+}
+
+.browser-dots {
+  margin-right: 3rem;
+  display: flex;
+}
+
+.browser-dots-colored {
+  .browser-dot {
+    &:nth-child(1) {
+      background: #fb6058;
+    }
+
+    &:nth-child(2) {
+      background: #fcbe3b;
+    }
+
+    &:nth-child(3) {
+      background: #2ccb4c;
+    }
+  }
+}
+
+.browser-dot {
+  margin-right: .5rem;
+  width: .75rem;
+  min-width: .75rem;
+  height: .75rem;
+  background: var(--#{$prefix}border-color);
+  border-radius: 50%;
+  border: 1px solid var(--#{$prefix}border-color-dark);
+}
+
+.browser-input {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  padding: .25rem;
+  color: var(--#{$prefix}secondary);
+  font-size: var(--#{$prefix}font-size-h5);
+  border-radius: var(--#{$prefix}border-radius);
+  line-height: 1;
+  cursor: pointer;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  background-image: linear-gradient(to bottom, var(--#{$prefix}bg-surface), var(--#{$prefix}bg-surface-secondary));
+
+  &:hover {
+    text-decoration: none;
+  }
+}

data/_sass/marketing/_core.scss

@@ -0,0 +1,8 @@
+.body-marketing {
+  --#{$prefix}body-font-size: 1rem;
+  --#{$prefix}body-line-height: 1.75;
+}
+
+.body-gradient {
+  background: var(--#{$prefix}bg-surface) linear-gradient(to bottom, var(--#{$prefix}bg-surface-secondary) 12%, var(--#{$prefix}bg-surface) 99%) repeat-x top center/100% 100vh;
+}

data/_sass/marketing/_hero.scss

@@ -0,0 +1,69 @@
+//
+// Hero
+//
+.hero {
+  text-align: center;
+  padding: 6.5rem 0;
+}
+
+.hero-title {
+  font-size: 3rem;
+  font-weight: var(--#{$prefix}font-weight-black);
+  letter-spacing: $spacing-tight;
+  line-height: $headings-line-height;
+
+  @include media-breakpoint-down(md) {
+    font-size: 2rem;
+  }
+}
+
+.hero-description {
+  color: var(--#{$prefix}secondary);
+  font-size: var(--#{$prefix}font-size-h2);
+  line-height: 1.5;
+  margin: 0 auto;
+  max-width: 45rem;
+
+  @include media-breakpoint-down(sm) {
+    font-size: var(--#{$prefix}font-size-h3);
+  }
+}
+
+.hero-description-wide {
+  max-width: 61.875rem;
+}
+
+//
+// Hero subheader
+//
+.hero-subheader {
+  @include subheader;
+  margin-bottom: 0.5rem;
+}
+
+.hero-img {
+  margin: 4rem auto;
+  max-width: 65rem;
+  border-radius: $border-radius-lg;
+  position: relative;
+  z-index: 1;
+  //box-shadow: 0 10px 15px -3px rgba($color-text, 0.1),
+  //  0 4px 6px -2px rgba($color-text, 0.05);
+
+  img,
+  svg {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    position: relative;
+  }
+}
+//
+//.hero-img-side {
+//  img,
+//  svg {
+//    max-width: 100%;
+//    height: auto;
+//    display: block;
+//  }
+//}

data/_sass/marketing/_pricing.scss

@@ -0,0 +1,111 @@
+$pricing-card-width: 22rem;
+
+.pricing {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  justify-content: center;
+
+  @include media-breakpoint-up(md) {
+    flex-direction: row;
+  }
+}
+
+.pricing-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: var(--#{$prefix}bg-surface);
+  border: 1px solid $border-color;
+  padding: 2rem;
+  margin: 0 0 1rem;
+  position: relative;
+  box-shadow: $box-shadow-card;
+  text-align: center;
+  border-radius: $border-radius-lg;
+
+  @include media-breakpoint-up(md) {
+    margin: 1rem -1px;
+    max-width: $pricing-card-width;
+
+    &:first-child {
+      border-radius: $border-radius-lg 0 0 $border-radius-lg;
+    }
+
+    &:last-child {
+      border-radius: 0 $border-radius-lg $border-radius-lg 0;
+    }
+  }
+
+  &.featured {
+    z-index: 1;
+    border: 2px solid var(--#{$prefix}primary);
+    order: -1;
+
+    @include media-breakpoint-up(md) {
+      order: unset;
+      margin-top: 0;
+      margin-bottom: 0;
+      box-shadow: $box-shadow-card;
+      border-radius: $border-radius-lg;
+    }
+  }
+}
+
+.pricing-title {
+  font-size: $h2-font-size;
+  line-height: $h2-line-height;
+}
+
+.pricing-label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translateY(-50%);
+  vertical-align: bottom;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pricing-btn {
+  margin-top: auto;
+  padding-top: 2rem;
+}
+
+.pricing-price {
+  display: flex;
+  justify-content: center;
+  font-size: 2.5rem;
+  line-height: 1;
+  font-weight: $font-weight-black;
+  margin: 0.75rem 0;
+}
+
+.pricing-price-currency {
+  font-size: $h2-font-size;
+  line-height: 1.5;
+  margin-right: 0.25rem;
+  font-weight: $font-weight-bold;
+}
+
+.pricing-price-description {
+  font-size: $h4-font-size;
+  line-height: $h4-line-height;
+  font-weight: $font-weight-normal;
+  color: $text-secondary;
+  align-self: center;
+  margin-left: 0.5rem;
+}
+
+.pricing-features {
+  margin: 1rem 0 0;
+  padding: 0;
+  list-style: none;
+  text-align: left;
+
+  > li:not(:first-child) {
+    margin-top: 0.25rem;
+  }
+}

data/_sass/marketing/_sections.scss

@@ -0,0 +1,124 @@
+@keyframes move-forever1 {
+  0% {
+    transform: translate(85px, 0%);
+  }
+
+  100% {
+    transform: translate(-90px, 0%);
+  }
+}
+
+@keyframes move-forever2 {
+  0% {
+    transform: translate(-90px, 0%);
+  }
+
+  100% {
+    transform: translate(85px, 0%);
+  }
+}
+
+@keyframes move-forever3 {
+  0% {
+    transform: translate(-90px, 0%);
+  }
+
+  100% {
+    transform: translate(85px, 0%);
+  }
+}
+
+//
+// Sections
+//
+.section {
+  --section-bg: transparent;
+  background: var(--section-bg);
+  position: relative;
+  padding: 5rem 0;
+}
+
+.section-sm {
+  padding: 4rem 0;
+}
+
+.section-white {
+  --section-bg: var(--#{$prefix}bg-surface);
+}
+
+.section-light {
+  --section-bg: var(--#{$prefix}bg-surface-secondary);
+}
+
+.section-primary {
+  --section-bg: var(--#{$prefix}primary);
+  color: $white;
+}
+
+.section-dark {
+  --section-bg: var(--#{$prefix}dark);
+  color: $white;
+}
+
+.section-header {
+  text-align: center;
+  max-width: 45rem;
+  margin: 0 auto 5rem;
+
+  @at-root .section-sm & {
+    margin-bottom: 4rem;
+  }
+}
+
+.section-title {
+  font-size: var(--#{$prefix}font-size-h1);
+  font-weight: var(--#{$prefix}font-weight-bold);
+  line-height: 1.2;
+}
+
+.section-title-lg {
+  font-size: 2rem;
+}
+
+.section-description {
+  color: var(--#{$prefix}secondary);
+  font-size: var(--#{$prefix}font-size-h3);
+  line-height: var(--#{$prefix}line-height-h3);
+  margin-top: 1rem;
+}
+
+//
+// Section divider
+//
+.section-divider {
+  position: absolute;
+  bottom: 100%;
+  pointer-events: none;
+  height: 5rem;
+  width: 100%;
+
+  path {
+    fill: var(--section-bg);
+  }
+
+  .wave-1 {
+    animation: move-forever1 30s linear infinite;
+    animation-delay: -2s;
+  }
+
+  .wave-2 {
+    animation: move-forever2 24s linear infinite;
+    opacity: .5;
+    animation-delay: -2s;
+  }
+
+  .wave-3 {
+    animation: move-forever3 18s linear infinite;
+    opacity: .3;
+    animation-delay: -2s;
+  }
+}
+
+.section-divider-auto {
+  height: auto;
+}

data/_sass/marketing/_shape.scss

@@ -0,0 +1,31 @@
+.shape {
+  --#{$prefix}shape-size: #{$avatar-size};
+  --#{$prefix}shape-icon-size: #{$avatar-icon-size};
+  background-color: var(--#{$prefix}primary-lt);
+  color: var(--#{$prefix}primary);
+  border-radius: 35%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--#{$prefix}shape-size);
+  width: var(--#{$prefix}shape-size);
+
+  .icon {
+    width: var(--#{$prefix}shape-icon-size);
+    height: var(--#{$prefix}shape-icon-size);
+  }
+}
+
+@each $avatar-size, $size in $avatar-sizes {
+  .shape-#{$avatar-size} {
+    --#{$prefix}shape-size: #{map-get($size, size)};
+    --#{$prefix}shape-icon-size: #{map-get($size, icon-size)};
+  }
+}
+
+@each $name, $color in $colors {
+  .shape-#{$name} {
+    background: var(--#{$prefix}#{$name}-lt);
+    color: var(--#{$prefix}#{$name});
+  }
+}