Theme Customization
Relevant source files
The following files were used as context for generating this wiki page:The matrix-flow theme provides a range of customization options, primarily managed through YAML configuration files and CSS custom properties. The theme is designed with performance in mind, incorporating a simplified CSS integration strategy that includes critical CSS inlining to prevent Flash of Unstyled Content (FOUC) and optimize rendering performance.
Customization covers general site information, navigation, social links, and specific components like the newsletter widget. The styling is built upon a responsive CSS Grid layout and can be modified using a set of predefined CSS variables for colors, fonts, and transitions, allowing for consistent theming. The build process includes scripts for CSS optimization, such as critical CSS extraction and minification.
Main Theme Configuration
The primary configuration for the matrix-flow theme is located in themes/matrix-flow/_config.yml. This file controls navigation, social media links, the homepage glitch effect text, and the newsletter widget settings.
Sources: themes/matrix-flow/_config.yml
Configuration Options
| Key | Type | Description |
|---|---|---|
social | Object | Contains keys for social media platforms (e.g., github, linkedin, email) with corresponding profile URLs/handles. |
glitch_text | String | The text displayed with a glitch effect on the home page. Default is 'PORTFOLIO'. |
menu | Object | Defines the navigation menu items. Keys are the link text and values are the paths (e.g., Home: /). |
newsletter | Object | Configuration for the newsletter subscription widget. See Newsletter Customization for details. |
Sources: themes/matrix-flow/_config.yml:5-23
Example Configuration
# Social links that appear in the footer
social:
github: alphaleadership
linkedin: thomas-iniguez-visioli/
email: thomas.iniguez@free.fr
# Glitch effect text on the home page
glitch_text: 'PORTFOLIO'
# Navigation menu
menu:
Home: /
Archives: /archives
veille: https://feed-blush.vercel.app/
# Newsletter configuration
newsletter:
github_owner: thomas-iniguez-visioli
github_repo: portfolio
use_github_redirect: true
enabled: true
position: sidebar
Sources: themes/matrix-flow/_config.yml:5-23
CSS and Styling
The theme's styling is managed through a main stylesheet and a dedicated CSS configuration file. It uses a modern, performance-oriented approach that emphasizes CSS variables for theming and a critical CSS strategy for fast initial page loads.
Sources: themes/matrix-flow/CSS-INTEGRATION-README.md, themes/matrix-flow/_css-config.yml, themes/matrix-flow/source/css/style.css
CSS Variables
The core visual elements of the theme, such as colors, fonts, and transitions, are controlled by CSS custom properties defined in the :root of themes/matrix-flow/source/css/style.css. Modifying these variables allows for sitewide changes to the theme's appearance.
| Variable | Default Value | Description |
|---|---|---|
--matrix-green | #00FF41 | The primary text and highlight color. |
--dark-green | #008F11 | A darker shade used for borders, backgrounds, and secondary text. |
--background-black | #000 | The main background color of the site. |
--scan-line-color | rgba(0, 0, 0, 0.3) | Color of the animated scan lines overlay. |
--font-family | 'VT323', monospace | The primary font used across the site. |
--base-font-size | 18px | The default font size. |
--transition-duration | 0.4s | The duration for CSS transitions. |
Sources: themes/matrix-flow/source/css/style.css:5-13, themes/matrix-flow/CSS-INTEGRATION-README.md:111-115
Layout System
The theme employs a responsive, full-screen layout based on CSS Grid, defined by the .responsive-grid class. This system adapts to different screen sizes using media queries.
The following diagram illustrates the grid areas on a desktop viewport.
The layout is defined with grid-template-areas and adjusts at breakpoints of 1200px, 768px, and 480px to ensure responsiveness.
Sources: themes/matrix-flow/source/css/style.css:104-129
CSS Build and Optimization
The theme uses a dedicated configuration file, _css-config.yml, to manage CSS processing and optimization for different environments (development and production).
CSS Configuration (_css-config.yml)
This file defines how CSS is handled, including minification, inlining critical styles, and handling conditional assets.
| Section | Key | Description |
|---|---|---|
main_css | file, minify, inline_critical | Defines the main CSS file, whether to minify it, and if critical CSS should be inlined. |
conditional_css | newsletter, lazy_loading | Specifies CSS files that are loaded conditionally based on EJS template logic. |
critical_css | include_layout, include_responsive | Determines which styles are considered "critical" and inlined in the HTML head. |
optimizations | minify, group_media_queries | Enables various build-time optimizations. |
performance | prevent_fouc, sync_critical | Configures performance-related features like FOUC prevention. |
Sources: themes/matrix-flow/_css-config.yml
Critical CSS Extraction
To optimize the First Contentful Paint (FCP), the theme uses a script to extract "critical" (above-the-fold) CSS and inline it directly into the page's <head>. The CriticalCSSExtractor class in critical-css-extractor.js is responsible for this process.
This diagram shows the flow of the critical CSS extraction process.
The script identifies critical CSS based on a predefined list of selectors, ensuring that essential layout, typography, and animation styles are loaded synchronously.
// From themes/matrix-flow/scripts/critical-css-extractor.js
this.criticalSelectors = [
// Layout structure
'html', 'body', '*',
'.fullscreen-container',
'.responsive-grid',
'.site-header',
'.site-main',
'.main-content',
// Critical visual elements
'.logo-glitch',
'.main-nav',
'.nav-item',
'#matrix-canvas',
// ... and more
];
Sources: themes/matrix-flow/scripts/critical-css-extractor.js:20-44
Newsletter Customization
The newsletter subscription widget is a configurable component of the theme. Its behavior and appearance can be customized.
Sources: themes/matrix-flow/_config.yml:15-23, themes/matrix-flow/README-newsletter.md
Configuration
The newsletter widget is configured in themes/matrix-flow/_config.yml.
| Key | Type | Description |
|---|---|---|
github_owner | String | The GitHub username or organization that owns the repository for subscriptions. |
github_repo | String | The name of the GitHub repository where subscription issues will be created. |
use_github_redirect | Boolean | If true, the form redirects the user to a pre-filled GitHub issue page. |
enabled | Boolean | Toggles the visibility of the newsletter widget. |
position | String | Sets the location of the widget. Can be sidebar, footer, or header. |
Sources: themes/matrix-flow/_config.yml:16-23, themes/matrix-flow/README-newsletter.md:16-22
Styling
The newsletter widget can be styled using CSS custom properties.
.newsletter-widget {
--primary-color: #00ff00;
--background-color: rgba(0, 20, 0, 0.9);
--border-color: #00ff00;
}
Sources: themes/matrix-flow/README-newsletter.md:86-92
Subscription Flow
The default subscription method uses a redirect to GitHub, where a new issue is created. This avoids exposing API tokens on the client side. The newsletter.js script handles form validation and generates the appropriate GitHub issue URL.
This sequence diagram illustrates the GitHub redirect subscription flow.