972 lines
32 KiB
HTML
972 lines
32 KiB
HTML
<!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>
|