add default values of variables in document

This commit is contained in:
plastic041 2023-11-25 23:43:06 +09:00
parent 308e015f3d
commit bf809d11a8

View File

@ -17,42 +17,65 @@
font-style: italic; font-style: italic;
} }
.custom-dl .color-preview {
width: 12px;
height: 12px;
display: inline-block;
outline: #000 solid 1px;
margin-right: 4px;
}
</style> </style>
<dt>--global-font-size</dt> <dt>--global-font-size</dt>
<dd>The Base font size</dd> <dd>The Base font size</dd>
<dd class="italic">(Default: <code>15px</code>)</dd>
<dt>--global-line-height</dt> <dt>--global-line-height</dt>
<dd>The baseline height. Modify this to achieve the best readability.</dd> <dd>The baseline height. Modify this to achieve the best readability.</dd>
<dd class="italic">(Default: <code>1.4em</code>)</dd>
<dt>--font-stack</dt> <dt>--font-stack</dt>
<dd>The fonts for the website.</dd> <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>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>
<dt>--mono-font-stack</dt> <dt>--mono-font-stack</dt>
<dd>Same as above but for <code>code</code>.</dd> <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>
<dt>--background-color</dt> <dt>--background-color</dt>
<dd>The page background color</dd> <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>
<dt>--font-color</dt> <dt>--font-color</dt>
<dd>The base font color for text, headlines, blockquotes, lists, etc.</dd> <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>
<dt>--invert-font-color</dt> <dt>--invert-font-color</dt>
<dd>Sometimes text appears on a colored background. Adjust this color to improve readability.</dd> <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>
<dt>--primary-color</dt> <dt>--primary-color</dt>
<dd>The primary color is used for links and buttons.</dd> <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>
<dt>--secondary-color</dt> <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>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>
<dt>--error-color</dt> <dt>--error-color</dt>
<dd>Used for error alerts and form validation.</dd> <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>
<dt>--progress-bar-background</dt> <dt>--progress-bar-background</dt>
<dd>The background color of progress bars.</dd> <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>
<dt>--progress-bar-fill</dt> <dt>--progress-bar-fill</dt>
<dd>The fill color, indicating the progress in progress bars.</dd> <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>
<dt>--code-bg-color</dt> <dt>--code-bg-color</dt>
<dd>The background color of <code>&lt;code&gt;</code> elements.</dd> <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>
<dt>--block-background-color</dt> <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>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> <dt>--input-style</dt>
<dd>The style of input element borders. Possible values are:</dd> <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">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> <dt>--display-h1-decoration</dt>
<dd>Show a double dash below <code>h1</code> elements. Possible values are:</dd> <dd>Show a double dash below <code>h1</code> elements. Possible values are:</dd>
<dd class="italic">block, none</dd> <dd class="italic">block, none</dd>
<dd class="italic">(Default: <code>none</code>)</dd>
</dl> </dl>
</section> </section>
<hr> <hr>