Skip to content

Commit

Permalink
chore: fmt
Browse files Browse the repository at this point in the history
  • Loading branch information
@lowlighter
lowlighter committed Dec 19, 2024
1 parent b2e25e4 commit 6253268
Showing 1 changed file with 109 additions and 30 deletions.
139 changes: 109 additions & 30 deletions app/sections/custom-build.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@ <h3><a href="#custom-build">🛠️ Create a custom build</a></h3>
Utilize the form below to obtain a custom build of <em>matcha.css</em>.
</p>
<p>
For more intricate customization, consider <a href="https://github.com/lowlighter/matcha/fork" target="_blank">forking</a> and directly patching it.
Note that <em>matcha.css</em> never utilizes <a href="https://developer.mozilla.org/docs/Web/CSS/important"><code data-hl="css">!important</code></a> rules, ensuring ease of style overriding if necessary.
For more intricate customization, consider <a href="https://github.com/lowlighter/matcha/fork" target="_blank">forking</a> and directly patching it. Note that <em>matcha.css</em> never utilizes <a
href="https://developer.mozilla.org/docs/Web/CSS/important"
><code data-hl="css">!important</code></a> rules, ensuring ease of style overriding if necessary.
</p>
<form class="matcha-build">
<fieldset class="styling">
Expand All @@ -20,25 +21,45 @@ <h3><a href="#custom-build">🛠️ Create a custom build</a></h3>
<div>
<label>
<input type="checkbox" name="styling" value="sectioning" checked> Sectioning<br>
<small><code data-hl="html">&lt;html&gt;</code> <code data-hl="html">&lt;body&gt;</code> <code data-hl="html">&lt;main&gt;</code> <code data-hl="html">&lt;section&gt;</code> <code data-hl="html">&lt;header&gt;</code> <code data-hl="html">&lt;footer&gt;</code> <code data-hl="html">&lt;aside&gt;</code> <code data-hl="html">&lt;article&gt;</code> <code data-hl="html">&lt;hr&gt;</code></small>
<small><code data-hl="html">&lt;html&gt;</code>
<code data-hl="html">&lt;body&gt;</code>
<code data-hl="html">&lt;main&gt;</code>
<code data-hl="html">&lt;section&gt;</code>
<code data-hl="html">&lt;header&gt;</code>
<code data-hl="html">&lt;footer&gt;</code>
<code data-hl="html">&lt;aside&gt;</code>
<code data-hl="html">&lt;article&gt;</code>
<code data-hl="html">&lt;hr&gt;</code></small>
</label>
<label>
<input type="checkbox" name="styling" value="navigation" checked> Navigation<br>
<small><code data-hl="html">&lt;menu&gt;</code> <code data-hl="html">&lt;nav&gt;</code></small>
<small><code data-hl="html">&lt;menu&gt;</code>
<code data-hl="html">&lt;nav&gt;</code></small>
</label>
<label>
<input type="checkbox" name="styling" value="headings" checked> Headings<br>
<small><code data-hl="html">&lt;hgroup&gt;</code> <code data-hl="html">&lt;h1&gt;</code> <code data-hl="html">&lt;h2&gt;</code> <code data-hl="html">&lt;h3&gt;</code> <code data-hl="html">&lt;h4&gt;</code> <code data-hl="html">&lt;h5&gt;</code> <code data-hl="html">&lt;h6&gt;</code></small>
<small><code data-hl="html">&lt;hgroup&gt;</code>
<code data-hl="html">&lt;h1&gt;</code>
<code data-hl="html">&lt;h2&gt;</code>
<code data-hl="html">&lt;h3&gt;</code>
<code data-hl="html">&lt;h4&gt;</code>
<code data-hl="html">&lt;h5&gt;</code>
<code data-hl="html">&lt;h6&gt;</code></small>
</label>
<label>
<input type="checkbox" name="styling" value="flow" checked> Flow<br>
<small><code data-hl="html">&lt;p&gt;</code> <code data-hl="html">&lt;blockquote&gt;</code> <code data-hl="html">&lt;pre&gt;</code> <code data-hl="html">&lt;figure&gt;</code> <code data-hl="html">&lt;figcaption&gt;</code></small>
<small><code data-hl="html">&lt;p&gt;</code>
<code data-hl="html">&lt;blockquote&gt;</code>
<code data-hl="html">&lt;pre&gt;</code>
<code data-hl="html">&lt;figure&gt;</code>
<code data-hl="html">&lt;figcaption&gt;</code></small>
</label>
</div>
<div>
<label>
<input type="checkbox" name="styling" value="collapsibles" checked> Collapsibles<br>
<small><code data-hl="html">&lt;details&gt;</code> <code data-hl="html">&lt;summary&gt;</code></small>
<small><code data-hl="html">&lt;details&gt;</code>
<code data-hl="html">&lt;summary&gt;</code></small>
</label>
<label>
<input type="checkbox" name="styling" value="modals" checked> Modals<br>
Expand All @@ -56,37 +77,76 @@ <h3><a href="#custom-build">🛠️ Create a custom build</a></h3>
<div>
<label>
<input type="checkbox" name="styling" value="styling" checked> Styling and emphasis<br>
<small><code data-hl="html">&lt;b&gt;</code> <code data-hl="html">&lt;i&gt;</code> <code data-hl="html">&lt;u&gt;</code> <code data-hl="html">&lt;s&gt;</code> <code data-hl="html">&lt;q&gt;</code> <code data-hl="html">&lt;cite&gt;</code> <code data-hl="html">&lt;dfn&gt;</code> <code data-hl="html">&lt;em&gt;</code> <code data-hl="html">&lt;strong&gt;</code> <code data-hl="html">&lt;small&gt;</code></small>
<small><code data-hl="html">&lt;b&gt;</code>
<code data-hl="html">&lt;i&gt;</code>
<code data-hl="html">&lt;u&gt;</code>
<code data-hl="html">&lt;s&gt;</code>
<code data-hl="html">&lt;q&gt;</code>
<code data-hl="html">&lt;cite&gt;</code>
<code data-hl="html">&lt;dfn&gt;</code>
<code data-hl="html">&lt;em&gt;</code>
<code data-hl="html">&lt;strong&gt;</code>
<code data-hl="html">&lt;small&gt;</code></small>
</label>
<label>
<input type="checkbox" name="styling" value="annotations" checked> Annotations<br>
<small><code data-hl="html">&lt;ruby&gt;</code> <code data-hl="html">&lt;rp&gt;</code> <code data-hl="html">&lt;rt&gt;</code> <code data-hl="html">&lt;sup&gt;</code> <code data-hl="html">&lt;sub&gt;</code> <code data-hl="html">&lt;mark&gt;</code> <code data-hl="html">&lt;ins&gt;</code> <code data-hl="html">&lt;del&gt;</code></small>
<small><code data-hl="html">&lt;ruby&gt;</code>
<code data-hl="html">&lt;rp&gt;</code>
<code data-hl="html">&lt;rt&gt;</code>
<code data-hl="html">&lt;sup&gt;</code>
<code data-hl="html">&lt;sub&gt;</code>
<code data-hl="html">&lt;mark&gt;</code>
<code data-hl="html">&lt;ins&gt;</code>
<code data-hl="html">&lt;del&gt;</code></small>
</label>
<label>
<input type="checkbox" name="styling" value="computing" checked> Computing<br>
<small><code data-hl="html">&lt;code&gt;</code> <code data-hl="html">&lt;var&gt;</code> <code data-hl="html">&lt;kbd&gt;</code> <code data-hl="html">&lt;samp&gt;</code> <code data-hl="html">&lt;output&gt;</code></small>
<small><code data-hl="html">&lt;code&gt;</code>
<code data-hl="html">&lt;var&gt;</code>
<code data-hl="html">&lt;kbd&gt;</code>
<code data-hl="html">&lt;samp&gt;</code>
<code data-hl="html">&lt;output&gt;</code></small>
</label>
<label>
<input type="checkbox" name="styling" value="forms" checked> Forms<br>
<small><code data-hl="html">&lt;form&gt;</code> <code data-hl="html">&lt;button&gt;</code> <code data-hl="html">&lt;label&gt;</code> <code data-hl="html">&lt;fieldset&gt;</code> <code data-hl="html">&lt;legend&gt;</code> <code data-hl="html">&lt;input&gt;</code> <code data-hl="html">&lt;select&gt;</code> <code data-hl="html">&lt;textarea&gt;</code></small>
<small><code data-hl="html">&lt;form&gt;</code>
<code data-hl="html">&lt;button&gt;</code>
<code data-hl="html">&lt;label&gt;</code>
<code data-hl="html">&lt;fieldset&gt;</code>
<code data-hl="html">&lt;legend&gt;</code>
<code data-hl="html">&lt;input&gt;</code>
<code data-hl="html">&lt;select&gt;</code>
<code data-hl="html">&lt;textarea&gt;</code></small>
</label>
</div>
<div>
<label>
<input type="checkbox" name="styling" value="bars" checked> Bars<br>
<small><code data-hl="html">&lt;progress&gt;</code> <code data-hl="html">&lt;meter&gt;</code></small>
<small><code data-hl="html">&lt;progress&gt;</code>
<code data-hl="html">&lt;meter&gt;</code></small>
</label>
<label>
<input type="checkbox" name="styling" value="lists" checked> Lists<br>
<small><code data-hl="html">&lt;dl&gt;</code> <code data-hl="html">&lt;dt&gt;</code> <code data-hl="html">&lt;dd&gt;</code> <code data-hl="html">&lt;ul&gt;</code> <code data-hl="html">&lt;ol&gt;</code> <code data-hl="html">&lt;li&gt;</code></small>
<small><code data-hl="html">&lt;dl&gt;</code>
<code data-hl="html">&lt;dt&gt;</code>
<code data-hl="html">&lt;dd&gt;</code>
<code data-hl="html">&lt;ul&gt;</code>
<code data-hl="html">&lt;ol&gt;</code>
<code data-hl="html">&lt;li&gt;</code></small>
</label>
<label>
<input type="checkbox" name="styling" value="tables" checked> Tables<br>
<small><code data-hl="html">&lt;table&gt;</code> <code data-hl="html">&lt;caption&gt;</code> <code data-hl="html">&lt;tr&gt;</code> <code data-hl="html">&lt;th&gt;</code> <code data-hl="html">&lt;td&gt;</code></small>
<small><code data-hl="html">&lt;table&gt;</code>
<code data-hl="html">&lt;caption&gt;</code>
<code data-hl="html">&lt;tr&gt;</code>
<code data-hl="html">&lt;th&gt;</code>
<code data-hl="html">&lt;td&gt;</code></small>
</label>
<label>
<input type="checkbox" name="styling" value="media" checked> Media<br>
<small><code data-hl="html">&lt;img&gt;</code> <code data-hl="html">&lt;video&gt;</code> <code data-hl="html">&lt;iframe&gt;</code></small>
<small><code data-hl="html">&lt;img&gt;</code>
<code data-hl="html">&lt;video&gt;</code>
<code data-hl="html">&lt;iframe&gt;</code></small>
</label>
</div>
</fieldset>
Expand Down Expand Up @@ -203,7 +263,10 @@ <h3><a href="#custom-build">🛠️ Create a custom build</a></h3>
<td><code>--bg-accent</code></td>
<td><input type="color" name="--light-bg-accent"></td>
<td><input type="color" name="--dark-bg-accent"></td>
<td><small class="muted"><code data-hl="css">:hover</code>, <code data-hl="css">.selected</code>, <code data-hl="html">&lt;a&gt;</code>, <code data-hl="html">&lt;button&gt;</code>, etc.</small></td>
<td>
<small class="muted"><code data-hl="css">:hover</code>, <code data-hl="css">.selected</code>, <code data-hl="html">&lt;a&gt;</code>, <code data-hl="html">&lt;button&gt;</code>,
etc.</small>
</td>
</tr>
<tr>
<td><code>--active</code></td>
Expand Down Expand Up @@ -257,7 +320,11 @@ <h3><a href="#custom-build">🛠️ Create a custom build</a></h3>
<td><code>--bg-danger</code></td>
<td><input type="color" name="--light-bg-danger"></td>
<td><input type="color" name="--dark-bg-danger"></td>
<td><small class="muted"><code data-hl="css">:user-invalid</code>, <code data-hl="html">&lt;del&gt;</code>, <code data-hl="html">&lt;meter&gt;</code>'s sub-sub-optimum value, <code data-hl="html">&lt;button type="reset"&gt;</code>, etc.</small></td>
<td>
<small class="muted"><code data-hl="css">:user-invalid</code>, <code data-hl="html">&lt;del&gt;</code>, <code data-hl="html">&lt;meter&gt;</code>'s sub-sub-optimum value, <code
data-hl="html"
>&lt;button type="reset"&gt;</code>, etc.</small>
</td>
</tr>
</table>
</div>
Expand All @@ -275,7 +342,8 @@ <h3><a href="#custom-build">🛠️ Create a custom build</a></h3>
</label>
<label class="width">
<code>--ft-mono</code>
<small>Default monospaced font family, used in preformatted blocks (e.g. <code data-hl="html">&lt;pre&gt;</code>, <code data-hl="html">&lt;code&gt;</code>, <code data-hl="html">&lt;var&gt;</code>, <code data-hl="html">&lt;samp&gt;</code>, <code data-hl="html">&lt;kbd&gt;</code>, etc.).</small>
<small>Default monospaced font family, used in preformatted blocks (e.g. <code data-hl="html">&lt;pre&gt;</code>, <code data-hl="html">&lt;code&gt;</code>, <code data-hl="html"
>&lt;var&gt;</code>, <code data-hl="html">&lt;samp&gt;</code>, <code data-hl="html">&lt;kbd&gt;</code>, etc.).</small>
<input type="text" name="--ft-mono">
</label>
<label class="width">
Expand Down Expand Up @@ -363,7 +431,11 @@ <h3><a href="#custom-build">🛠️ Create a custom build</a></h3>
<td><input type="text" name="--light-bd-muted@opacity"></td>
<td><input type="color" name="--dark-bd-muted"></td>
<td><input type="text" name="--dark-bd-muted@opacity"></td>
<td><small class="muted"><code data-hl="html">&lt;td&gt;</code>, <code data-hl="html">&lt;th&gt;</code>, <code data-hl="html">&lt;article&gt;</code>, <code data-hl="html">&lt;blockquote&gt;</code>, <code data-hl="html">&lt;fieldset&gt;</code>, <code data-hl="html">&lt;input&gt;</code>, <code data-hl="html">&lt;select&gt;</code>, <code data-hl="html">&lt;textarea&gt;</code>, etc.</code></small></td>
<td>
<small class="muted"><code data-hl="html">&lt;td&gt;</code>, <code data-hl="html">&lt;th&gt;</code>, <code data-hl="html">&lt;article&gt;</code>, <code data-hl="html"
>&lt;blockquote&gt;</code>, <code data-hl="html">&lt;fieldset&gt;</code>, <code data-hl="html">&lt;input&gt;</code>, <code data-hl="html">&lt;select&gt;</code>, <code data-hl="html"
>&lt;textarea&gt;</code>, etc.</small>
</td>
</tr>
</table>
</div>
Expand All @@ -377,9 +449,8 @@ <h3><a href="#custom-build">🛠️ Create a custom build</a></h3>
<label class="width">
Extra CSS content
<small>
Append your own custom CSS styles to the final build without the need to fork the project.
You can use <a href="https://developer.mozilla.org/docs/Web/CSS/important"><code data-hl="css">!important</code></a> rules
when needed to ensure your styles are applied since <em>matcha.css</em> never uses this priority level.
Append your own custom CSS styles to the final build without the need to fork the project. You can use <a href="https://developer.mozilla.org/docs/Web/CSS/important"><code data-hl="css"
>!important</code></a> rules when needed to ensure your styles are applied since <em>matcha.css</em> never uses this priority level.
</small>
<div class="editor mt-.5">
<textarea rows="8" name="custom">/** Your custom extra CSS here */</textarea>
Expand All @@ -394,9 +465,8 @@ <h3><a href="#custom-build">🛠️ Create a custom build</a></h3>
<input type="checkbox" name="minify" disabled>
Minify<br>
<small>
Minify CSS to reduce final bundle size.
It requires a call to a serverless function that may fail because of a time-limit or rate-limit, if you're having issues
with getting your custom build, try disabling this option.<br>
Minify CSS to reduce final bundle size. It requires a call to a serverless function that may fail because of a time-limit or rate-limit, if you're having issues with getting your custom
build, try disabling this option.<br>
<span class="severe">Minification is currently disabled. See <a href="https://github.com/lowlighter/matcha/issues/53">lowlighter/matcha/issues/53</a> for more informations.</span>
</small>
</label>
Expand All @@ -408,8 +478,18 @@ <h3><a href="#custom-build">🛠️ Create a custom build</a></h3>
</p>
<menu class="example-tabs">
<li class="color-scheme">
<svg class="light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-1.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm5.657-8.157a.75.75 0 0 1 0 1.061l-1.061 1.06a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l1.06-1.06a.75.75 0 0 1 1.06 0Zm-9.193 9.193a.75.75 0 0 1 0 1.06l-1.06 1.061a.75.75 0 1 1-1.061-1.06l1.06-1.061a.75.75 0 0 1 1.061 0ZM8 0a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0V.75A.75.75 0 0 1 8 0ZM3 8a.75.75 0 0 1-.75.75H.75a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 3 8Zm13 0a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 16 8Zm-8 5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 13Zm3.536-1.464a.75.75 0 0 1 1.06 0l1.061 1.06a.75.75 0 0 1-1.06 1.061l-1.061-1.06a.75.75 0 0 1 0-1.061ZM2.343 2.343a.75.75 0 0 1 1.061 0l1.06 1.061a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-1.06-1.06a.75.75 0 0 1 0-1.06Z"></path></svg>
<svg class="dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M9.598 1.591a.749.749 0 0 1 .785-.175 7.001 7.001 0 1 1-8.967 8.967.75.75 0 0 1 .961-.96 5.5 5.5 0 0 0 7.046-7.046.75.75 0 0 1 .175-.786Zm1.616 1.945a7 7 0 0 1-7.678 7.678 5.499 5.499 0 1 0 7.678-7.678Z"></path></svg>
<svg class="light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
<path
d="M8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-1.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm5.657-8.157a.75.75 0 0 1 0 1.061l-1.061 1.06a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l1.06-1.06a.75.75 0 0 1 1.06 0Zm-9.193 9.193a.75.75 0 0 1 0 1.06l-1.06 1.061a.75.75 0 1 1-1.061-1.06l1.06-1.061a.75.75 0 0 1 1.061 0ZM8 0a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0V.75A.75.75 0 0 1 8 0ZM3 8a.75.75 0 0 1-.75.75H.75a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 3 8Zm13 0a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 16 8Zm-8 5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 13Zm3.536-1.464a.75.75 0 0 1 1.06 0l1.061 1.06a.75.75 0 0 1-1.06 1.061l-1.061-1.06a.75.75 0 0 1 0-1.061ZM2.343 2.343a.75.75 0 0 1 1.061 0l1.06 1.061a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-1.06-1.06a.75.75 0 0 1 0-1.06Z"
>
</path>
</svg>
<svg class="dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
<path
d="M9.598 1.591a.749.749 0 0 1 .785-.175 7.001 7.001 0 1 1-8.967 8.967.75.75 0 0 1 .961-.96 5.5 5.5 0 0 0 7.046-7.046.75.75 0 0 1 .175-.786Zm1.616 1.945a7 7 0 0 1-7.678 7.678 5.499 5.499 0 1 0 7.678-7.678Z"
>
</path>
</svg>
</li>
</menu>
<iframe class="matcha-preview" loading="lazy" title="build preview" height="420" class="bd-muted"></iframe>
Expand All @@ -420,8 +500,7 @@ <h3><a href="#custom-build">🛠️ Create a custom build</a></h3>
<fieldset class="brewing success">
<legend>Brew matcha!</legend>
<p>
Ready to brew your custom matcha?
Click the button below to get started!
Ready to brew your custom matcha? Click the button below to get started!
</p>
<footer>
<button class="success">🍵 Get your brewed matcha!</button>
Expand All @@ -430,4 +509,4 @@ <h3><a href="#custom-build">🛠️ Create a custom build</a></h3>
<p class="flash danger brewing-error hidden"></p>
</form>
<script data-script="/app/sections/custom-build.js"></script>
</details>
</details>

0 comments on commit 6253268

Please sign in to comment.