insights4you-jekyll-theme 0.2.0 → 0.4.0

data/_includes/utils/settings.html

@@ -0,0 +1,144 @@
+<div class="settings">
+    <!-- Settings Toggle Button -->
+    <a href="#" class="btn btn-floating btn-icon btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings" aria-controls="offcanvasSettings" aria-expanded="false">
+        {% include ui/icon.html icon="brush" %}
+    </a>
+
+    <!-- Settings Panel -->
+    <form class="offcanvas offcanvas-start offcanvas-narrow" tabindex="-1" id="offcanvasSettings" aria-labelledby="offcanvasSettingsLabel">
+        <!-- Header -->
+        <div class="offcanvas-header">
+            <h2 class="offcanvas-title" id="offcanvasSettingsLabel">Theme Builder</h2>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+
+        <!-- Body -->
+        <div class="offcanvas-body d-flex flex-column">
+            <div>
+                <!-- Color Mode -->
+                <div class="mb-4">
+                    <label class="form-label" for="colorMode">Color mode</label>
+                    <p class="form-hint" id="colorModeHint">Choose the color mode for your app.</p>
+                    {% assign modes = 'light,dark' | split: ',' %}
+                    {% for mode in modes %}
+                    <label class="form-check">
+                        <div class="form-selectgroup-item">
+                            <input type="radio" 
+                                   name="theme" 
+                                   value="{{ mode }}" 
+                                   class="form-check-input"
+                                   id="theme-{{ mode }}"
+                                   aria-describedby="colorModeHint"
+                                   {% if mode == 'light' %}checked{% endif %}>
+                            <div class="form-check-label">{{ mode | capitalize }}</div>
+                        </div>
+                    </label>
+                    {% endfor %}
+                </div>
+
+                <!-- Color Scheme -->
+                <div class="mb-4">
+                    <label class="form-label" for="colorScheme">Color scheme</label>
+                    <p class="form-hint" id="colorSchemeHint">The perfect color mode for your app.</p>
+                    <div class="row g-2">
+                        {% for color in site.data.i4y-colors.base %}
+                        <div class="col-auto">
+                            <label class="form-colorinput">
+                                <input name="theme-primary" 
+                                       type="radio" 
+                                       value="{{ color.name }}" 
+                                       class="form-colorinput-input"
+                                       id="theme-primary-{{ color.name }}"
+                                       aria-describedby="colorSchemeHint"
+                                       {% if color.name == 'blue' %}checked{% endif %}>
+                                <span class="form-colorinput-color" style="background-color: {{ color.value }}"></span>
+                            </label>
+                        </div>
+                        {% endfor %}
+                    </div>
+                </div>
+
+                <!-- Font Family -->
+                <div class="mb-4">
+                    <label class="form-label" for="fontFamily">Font family</label>
+                    <p class="form-hint" id="fontFamilyHint">Choose the font family that fits your app.</p>
+                    <div>
+                        {% assign fonts = 'sans-serif,serif,monospace,comic' | split: ',' %}
+                        {% for font in fonts %}
+                        <label class="form-check">
+                            <div class="form-selectgroup-item">
+                                <input type="radio" 
+                                       name="theme-font" 
+                                       value="{{ font }}" 
+                                       class="form-check-input"
+                                       id="theme-font-{{ font }}"
+                                       aria-describedby="fontFamilyHint"
+                                       {% if font == 'sans-serif' %}checked{% endif %}>
+                                <div class="form-check-label">{{ font | capitalize }}</div>
+                            </div>
+                        </label>
+                        {% endfor %}
+                    </div>
+                </div>
+
+                <!-- Theme Base -->
+                <div class="mb-4">
+                    <label class="form-label" for="themeBase">Theme base</label>
+                    <p class="form-hint" id="themeBaseHint">Choose the gray shade for your app.</p>
+                    <div>
+                        {% assign bases = 'slate,gray,zinc,neutral,stone' | split: ',' %}
+                        {% for base in bases %}
+                        <label class="form-check">
+                            <div class="form-selectgroup-item">
+                                <input type="radio" 
+                                       name="theme-base" 
+                                       value="{{ base }}" 
+                                       class="form-check-input"
+                                       id="theme-base-{{ base }}"
+                                       aria-describedby="themeBaseHint"
+                                       {% if base == 'gray' %}checked{% endif %}>
+                                <div class="form-check-label">{{ base | capitalize }}</div>
+                            </div>
+                        </label>
+                        {% endfor %}
+                    </div>
+                </div>
+
+                <!-- Corner Radius -->
+                <div class="mb-4">
+                    <label class="form-label" for="cornerRadius">Corner Radius</label>
+                    <p class="form-hint" id="cornerRadiusHint">Choose the border radius factor for your app.</p>
+                    <div>
+                        {% assign radiuses = '0,0.5,1,1.5,2' | split: ',' %}
+                        {% for radius in radiuses %}
+                        <label class="form-check">
+                            <div class="form-selectgroup-item">
+                                <input type="radio" 
+                                       name="theme-radius" 
+                                       value="{{ radius }}" 
+                                       class="form-check-input"
+                                       id="theme-radius-{{ radius }}"
+                                       aria-describedby="cornerRadiusHint"
+                                       {% if radius == "1" %}checked{% endif %}>
+                                <div class="form-check-label">{{ radius }}</div>
+                            </div>
+                        </label>
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
+
+            <!-- Action Buttons -->
+            <div class="mt-auto space-y">
+                <button type="button" class="btn w-100" id="reset-changes">
+                    {% include ui/icon.html icon="rotate" %}
+                    Reset changes
+                </button>
+                <a href="#" class="btn btn-primary w-100" data-bs-dismiss="offcanvas">
+                    {% include ui/icon.html icon="settings" %}
+                    Save settings
+                </a>
+            </div>
+        </div>
+    </form>
+</div>

data/_layouts/base.html

@@ -0,0 +1,63 @@
+{% include utils/banner.html %}
+{% assign env = jekyll.environment | default: "development" %}
+{% assign layout-dark = page.layout-dark | default: site.layout-dark %}
+{% if site.github.build_revision %}
+  {% assign cache_bust = site.github.build_revision %}
+{% else %}
+  {% assign cache_bust = site.time | date: '%Y%m%d%H%M%S' %}
+{% endif %}
+
+{% assign title = page.title | default: site.title | escape %}
+{% assign description = page.description | default: site.description | strip_html | strip_newlines | truncate: 160 %}
+{% assign image = page.image | default: site.author.image | default: "/assets/images/default-image.jpg" %}
+
+{% if page.name and page.collection == 'projects' %}
+  {% assign title = page.name | escape %}
+{% endif %}
+
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: 'en' }}"
+      {% if layout-rtl %}dir="rtl"{% endif %}
+      {% if layout.html-class or page.html-class %}class="{{ page.html-class | default: layout.html-class }}"{% endif %}>
+
+      {% include layout/head.html %}
+
+    <body class="{% if layout-dark %}theme-dark{% endif %} 
+                {% if layout.body-class %}{{ layout.body-class }}{% endif %} 
+                {% if body-class %}{{ body-class }}{% endif %}">
+    
+        <!-- Main Content -->
+        {{ content }}
+
+
+    <!-- Footer -->
+
+
+    <!-- Settings -->
+    {% include utils/settings.html %}
+
+    <!-- Theme Script -->
+    {% if env == "development" %}
+        <script src="{{ '/assets/js/theme.js' | relative_url }}?v={{ cache_bust }}"></script>
+        <script src="{{ '/assets/js/custom.js' | relative_url }}?v={{ cache_bust }}"></script>
+    {% else %}
+        <script src="{{ '/assets/js/theme.min.js' | relative_url }}?v={{ cache_bust }}"></script>
+        <script src="{{ '/assets/js/custom.min.js' | relative_url }}?v={{ cache_bust }}"></script>
+    {% endif %}    
+
+    <!-- Page-specific Scripts -->
+    {% if page.custom_js %}
+        {% for js_file in page.custom_js %}
+            <script src="{{ '/assets/js/' | append: js_file | append: '.js' | relative_url }}?v={{ cache_bust }}"></script>
+        {% endfor %}
+    {% endif %}
+
+    <!-- Noscript Fallback -->
+    <noscript>
+        <div class="alert alert-warning" role="alert">
+            This website works best with JavaScript enabled.
+        </div>
+    </noscript>
+
+</body>
+</html>

data/_layouts/default.html

@@ -1,17 +1,42 @@
-<!DOCTYPE html>
-<html lang="en">
+---
+layout: base
+body-class: border-top-wide border-primary
+---
 
-{% include head.html %}
+{% assign no-container = page.no-container | default: layout.no-container %}
+{% assign layout-wrapper-full = page.layout-wrapper-full | default: layout.layout-wrapper-full %}
 
-<body{% if layout.body-class or body-class %} class="{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if body-class %} {{ body-class }}{% endif %}"{% endif %}>
+<div class="page">
 
-  {{ content }}
+	<div class="page-wrapper{% if layout-wrapper-full %} page-wrapper-full{% endif %}">
 
+		{% include layout/navbar.html %}
 
-  <!-- Tabler JS -->
-  <script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.1.1/dist/js/tabler.min.js" defer ></script>
+		<!-- BEGIN PAGE BODY -->
+		<div class="page-body">
+			{% if layout-wrapper-full %}
+			<div class="row justify-content-center">
+				<div class="col-lg-11 col-xl-10">
+					<div class="card card-lg">
+						<div class="card-body markdown">
+							{{ content }}
+						</div>
+					</div>
+				</div>
+			</div>
+			{% else %}
+			{% unless no-container %}
+			<div class="container-xl{% if page-container-centered %} my-auto{% endif %}{% if page-container-class %} {{ page-container-class }}{% endif %}">
+			{% endunless %}
+				{{ content }}
+			{% unless no-container %}
+			</div>
+			{% endunless %}
 
-  <!-- Custom Theme JS -->
-  <script src="{{ '/assets/js/theme.js' | relative_url }}" defer></script>
-</body>
-</html>
+			{% endif %}
+		</div>
+		<!-- END PAGE BODY -->
+
+		{% include layout/footer.html %}
+	</div>
+</div>

data/_sass/_bootstrap-components.scss

@@ -0,0 +1,31 @@
+// Layout & components
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/placeholders";
+
+// Utilities
+@import "bootstrap/scss/utilities/api";

data/_sass/_bootstrap-config.scss

@@ -0,0 +1,7 @@
+// Config
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";

data/_sass/_bootstrap-override.scss

@@ -0,0 +1,78 @@
+@mixin caret($direction: down) {
+  $selector: "after";
+
+  @if $direction == "left" {
+    $selector: "before";
+  }
+
+  &:#{$selector} {
+    content: "";
+    display: inline-block;
+    vertical-align: $caret-vertical-align;
+    width: $caret-width;
+    height: $caret-width;
+    border-bottom: 1px var(--#{$prefix}border-style);
+    border-left: 1px var(--#{$prefix}border-style);
+    margin-right: 0.1em;
+
+    @if $direction != "left" {
+      margin-left: $caret-spacing;
+    } @else {
+      margin-right: $caret-spacing;
+    }
+
+    @if $direction == down {
+      transform: rotate(-45deg);
+    } @else if $direction == up {
+      transform: rotate(135deg);
+    } @else if $direction == end {
+      transform: rotate(-135deg);
+    } @else {
+      transform: rotate(45deg);
+    }
+  }
+
+  @if $direction == "left" {
+    &:after {
+      content: none;
+    }
+  }
+}
+
+@mixin alert-variant($background: null, $border: null, $color: null) {
+  // Override bootstrap core
+}
+
+@mixin button-variant(
+  $background: null,
+  $border: null,
+  $color: null,
+  $hover-background: null,
+  $hover-border: null,
+  $hover-color: null,
+  $active-background: null,
+  $active-border: null,
+  $active-color: null,
+  $disabled-background: null,
+  $disabled-border: null,
+  $disabled-color: null
+) {
+  // Override bootstrap core
+}
+
+@mixin button-outline-variant(
+  $color: null,
+  $color-hover: null,
+  $active-background: null,
+  $active-border: null,
+  $active-color: null
+) {
+  // Override bootstrap core
+}
+
+//
+// TODO: remove when https://github.com/twbs/bootstrap/pull/37425/ will be released
+//
+@function opaque($background, $foreground) {
+  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
+}

data/_sass/_config.scss

@@ -0,0 +1,9 @@
+@import "bootstrap/scss/functions";
+
+@import "mixins";
+@import "variables";
+@import "variables-dark";
+@import "utilities";
+
+@import "bootstrap-config";
+@import "bootstrap-override";

data/_sass/_core.scss

@@ -0,0 +1,78 @@
+@import "config";
+@import "bootstrap-components";
+
+@import "props";
+
+@import "fonts/webfonts";
+
+@import "layout/root";
+@import "layout/animations";
+@import "layout/core";
+@import "layout/navbar";
+@import "layout/page";
+@import "layout/footer";
+@import "layout/dark";
+
+@import "ui/accordion";
+@import "ui/alerts";
+@import "ui/avatars";
+@import "ui/badges";
+@import "ui/breadcrumbs";
+@import "ui/buttons";
+@import "ui/button-group";
+@import "ui/calendars";
+@import "ui/carousel";
+@import "ui/cards";
+@import "ui/close";
+@import "ui/dropdowns";
+@import "ui/datagrid";
+@import "ui/empty";
+@import "ui/grid";
+@import "ui/icons";
+@import "ui/images";
+@import "ui/forms";
+@import "ui/forms/form-icon";
+@import "ui/forms/form-colorinput";
+@import "ui/forms/form-imagecheck";
+@import "ui/forms/form-selectgroup";
+@import "ui/forms/form-custom";
+@import "ui/forms/form-check";
+@import "ui/forms/validation";
+@import "ui/legend";
+@import "ui/lists";
+@import "ui/loaders";
+@import "ui/login";
+@import "ui/modals";
+@import "ui/nav";
+@import "ui/stars";
+@import "ui/pagination";
+@import "ui/popovers";
+@import "ui/progress";
+@import "ui/ribbons";
+@import "ui/markdown";
+@import "ui/placeholder";
+@import "ui/segmented";
+@import "ui/steps";
+@import "ui/status";
+@import "ui/switch-icon";
+@import "ui/tables";
+@import "ui/tags";
+@import "ui/toasts";
+@import "ui/toolbar";
+@import "ui/tracking";
+@import "ui/timeline";
+@import "ui/type";
+@import "ui/charts";
+@import "ui/offcanvas";
+@import "ui/chat";
+@import "ui/signature";
+
+@import "helpers/index";
+
+@import "utils/background";
+@import "utils/colors";
+@import "utils/scroll";
+@import "utils/sizing";
+@import "utils/opacity";
+@import "utils/shadow";
+@import "utils/text";

data/_sass/_debug.scss

@@ -0,0 +1,49 @@
+$debug: false;
+
+@if $debug {
+  $colors: (
+    "blue": $blue,
+    "azure": $azure,
+    "indigo": $indigo,
+    "purple": $purple,
+    "pink": $pink,
+    "red": $red,
+    "orange": $orange,
+    "yellow": $yellow,
+    "lime": $lime,
+    "green": $green,
+    "teal": $teal,
+    "cyan": $cyan,
+  );
+
+  @each $name, $color in $colors {
+    @debug ("#{$name}: '#{$color}'");
+    @debug ("#{$name}-100: '#{tint-color($color, 8)}'");
+    @debug ("#{$name}-200: '#{tint-color($color, 6)}'");
+    @debug ("#{$name}-300: '#{tint-color($color, 4)}'");
+    @debug ("#{$name}-400: '#{tint-color($color, 2)}'");
+    @debug ("#{$name}-500: '#{$color}'");
+    @debug ("#{$name}-600: '#{shade-color($color, 2)}'");
+    @debug ("#{$name}-700: '#{shade-color($color, 4)}'");
+    @debug ("#{$name}-800: '#{shade-color($color, 6)}'");
+    @debug ("#{$name}-900: '#{shade-color($color, 8)}'");
+  }
+
+  @debug ("gray: '#{$gray-500}'");
+  @debug ("gray-100: '#{$gray-100}'");
+  @debug ("gray-200: '#{$gray-200}'");
+  @debug ("gray-300: '#{$gray-300}'");
+  @debug ("gray-400: '#{$gray-400}'");
+  @debug ("gray-500: '#{$gray-500}'");
+  @debug ("gray-600: '#{$gray-600}'");
+  @debug ("gray-700: '#{$gray-700}'");
+  @debug ("gray-800: '#{$gray-800}'");
+  @debug ("gray-900: '#{$gray-900}'");
+
+  @debug ("border-color: '#{$border-color}'");
+  @debug ("text-secondary: '#{$text-secondary}'");
+
+  @each $name, $color in $social-colors {
+    @debug ("#{$name}: '#{$color}'");
+  }
+}

data/_sass/_mixins.scss

@@ -0,0 +1,2 @@
+@import "mixins/mixins";
+@import "mixins/functions";

data/_sass/_props.scss

@@ -0,0 +1,91 @@
+@import "config";
+
+:root,
+:host {
+  /** Fonts */
+  --#{$prefix}font-monospace: #{$font-family-monospace};
+  --#{$prefix}font-sans-serif: #{$font-family-sans-serif};
+  --#{$prefix}font-serif: #{$font-family-serif};
+  --#{$prefix}font-comic: #{$font-family-comic};
+
+  /** Gray colors */
+  --#{$prefix}gray-50: #{$gray-50};
+  --#{$prefix}gray-100: #{$gray-100};
+  --#{$prefix}gray-200: #{$gray-200};
+  --#{$prefix}gray-300: #{$gray-300};
+  --#{$prefix}gray-400: #{$gray-400};
+  --#{$prefix}gray-500: #{$gray-500};
+  --#{$prefix}gray-600: #{$gray-600};
+  --#{$prefix}gray-700: #{$gray-700};
+  --#{$prefix}gray-800: #{$gray-800};
+  --#{$prefix}gray-900: #{$gray-900};
+  --#{$prefix}gray-950: #{$gray-950};
+
+  --#{$prefix}white: #{$white};
+  --#{$prefix}black: #{$black};
+  --#{$prefix}dark: #{$dark};
+  --#{$prefix}light: #{$light};
+
+  /** Brand colors */
+  --#{$prefix}brand: #{$primary};
+
+  /** Theme colors */
+  @each $name, $color in map-merge($theme-colors, $social-colors) {
+    --#{$prefix}#{$name}: #{$color};
+    --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
+    --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
+    --#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
+    --#{$prefix}#{$name}-darken: color-mix(in oklab, var(--#{$prefix}#{$name}), transparent 20%);
+    --#{$prefix}#{$name}-lt: #{theme-color-lighter($color)};
+    --#{$prefix}#{$name}-lt: color-mix(in oklab, var(--#{$prefix}#{$name}) 10%, transparent);
+    --#{$prefix}#{$name}-200: color-mix(in oklab, var(--#{$prefix}#{$name}) 20%, transparent);
+    --#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
+  }
+
+  /** Social colors */
+  @each $name, $color in $social-colors {
+    --#{$prefix}#{$name}: #{$color};
+  }
+
+  /** Spacers */
+  @each $name, $value in $spacers {
+    --#{$prefix}spacer-#{$name}: #{$value};
+  }
+
+  /** Font sizes */
+  @each $name, $value in $font-weights {
+    --#{$prefix}font-weight-#{$name}: #{$value};
+  }
+
+  @each $name, $value in $font-sizes {
+    --#{$prefix}font-size-h#{$name}: #{$value};
+  }
+
+  @each $name, $value in $line-heights {
+    --#{$prefix}line-height-#{$name}: #{$value};
+  }
+
+  /** Shadows */
+  @each $name, $value in $box-shadows {
+    --#{$prefix}shadow#{if($name, '-#{$name}', '')}: #{$value};
+  }
+
+  /** Border radiuses */
+  --#{$prefix}border-radius-scale: 1;
+  @each $name, $value in $border-radiuses {
+    @if $name {
+      --#{$prefix}border-radius-#{$name}: calc(#{$value} * var(--#{$prefix}border-radius-scale, 1));
+    } @else {
+      --#{$prefix}border-radius: #{$value};
+    }
+  }
+
+  /** Backdrops */
+  --#{$prefix}backdrop-opacity: #{$backdrop-opacity};
+  --#{$prefix}backdrop-bg: var(--#{$prefix}bg-surface-dark);
+  @each $name, $value in $backdrops {
+    --#{$prefix}backdrop-bg#{if($name, '-#{$name}', '')}: #{$value};
+  }
+  --#{$prefix}backdrop-blur: #{$backdrop-blur};
+  --#{$prefix}backdrop-filter: blur(var(--#{$prefix}backdrop-blur));
+}