insights4you-jekyll-theme 0.2.2 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8b7bba90c588be341fb084f58ad0e8b763747117cfc2d3feeec4d07b1faa0619
-  data.tar.gz: ea650f38c87131586c54a5735a23a9343b723fe309addaafbb5bedcb315f18a4
+  metadata.gz: 7e7de0952caad7e7ba6bdb9650aaa40e8a343c177967a0cdbf42801a46f1d738
+  data.tar.gz: 727f114144cd5246336b73239b9cc285d8240cd7bbf68b6ec42479185040096f
 SHA512:
-  metadata.gz: 10ebb07acf9603e3d24ba6bf258d397227c21ca7ca3189bbe1940c1b201da86aa6054e852ad72f3797a091d0ca3e4a93dbfb3a035b21ba606d36eeadaae5bb32
-  data.tar.gz: 87ebf9d496c038338f6ad40c9fcad7f50f0e07ee8bba7925da4c7a154a973485bb683cd7dc855414e46f1071414868dcda4ebb9b6345f4a177203046c748067c
+  metadata.gz: 804f08bc79666cc67596b3bf0ab5cafcf61a6279f18e10c4852c1fadd4f57ef6e6b501f0cea1154c421e9251bc2a9c856699f1992f5493ee2bf6269e16e09478
+  data.tar.gz: c00d4da9f2ac0caf0fa15acc27426a0d8e5f9065d35223a62238eae69c614afb35db0bc6f507817ed559e7566513f12bbb9eb052344f59b245f64d270fa1a242

data/CHANGELOG.md

@@ -0,0 +1,110 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.4.0]
+
+### Added
+- **New UI Components**: Introduced additional UI components in the `_includes/ui` directory.
+- **Custom JavaScript**: Added `assets/js/custom.js` for custom JavaScript functionalities.
+- **Enhanced Documentation**: Updated `README.md` with detailed instructions and feature descriptions.
+- **Gem Metadata**: Enhanced gemspec metadata with additional documentation and support links.
+
+### Changed
+- **Theme Configuration**: Updated `_config.yml` in the example site for better theme configuration.
+- **Dependencies**: Updated runtime and development dependencies in `insights4you-jekyll-theme.gemspec`.
+- **Build Process**: Improved the Makefile for better build and test processes.
+
+### Fixed
+- **Bug Fixes**: Resolved minor bugs and improved overall stability.
+
+### Removed
+- **Deprecated Files**: Removed any deprecated or unused files to clean up the project structure.
+
+## [0.3.0]
+
+### Added
+- **Theme System**: Implemented dark/light theme switching functionality
+- **Theme Toggle**: Added theme toggle buttons in header navigation
+- **Theme Persistence**: Added localStorage support for saving theme preferences
+- **System Theme**: Added automatic system theme preference detection
+- **Accessibility**: Added ARIA attributes and screen reader announcements for theme changes
+- **Sass Architecture**: Added new _sass directory for better style organization
+
+### Changed
+- **Asset Structure**: Reorganized CSS into Sass-based architecture
+- **Resource Loading**: Updated stylesheet and script loading in head.html
+- **Dependencies**: Updated Tabler Core CSS implementation
+- **Example Site**: Updated example pages with new theme support
+- **Documentation**: Enhanced configuration documentation
+- **Build Process**: Improved asset compilation and organization
+
+### Removed
+- **Legacy CSS**: Removed deprecated theme.min.css in favor of Sass structure
+
+### Fixed
+- **Resource Loading**: Fixed stylesheet loading order and dependencies
+- **Theme Toggle**: Improved theme switching reliability
+- **UI Components**: Enhanced component styling for both light and dark themes
+
+
+## [0.2.3]
+
+### Added
+- **Ruby Version Requirement**: Set minimum Ruby version to 3.2.2
+- **Security**: Added `rubygems_mfa_required` metadata flag
+- **Documentation**: Enhanced metadata with additional documentation URIs
+
+### Changed
+- **Dependencies**: Updated Jekyll requirement to >= 4.4.1
+- **Gemspec**: Improved file organization and readability
+- **Installation**: Enhanced post-install message with quick start guide
+
+### Security
+- **Authentication**: Enabled mandatory MFA for RubyGems publishing
+
+
+## [0.2.2]
+
+### Added
+
+- **Social Media Component**: A new component for integrating social media links.
+- **User Profile Component**: A dedicated component for displaying user profile information.
+
+### Changed
+
+- **Notifications**: Resolved issues and improved the functionality of notifications.
+- **Gemspec and Versioning**: Updated the gemspec file and version details for better compatibility.
+- **Dynamic Menu System**: The menu is now dynamically generated, improving flexibility and maintainability.
+- **Component Review**: Conducted a comprehensive review and refinement of all existing components.
+
+### Removed
+
+- **Example Site Test File**: Removed the `example-site/test.html` file as it was no longer needed.
+
+
+## [0.2.0]
+
+### Added
+
+- **UI Components**: Introduced a set of reusable UI components for consistency across the project.
+- **Example Site for Testing**: Implemented an example site to facilitate testing and demonstration of features.
+- **Changelog File**: Created the `changelog.md` file to track project updates systematically.
+
+### Changed
+
+- **Layout Adjustments**: Made improvements to the home, default, and error layouts for better usability and design.
+- **Gemspec Fixes**: Updated the gemspec file to address development-related issues.
+
+### Removed
+
+- **N/A**: No files or features were removed in this release.
+
+
+[0.4.0]: https://github.com/marciopaiva/insights4you-jekyll-theme/compare/v0.3.0...v0.4.0
+[0.3.0]: https://github.com/marciopaiva/insights4you-jekyll-theme/compare/v0.2.3...v0.3.0
+[0.2.3]: https://github.com/marciopaiva/insights4you-jekyll-theme/compare/v0.2.2...v0.2.3
+[0.2.2]: https://github.com/marciopaiva/insights4you-jekyll-theme/compare/v0.2.0...v0.2.2

data/README.md

@@ -1,33 +1,74 @@
-<!-- markdownlint-disable-next-line -->
 <div align='center'>
 
-<!-- markdownlint-disable-next-line -->
 # Insights4YOU Jekyll Theme
 
-A sleek and modern Jekyll theme inspired by the [Tabler Admin Dashboard](https://github.com/tabler). This theme offers a clean, professional, and responsive interface, making it ideal for developers, content creators, and businesses. Whether you're building documentation sites, admin panels, or project showcases, this theme provides a minimal-effort solution with customizable layouts and modern design elements.
+A sleek and modern Jekyll theme inspired by the [Tabler Admin Dashboard](https://github.com/tabler/tabler). This theme offers a clean, professional, and responsive interface, making it ideal for developers, content creators, and businesses. Whether you're building documentation sites, admin panels, or project showcases, this theme provides a minimal-effort solution with customizable layouts and modern design elements.
 
 ![Theme Preview](assets/images/preview-dark.png)
 
-[![last commit](https://img.shields.io/github/last-commit/marciopaiva/insights4you-jekyll-theme?logo=github)][repo]&nbsp;
-[![gem build](https://github.com/marciopaiva/insights4you-jekyll-theme/actions/workflows/gem-build.yml/badge.svg)][build]&nbsp;
-[![codacy badge](https://img.shields.io/codacy/grade/4e556876a3c54d5e8f2d2857c4f43894?logo=codacy)][codacy]&nbsp;
-[![gem version](https://img.shields.io/gem/v/insights4you-jekyll-theme?&logo=rubygems&logocolor=ghostwhite&label=gem&color=orange)][gem]&nbsp;
-[![downloads](https://img.shields.io/gem/dt/insights4you-jekyll-theme?logo=rubygems&color=blue)][gem]&nbsp;
-[![github license](https://img.shields.io/github/license/marciopaiva/insights4you-jekyll-theme?color=goldenrod)][license]&nbsp;
+[![last commit](https://img.shields.io/github/last-commit/marciopaiva/insights4you-jekyll-theme?logo=github)][repo]
+[![gem build](https://github.com/marciopaiva/insights4you-jekyll-theme/actions/workflows/gem-build.yml/badge.svg)][build]
+[![codacy badge](https://img.shields.io/codacy/grade/4e556876a3c54d5e8f2d2857c4f43894?logo=codacy)][codacy]
+[![gem version](https://img.shields.io/gem/v/insights4you-jekyll-theme?&logo=rubygems&logoColor=ghostwhite&label=gem&color=orange)][gem]
+[![downloads](https://img.shields.io/gem/dt/insights4you-jekyll-theme?logo=rubygems&color=blue)][gem]
+[![github license](https://img.shields.io/github/license/marciopaiva/insights4you-jekyll-theme?color=goldenrod)][license]
+
 </div>
 
-## Features
+## 🌟 Features
+
+- 🌙 **Dark and Light Themes**: Switch between dark and light modes for a personalized experience
+- 📱 **Responsive Design**: Fully optimized for mobile, tablet, and desktop devices
+- 🔧 **Customizable Layouts**: Easily modify layouts to suit your needs
+- 🚀 **SEO Optimized**: Built-in support for Jekyll SEO tags to improve search engine visibility
+- 📦 **Gem-Based Installation**: Simple installation via RubyGems
+- 📝 **Markdown Support**: Write content using Markdown for simplicity and flexibility
+- 🎨 **Modern Design**: Inspired by the Tabler Admin Dashboard for a sleek and professional look
+- 📊 **Analytics Ready**: Add analytics scripts easily for tracking user interactions
+- 🔍 **Search Functionality**: Built-in search capabilities for content discovery
+- 🎯 **Clean Code**: Well-documented and maintainable codebase
+- 🛠️ **Developer Friendly**: Easy to extend and customize
+- 📱 **Mobile First**: Designed with mobile devices in mind
+
+## 📋 Requirements
+
+- Ruby >= 2.7.0
+- Jekyll ~> 4.2
+- Bundler ~> 2.3
+
+## 🚀 Quick Start
+
+1. **Install the theme:**
+```ruby
+gem install insights4you-jekyll-theme
+```
+
+2. **Create a new Jekyll site:**
+```ruby
+jekyll new my-website
+```
+
+3. **Add the theme to your Jekyll site's `Gemfile`:**
+```ruby
+gem "insights4you-jekyll-theme"
+```
+
+4. **Update your `_config.yml`:**
+```yaml
+theme: insights4you-jekyll-theme
+```
 
-- 🌙 **Dark and Light Themes**: Switch between dark and light modes for a personalized experience.
-- 📱 **Responsive Design**: Fully optimized for mobile, tablet, and desktop devices.
-- 🔧 **Customizable Layouts**: Easily modify layouts to suit your needs.
-- 🚀 **SEO Optimized**: Built-in support for Jekyll SEO tags to improve search engine visibility.
-- 📦 **Gem-Based Installation**: Simple installation via RubyGems.
-- 📝 **Markdown Support**: Write content using Markdown for simplicity and flexibility.
-- 🎨 **Modern Design**: Inspired by the Tabler Admin Dashboard for a sleek and professional look.
-- 📊 **Analytics Ready**: Add analytics scripts easily for tracking user interactions.
+5. **Install dependencies:**
+```bash
+bundle install
+```
 
-## Example Site
+6. **Start your site:**
+```bash
+bundle exec jekyll serve
+```
+
+## 🎯 Demo Site
 
 To see the theme in action, check out the included example site:
 
@@ -35,19 +76,61 @@ To see the theme in action, check out the included example site:
 # Clone the repository
 git clone https://github.com/marciopaiva/insights4you-jekyll-theme.git
 
-# Navigate to example directory
-cd insights4you-jekyll-theme/example-site
-
-# Install dependencies
-bundle install
+# Navigate to theme directory
+cd insights4you-jekyll-theme
 
-# Serve the site locally
-bundle exec jekyll serve
+# build and test
+make dev
 ```
 
+Visit `http://localhost:4000` to see the demo site in action.
+
+## 🎨 Customization
+
+### Theme Configuration
+[WIP]
+
+### Available Layouts
+- `default`: Standard page layout
+
+### Custom Styling
+Create a new file `assets/css/custom.scss` to add your own styles:
+
+[WIP]
+
+## 📝 Documentation
+
+### Directory Structure
+[WIP]
+
+### Creating Posts
+[WIP]
+
+### Creating Pages
+[WIP]
+
+## 🤝 Contributing
+
+We love your input! We want to make contributing to Insights4YOU as easy and transparent as possible. Please:
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## 📄 License
+
+This project is licensed under the MIT License - see the LICENSE file for details.
+
+## 🙏 Acknowledgments
+
+- Tabler Admin Dashboard for design inspiration
+- Jekyll community for the amazing static site generator
+- All contributors who help improve this theme
+
+[repo]: https://github.com/marciopaiva/insights4you-jekyll-theme
+[build]: https://github.com/marciopaiva/insights4you-jekyll-theme/actions/workflows/gem-build.yml
+[codacy]: https://app.codacy.com/gh/marciopaiva/insights4you-jekyll-theme/dashboard
 [gem]: https://rubygems.org/gems/insights4you-jekyll-theme
-[codacy]: https://app.codacy.com/gh/marciopaiva/insights4you-jekyll-theme/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade
 [license]: https://github.com/marciopaiva/insights4you-jekyll-theme/blob/master/LICENSE
-[build]: https://github.com/marciopaiva/insights4you-jekyll-theme/actions/workflows/gem-build.yml
-[repo]: https://github.com/marciopaiva/insights4you-jekyll-theme
-[issues]: https://github.com/marciopaiva/insights4you-jekyll-theme/issues

data/_data/i4y-colors.json

@@ -0,0 +1,218 @@
+{
+  "base": [
+    {
+      "name": "blue",
+      "variable": "var(--tblr-blue)",
+      "value": "#066fd1"
+    },
+    {
+      "name": "azure",
+      "variable": "var(--tblr-azure)",
+      "value": "#4299e1"
+    },
+    {
+      "name": "indigo",
+      "variable": "var(--tblr-indigo)",
+      "value": "#4263eb"
+    },
+    {
+      "name": "purple",
+      "variable": "var(--tblr-purple)",
+      "value": "#ae3ec9"
+    },
+    {
+      "name": "pink",
+      "variable": "var(--tblr-pink)",
+      "value": "#d6336c"
+    },
+    {
+      "name": "red",
+      "variable": "var(--tblr-red)",
+      "value": "#d63939"
+    },
+    {
+      "name": "orange",
+      "variable": "var(--tblr-orange)",
+      "value": "#f76707"
+    },
+    {
+      "name": "yellow",
+      "variable": "var(--tblr-yellow)",
+      "value": "#f59f00"
+    },
+    {
+      "name": "lime",
+      "variable": "var(--tblr-lime)",
+      "value": "#74b816"
+    },
+    {
+      "name": "green",
+      "variable": "var(--tblr-green)",
+      "value": "#2fb344"
+    },
+    {
+      "name": "teal",
+      "variable": "var(--tblr-teal)",
+      "value": "#0ca678"
+    },
+    {
+      "name": "cyan",
+      "variable": "var(--tblr-cyan)",
+      "value": "#17a2b8"
+    }
+  ],
+  "grays": [
+    {
+      "name": "gray-50",
+      "value": "#f8fafc"
+    },
+    {
+      "name": "gray-100",
+      "value": "#f1f5f9"
+    },
+    {
+      "name": "gray-200",
+      "value": "#e2e8f0"
+    },
+    {
+      "name": "gray-300",
+      "value": "#c8d3e1"
+    },
+    {
+      "name": "gray-400",
+      "value": "#9ba9be"
+    },
+    {
+      "name": "gray-500",
+      "value": "#6c7a91"
+    },
+    {
+      "name": "gray-600",
+      "value": "#49566c"
+    },
+    {
+      "name": "gray-700",
+      "value": "#313c52"
+    },
+    {
+      "name": "gray-800",
+      "value": "#1d273b"
+    },
+    {
+      "name": "gray-900",
+      "value": "#0f172a"
+    }
+  ],
+  "light": [
+    {
+      "name": "blue-lt",
+      "value": "#e9f0f9"
+    },
+    {
+      "name": "azure-lt",
+      "value": "#ecf5fc"
+    },
+    {
+      "name": "indigo-lt",
+      "value": "#eceffd"
+    },
+    {
+      "name": "purple-lt",
+      "value": "#f7ecfa"
+    },
+    {
+      "name": "pink-lt",
+      "value": "#fbebf0"
+    },
+    {
+      "name": "red-lt",
+      "value": "#fbebeb"
+    },
+    {
+      "name": "orange-lt",
+      "value": "#fef0e6"
+    },
+    {
+      "name": "yellow-lt",
+      "value": "#fef5e6"
+    },
+    {
+      "name": "lime-lt",
+      "value": "#f1f8e8"
+    },
+    {
+      "name": "green-lt",
+      "value": "#eaf7ec"
+    },
+    {
+      "name": "teal-lt",
+      "value": "#e7f6f2"
+    },
+    {
+      "name": "cyan-lt",
+      "value": "#e8f6f8"
+    }
+  ],
+  "social": [
+    {
+      "name": "facebook",
+      "value": "#1877F2"
+    },
+    {
+      "name": "twitter",
+      "value": "#1da1f2"
+    },
+    {
+      "name": "linkedin",
+      "value": "#0a66c2"
+    },
+    {
+      "name": "google",
+      "value": "#dc4e41"
+    },
+    {
+      "name": "youtube",
+      "value": "#ff0000"
+    },
+    {
+      "name": "vimeo",
+      "value": "#1ab7ea"
+    },
+    {
+      "name": "dribbble",
+      "value": "#ea4c89"
+    },
+    {
+      "name": "github",
+      "value": "#181717"
+    },
+    {
+      "name": "instagram",
+      "value": "#e4405f"
+    },
+    {
+      "name": "pinterest",
+      "value": "#bd081c"
+    },
+    {
+      "name": "vk",
+      "value": "#6383a8"
+    },
+    {
+      "name": "rss",
+      "value": "#ffa500"
+    },
+    {
+      "name": "flickr",
+      "value": "#0063dc"
+    },
+    {
+      "name": "bitbucket",
+      "value": "#0052cc"
+    },
+    {
+      "name": "tabler",
+      "value": "#066fd1"
+    }
+  ]
+}

data/_data/i4y-social-media.yml

@@ -1,6 +1,4 @@
 # Get Icons  from : https://tabler.io/icons
-# Get Colors from : https://brandcolors.net/
-
 behance:
   url         : https://www.behance.net/
   icon        : brand-behance

data/_includes/layout/footer.html

@@ -0,0 +1,48 @@
+<!--  BEGIN FOOTER  -->
+<footer class="footer footer-transparent d-print-none">
+  <div class="container-xl">
+    <div class="row text-center align-items-center flex-row-reverse">
+      <div class="col-lg-auto ms-lg-auto">
+        <ul class="list-inline list-inline-dots mb-0">
+          <li class="list-inline-item">
+            <a href="https://github.com/marciopaiva/insights4you-jekyll-theme/wiki" target="_blank" class="link-primary" rel="noopener">
+              {% include ui/icon.html icon="file-type-doc" %} 
+              Documentation
+            </a>
+          </li>
+          <li class="list-inline-item">
+            <a href="https://github.com/marciopaiva/insights4you-jekyll-theme?tab=MIT-1-ov-file" class="link-primary">
+              {% include ui/icon.html icon="license" %} 
+              License
+            </a>
+          </li>
+          <li class="list-inline-item">
+            <a href="https://github.com/marciopaiva/insights4you-jekyll-theme" target="_blank" class="link-primary" rel="noopener">
+              {% include ui/icon.html icon="brand-github" %} 
+              Source code
+            </a>
+          </li>
+          <li class="list-inline-item">
+            <a href="https://github.com/sponsors/marciopaiva" target="_blank" class="link-primary" rel="noopener">
+              {% include ui/icon.html icon="heart"  %}
+              Sponsor
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+        <ul class="list-inline list-inline-dots mb-0">
+          <li class="list-inline-item">
+            <span class="text-primary">
+              {% include ui/icon.html icon="code"  %} 
+              with 
+              {% include ui/icon.html icon="hearts"  %} 
+              by Marcio Paiva Barbosa
+            </span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</footer>
+<!--  END FOOTER  -->

data/_includes/{head.html → layout/head.html}

@@ -1,21 +1,23 @@
 <head>
-  <!-- Dynamic Variables -->
-  {% 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 %}
-  
   <!-- Basic Meta Tags -->
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="theme-color" content="#ffffff">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
   <meta name="robots" content="index, follow">
+  <meta name="description" content="{{ description | default: site.description | escape }}"/>
+  <meta name="author" content="{{ site.author.name }}"/>
+  {% if site.keywords %}<meta name="keywords" content="{{ site.keywords }}"/>{% endif %}
+
+  <!-- Theme Colors and Mobile Settings -->
+  <meta name="theme-color" content="{{ site.themeColor }}"/>
   <meta name="color-scheme" content="light dark">
-  
+  <meta name="msapplication-TileColor" content="{{ site.themeColor }}"/>
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+  <meta name="apple-mobile-web-app-capable" content="yes"/>
+  <meta name="mobile-web-app-capable" content="yes"/>
+  <meta name="HandheldFriendly" content="True"/>
+  <meta name="MobileOptimized" content="320"/>
+
   <!-- Open Graph Meta Tags -->
   <meta property="og:type" content="website">
   <meta property="og:title" content="{{ title }}">
@@ -38,22 +40,40 @@
   <link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/images/favicon-32x32.png' | relative_url }}">
   <link rel="icon" type="image/png" sizes="16x16" href="{{ '/assets/images/favicon-16x16.png' | relative_url }}">
   <link rel="manifest" href="{{ '/assets/images/site.webmanifest' | relative_url }}">
-  
-  <!-- Preload External Resources -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.1.1/dist/css/tabler.min.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.1.1/dist/css/tabler-flags.min.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.1.1/dist/css/tabler-payments.min.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.1.1/dist/css/tabler-vendors.min.css" />
+    
   {% if site.useIconfont %}
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.31.0/dist/tabler-icons.min.css" />
   {% endif %}
+
+  <!-- Preconnect to External Resources -->
+  <link rel="preconnect" href="https://rsms.me">
+  <link rel="dns-prefetch" href="https://rsms.me">
+
+  <!-- Main Stylesheet with cache busting -->
+  {% if env == "production" %}
+      <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}?v={{ cache_bust }}"
+            {% if site.data.sri.css %}integrity="{{ site.data.sri.css }}"{% endif %} crossorigin="anonymous">
+  {% else %}
+      <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}?v=dev">
+  {% endif %}
+
+  <!-- Page-specific CSS -->
+  {% if page.custom_css %}
+      {% for css_file in page.custom_css %}
+          <link rel="stylesheet" href="{{ '/assets/css/' | append: css_file | append: '.css' | relative_url }}?v={{ cache_bust }}">
+      {% endfor %}
+  {% endif %}
+
+  <!-- Custom Font -->
+  <style>
+      @import url('https://rsms.me/inter/inter.css');
+  </style>
   
-  <!-- Stylesheets -->
-  <link rel="stylesheet" href="{{ '/assets/css/theme.min.css' | relative_url }}">
 
   <!-- Title and Description -->
   <title>{{ title }} | {{ site.title }}</title>
   <meta name="description" content="{{ description }}">
   
+  <!-- Jekyll seo tags  -->
   {% seo %}
 </head>