taking shape
This commit is contained in:
waalge
parent
747173bcf4
commit
31a95264e7
|
|
@ -0,0 +1,14 @@
|
||||||
|
## Commands
|
||||||
|
|
||||||
|
recompile css
|
||||||
|
```sh
|
||||||
|
tailwindcss -i ./content/css/main.css -o ./content/css/mini.css --minify
|
||||||
|
```
|
||||||
|
|
||||||
|
build, serve and watch
|
||||||
|
```sh
|
||||||
|
cabal run site -- watch
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
.components-flex {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.4em;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.components-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-column-gap: 1.4em;
|
||||||
|
grid-template-columns: auto;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 1em;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
grid-template-columns: repeat(
|
||||||
|
auto-fit,
|
||||||
|
minmax(calc(var(--page-width) / 12), 1fr)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 45em) {
|
||||||
|
.components-grid {
|
||||||
|
grid-template-columns: 3fr 9fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
/* Set in tailwindconfig */
|
||||||
|
font-family: "jetbrains-mono";
|
||||||
|
src: local("jetbrains-mono"),
|
||||||
|
url("/fonts/JetBrainsMono-Medium.woff2") format("woff2");
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,16 +1,3 @@
|
||||||
---
|
<h1 class="text-3xl font-bold mx-auto">
|
||||||
title: Home
|
Hello world!
|
||||||
---
|
</h1>
|
||||||
|
|
||||||
<h2>Welcome</h2>
|
|
||||||
|
|
||||||
<img src="/images/haskell-logo.png" style="float: right; margin: 10px;" />
|
|
||||||
|
|
||||||
<p>Welcome to my blog!</p>
|
|
||||||
|
|
||||||
<p>I've reproduced a list of recent posts here for your reading pleasure:</p>
|
|
||||||
|
|
||||||
<h2>Posts</h2>
|
|
||||||
$partial("templates/post-list.html")$
|
|
||||||
|
|
||||||
<p>…or you can find more in the <a href="/archive.html">archives</a>.</p>
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
// Get all "navbar-burger" elements
|
||||||
|
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
|
||||||
|
// Check if there are any navbar burgers
|
||||||
|
if ($navbarBurgers.length > 0) {
|
||||||
|
// Add a click event on each of them
|
||||||
|
$navbarBurgers.forEach(function ($el) {
|
||||||
|
$el.addEventListener('click', function () {
|
||||||
|
// Get the "main-nav" element
|
||||||
|
var $target = document.getElementById('main-nav');
|
||||||
|
// Toggle the class on "main-nav"
|
||||||
|
$target.classList.toggle('hidden');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
---
|
||||||
|
title: Home
|
||||||
|
---
|
||||||
|
|
||||||
|
<h2>Welcome</h2>
|
||||||
|
|
||||||
|
<img src="/images/haskell-logo.png" style="float: right; margin: 10px;" />
|
||||||
|
|
||||||
|
<p>Welcome to my blog!</p>
|
||||||
|
|
||||||
|
<p>I've reproduced a list of recent posts here for your reading pleasure:</p>
|
||||||
|
|
||||||
|
<h2>Posts</h2>
|
||||||
|
$partial("templates/post-list.html")$
|
||||||
|
|
||||||
|
<p>…or you can find more in the <a href="/archive.html">archives</a>.</p>
|
||||||
|
|
@ -0,0 +1,839 @@
|
||||||
|
---
|
||||||
|
title: Kompact.io
|
||||||
|
---
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
<div class="components components-flex">
|
||||||
|
<div style="font-size: 7em; display: flex; align-items: center; justify-content: center; min-height: 1em">⟨K⟩</div>
|
||||||
|
<section>
|
||||||
|
<div class="terminal-card" style="font-size: 1.4em; text-align: center;">
|
||||||
|
<header>Kompact.io</header>
|
||||||
|
<div>
|
||||||
|
~> Lean dapp development
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<hr/>
|
||||||
|
|
||||||
|
<p>A modern and minimal CSS framework for terminal lovers. ==> </p>
|
||||||
|
|
||||||
|
<h2 id="project-goals">Project Goals</h2>
|
||||||
|
<p>
|
||||||
|
Terminal CSS has no overhead and is lightweight
|
||||||
|
<strong>(~ 3k gzip)</strong>. The source is written in
|
||||||
|
<strong>pure css</strong> to be accessible for everybody and easy to
|
||||||
|
contribute.
|
||||||
|
</p>
|
||||||
|
<h2 id="markdown-terminal-css">Markdown ❤️ Terminal CSS</h2>
|
||||||
|
<p>
|
||||||
|
It's perfect for your <em>personal website</em>, <em>blog</em>, or
|
||||||
|
<em>side project</em>.
|
||||||
|
</p>
|
||||||
|
<h2 id="how-to-use">How to use</h2>
|
||||||
|
<p>
|
||||||
|
When using something like Webpack just install with
|
||||||
|
<code>npm i terminal.css</code>.
|
||||||
|
</p>
|
||||||
|
<pre><code class="language-js">import 'terminal.css'</code></pre>
|
||||||
|
<p>
|
||||||
|
Terminal CSS is also available via
|
||||||
|
<a href="https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css"
|
||||||
|
>CDN</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<pre><code class="language-html"><link rel="stylesheet" href="https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css" /></code></pre>
|
||||||
|
<h2 id="themes">Themes</h2>
|
||||||
|
<p>
|
||||||
|
To create your own theme just open the dev-tools and edit the CSS
|
||||||
|
Variables. Copy and paste it to your website. Done!
|
||||||
|
</p>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<h2 id="contributors">Contributors</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://othyn.com/">Ben</a></li>
|
||||||
|
<li><a href="https://matiaskorhonen.fi/">Matias Korhonen</a></li>
|
||||||
|
<li><a href="https://github.com/nektro">Meghan</a></li>
|
||||||
|
<li><a href="https://ccat3z.xyz">Lingfeng Zhang</a></li>
|
||||||
|
</ul>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<p>With ❤️ by <a href="https://jduri.com">Jonas D.</a></p>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<div class="components components-grid">
|
||||||
|
<aside id="menu">
|
||||||
|
<h2>Components</h2>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#GridSystem">Grid System</a></li>
|
||||||
|
<li><a href="#Navigation">Navigation</a></li>
|
||||||
|
<li><a href="#NavigationList">Navigation List</a></li>
|
||||||
|
<li><a href="#Lists">Lists</a></li>
|
||||||
|
<li><a href="#Typography">Typography</a></li>
|
||||||
|
<li><a href="#Tables">Tables</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="#SpecialElements">Special Elements</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#Blockquote">Blockquote</a></li>
|
||||||
|
<li><a href="#Misc">Misc</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="#Forms">Forms</a></li>
|
||||||
|
<li><a href="#Progress">Progress Bar</a></li>
|
||||||
|
<li><a href="#Buttons">Buttons</a></li>
|
||||||
|
<li><a href="#Cards">Cards</a></li>
|
||||||
|
<li><a href="#Timeline">Timeline</a></li>
|
||||||
|
<li><a href="#Alerts">Alerts</a></li>
|
||||||
|
<li><a href="#Media">Media</a></li>
|
||||||
|
<li><a href="#Figure">Image with caption</a></li>
|
||||||
|
<li><a href="#highlightjs">Supports Highlight.js</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<h2>Documentation</h2>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#DocVariables">Variables</a></li>
|
||||||
|
<li><a href="#DocTypography">Typography</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2 id="GridSystem">Grid System</h2>
|
||||||
|
<p>
|
||||||
|
Terminal CSS has no build-in grid system. However, you can roll
|
||||||
|
your own with Flexbox or CSS Grid.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
<div class="image-grid">
|
||||||
|
<a href="https://picsum.photos" style="border: none"
|
||||||
|
><img
|
||||||
|
src="https://picsum.photos/200/300?random&1"
|
||||||
|
width="auto"
|
||||||
|
height="auto"
|
||||||
|
alt="random image"
|
||||||
|
/></a>
|
||||||
|
<a href="https://picsum.photos" style="border: none"
|
||||||
|
><img
|
||||||
|
src="https://picsum.photos/200/300?random&2"
|
||||||
|
width="auto"
|
||||||
|
height="auto"
|
||||||
|
alt="random image"
|
||||||
|
/></a>
|
||||||
|
<a href="https://picsum.photos" style="border: none"
|
||||||
|
><img
|
||||||
|
src="https://picsum.photos/200/300?random&3"
|
||||||
|
width="auto"
|
||||||
|
height="auto"
|
||||||
|
alt="random image"
|
||||||
|
/></a>
|
||||||
|
<a href="https://picsum.photos" style="border: none"
|
||||||
|
><img
|
||||||
|
src="https://picsum.photos/200/300?random&4"
|
||||||
|
width="auto"
|
||||||
|
height="auto"
|
||||||
|
alt="random image"
|
||||||
|
/></a>
|
||||||
|
<a href="https://picsum.photos" style="border: none"
|
||||||
|
><img
|
||||||
|
src="https://picsum.photos/200/300?random&5"
|
||||||
|
width="auto"
|
||||||
|
height="auto"
|
||||||
|
alt="random image"
|
||||||
|
/></a>
|
||||||
|
<a href="https://picsum.photos" style="border: none"
|
||||||
|
><img
|
||||||
|
src="https://picsum.photos/200/300?random&6"
|
||||||
|
width="auto"
|
||||||
|
height="auto"
|
||||||
|
alt="random image"
|
||||||
|
/></a>
|
||||||
|
<a href="https://picsum.photos" style="border: none"
|
||||||
|
><img
|
||||||
|
src="https://picsum.photos/200/300?random&7"
|
||||||
|
width="auto"
|
||||||
|
height="auto"
|
||||||
|
alt="random image"
|
||||||
|
/></a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<hr />
|
||||||
|
<section>
|
||||||
|
<header><h2 id="Navigation">Navigation</h2></header>
|
||||||
|
<div class="terminal-nav">
|
||||||
|
<div class="terminal-logo">
|
||||||
|
<div class="logo terminal-prompt">
|
||||||
|
<a href="#" class="no-style">Logo</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="terminal-menu">
|
||||||
|
<ul>
|
||||||
|
<li><a class="menu-item" href="#">Item #1</a></li>
|
||||||
|
<li>
|
||||||
|
<a class="menu-item active" href="#">Active Item #2</a>
|
||||||
|
</li>
|
||||||
|
<li><a class="menu-item" href="#">Item #3</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<section>
|
||||||
|
<header><h2 id="NavigationList">Navigation Lists</h2></header>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Dashboard</a></li>
|
||||||
|
<li><a href="#">Members</a></li>
|
||||||
|
<li><a href="#">Settings</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="#">Profile</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Account</a></li>
|
||||||
|
<li><a href="#">Billing</a></li>
|
||||||
|
<li><a href="#">Logout</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<section>
|
||||||
|
<header><h2 id="Lists">Lists</h2></header>
|
||||||
|
<ul>
|
||||||
|
<li>This is a list item</li>
|
||||||
|
<li>So is this - there could be more</li>
|
||||||
|
<li>
|
||||||
|
Make sure to style list items to:
|
||||||
|
<ul>
|
||||||
|
<li>Not forgetting child list items</li>
|
||||||
|
<li>Not forgetting child list items</li>
|
||||||
|
<li>Not forgetting child list items</li>
|
||||||
|
<li>Not forgetting child list items</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>A couple more</li>
|
||||||
|
<li>Top-level list items</li>
|
||||||
|
</ul>
|
||||||
|
<p>Don't forget <strong>Ordered lists</strong>:</p>
|
||||||
|
<ol>
|
||||||
|
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||||
|
<li>
|
||||||
|
Aliquam tincidunt mauris eu risus
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||||
|
</li>
|
||||||
|
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
||||||
|
<li>Aliquam tincidunt mauris eu risus.</li>
|
||||||
|
</ol>
|
||||||
|
<p><strong>Description lists </strong>are also included.</p>
|
||||||
|
<dl>
|
||||||
|
<dt>Description list title 01</dt>
|
||||||
|
<dd>Description list description 01</dd>
|
||||||
|
<dt>Description list title 02</dt>
|
||||||
|
<dd>Description list description 02</dd>
|
||||||
|
<dd>Description list description 03</dd>
|
||||||
|
</dl>
|
||||||
|
<p>
|
||||||
|
A <strong>Table of content</strong>, which can be used as an index
|
||||||
|
for a blog archive.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Unlike regular lists, the TOC component
|
||||||
|
<em>only supports a single depth level.</em>
|
||||||
|
</p>
|
||||||
|
<ol class="terminal-toc">
|
||||||
|
<li>
|
||||||
|
<a href="#"
|
||||||
|
>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#"
|
||||||
|
>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="#"
|
||||||
|
>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2 id="Typography">Typography</h2>
|
||||||
|
<h1>Level 1 Heading</h1>
|
||||||
|
<p>
|
||||||
|
Pellentesque habitant morbi tristique senectus et netus et
|
||||||
|
malesuada fames ac turpis egestas. Vestibulum tortor quam,
|
||||||
|
feugiat vitae, ultricies eget, tempor sit amet, ante.
|
||||||
|
</p>
|
||||||
|
<h2>Level 2 Heading</h2>
|
||||||
|
<p>
|
||||||
|
Pellentesque habitant morbi tristique senectus et netus et
|
||||||
|
malesuada fames ac turpis egestas. Vestibulum tortor quam,
|
||||||
|
feugiat vitae, ultricies eget, tempor sit amet, ante.
|
||||||
|
</p>
|
||||||
|
<h3>Level 3 Heading</h3>
|
||||||
|
<p>
|
||||||
|
Pellentesque habitant morbi tristique senectus et netus et
|
||||||
|
malesuada fames ac turpis egestas. Vestibulum tortor quam,
|
||||||
|
feugiat vitae, ultricies eget, tempor sit amet, ante.
|
||||||
|
</p>
|
||||||
|
<h4>Level 4 Heading</h4>
|
||||||
|
<h5>Level 5 Heading</h5>
|
||||||
|
<h6>Level 6 Heading</h6>
|
||||||
|
</header>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2 id="Tables">Tables</h2>
|
||||||
|
</header>
|
||||||
|
<table>
|
||||||
|
<caption>
|
||||||
|
Most Downloaded Movies on BitTorrent, 2011
|
||||||
|
</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Rank</th>
|
||||||
|
<th>Movie</th>
|
||||||
|
<th>Downloads</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th colspan="4">torrentfreak.com</th>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>1</th>
|
||||||
|
<td>Fast Five</td>
|
||||||
|
<td>9,260,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>2</th>
|
||||||
|
<td>The Hangover II</td>
|
||||||
|
<td>8,840,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>3</th>
|
||||||
|
<td>Thor</td>
|
||||||
|
<td>8,330,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>4</th>
|
||||||
|
<td>Source Code</td>
|
||||||
|
<td>7,910,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>5</th>
|
||||||
|
<td>I Am Number Four</td>
|
||||||
|
<td>7,670,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>6</th>
|
||||||
|
<td>Sucker Punch</td>
|
||||||
|
<td>7,200,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>7</th>
|
||||||
|
<td>127 Hours</td>
|
||||||
|
<td>6,910,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>8</th>
|
||||||
|
<td>Rango</td>
|
||||||
|
<td>6,480,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>9</th>
|
||||||
|
<td>The King’s Speech</td>
|
||||||
|
<td>6,250,000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>10</th>
|
||||||
|
<td>Harry Potter and the Deathly Hallows Part 2</td>
|
||||||
|
<td>6,030,000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
<hr />
|
||||||
|
<section>
|
||||||
|
<header><h2 id="SpecialElements">Special Elements</h2></header>
|
||||||
|
<p>Terminal CSS also supports a range of special elements.</p>
|
||||||
|
|
||||||
|
<h3 id="Blockquote">Blockquote</h3>
|
||||||
|
<blockquote>
|
||||||
|
<p>
|
||||||
|
<em>This is a properly formatted blockquote, btw.</em> Measuring
|
||||||
|
programming progress by lines of code is like measuring aircraft
|
||||||
|
building progress by weight.
|
||||||
|
</p>
|
||||||
|
<footer>
|
||||||
|
<cite
|
||||||
|
><a href="http://www.thegatesnotes.com">Bill Gates</a></cite
|
||||||
|
>
|
||||||
|
</footer>
|
||||||
|
</blockquote>
|
||||||
|
<h3 id="Misc">Misc</h3>
|
||||||
|
<h5 class="terminal-prompt">Terminal Prompt</h5>
|
||||||
|
<p>
|
||||||
|
I am <a href="?abc123">the a tag</a> example<br />
|
||||||
|
I am <abbr title="test">the abbr tag</abbr> example<br />
|
||||||
|
I am <b>the b tag</b> example<br />
|
||||||
|
I am <cite>the cite tag</cite> example<br />
|
||||||
|
I am <code>the code tag</code> example<br />
|
||||||
|
I am <del>the del tag</del> example<br />
|
||||||
|
I am <dfn>the dfn tag</dfn> example<br />
|
||||||
|
I am <em>the em tag</em> example<br />
|
||||||
|
I am <i>the i tag</i> example<br />
|
||||||
|
I am <ins>the ins tag</ins> example<br />
|
||||||
|
I am <kbd>the kbd tag</kbd> example<br />
|
||||||
|
I am <q>the q tag</q> example<br />
|
||||||
|
I am <samp>the samp tag</samp> example<br />
|
||||||
|
I am <small>the small tag</small> example<br />
|
||||||
|
I am <span>the span tag</span> example<br />
|
||||||
|
I am <strong>the strong tag</strong> example<br />
|
||||||
|
I am <sub>the sub tag</sub> example<br />
|
||||||
|
I am <sup>the sup tag</sup> example<br />
|
||||||
|
I am <var>the var tag</var> example<br />
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h4 id="Address">Address</h4>
|
||||||
|
<address>
|
||||||
|
Mozilla Foundation<br />
|
||||||
|
1981 Landings Drive<br />
|
||||||
|
Building K<br />
|
||||||
|
Mountain View, CA 94043-0801<br />
|
||||||
|
USA
|
||||||
|
</address>
|
||||||
|
<br />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<section>
|
||||||
|
<header><h2 id="Forms">Forms</h2></header>
|
||||||
|
<form action="#">
|
||||||
|
<fieldset>
|
||||||
|
<legend>Form legend</legend>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email">Email input:</label>
|
||||||
|
<input
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
type="email"
|
||||||
|
required
|
||||||
|
minlength="5"
|
||||||
|
placeholder="test"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="text">Text input:</label>
|
||||||
|
<input
|
||||||
|
id="text"
|
||||||
|
name="text"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
minlength="5"
|
||||||
|
placeholder="test"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="itext">Invalid input (min-length 10):</label>
|
||||||
|
<input id="itext" name="itext" type="text" minlength="10" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="pw">Password input:</label>
|
||||||
|
<input type="password" id="pw" name="pw" value="password" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="radio">Radio input:</label>
|
||||||
|
<input name="radio" type="radio" id="radio" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="check">Checkbox input:</label>
|
||||||
|
<input for="check" type="checkbox" id="check" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="select">Select field:</label>
|
||||||
|
<select id="select" name="select">
|
||||||
|
<option>Option 01</option>
|
||||||
|
<option>Option 02</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="tarea">Textarea:</label>
|
||||||
|
<textarea id="tarea" cols="30" rows="5" name=="tarea">
|
||||||
|
</textarea
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="submit">Input Button:</label>
|
||||||
|
<button
|
||||||
|
class="btn btn-default"
|
||||||
|
type="submit"
|
||||||
|
role="button"
|
||||||
|
name="submit"
|
||||||
|
id="submit"
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
<hr />
|
||||||
|
<section>
|
||||||
|
<header><h2 id="Progress">Progress Bar</h2></header>
|
||||||
|
<br />
|
||||||
|
<p>With only an arrow</p>
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress-bar-filled" style="width: 40%"></div>
|
||||||
|
</div>
|
||||||
|
<p>With a percentage showing above the arrow</p>
|
||||||
|
<div class="progress-bar progress-bar-show-percent">
|
||||||
|
<div
|
||||||
|
class="progress-bar-filled"
|
||||||
|
style="width: 30%"
|
||||||
|
data-filled="Loading 30%"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<p>Without arrow</p>
|
||||||
|
<div class="progress-bar progress-bar-no-arrow">
|
||||||
|
<div
|
||||||
|
class="progress-bar-filled"
|
||||||
|
style="width: 60%"
|
||||||
|
data-filled="Loading 60%"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<section>
|
||||||
|
<header><h2 id="Buttons">Buttons</h2></header>
|
||||||
|
<button class="btn btn-default">Default</button><br /><br />
|
||||||
|
<button class="btn btn-primary">Primary</button><br /><br />
|
||||||
|
<button class="btn btn-error">Error</button><br /><br />
|
||||||
|
<button class="btn btn-default btn-ghost">Ghost Button</button
|
||||||
|
><br /><br />
|
||||||
|
<button class="btn btn-primary btn-ghost">Ghost Button</button
|
||||||
|
><br /><br />
|
||||||
|
<button class="btn btn-error btn-ghost">Ghost Button</button
|
||||||
|
><br /><br />
|
||||||
|
<button class="btn btn-primary btn-block">Block Level Button</button
|
||||||
|
><br /><br />
|
||||||
|
<p>Button Group</p>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button class="btn btn-default btn-ghost">Left</button>
|
||||||
|
<button class="btn btn-default btn-ghost">Middle</button>
|
||||||
|
<button class="btn btn-default btn-ghost">Right</button>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<section>
|
||||||
|
<header><h2 id="Cards">Cards</h2></header>
|
||||||
|
<div class="terminal-card">
|
||||||
|
<header>Card Title</header>
|
||||||
|
<div>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||||
|
Expedita, quas ex vero enim in doloribus officiis ullam vel nam
|
||||||
|
esse sapiente velit incidunt. Eaque quod et, aut maiores
|
||||||
|
excepturi sint.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<section>
|
||||||
|
<header><h2 id="Timeline">Timeline</h2></header>
|
||||||
|
<div class="terminal-timeline">
|
||||||
|
<div class="terminal-card">
|
||||||
|
<header>Card Title</header>
|
||||||
|
<div>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||||
|
Expedita, quas ex vero enim in doloribus officiis ullam vel
|
||||||
|
nam esse sapiente velit incidunt. Eaque quod et, aut maiores
|
||||||
|
excepturi sint.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-card">
|
||||||
|
<header>Card Title</header>
|
||||||
|
<div>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||||
|
Expedita, quas ex vero enim in doloribus officiis ullam vel
|
||||||
|
nam esse sapiente velit incidunt. Eaque quod et, aut maiores
|
||||||
|
excepturi sint.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<section>
|
||||||
|
<header><h2 id="Alerts">Alerts</h2></header>
|
||||||
|
<div class="terminal-alert">Default message</div>
|
||||||
|
<div class="terminal-alert terminal-alert-primary">
|
||||||
|
Primary message
|
||||||
|
</div>
|
||||||
|
<div class="terminal-alert terminal-alert-error">Error message</div>
|
||||||
|
</section>
|
||||||
|
<hr />
|
||||||
|
<section>
|
||||||
|
<header><h2 id="Figure">Image with caption</h2></header>
|
||||||
|
<figure>
|
||||||
|
<img
|
||||||
|
src="https://picsum.photos/1000/600?random&imageWithCaption"
|
||||||
|
alt="Image with caption"
|
||||||
|
title="Image with caption"
|
||||||
|
/>
|
||||||
|
<figcaption>Image with caption</figcaption>
|
||||||
|
</figure>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2 id="highlightjs">Supports Highlight.js</h2>
|
||||||
|
<p>
|
||||||
|
Terminal CSS comes with a build in theme for
|
||||||
|
<a
|
||||||
|
href="https://highlightjs.org/"
|
||||||
|
target="_black"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>Highlight.js</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
<pre>
|
||||||
|
<code>
|
||||||
|
.hljs {
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
padding: 0.5em;
|
||||||
|
background: var(--block-background-color);
|
||||||
|
color: var(--font-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment,
|
||||||
|
.hljs-quote {
|
||||||
|
color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-variable {
|
||||||
|
color: var(--font-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-keyword,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-built_in,
|
||||||
|
.hljs-name,
|
||||||
|
.hljs-tag {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-string,
|
||||||
|
.hljs-title,
|
||||||
|
.hljs-section,
|
||||||
|
.hljs-attribute,
|
||||||
|
.hljs-literal,
|
||||||
|
.hljs-template-tag,
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-type,
|
||||||
|
.hljs-addition {
|
||||||
|
color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-string {
|
||||||
|
color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-deletion,
|
||||||
|
.hljs-selector-attr,
|
||||||
|
.hljs-selector-pseudo,
|
||||||
|
.hljs-meta {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-doctag {
|
||||||
|
color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-attr {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-symbol,
|
||||||
|
.hljs-bullet,
|
||||||
|
.hljs-link {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.hljs-emphasis {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<section>
|
||||||
|
<header><h2>Documentation</h2></header>
|
||||||
|
<p>
|
||||||
|
Most of the documentation is still at an early stage. For more
|
||||||
|
details, please have a look at the source of this website.
|
||||||
|
</p>
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2 id="DocVariables">Variables</h2>
|
||||||
|
</header>
|
||||||
|
<p>
|
||||||
|
Customizing the style of Terminal CSS with CSS Variables is
|
||||||
|
easy.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<dl class="custom-dl">
|
||||||
|
<style>
|
||||||
|
.custom-dl dt {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-dl dd.italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<dt>--global-font-size</dt>
|
||||||
|
<dd>The Base font size</dd>
|
||||||
|
<dt>--global-line-height</dt>
|
||||||
|
<dd>
|
||||||
|
The base line height. Modify this to achieve the best
|
||||||
|
readability.
|
||||||
|
</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>
|
||||||
|
<dt>--mono-font-stack</dt>
|
||||||
|
<dd>Same as above but for <code>code</code>.</dd>
|
||||||
|
<dt>--background-color</dt>
|
||||||
|
<dd>The page background color</dd>
|
||||||
|
<dt>--font-color</dt>
|
||||||
|
<dd>
|
||||||
|
The base font color for text, headlines, blockquotes, lists,
|
||||||
|
etc.
|
||||||
|
</dd>
|
||||||
|
<dt>--invert-font-color</dt>
|
||||||
|
<dd>
|
||||||
|
Sometimes text appears on a colored background. Adjust this
|
||||||
|
color to improve readability.
|
||||||
|
</dd>
|
||||||
|
<dt>--primary-color</dt>
|
||||||
|
<dd>The primary color is used for links and buttons.</dd>
|
||||||
|
<dt>--secondary-color</dt>
|
||||||
|
<dd>
|
||||||
|
The secondary color is more subtle then the primary color.
|
||||||
|
It's used for code highlighting and image captions.
|
||||||
|
</dd>
|
||||||
|
<dt>--error-color</dt>
|
||||||
|
<dd>Used for error alerts and form validation.</dd>
|
||||||
|
<dt>--progress-bar-background</dt>
|
||||||
|
<dd>The background color of progress bars.</dd>
|
||||||
|
<dt>--progress-bar-fill</dt>
|
||||||
|
<dd>
|
||||||
|
The fill color, indicating the progress in progress bars.
|
||||||
|
</dd>
|
||||||
|
<dt>--code-bg-color</dt>
|
||||||
|
<dd>
|
||||||
|
The background color of <code><code></code> elements.
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
</dl>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2 id="DocTypography">Typography</h2>
|
||||||
|
</header>
|
||||||
|
<p>
|
||||||
|
Terminal CSS uses a single font size for almost all elements.
|
||||||
|
However, there is a way to use browser default font sizes if you
|
||||||
|
wish.
|
||||||
|
</p>
|
||||||
|
<dl class="custom-dl">
|
||||||
|
<dt>Single font size</dt>
|
||||||
|
<dd>
|
||||||
|
Use <code><body class="terminal"></code>. If
|
||||||
|
you leave that option, it will fallback to browser defaults.
|
||||||
|
See <a href="/sans-serif/">here</a>.
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
<hr />
|
||||||
|
<footer>
|
||||||
|
<p>
|
||||||
|
This project is inspired by
|
||||||
|
<a
|
||||||
|
href="https://egoist.sh/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferer"
|
||||||
|
>@egoist's</a
|
||||||
|
>
|
||||||
|
work -
|
||||||
|
<a href="https://github.com/egoist/hack" rel="noopener noreferer"
|
||||||
|
>hack.css</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<section>
|
||||||
|
<header></header>
|
||||||
|
<p>Version: 0.7.2 <a href="#menu">Top</a></p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,614 @@
|
||||||
|
/*
|
||||||
|
! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
||||||
|
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
|
||||||
|
*/
|
||||||
|
|
||||||
|
*,
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* 1 */
|
||||||
|
border-width: 0;
|
||||||
|
/* 2 */
|
||||||
|
border-style: solid;
|
||||||
|
/* 2 */
|
||||||
|
border-color: #e5e7eb;
|
||||||
|
/* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
|
--tw-content: '';
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Use a consistent sensible line-height in all browsers.
|
||||||
|
2. Prevent adjustments of font size after orientation changes in iOS.
|
||||||
|
3. Use a more readable tab size.
|
||||||
|
4. Use the user's configured `sans` font-family by default.
|
||||||
|
5. Use the user's configured `sans` font-feature-settings by default.
|
||||||
|
6. Use the user's configured `sans` font-variation-settings by default.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
line-height: 1.5;
|
||||||
|
/* 1 */
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
/* 2 */
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
/* 3 */
|
||||||
|
-o-tab-size: 4;
|
||||||
|
tab-size: 4;
|
||||||
|
/* 3 */
|
||||||
|
font-family: jetbrains-mono;
|
||||||
|
/* 4 */
|
||||||
|
font-feature-settings: normal;
|
||||||
|
/* 5 */
|
||||||
|
font-variation-settings: normal;
|
||||||
|
/* 6 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Remove the margin in all browsers.
|
||||||
|
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
/* 1 */
|
||||||
|
line-height: inherit;
|
||||||
|
/* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Add the correct height in Firefox.
|
||||||
|
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
||||||
|
3. Ensure horizontal rules are visible by default.
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
height: 0;
|
||||||
|
/* 1 */
|
||||||
|
color: inherit;
|
||||||
|
/* 2 */
|
||||||
|
border-top-width: 1px;
|
||||||
|
/* 3 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Add the correct text decoration in Chrome, Edge, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
abbr:where([title]) {
|
||||||
|
-webkit-text-decoration: underline dotted;
|
||||||
|
text-decoration: underline dotted;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Remove the default font size and weight for headings.
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-size: inherit;
|
||||||
|
font-weight: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Reset links to optimize for opt-in styling instead of opt-out.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Add the correct font weight in Edge and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Use the user's configured `mono` font family by default.
|
||||||
|
2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp,
|
||||||
|
pre {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
|
/* 1 */
|
||||||
|
font-size: 1em;
|
||||||
|
/* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Add the correct font size in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
||||||
|
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
||||||
|
3. Remove gaps between table borders by default.
|
||||||
|
*/
|
||||||
|
|
||||||
|
table {
|
||||||
|
text-indent: 0;
|
||||||
|
/* 1 */
|
||||||
|
border-color: inherit;
|
||||||
|
/* 2 */
|
||||||
|
border-collapse: collapse;
|
||||||
|
/* 3 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Change the font styles in all browsers.
|
||||||
|
2. Remove the margin in Firefox and Safari.
|
||||||
|
3. Remove default padding in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
optgroup,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: inherit;
|
||||||
|
/* 1 */
|
||||||
|
font-size: 100%;
|
||||||
|
/* 1 */
|
||||||
|
font-weight: inherit;
|
||||||
|
/* 1 */
|
||||||
|
line-height: inherit;
|
||||||
|
/* 1 */
|
||||||
|
color: inherit;
|
||||||
|
/* 1 */
|
||||||
|
margin: 0;
|
||||||
|
/* 2 */
|
||||||
|
padding: 0;
|
||||||
|
/* 3 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Remove the inheritance of text transform in Edge and Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
select {
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
2. Remove default button styles.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
[type='button'],
|
||||||
|
[type='reset'],
|
||||||
|
[type='submit'] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
/* 1 */
|
||||||
|
background-color: transparent;
|
||||||
|
/* 2 */
|
||||||
|
background-image: none;
|
||||||
|
/* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Use the modern Firefox focus style for all focusable elements.
|
||||||
|
*/
|
||||||
|
|
||||||
|
:-moz-focusring {
|
||||||
|
outline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
|
||||||
|
*/
|
||||||
|
|
||||||
|
:-moz-ui-invalid {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Add the correct vertical alignment in Chrome and Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Correct the cursor style of increment and decrement buttons in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-inner-spin-button,
|
||||||
|
::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Correct the odd appearance in Chrome and Safari.
|
||||||
|
2. Correct the outline style in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type='search'] {
|
||||||
|
-webkit-appearance: textfield;
|
||||||
|
/* 1 */
|
||||||
|
outline-offset: -2px;
|
||||||
|
/* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Remove the inner padding in Chrome and Safari on macOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
2. Change font properties to `inherit` in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
/* 1 */
|
||||||
|
font: inherit;
|
||||||
|
/* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Add the correct display in Chrome and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Removes the default spacing and border for appropriate elements.
|
||||||
|
*/
|
||||||
|
|
||||||
|
blockquote,
|
||||||
|
dl,
|
||||||
|
dd,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
hr,
|
||||||
|
figure,
|
||||||
|
p,
|
||||||
|
pre {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
menu {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Prevent resizing textareas horizontally by default.
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
|
||||||
|
2. Set the default placeholder color to the user's configured gray 400 color.
|
||||||
|
*/
|
||||||
|
|
||||||
|
input::-moz-placeholder, textarea::-moz-placeholder {
|
||||||
|
opacity: 1;
|
||||||
|
/* 1 */
|
||||||
|
color: #9ca3af;
|
||||||
|
/* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
input::placeholder,
|
||||||
|
textarea::placeholder {
|
||||||
|
opacity: 1;
|
||||||
|
/* 1 */
|
||||||
|
color: #9ca3af;
|
||||||
|
/* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Set the default cursor for buttons.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
[role="button"] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Make sure disabled buttons don't get the pointer cursor.
|
||||||
|
*/
|
||||||
|
|
||||||
|
:disabled {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
|
||||||
|
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
|
||||||
|
This can trigger a poorly considered lint error in some tools but is included by design.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img,
|
||||||
|
svg,
|
||||||
|
video,
|
||||||
|
canvas,
|
||||||
|
audio,
|
||||||
|
iframe,
|
||||||
|
embed,
|
||||||
|
object {
|
||||||
|
display: block;
|
||||||
|
/* 1 */
|
||||||
|
vertical-align: middle;
|
||||||
|
/* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
|
||||||
|
*/
|
||||||
|
|
||||||
|
img,
|
||||||
|
video {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make elements with the HTML hidden attribute stay hidden by default */
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
*, ::before, ::after {
|
||||||
|
--tw-border-spacing-x: 0;
|
||||||
|
--tw-border-spacing-y: 0;
|
||||||
|
--tw-translate-x: 0;
|
||||||
|
--tw-translate-y: 0;
|
||||||
|
--tw-rotate: 0;
|
||||||
|
--tw-skew-x: 0;
|
||||||
|
--tw-skew-y: 0;
|
||||||
|
--tw-scale-x: 1;
|
||||||
|
--tw-scale-y: 1;
|
||||||
|
--tw-pan-x: ;
|
||||||
|
--tw-pan-y: ;
|
||||||
|
--tw-pinch-zoom: ;
|
||||||
|
--tw-scroll-snap-strictness: proximity;
|
||||||
|
--tw-gradient-from-position: ;
|
||||||
|
--tw-gradient-via-position: ;
|
||||||
|
--tw-gradient-to-position: ;
|
||||||
|
--tw-ordinal: ;
|
||||||
|
--tw-slashed-zero: ;
|
||||||
|
--tw-numeric-figure: ;
|
||||||
|
--tw-numeric-spacing: ;
|
||||||
|
--tw-numeric-fraction: ;
|
||||||
|
--tw-ring-inset: ;
|
||||||
|
--tw-ring-offset-width: 0px;
|
||||||
|
--tw-ring-offset-color: #fff;
|
||||||
|
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||||
|
--tw-ring-offset-shadow: 0 0 #0000;
|
||||||
|
--tw-ring-shadow: 0 0 #0000;
|
||||||
|
--tw-shadow: 0 0 #0000;
|
||||||
|
--tw-shadow-colored: 0 0 #0000;
|
||||||
|
--tw-blur: ;
|
||||||
|
--tw-brightness: ;
|
||||||
|
--tw-contrast: ;
|
||||||
|
--tw-grayscale: ;
|
||||||
|
--tw-hue-rotate: ;
|
||||||
|
--tw-invert: ;
|
||||||
|
--tw-saturate: ;
|
||||||
|
--tw-sepia: ;
|
||||||
|
--tw-drop-shadow: ;
|
||||||
|
--tw-backdrop-blur: ;
|
||||||
|
--tw-backdrop-brightness: ;
|
||||||
|
--tw-backdrop-contrast: ;
|
||||||
|
--tw-backdrop-grayscale: ;
|
||||||
|
--tw-backdrop-hue-rotate: ;
|
||||||
|
--tw-backdrop-invert: ;
|
||||||
|
--tw-backdrop-opacity: ;
|
||||||
|
--tw-backdrop-saturate: ;
|
||||||
|
--tw-backdrop-sepia: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
::backdrop {
|
||||||
|
--tw-border-spacing-x: 0;
|
||||||
|
--tw-border-spacing-y: 0;
|
||||||
|
--tw-translate-x: 0;
|
||||||
|
--tw-translate-y: 0;
|
||||||
|
--tw-rotate: 0;
|
||||||
|
--tw-skew-x: 0;
|
||||||
|
--tw-skew-y: 0;
|
||||||
|
--tw-scale-x: 1;
|
||||||
|
--tw-scale-y: 1;
|
||||||
|
--tw-pan-x: ;
|
||||||
|
--tw-pan-y: ;
|
||||||
|
--tw-pinch-zoom: ;
|
||||||
|
--tw-scroll-snap-strictness: proximity;
|
||||||
|
--tw-gradient-from-position: ;
|
||||||
|
--tw-gradient-via-position: ;
|
||||||
|
--tw-gradient-to-position: ;
|
||||||
|
--tw-ordinal: ;
|
||||||
|
--tw-slashed-zero: ;
|
||||||
|
--tw-numeric-figure: ;
|
||||||
|
--tw-numeric-spacing: ;
|
||||||
|
--tw-numeric-fraction: ;
|
||||||
|
--tw-ring-inset: ;
|
||||||
|
--tw-ring-offset-width: 0px;
|
||||||
|
--tw-ring-offset-color: #fff;
|
||||||
|
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||||
|
--tw-ring-offset-shadow: 0 0 #0000;
|
||||||
|
--tw-ring-shadow: 0 0 #0000;
|
||||||
|
--tw-shadow: 0 0 #0000;
|
||||||
|
--tw-shadow-colored: 0 0 #0000;
|
||||||
|
--tw-blur: ;
|
||||||
|
--tw-brightness: ;
|
||||||
|
--tw-contrast: ;
|
||||||
|
--tw-grayscale: ;
|
||||||
|
--tw-hue-rotate: ;
|
||||||
|
--tw-invert: ;
|
||||||
|
--tw-saturate: ;
|
||||||
|
--tw-sepia: ;
|
||||||
|
--tw-drop-shadow: ;
|
||||||
|
--tw-backdrop-blur: ;
|
||||||
|
--tw-backdrop-brightness: ;
|
||||||
|
--tw-backdrop-contrast: ;
|
||||||
|
--tw-backdrop-grayscale: ;
|
||||||
|
--tw-backdrop-hue-rotate: ;
|
||||||
|
--tw-backdrop-invert: ;
|
||||||
|
--tw-backdrop-opacity: ;
|
||||||
|
--tw-backdrop-saturate: ;
|
||||||
|
--tw-backdrop-sepia: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
.container {
|
||||||
|
max-width: 640px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.container {
|
||||||
|
max-width: 768px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.container {
|
||||||
|
max-width: 1024px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1280px) {
|
||||||
|
.container {
|
||||||
|
max-width: 1280px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1536px) {
|
||||||
|
.container {
|
||||||
|
max-width: 1536px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx-auto {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border {
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-3xl {
|
||||||
|
font-size: 1.875rem;
|
||||||
|
line-height: 2.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-bold {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.underline {
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "jetbrains-mono";
|
||||||
|
|
||||||
|
src: local("jetbrains-mono"),
|
||||||
|
url("/fonts/JetBrainsMono-Medium.woff2") format("woff2");
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "jetbrains-mono";
|
||||||
|
}
|
||||||
|
|
@ -11,10 +11,18 @@ main = hakyll $ do
|
||||||
route rmContentPrefix
|
route rmContentPrefix
|
||||||
compile copyFileCompiler
|
compile copyFileCompiler
|
||||||
|
|
||||||
|
match "content/scripts/*" $ do
|
||||||
|
route rmContentPrefix
|
||||||
|
compile copyFileCompiler
|
||||||
|
|
||||||
match "content/css/*" $ do
|
match "content/css/*" $ do
|
||||||
route rmContentPrefix
|
route rmContentPrefix
|
||||||
compile compressCssCompiler
|
compile compressCssCompiler
|
||||||
|
|
||||||
|
match "content/fonts/*" $ do
|
||||||
|
route rmContentPrefix
|
||||||
|
compile copyFileCompiler
|
||||||
|
|
||||||
match (fromList ["content/about.rst", "content/contact.markdown"]) $ do
|
match (fromList ["content/about.rst", "content/contact.markdown"]) $ do
|
||||||
route $ setExtension "html"
|
route $ setExtension "html"
|
||||||
compile $ pandocCompiler
|
compile $ pandocCompiler
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
"./content/**/*.{html,js}",
|
||||||
|
"./templates/**/*.{html,js}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
fontFamily: {
|
||||||
|
'sans' : ['jetbrains-mono',],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<section id="about" class="py-8 px-2 flex flex-col gap-4">
|
||||||
|
<header class="text-3xl">
|
||||||
|
# about
|
||||||
|
</header>
|
||||||
|
<div>
|
||||||
|
Kompact.io is dapp dev house.
|
||||||
|
|
||||||
|
Our focus:
|
||||||
|
<ul class="list-decoration">
|
||||||
|
<li>
|
||||||
|
safety-first
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
fast turn around
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
integration support
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div>
|
||||||
|
Our typical process:
|
||||||
|
<div>
|
||||||
|
Idea -> Spec -> Impl -> Test -> Handover
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
<section id="contact" class="py-8 px-2 flex flex-col gap-4">
|
||||||
|
<header class="text-3xl">
|
||||||
|
# contact
|
||||||
|
</header>
|
||||||
|
<div>
|
||||||
|
Reach us on : <a href="email:hi@kompact.io"> hi@kompact.io </a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
@ -1,33 +1,22 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<link href="/css/mini.css" rel="stylesheet">
|
||||||
<title>My Hakyll Blog - $title$</title>
|
</head>
|
||||||
<link rel="stylesheet" href="/css/default.css" />
|
<body>
|
||||||
</head>
|
<div class="container mx-auto" >
|
||||||
<body>
|
<hr/>
|
||||||
<header>
|
$partial("templates/nav.html")$
|
||||||
<div class="logo">
|
<hr/>
|
||||||
<a href="/">My Hakyll Blog</a>
|
$partial("templates/hero.html")$
|
||||||
</div>
|
<hr/>
|
||||||
<nav>
|
$partial("templates/about.html")$
|
||||||
<a href="/">Home</a>
|
<hr/>
|
||||||
<a href="/about.html">About</a>
|
$partial("templates/contact.html")$
|
||||||
<a href="/contact.html">Contact</a>
|
<hr/>
|
||||||
<a href="/archive.html">Archive</a>
|
$body$
|
||||||
</nav>
|
</div>
|
||||||
</header>
|
</body>
|
||||||
|
|
||||||
<main role="main">
|
|
||||||
<h1>$title$</h1>
|
|
||||||
$body$
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
Site proudly generated by
|
|
||||||
<a href="http://jaspervdj.be/hakyll">Hakyll</a>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<section id="hero" class="py-8 px-2 min-h-96">
|
||||||
|
<div class="flex sm:flex-row justify-around">
|
||||||
|
<div class="text-6xl">
|
||||||
|
⟨K⟩
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<div>withKompact {} do </div>
|
||||||
|
<div> ... x <- lean dapp dev </div>
|
||||||
|
<div> ... run x </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<nav class="">
|
||||||
|
<div class="relative flex h-16 items-center justify-between">
|
||||||
|
<div>
|
||||||
|
Kompact.io
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<ul class="flex flex-row gap-4 md:gap-8">
|
||||||
|
<li>
|
||||||
|
<a href="#items">
|
||||||
|
Items
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#items">
|
||||||
|
Items
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
<nav class="">
|
||||||
|
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
|
||||||
|
<div class="relative flex h-16 items-center justify-between">
|
||||||
|
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
|
||||||
|
<!-- Mobile menu button-->
|
||||||
|
<button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
|
||||||
|
<span class="sr-only">Open main menu</span>
|
||||||
|
<!--
|
||||||
|
Icon when menu is closed.
|
||||||
|
|
||||||
|
Menu open: "hidden", Menu closed: "block"
|
||||||
|
-->
|
||||||
|
<svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||||
|
</svg>
|
||||||
|
<!--
|
||||||
|
Icon when menu is open.
|
||||||
|
|
||||||
|
Menu open: "block", Menu closed: "hidden"
|
||||||
|
-->
|
||||||
|
<svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
|
||||||
|
<div class="flex flex-shrink-0 items-center">
|
||||||
|
<img class="block h-8 w-auto lg:hidden" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
|
||||||
|
<img class="hidden h-8 w-auto lg:block" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
|
||||||
|
</div>
|
||||||
|
<div class="hidden sm:ml-6 sm:block">
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||||
|
<a href="#" class="bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium" aria-current="page">Dashboard</a>
|
||||||
|
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Team</a>
|
||||||
|
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Projects</a>
|
||||||
|
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Calendar</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
|
||||||
|
<button type="button" class="rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
|
||||||
|
<span class="sr-only">View notifications</span>
|
||||||
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Profile dropdown -->
|
||||||
|
<div class="relative ml-3">
|
||||||
|
<div>
|
||||||
|
<button type="button" class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
|
||||||
|
<span class="sr-only">Open user menu</span>
|
||||||
|
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Dropdown menu, show/hide based on menu state.
|
||||||
|
|
||||||
|
Entering: "transition ease-out duration-100"
|
||||||
|
From: "transform opacity-0 scale-95"
|
||||||
|
To: "transform opacity-100 scale-100"
|
||||||
|
Leaving: "transition ease-in duration-75"
|
||||||
|
From: "transform opacity-100 scale-100"
|
||||||
|
To: "transform opacity-0 scale-95"
|
||||||
|
-->
|
||||||
|
<div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
|
||||||
|
<!-- Active: "bg-gray-100", Not Active: "" -->
|
||||||
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
|
||||||
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
|
||||||
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile menu, show/hide based on menu state. -->
|
||||||
|
<div class="sm:hidden" id="mobile-menu">
|
||||||
|
<div class="space-y-1 px-2 pb-3 pt-2">
|
||||||
|
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||||
|
<a href="#" class="bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium" aria-current="page">Dashboard</a>
|
||||||
|
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Team</a>
|
||||||
|
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Projects</a>
|
||||||
|
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Calendar</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||||
|
<link rel="manifest" href="/manifest.json" />
|
||||||
|
<meta name="msapplication-TileColor" content="#ffffff" />
|
||||||
|
<meta
|
||||||
|
name="msapplication-TileImage"
|
||||||
|
content="/favicon/ms-icon-144x144.png"
|
||||||
|
/>
|
||||||
|
<meta name="theme-color" content="#ffffff" />
|
||||||
|
<title>$title$</title>
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Lean dapp development"
|
||||||
|
/>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="/css/normalize.css" />
|
||||||
|
<link rel="stylesheet" href="/css/terminal.css" />
|
||||||
|
<link rel="stylesheet" href="/css/custom.css" />
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="57x57"
|
||||||
|
href="/favicon/apple-icon-57x57.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="60x60"
|
||||||
|
href="/favicon/apple-icon-60x60.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="72x72"
|
||||||
|
href="/favicon/apple-icon-72x72.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="76x76"
|
||||||
|
href="/favicon/apple-icon-76x76.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="114x114"
|
||||||
|
href="/favicon/apple-icon-114x114.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="120x120"
|
||||||
|
href="/favicon/apple-icon-120x120.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="144x144"
|
||||||
|
href="/favicon/apple-icon-144x144.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="152x152"
|
||||||
|
href="/favicon/apple-icon-152x152.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="180x180"
|
||||||
|
href="/favicon/apple-icon-180x180.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="192x192"
|
||||||
|
href="/favicon/android-icon-192x192.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="/favicon/favicon-32x32.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="96x96"
|
||||||
|
href="/favicon/favicon-96x96.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="16x16"
|
||||||
|
href="/favicon/favicon-16x16.png"
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
|
<body class="terminal">
|
||||||
|
<div class="container">
|
||||||
|
<div class="terminal-nav">
|
||||||
|
<header class="terminal-logo">
|
||||||
|
<div class="logo terminal-prompt">
|
||||||
|
<a href="https://kompact.io" class="no-style">kompact.io</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<nav class="terminal-menu">
|
||||||
|
<ul vocab="https://schema.org/" typeof="BreadcrumbList">
|
||||||
|
<li>
|
||||||
|
<a href="https://terminalcss.xyz" class="menu-item active"
|
||||||
|
><span>Light</span></a
|
||||||
|
><meta property="position" />
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">$body$</div>
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
|
||||||
|
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
document.querySelectorAll("pre code").forEach((block) => {
|
||||||
|
window.hljs.highlightBlock(block);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -74,6 +74,7 @@
|
||||||
nil
|
nil
|
||||||
nodePackages_latest.vscode-html-languageserver-bin
|
nodePackages_latest.vscode-html-languageserver-bin
|
||||||
nodePackages_latest.prettier
|
nodePackages_latest.prettier
|
||||||
|
nodePackages.tailwindcss
|
||||||
haskellPackages.hakyll
|
haskellPackages.hakyll
|
||||||
zlib
|
zlib
|
||||||
];
|
];
|
||||||
|
|
|
||||||
971
site/index.html
971
site/index.html
|
|
@ -1,971 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en-US">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
||||||
<link rel="manifest" href="/manifest.json" />
|
|
||||||
<meta name="msapplication-TileColor" content="#ffffff" />
|
|
||||||
<meta
|
|
||||||
name="msapplication-TileImage"
|
|
||||||
content="/favicon/ms-icon-144x144.png"
|
|
||||||
/>
|
|
||||||
<meta name="theme-color" content="#ffffff" />
|
|
||||||
<title>Terminal CSS</title>
|
|
||||||
<meta
|
|
||||||
name="description"
|
|
||||||
content="A modern and minimal CSS framework for terminal lovers."
|
|
||||||
/>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="/css/normalize.css" />
|
|
||||||
<link rel="stylesheet" href="/css/terminal.css" />
|
|
||||||
<link
|
|
||||||
rel="apple-touch-icon"
|
|
||||||
sizes="57x57"
|
|
||||||
href="/favicon/apple-icon-57x57.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="apple-touch-icon"
|
|
||||||
sizes="60x60"
|
|
||||||
href="/favicon/apple-icon-60x60.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="apple-touch-icon"
|
|
||||||
sizes="72x72"
|
|
||||||
href="/favicon/apple-icon-72x72.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="apple-touch-icon"
|
|
||||||
sizes="76x76"
|
|
||||||
href="/favicon/apple-icon-76x76.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="apple-touch-icon"
|
|
||||||
sizes="114x114"
|
|
||||||
href="/favicon/apple-icon-114x114.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="apple-touch-icon"
|
|
||||||
sizes="120x120"
|
|
||||||
href="/favicon/apple-icon-120x120.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="apple-touch-icon"
|
|
||||||
sizes="144x144"
|
|
||||||
href="/favicon/apple-icon-144x144.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="apple-touch-icon"
|
|
||||||
sizes="152x152"
|
|
||||||
href="/favicon/apple-icon-152x152.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="apple-touch-icon"
|
|
||||||
sizes="180x180"
|
|
||||||
href="/favicon/apple-icon-180x180.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="icon"
|
|
||||||
type="image/png"
|
|
||||||
sizes="192x192"
|
|
||||||
href="/favicon/android-icon-192x192.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="icon"
|
|
||||||
type="image/png"
|
|
||||||
sizes="32x32"
|
|
||||||
href="/favicon/favicon-32x32.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="icon"
|
|
||||||
type="image/png"
|
|
||||||
sizes="96x96"
|
|
||||||
href="/favicon/favicon-96x96.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="icon"
|
|
||||||
type="image/png"
|
|
||||||
sizes="16x16"
|
|
||||||
href="/favicon/favicon-16x16.png"
|
|
||||||
/>
|
|
||||||
<style>
|
|
||||||
.components-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-column-gap: 1.4em;
|
|
||||||
grid-template-columns: auto;
|
|
||||||
grid-template-rows: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: auto;
|
|
||||||
display: grid;
|
|
||||||
grid-gap: 1em;
|
|
||||||
grid-template-rows: auto;
|
|
||||||
grid-template-columns: repeat(
|
|
||||||
auto-fit,
|
|
||||||
minmax(calc(var(--page-width) / 12), 1fr)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 70em) {
|
|
||||||
.components-grid {
|
|
||||||
grid-template-columns: 3fr 9fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="terminal">
|
|
||||||
<div class="container">
|
|
||||||
<div class="terminal-nav">
|
|
||||||
<header class="terminal-logo">
|
|
||||||
<div class="logo terminal-prompt">
|
|
||||||
<a href="https://terminalcss.xyz" class="no-style">kompact.io</a>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<nav class="terminal-menu">
|
|
||||||
<ul vocab="https://schema.org/" typeof="BreadcrumbList">
|
|
||||||
<li>
|
|
||||||
<a href="https://terminalcss.xyz" class="menu-item active"
|
|
||||||
><span>Light</span></a
|
|
||||||
><meta property="position" />
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<p>A modern and minimal CSS framework for terminal lovers.</p>
|
|
||||||
|
|
||||||
<h2 id="project-goals">Project Goals</h2>
|
|
||||||
<p>
|
|
||||||
Terminal CSS has no overhead and is lightweight
|
|
||||||
<strong>(~ 3k gzip)</strong>. The source is written in
|
|
||||||
<strong>pure css</strong> to be accessible for everybody and easy to
|
|
||||||
contribute.
|
|
||||||
</p>
|
|
||||||
<h2 id="markdown-terminal-css">Markdown ❤️ Terminal CSS</h2>
|
|
||||||
<p>
|
|
||||||
It's perfect for your <em>personal website</em>, <em>blog</em>, or
|
|
||||||
<em>side project</em>.
|
|
||||||
</p>
|
|
||||||
<h2 id="how-to-use">How to use</h2>
|
|
||||||
<p>
|
|
||||||
When using something like Webpack just install with
|
|
||||||
<code>npm i terminal.css</code>.
|
|
||||||
</p>
|
|
||||||
<pre><code class="language-js">import 'terminal.css'</code></pre>
|
|
||||||
<p>
|
|
||||||
Terminal CSS is also available via
|
|
||||||
<a href="https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css"
|
|
||||||
>CDN</a
|
|
||||||
>
|
|
||||||
</p>
|
|
||||||
<pre><code class="language-html"><link rel="stylesheet" href="https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css" /></code></pre>
|
|
||||||
<h2 id="themes">Themes</h2>
|
|
||||||
<p>
|
|
||||||
To create your own theme just open the dev-tools and edit the CSS
|
|
||||||
Variables. Copy and paste it to your website. Done!
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<h2 id="contributors">Contributors</h2>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://othyn.com/">Ben</a></li>
|
|
||||||
<li><a href="https://matiaskorhonen.fi/">Matias Korhonen</a></li>
|
|
||||||
<li><a href="https://github.com/nektro">Meghan</a></li>
|
|
||||||
<li><a href="https://ccat3z.xyz">Lingfeng Zhang</a></li>
|
|
||||||
</ul>
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<p>With ❤️ by <a href="https://jduri.com">Jonas D.</a></p>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
<div class="components components-grid">
|
|
||||||
<aside id="menu">
|
|
||||||
<h2>Components</h2>
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#GridSystem">Grid System</a></li>
|
|
||||||
<li><a href="#Navigation">Navigation</a></li>
|
|
||||||
<li><a href="#NavigationList">Navigation List</a></li>
|
|
||||||
<li><a href="#Lists">Lists</a></li>
|
|
||||||
<li><a href="#Typography">Typography</a></li>
|
|
||||||
<li><a href="#Tables">Tables</a></li>
|
|
||||||
<li>
|
|
||||||
<a href="#SpecialElements">Special Elements</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#Blockquote">Blockquote</a></li>
|
|
||||||
<li><a href="#Misc">Misc</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a href="#Forms">Forms</a></li>
|
|
||||||
<li><a href="#Progress">Progress Bar</a></li>
|
|
||||||
<li><a href="#Buttons">Buttons</a></li>
|
|
||||||
<li><a href="#Cards">Cards</a></li>
|
|
||||||
<li><a href="#Timeline">Timeline</a></li>
|
|
||||||
<li><a href="#Alerts">Alerts</a></li>
|
|
||||||
<li><a href="#Media">Media</a></li>
|
|
||||||
<li><a href="#Figure">Image with caption</a></li>
|
|
||||||
<li><a href="#highlightjs">Supports Highlight.js</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<h2>Documentation</h2>
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#DocVariables">Variables</a></li>
|
|
||||||
<li><a href="#DocTypography">Typography</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<section>
|
|
||||||
<header>
|
|
||||||
<h2 id="GridSystem">Grid System</h2>
|
|
||||||
<p>
|
|
||||||
Terminal CSS has no build-in grid system. However, you can roll
|
|
||||||
your own with Flexbox or CSS Grid.
|
|
||||||
</p>
|
|
||||||
</header>
|
|
||||||
<div class="image-grid">
|
|
||||||
<a href="https://picsum.photos" style="border: none"
|
|
||||||
><img
|
|
||||||
src="https://picsum.photos/200/300?random&1"
|
|
||||||
width="auto"
|
|
||||||
height="auto"
|
|
||||||
alt="random image"
|
|
||||||
/></a>
|
|
||||||
<a href="https://picsum.photos" style="border: none"
|
|
||||||
><img
|
|
||||||
src="https://picsum.photos/200/300?random&2"
|
|
||||||
width="auto"
|
|
||||||
height="auto"
|
|
||||||
alt="random image"
|
|
||||||
/></a>
|
|
||||||
<a href="https://picsum.photos" style="border: none"
|
|
||||||
><img
|
|
||||||
src="https://picsum.photos/200/300?random&3"
|
|
||||||
width="auto"
|
|
||||||
height="auto"
|
|
||||||
alt="random image"
|
|
||||||
/></a>
|
|
||||||
<a href="https://picsum.photos" style="border: none"
|
|
||||||
><img
|
|
||||||
src="https://picsum.photos/200/300?random&4"
|
|
||||||
width="auto"
|
|
||||||
height="auto"
|
|
||||||
alt="random image"
|
|
||||||
/></a>
|
|
||||||
<a href="https://picsum.photos" style="border: none"
|
|
||||||
><img
|
|
||||||
src="https://picsum.photos/200/300?random&5"
|
|
||||||
width="auto"
|
|
||||||
height="auto"
|
|
||||||
alt="random image"
|
|
||||||
/></a>
|
|
||||||
<a href="https://picsum.photos" style="border: none"
|
|
||||||
><img
|
|
||||||
src="https://picsum.photos/200/300?random&6"
|
|
||||||
width="auto"
|
|
||||||
height="auto"
|
|
||||||
alt="random image"
|
|
||||||
/></a>
|
|
||||||
<a href="https://picsum.photos" style="border: none"
|
|
||||||
><img
|
|
||||||
src="https://picsum.photos/200/300?random&7"
|
|
||||||
width="auto"
|
|
||||||
height="auto"
|
|
||||||
alt="random image"
|
|
||||||
/></a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<hr />
|
|
||||||
<section>
|
|
||||||
<header><h2 id="Navigation">Navigation</h2></header>
|
|
||||||
<div class="terminal-nav">
|
|
||||||
<div class="terminal-logo">
|
|
||||||
<div class="logo terminal-prompt">
|
|
||||||
<a href="#" class="no-style">Logo</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<nav class="terminal-menu">
|
|
||||||
<ul>
|
|
||||||
<li><a class="menu-item" href="#">Item #1</a></li>
|
|
||||||
<li>
|
|
||||||
<a class="menu-item active" href="#">Active Item #2</a>
|
|
||||||
</li>
|
|
||||||
<li><a class="menu-item" href="#">Item #3</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
<section>
|
|
||||||
<header><h2 id="NavigationList">Navigation Lists</h2></header>
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">Dashboard</a></li>
|
|
||||||
<li><a href="#">Members</a></li>
|
|
||||||
<li><a href="#">Settings</a></li>
|
|
||||||
<li>
|
|
||||||
<a href="#">Profile</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">Account</a></li>
|
|
||||||
<li><a href="#">Billing</a></li>
|
|
||||||
<li><a href="#">Logout</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
<section>
|
|
||||||
<header><h2 id="Lists">Lists</h2></header>
|
|
||||||
<ul>
|
|
||||||
<li>This is a list item</li>
|
|
||||||
<li>So is this - there could be more</li>
|
|
||||||
<li>
|
|
||||||
Make sure to style list items to:
|
|
||||||
<ul>
|
|
||||||
<li>Not forgetting child list items</li>
|
|
||||||
<li>Not forgetting child list items</li>
|
|
||||||
<li>Not forgetting child list items</li>
|
|
||||||
<li>Not forgetting child list items</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>A couple more</li>
|
|
||||||
<li>Top-level list items</li>
|
|
||||||
</ul>
|
|
||||||
<p>Don't forget <strong>Ordered lists</strong>:</p>
|
|
||||||
<ol>
|
|
||||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
|
||||||
<li>
|
|
||||||
Aliquam tincidunt mauris eu risus
|
|
||||||
<ol>
|
|
||||||
<li>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
|
||||||
</li>
|
|
||||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
|
||||||
</ol>
|
|
||||||
</li>
|
|
||||||
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
|
|
||||||
<li>Aliquam tincidunt mauris eu risus.</li>
|
|
||||||
</ol>
|
|
||||||
<p><strong>Description lists </strong>are also included.</p>
|
|
||||||
<dl>
|
|
||||||
<dt>Description list title 01</dt>
|
|
||||||
<dd>Description list description 01</dd>
|
|
||||||
<dt>Description list title 02</dt>
|
|
||||||
<dd>Description list description 02</dd>
|
|
||||||
<dd>Description list description 03</dd>
|
|
||||||
</dl>
|
|
||||||
<p>
|
|
||||||
A <strong>Table of content</strong>, which can be used as an index
|
|
||||||
for a blog archive.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Unlike regular lists, the TOC component
|
|
||||||
<em>only supports a single depth level.</em>
|
|
||||||
</p>
|
|
||||||
<ol class="terminal-toc">
|
|
||||||
<li>
|
|
||||||
<a href="#"
|
|
||||||
>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#"
|
|
||||||
>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
|
|
||||||
<li>
|
|
||||||
<a href="#"
|
|
||||||
>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
|
|
||||||
</ol>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
<section>
|
|
||||||
<header>
|
|
||||||
<h2 id="Typography">Typography</h2>
|
|
||||||
<h1>Level 1 Heading</h1>
|
|
||||||
<p>
|
|
||||||
Pellentesque habitant morbi tristique senectus et netus et
|
|
||||||
malesuada fames ac turpis egestas. Vestibulum tortor quam,
|
|
||||||
feugiat vitae, ultricies eget, tempor sit amet, ante.
|
|
||||||
</p>
|
|
||||||
<h2>Level 2 Heading</h2>
|
|
||||||
<p>
|
|
||||||
Pellentesque habitant morbi tristique senectus et netus et
|
|
||||||
malesuada fames ac turpis egestas. Vestibulum tortor quam,
|
|
||||||
feugiat vitae, ultricies eget, tempor sit amet, ante.
|
|
||||||
</p>
|
|
||||||
<h3>Level 3 Heading</h3>
|
|
||||||
<p>
|
|
||||||
Pellentesque habitant morbi tristique senectus et netus et
|
|
||||||
malesuada fames ac turpis egestas. Vestibulum tortor quam,
|
|
||||||
feugiat vitae, ultricies eget, tempor sit amet, ante.
|
|
||||||
</p>
|
|
||||||
<h4>Level 4 Heading</h4>
|
|
||||||
<h5>Level 5 Heading</h5>
|
|
||||||
<h6>Level 6 Heading</h6>
|
|
||||||
</header>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
<section>
|
|
||||||
<header>
|
|
||||||
<h2 id="Tables">Tables</h2>
|
|
||||||
</header>
|
|
||||||
<table>
|
|
||||||
<caption>
|
|
||||||
Most Downloaded Movies on BitTorrent, 2011
|
|
||||||
</caption>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Rank</th>
|
|
||||||
<th>Movie</th>
|
|
||||||
<th>Downloads</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tfoot>
|
|
||||||
<tr>
|
|
||||||
<th colspan="4">torrentfreak.com</th>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<th>1</th>
|
|
||||||
<td>Fast Five</td>
|
|
||||||
<td>9,260,000</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>2</th>
|
|
||||||
<td>The Hangover II</td>
|
|
||||||
<td>8,840,000</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>3</th>
|
|
||||||
<td>Thor</td>
|
|
||||||
<td>8,330,000</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>4</th>
|
|
||||||
<td>Source Code</td>
|
|
||||||
<td>7,910,000</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>5</th>
|
|
||||||
<td>I Am Number Four</td>
|
|
||||||
<td>7,670,000</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>6</th>
|
|
||||||
<td>Sucker Punch</td>
|
|
||||||
<td>7,200,000</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>7</th>
|
|
||||||
<td>127 Hours</td>
|
|
||||||
<td>6,910,000</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>8</th>
|
|
||||||
<td>Rango</td>
|
|
||||||
<td>6,480,000</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>9</th>
|
|
||||||
<td>The King’s Speech</td>
|
|
||||||
<td>6,250,000</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>10</th>
|
|
||||||
<td>Harry Potter and the Deathly Hallows Part 2</td>
|
|
||||||
<td>6,030,000</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</section>
|
|
||||||
<hr />
|
|
||||||
<section>
|
|
||||||
<header><h2 id="SpecialElements">Special Elements</h2></header>
|
|
||||||
<p>Terminal CSS also supports a range of special elements.</p>
|
|
||||||
|
|
||||||
<h3 id="Blockquote">Blockquote</h3>
|
|
||||||
<blockquote>
|
|
||||||
<p>
|
|
||||||
<em>This is a properly formatted blockquote, btw.</em> Measuring
|
|
||||||
programming progress by lines of code is like measuring aircraft
|
|
||||||
building progress by weight.
|
|
||||||
</p>
|
|
||||||
<footer>
|
|
||||||
<cite
|
|
||||||
><a href="http://www.thegatesnotes.com">Bill Gates</a></cite
|
|
||||||
>
|
|
||||||
</footer>
|
|
||||||
</blockquote>
|
|
||||||
<h3 id="Misc">Misc</h3>
|
|
||||||
<h5 class="terminal-prompt">Terminal Prompt</h5>
|
|
||||||
<p>
|
|
||||||
I am <a href="?abc123">the a tag</a> example<br />
|
|
||||||
I am <abbr title="test">the abbr tag</abbr> example<br />
|
|
||||||
I am <b>the b tag</b> example<br />
|
|
||||||
I am <cite>the cite tag</cite> example<br />
|
|
||||||
I am <code>the code tag</code> example<br />
|
|
||||||
I am <del>the del tag</del> example<br />
|
|
||||||
I am <dfn>the dfn tag</dfn> example<br />
|
|
||||||
I am <em>the em tag</em> example<br />
|
|
||||||
I am <i>the i tag</i> example<br />
|
|
||||||
I am <ins>the ins tag</ins> example<br />
|
|
||||||
I am <kbd>the kbd tag</kbd> example<br />
|
|
||||||
I am <q>the q tag</q> example<br />
|
|
||||||
I am <samp>the samp tag</samp> example<br />
|
|
||||||
I am <small>the small tag</small> example<br />
|
|
||||||
I am <span>the span tag</span> example<br />
|
|
||||||
I am <strong>the strong tag</strong> example<br />
|
|
||||||
I am <sub>the sub tag</sub> example<br />
|
|
||||||
I am <sup>the sup tag</sup> example<br />
|
|
||||||
I am <var>the var tag</var> example<br />
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h4 id="Address">Address</h4>
|
|
||||||
<address>
|
|
||||||
Mozilla Foundation<br />
|
|
||||||
1981 Landings Drive<br />
|
|
||||||
Building K<br />
|
|
||||||
Mountain View, CA 94043-0801<br />
|
|
||||||
USA
|
|
||||||
</address>
|
|
||||||
<br />
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
<section>
|
|
||||||
<header><h2 id="Forms">Forms</h2></header>
|
|
||||||
<form action="#">
|
|
||||||
<fieldset>
|
|
||||||
<legend>Form legend</legend>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="email">Email input:</label>
|
|
||||||
<input
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
type="email"
|
|
||||||
required
|
|
||||||
minlength="5"
|
|
||||||
placeholder="test"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="text">Text input:</label>
|
|
||||||
<input
|
|
||||||
id="text"
|
|
||||||
name="text"
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
minlength="5"
|
|
||||||
placeholder="test"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="itext">Invalid input (min-length 10):</label>
|
|
||||||
<input id="itext" name="itext" type="text" minlength="10" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="pw">Password input:</label>
|
|
||||||
<input type="password" id="pw" name="pw" value="password" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="radio">Radio input:</label>
|
|
||||||
<input name="radio" type="radio" id="radio" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="check">Checkbox input:</label>
|
|
||||||
<input for="check" type="checkbox" id="check" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="select">Select field:</label>
|
|
||||||
<select id="select" name="select">
|
|
||||||
<option>Option 01</option>
|
|
||||||
<option>Option 02</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="tarea">Textarea:</label>
|
|
||||||
<textarea id="tarea" cols="30" rows="5" name=="tarea"/>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="submit">Input Button:</label>
|
|
||||||
<button
|
|
||||||
class="btn btn-default"
|
|
||||||
type="submit"
|
|
||||||
role="button"
|
|
||||||
name="submit"
|
|
||||||
id="submit"
|
|
||||||
>
|
|
||||||
Submit
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
<hr />
|
|
||||||
<section>
|
|
||||||
<header><h2 id="Progress">Progress Bar</h2></header>
|
|
||||||
<br />
|
|
||||||
<p>With only an arrow</p>
|
|
||||||
<div class="progress-bar">
|
|
||||||
<div class="progress-bar-filled" style="width: 40%"></div>
|
|
||||||
</div>
|
|
||||||
<p>With a percentage showing above the arrow</p>
|
|
||||||
<div class="progress-bar progress-bar-show-percent">
|
|
||||||
<div
|
|
||||||
class="progress-bar-filled"
|
|
||||||
style="width: 30%"
|
|
||||||
data-filled="Loading 30%"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<p>Without arrow</p>
|
|
||||||
<div class="progress-bar progress-bar-no-arrow">
|
|
||||||
<div
|
|
||||||
class="progress-bar-filled"
|
|
||||||
style="width: 60%"
|
|
||||||
data-filled="Loading 60%"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<br />
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
<section>
|
|
||||||
<header><h2 id="Buttons">Buttons</h2></header>
|
|
||||||
<button class="btn btn-default">Default</button><br /><br />
|
|
||||||
<button class="btn btn-primary">Primary</button><br /><br />
|
|
||||||
<button class="btn btn-error">Error</button><br /><br />
|
|
||||||
<button class="btn btn-default btn-ghost">Ghost Button</button
|
|
||||||
><br /><br />
|
|
||||||
<button class="btn btn-primary btn-ghost">Ghost Button</button
|
|
||||||
><br /><br />
|
|
||||||
<button class="btn btn-error btn-ghost">Ghost Button</button
|
|
||||||
><br /><br />
|
|
||||||
<button class="btn btn-primary btn-block">Block Level Button</button
|
|
||||||
><br /><br />
|
|
||||||
<p>Button Group</p>
|
|
||||||
<div class="btn-group">
|
|
||||||
<button class="btn btn-default btn-ghost">Left</button>
|
|
||||||
<button class="btn btn-default btn-ghost">Middle</button>
|
|
||||||
<button class="btn btn-default btn-ghost">Right</button>
|
|
||||||
</div>
|
|
||||||
<br />
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
<section>
|
|
||||||
<header><h2 id="Cards">Cards</h2></header>
|
|
||||||
<div class="terminal-card">
|
|
||||||
<header>Card Title</header>
|
|
||||||
<div>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
|
||||||
Expedita, quas ex vero enim in doloribus officiis ullam vel nam
|
|
||||||
esse sapiente velit incidunt. Eaque quod et, aut maiores
|
|
||||||
excepturi sint.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<br />
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
<section>
|
|
||||||
<header><h2 id="Timeline">Timeline</h2></header>
|
|
||||||
<div class="terminal-timeline">
|
|
||||||
<div class="terminal-card">
|
|
||||||
<header>Card Title</header>
|
|
||||||
<div>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
|
||||||
Expedita, quas ex vero enim in doloribus officiis ullam vel
|
|
||||||
nam esse sapiente velit incidunt. Eaque quod et, aut maiores
|
|
||||||
excepturi sint.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="terminal-card">
|
|
||||||
<header>Card Title</header>
|
|
||||||
<div>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
|
||||||
Expedita, quas ex vero enim in doloribus officiis ullam vel
|
|
||||||
nam esse sapiente velit incidunt. Eaque quod et, aut maiores
|
|
||||||
excepturi sint.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<br />
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
<section>
|
|
||||||
<header><h2 id="Alerts">Alerts</h2></header>
|
|
||||||
<div class="terminal-alert">Default message</div>
|
|
||||||
<div class="terminal-alert terminal-alert-primary">
|
|
||||||
Primary message
|
|
||||||
</div>
|
|
||||||
<div class="terminal-alert terminal-alert-error">Error message</div>
|
|
||||||
</section>
|
|
||||||
<hr />
|
|
||||||
<section>
|
|
||||||
<header><h2 id="Figure">Image with caption</h2></header>
|
|
||||||
<figure>
|
|
||||||
<img
|
|
||||||
src="https://picsum.photos/1000/600?random&imageWithCaption"
|
|
||||||
alt="Image with caption"
|
|
||||||
title="Image with caption"
|
|
||||||
/>
|
|
||||||
<figcaption>Image with caption</figcaption>
|
|
||||||
</figure>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
<section>
|
|
||||||
<header>
|
|
||||||
<h2 id="highlightjs">Supports Highlight.js</h2>
|
|
||||||
<p>
|
|
||||||
Terminal CSS comes with a build in theme for
|
|
||||||
<a
|
|
||||||
href="https://highlightjs.org/"
|
|
||||||
target="_black"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>Highlight.js</a
|
|
||||||
>
|
|
||||||
</p>
|
|
||||||
</header>
|
|
||||||
<pre>
|
|
||||||
<code>
|
|
||||||
.hljs {
|
|
||||||
display: block;
|
|
||||||
overflow-x: auto;
|
|
||||||
padding: 0.5em;
|
|
||||||
background: var(--block-background-color);
|
|
||||||
color: var(--font-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-comment,
|
|
||||||
.hljs-quote {
|
|
||||||
color: var(--secondary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-variable {
|
|
||||||
color: var(--font-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-keyword,
|
|
||||||
.hljs-selector-tag,
|
|
||||||
.hljs-built_in,
|
|
||||||
.hljs-name,
|
|
||||||
.hljs-tag {
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-string,
|
|
||||||
.hljs-title,
|
|
||||||
.hljs-section,
|
|
||||||
.hljs-attribute,
|
|
||||||
.hljs-literal,
|
|
||||||
.hljs-template-tag,
|
|
||||||
.hljs-template-variable,
|
|
||||||
.hljs-type,
|
|
||||||
.hljs-addition {
|
|
||||||
color: var(--secondary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-string {
|
|
||||||
color: var(--secondary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-deletion,
|
|
||||||
.hljs-selector-attr,
|
|
||||||
.hljs-selector-pseudo,
|
|
||||||
.hljs-meta {
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-doctag {
|
|
||||||
color: var(--secondary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-attr {
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-symbol,
|
|
||||||
.hljs-bullet,
|
|
||||||
.hljs-link {
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.hljs-emphasis {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-strong {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
<section>
|
|
||||||
<header><h2>Documentation</h2></header>
|
|
||||||
<p>
|
|
||||||
Most of the documentation is still at an early stage. For more
|
|
||||||
details, please have a look at the source of this website.
|
|
||||||
</p>
|
|
||||||
<section>
|
|
||||||
<header>
|
|
||||||
<h2 id="DocVariables">Variables</h2>
|
|
||||||
</header>
|
|
||||||
<p>
|
|
||||||
Customizing the style of Terminal CSS with CSS Variables is
|
|
||||||
easy.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<dl class="custom-dl">
|
|
||||||
<style>
|
|
||||||
.custom-dl dt {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-dl dd.italic {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<dt>--global-font-size</dt>
|
|
||||||
<dd>The Base font size</dd>
|
|
||||||
<dt>--global-line-height</dt>
|
|
||||||
<dd>
|
|
||||||
The base line height. Modify this to achieve the best
|
|
||||||
readability.
|
|
||||||
</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>
|
|
||||||
<dt>--mono-font-stack</dt>
|
|
||||||
<dd>Same as above but for <code>code</code>.</dd>
|
|
||||||
<dt>--background-color</dt>
|
|
||||||
<dd>The page background color</dd>
|
|
||||||
<dt>--font-color</dt>
|
|
||||||
<dd>
|
|
||||||
The base font color for text, headlines, blockquotes, lists,
|
|
||||||
etc.
|
|
||||||
</dd>
|
|
||||||
<dt>--invert-font-color</dt>
|
|
||||||
<dd>
|
|
||||||
Sometimes text appears on a colored background. Adjust this
|
|
||||||
color to improve readability.
|
|
||||||
</dd>
|
|
||||||
<dt>--primary-color</dt>
|
|
||||||
<dd>The primary color is used for links and buttons.</dd>
|
|
||||||
<dt>--secondary-color</dt>
|
|
||||||
<dd>
|
|
||||||
The secondary color is more subtle then the primary color.
|
|
||||||
It's used for code highlighting and image captions.
|
|
||||||
</dd>
|
|
||||||
<dt>--error-color</dt>
|
|
||||||
<dd>Used for error alerts and form validation.</dd>
|
|
||||||
<dt>--progress-bar-background</dt>
|
|
||||||
<dd>The background color of progress bars.</dd>
|
|
||||||
<dt>--progress-bar-fill</dt>
|
|
||||||
<dd>
|
|
||||||
The fill color, indicating the progress in progress bars.
|
|
||||||
</dd>
|
|
||||||
<dt>--code-bg-color</dt>
|
|
||||||
<dd>
|
|
||||||
The background color of <code><code></code> elements.
|
|
||||||
</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>
|
|
||||||
<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>
|
|
||||||
</dl>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
<section>
|
|
||||||
<header>
|
|
||||||
<h2 id="DocTypography">Typography</h2>
|
|
||||||
</header>
|
|
||||||
<p>
|
|
||||||
Terminal CSS uses a single font size for almost all elements.
|
|
||||||
However, there is a way to use browser default font sizes if you
|
|
||||||
wish.
|
|
||||||
</p>
|
|
||||||
<dl class="custom-dl">
|
|
||||||
<dt>Single font size</dt>
|
|
||||||
<dd>
|
|
||||||
Use <code><body class="terminal"></code>. If
|
|
||||||
you leave that option, it will fallback to browser defaults.
|
|
||||||
See <a href="/sans-serif/">here</a>.
|
|
||||||
</dd>
|
|
||||||
</dl>
|
|
||||||
</section>
|
|
||||||
</section>
|
|
||||||
<hr />
|
|
||||||
<footer>
|
|
||||||
<p>
|
|
||||||
This project is inspired by
|
|
||||||
<a
|
|
||||||
href="https://egoist.sh/"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferer"
|
|
||||||
>@egoist's</a
|
|
||||||
>
|
|
||||||
work -
|
|
||||||
<a href="https://github.com/egoist/hack" rel="noopener noreferer"
|
|
||||||
>hack.css</a
|
|
||||||
>
|
|
||||||
</p>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
<section>
|
|
||||||
<header></header>
|
|
||||||
<p>Version: 0.7.2 <a href="#menu">Top</a></p>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
|
|
||||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
|
||||||
<script>
|
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
|
||||||
document.querySelectorAll("pre code").forEach((block) => {
|
|
||||||
window.hljs.highlightBlock(block);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue