diff --git a/templates/partials/bottom-scripts.html b/templates/partials/bottom-scripts.html
index 1c05c9a..1ada986 100644
--- a/templates/partials/bottom-scripts.html
+++ b/templates/partials/bottom-scripts.html
@@ -5,6 +5,42 @@
document.querySelectorAll("pre code").forEach(block => {
window.hljs.highlightBlock(block);
});
+
+ // Get the computed style of the root element (usually :root in CSS)
+ const rootStyle = getComputedStyle(document.documentElement);
+
+ // Function to update the display element with the CSS variable value, preserving inner span
+ function updateDisplayElementPreservingSpan(cssVariable, displayElementId) {
+ const value = rootStyle.getPropertyValue(cssVariable).trim();
+ const displayElement = document.getElementById(displayElementId);
+ if (displayElement) {
+ // Preserve the inner span if it exists
+ const spanElement = displayElement.querySelector('.color-preview');
+ if (spanElement) {
+ displayElement.innerHTML = `${value}`;
+ } else {
+ displayElement.textContent = value;
+ }
+ }
+ }
+ // Update each display element with its corresponding CSS variable value
+ updateDisplayElementPreservingSpan('--global-font-size', 'css-global-font-size');
+ updateDisplayElementPreservingSpan('--global-line-height', 'css-global-line-height');
+ updateDisplayElementPreservingSpan('--global-space', 'css-global-space');
+ updateDisplayElementPreservingSpan('--font-stack', 'css-font-stack');
+ updateDisplayElementPreservingSpan('--mono-font-stack', 'css-mono-font-stack');
+ updateDisplayElementPreservingSpan('--background-color', 'css-background-color');
+ updateDisplayElementPreservingSpan('--font-color', 'css-font-color');
+ updateDisplayElementPreservingSpan('--invert-font-color', 'css-invert-font-color');
+ updateDisplayElementPreservingSpan('--primary-color', 'css-primary-color');
+ updateDisplayElementPreservingSpan('--secondary-color', 'css-secondary-color');
+ updateDisplayElementPreservingSpan('--error-color', 'css-error-color');
+ updateDisplayElementPreservingSpan('--progress-bar-background', 'css-progress-bar-background');
+ updateDisplayElementPreservingSpan('--progress-bar-fill', 'css-progress-bar-fill');
+ updateDisplayElementPreservingSpan('--code-bg-color', 'css-code-bg-color');
+ updateDisplayElementPreservingSpan('--block-background-color', 'css-block-background-color');
+ updateDisplayElementPreservingSpan('--input-style', 'css-input-style');
+ updateDisplayElementPreservingSpan('--display-h1-decoration', 'css-display-h1-decoration');
});
diff --git a/templates/partials/documentation.html b/templates/partials/documentation.html
index bd5a46b..0264212 100644
--- a/templates/partials/documentation.html
+++ b/templates/partials/documentation.html
@@ -25,57 +25,66 @@
margin-right: 4px;
}
+
--global-font-size
The Base font size
- (Default: 15px)
+ (Default: 15px)
+
--global-line-height
The baseline height. Modify this to achieve the best readability.
- (Default: 1.4em)
+ (Default: 1.4em)
+
+ --global-space
+ A global spacer used to consistently space things
+ (Default: 10px)
+
--font-stack
The fonts for the website.
Use @font-face or any other font provider to include your custom fonts.
- (Default: "Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif)
+ (Default: "Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif)
+
--mono-font-stack
Same as above but for code.
- (Default: "Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif)
+ (Default: "Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif)
+
--background-color
The page background color
- (Default: #fff)
+ (Default: #fff)
+
--font-color
The base font color for text, headlines, blockquotes, lists, etc.
- (Default: #151515)
+ (Default: #151515)
+
--invert-font-color
Sometimes text appears on a colored background. Adjust this color to improve readability.
- (Default: #fff)
+ (Default: #fff)
+
--primary-color
The primary color is used for links and buttons.
- (Default: #1a95e0)
+ (Default: #1a95e0)
+
--secondary-color
The secondary color is more subtle than the primary color. It's used for code highlighting and image captions.
- (Default: #727578)
+ (Default: #727578)
+
--error-color
Used for error alerts and form validation.
- (Default: #d20962)
+ (Default: #d20962)
+
--progress-bar-background
The background color of progress bars.
- (Default: #727578)
+ (Default: #727578)
+
--progress-bar-fill
The fill color, indicating the progress in progress bars.
- (Default: #151515)
+ (Default: #151515)
+
--code-bg-color
The background color of <code> elements.
- (Default: #e8eff2)
+ (Default: #e8eff2)
+
--block-background-color
- The background color of <pre> elements. Also applies to <code> elements inside a <pre> element.
- (Default: #fff)
- --input-style
- The style of input element borders. Possible values are:
- none, solid, dotted, dashed, double, groove, ridge, inset, outset, hidden, inherit, initial, unset
- (Default: solid)
- --display-h1-decoration
- Show a double dash below h1 elements. Possible values are:
- block, none
- (Default: none)
+ The background color of <pre> elements. Also applies to <code> elements inside a <pre>