blackbeard420/terminal.css
1
0
Fork 0
mirror of https://github.com/Gioni06/terminal.css synced 2025-03-09 09:09:04 -04:00
Code Issues Projects Releases Wiki Activity

automatically update documentation values

Browse Source
This commit is contained in:
Jonas Duri 2023-12-08 19:16:06 +01:00
parent 7bab4dbde5
commit c05f5dd642
2 changed files with 68 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
templates/partials/bottom-scripts.html
View File

@ -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 = `<span class="color-preview" style="background-color: ${value};"></span>${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');
});
</script>
<!-- Fathom - beautiful, simple website analytics -->

55
templates/partials/documentation.html
View File

@ -25,57 +25,66 @@
margin-right: 4px;
}
</style>
<dt>--global-font-size</dt>
<dd>The Base font size</dd>
<dd class="italic">(Default: <code>15px</code>)</dd>
<dd class="italic">(Default: <code id="css-global-font-size">15px</code>)</dd>
<dt>--global-line-height</dt>
<dd>The baseline height. Modify this to achieve the best readability.</dd>
<dd class="italic">(Default: <code>1.4em</code>)</dd>
<dd class="italic">(Default: <code id="css-global-line-height">1.4em</code>)</dd>
<dt>--global-space</dt>
<dd>A global spacer used to consistently space things</dd>
<dd class="italic">(Default: <code id="css-global-space">10px</code>)</dd>
<dt>--font-stack</dt>
<dd>The fonts for the website.</dd>
<dd>Use <code>@font-face</code> or any other font provider to include your custom fonts.</dd>
<dd class="italic">(Default: <code>"Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif</code>)</dd>
<dd class="italic">(Default: <code id="css-font-stack">"Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif</code>)</dd>
<dt>--mono-font-stack</dt>
<dd>Same as above but for <code>code</code>.</dd>
<dd class="italic">(Default: <code>"Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif</code>)</dd>
<dd class="italic">(Default: <code id="css-mono-font-stack">"Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif</code>)</dd>
<dt>--background-color</dt>
<dd>The page background color</dd>
<dd class="italic">(Default: <code><span class="color-preview" style="background-color: var(--background-color);"></span>#fff</code>)</dd>
<dd class="italic">(Default: <code id="css-background-color"><span class="color-preview" style="background-color: var(--background-color);"></span>#fff</code>)</dd>
<dt>--font-color</dt>
<dd>The base font color for text, headlines, blockquotes, lists, etc.</dd>
<dd class="italic">(Default: <code><span class="color-preview" style="background-color: var(--font-color);"></span>#151515</code>)</dd>
<dd class="italic">(Default: <code id="css-font-color"><span class="color-preview" style="background-color: var(--font-color);"></span>#151515</code>)</dd>
<dt>--invert-font-color</dt>
<dd>Sometimes text appears on a colored background. Adjust this color to improve readability.</dd>
<dd class="italic">(Default: <code><span class="color-preview" style="background-color: var(--invert-font-color);"></span>#fff</code>)</dd>
<dd class="italic">(Default: <code id="css-invert-font-color"><span class="color-preview" style="background-color: var(--invert-font-color);"></span>#fff</code>)</dd>
<dt>--primary-color</dt>
<dd>The primary color is used for links and buttons.</dd>
<dd class="italic">(Default: <code><span class="color-preview" style="background-color: var(--primary-color);"></span>#1a95e0</code>)</dd>
<dd class="italic">(Default: <code id="css-primary-color"><span class="color-preview" style="background-color: var(--primary-color);"></span>#1a95e0</code>)</dd>
<dt>--secondary-color</dt>
<dd>The secondary color is more subtle than the primary color. It's used for code highlighting and image captions.</dd>
<dd class="italic">(Default: <code><span class="color-preview" style="background-color: var(--secondary-color);"></span>#727578</code>)</dd>
<dd class="italic">(Default: <code id="css-secondary-color"><span class="color-preview" style="background-color: var(--secondary-color);"></span>#727578</code>)</dd>
<dt>--error-color</dt>
<dd>Used for error alerts and form validation.</dd>
<dd class="italic">(Default: <code><span class="color-preview" style="background-color: var(--error-color);"></span>#d20962</code>)</dd>
<dd class="italic">(Default: <code id="css-error-color"><span class="color-preview" style="background-color: var(--error-color);"></span>#d20962</code>)</dd>
<dt>--progress-bar-background</dt>
<dd>The background color of progress bars.</dd>
<dd class="italic">(Default: <code><span class="color-preview" style="background-color: var(--progress-bar-background);"></span>#727578</code>)</dd>
<dd class="italic">(Default: <code id="css-progress-bar-background"><span class="color-preview" style="background-color: var(--progress-bar-background);"></span>#727578</code>)</dd>
<dt>--progress-bar-fill</dt>
<dd>The fill color, indicating the progress in progress bars.</dd>
<dd class="italic">(Default: <code><span class="color-preview" style="background-color: var(--progress-bar-fill);"></span>#151515</code>)</dd>
<dd class="italic">(Default: <code id="css-progress-bar-fill"><span class="color-preview" style="background-color: var(--progress-bar-fill);"></span>#151515</code>)</dd>
<dt>--code-bg-color</dt>
<dd>The background color of <code>&lt;code&gt;</code> elements.</dd>
<dd class="italic">(Default: <code><span class="color-preview" style="background-color: var(--code-bg-color);"></span>#e8eff2</code>)</dd>
<dd class="italic">(Default: <code id="css-code-bg-color"><span class="color-preview" style="background-color: var(--code-bg-color);"></span>#e8eff2</code>)</dd>
<dt>--block-background-color</dt>
<dd>The background color of <code>&lt;pre&gt;</code> elements. Also applies to <code>&lt;code&gt;</code> elements inside a <code>&lt;pre&gt;</code> element.</dd>
<dd class="italic">(Default: <code><span class="color-preview" style="background-color: var(--block-background-color);"></span>#fff</code>)</dd>
<dt>--input-style</dt>
<dd>The style of input element borders. Possible values are:</dd>
<dd class="italic">none, solid, dotted, dashed, double, groove, ridge, inset, outset, hidden, inherit, initial, unset</dd>
<dd class="italic">(Default: <code>solid</code>)</dd>
<dt>--display-h1-decoration</dt>
<dd>Show a double dash below <code>h1</code> elements. Possible values are:</dd>
<dd class="italic">block, none</dd>
<dd class="italic">(Default: <code>none</code>)</dd>
<dd>The background color of <code>&lt;pre&gt;</code> elements. Also applies to <code>&lt;code&gt;</code> elements inside a <code>&lt;pre&gt;</code
</dl>
</section>
<hr>