Use static site gen for docs

This commit is contained in:
Jonas Duri 2019-01-28 03:37:25 +01:00
parent bb63ba6530
commit ddf960303a
90 changed files with 1641 additions and 1332 deletions

1
.gitignore vendored
View File

@ -4,3 +4,4 @@ npm-debug.log
.env
.DS_Store
.vscode
public

View File

@ -1,6 +1,10 @@
# Changelog
All notable changes to this project will be documented in this file.
## [0.4.0] - 2019-01-28
### Added
- Use static site generator for docs
## [0.3.1] - 2019-01-27
### Added
- Add option to style text selection colors

View File

@ -1,33 +1,35 @@
# Terminal CSS
Modern and minimalistic CSS framework for *terminal* lovers ❤️.
Modern and minimal CSS framework for terminal lovers.
Visit the website [terminalcss.xyz](https://terminalcss.xyz/)
## Goal
## Project Goals
There are so many CSS frameworks out there with great features but most of them come at the cost of *bloated* html code. **Terminal CSS** is here for purists who want minimal overhead and maximal control.
Terminal CSS has no overhead and is lightweight **(<= 2.9k gzip)**.
The source is written in **pure css** to be accessible for everybody and easy to contribute.
## Credits
## Markdown ❤️ Terminal CSS
This project is heavily inspired by [@egoist's](https://egoist.sh/) work - [hack.css](https://hackcss.egoist.moe/)
It's perfect for your *personal website*, *blog*, or *side project*.
## Usage
## How to use
#### NPM
Install with `npm i terminal.css`.
When using something like Webpack just install with `npm i terminal.css`.
```js
import 'terminal.css'
```
#### UNPKG CDN
Terminal CSS is also available via [CDN](https://unpkg.com/terminal.css@0.4.0/dist/terminal.min.css)
The css is available via [CDN](https://unpkg.com/terminal.css@0.3.2/dist/terminal.min.css)
```html
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.3.2/dist/terminal.min.css" />
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.4.0/dist/terminal.min.css" />
```
## Themes
To create your own theme just open the dev-tools and edit the CSS Variables. Copy and paste it to your website. Done!
## Development
- `npm install`

View File

@ -1,648 +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" />
<title>Terminal CSS</title>
<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">
<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">
<meta name="description" content="Modern and minimalistic CSS framework for terminal lovers ❤️" />
<link rel="stylesheet" href="/terminal.min.css" />
</head>
<style>
@font-face{
font-family: 'Fira Code';
src: url('/fonts/eot/FiraCode-Light.eot');
src: url('/fonts/eot/FiraCode-Light.eot') format('embedded-opentype'),
url('/fonts/woff2/FiraCode-Light.woff2') format('woff2'),
url('/fonts/woff/FiraCode-Light.woff') format('woff'),
url('/fonts/ttf/FiraCode-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: fallback;
}
@font-face{
font-family: 'Fira Code';
src: url('/fonts/eot/FiraCode-Regular.eot');
src: url('/fonts/eot/FiraCode-Regular.eot') format('embedded-opentype'),
url('/fonts/woff2/FiraCode-Regular.woff2') format('woff2'),
url('/fonts/woff/FiraCode-Regular.woff') format('woff'),
url('/fonts/ttf/FiraCode-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: fallback;
}
@font-face{
font-family: 'Fira Code';
src: url('/fonts/eot/FiraCode-Medium.eot');
src: url('/fonts/eot/FiraCode-Medium.eot') format('embedded-opentype'),
url('/fonts/woff2/FiraCode-Medium.woff2') format('woff2'),
url('/fonts/woff/FiraCode-Medium.woff') format('woff'),
url('/fonts/ttf/FiraCode-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: fallback;
}
@font-face{
font-family: 'Fira Code';
src: url('/fonts/eot/FiraCode-Bold.eot');
src: url('/fonts/eot/FiraCode-Bold.eot') format('embedded-opentype'),
url('/fonts/woff2/FiraCode-Bold.woff2') format('woff2'),
url('/fonts/woff/FiraCode-Bold.woff') format('woff'),
url('/fonts/ttf/FiraCode-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: fallback;
}
:root {
--global-font-size: 14px;
--global-line-height: 1.4em;
--global-space: 10px;
--font-stack: 'Fira Code',Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
--background-color: #151515;
--page-width: 60em;
--font-color: #efefef;
--invert-font-color: #151515;
--secondary-color: #787878;
--tertiary-color: #787878;
--primary-color: #90f57e;
--error-color: #ff3c74;
--progress-bar-background: #787878;
--progress-bar-fill: #90f57e;
}
.components-grid {
display: grid;
grid-column-gap: 1em;
grid-template-columns: auto;
grid-template-rows: auto;
}
.image-grid {
display: grid;
grid-gap: 1em;
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>
<body>
<a href="https://github.com/Gioni06/terminal.css" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
<div class="container">
<section class="terminal-header">
<header class="terminal-logo">
<div class="logo"><a href="/" class="no-style">Terminal CSS</a></div>
</header>
<nav class="terminal-menu">
<ul>
<li>
<a class="menu-item" href="/">Light Version</a>
</li>
<li>
<a class="menu-item" href="https://github.com/Gioni06/terminal.css">Github</a>
</li>
<li>
<a class="menu-item" href="https://www.npmjs.com/package/terminal.css">npm</a>
</li>
</ul>
</nav>
</section>
</div>
<div class="container">
<p>
Modern and minimalistic CSS framework for <em>terminal</em> lovers ❤️
</p>
<section>
<h2>Goal</h2>
<p>
There are so many CSS frameworks out there with great features but
most of them come at the cost of <b>bloated</b> html code.
<b>Terminal CSS</b> is here for purists who want minimal overhead and
maximal control.
</p>
</section>
<section>
<h2>Dark Version</h2>
<p>To create your own Terminal CSS theme just edit the `:root` CSS Variables</p>
</section>
<section>
<h2>Credits</h2>
<p>
This project is heavily inspired by
<a href="https://egoist.sh/" target="_blank" rel="noopener noreferer"
>@egoist's</a
>
work -
<a href="https://hackcss.egoist.moe/" rel="noopener noreferer"
>hack.css</a
>
</p>
</section>
<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="#Header">Header</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="#CodeBlocks">Code Blocks</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="#Cards">Cards</a></li>
<li><a href="#Alerts">Alerts</a></li>
<li><a href="#Media">Media</a></li>
<li><a href="#ImageWithCaption">Image with caption</a></li>
</ul>
</nav>
</aside>
<section>
<h2 id="GridSystem">Grid System</h2>
<p>
Terminal CSS doens't come with a build in grid system. It encourages
you to use your own - whether it's Flexbox or CSS Grid.
</p>
<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>
<hr />
<div>
<h2 id="Header">Header</h2>
<section class="terminal-header">
<header class="terminal-logo">
<div class="logo"><a href="#" class="no-style">Logo</a></div>
</header>
<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>
</section>
</div>
<hr>
<h2 id="Lists">Lists</h2>
<section>
<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>
</section>
<hr />
<section>
<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 5 Heading</h6>
</section>
<hr />
<section>
<h2 id="Tables">Tables</h2>
<table>
<caption>
Most Downloaded Movies on BitTorrent, 2011
</caption>
<thead>
<tr>
<th>Rank</th>
<th>Movie</th>
<th>Downloads</th>
<th>Grosses</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>
<td>$626,137,675</td>
</tr>
<tr>
<th>2</th>
<td>The Hangover II</td>
<td>8,840,000</td>
<td>$581,464,305</td>
</tr>
<tr>
<th>3</th>
<td>Thor</td>
<td>8,330,000</td>
<td>$449,326,618</td>
</tr>
<tr>
<th>4</th>
<td>Source Code</td>
<td>7,910,000</td>
<td>$123,278,618</td>
</tr>
<tr>
<th>5</th>
<td>I Am Number Four</td>
<td>7,670,000</td>
<td>$144,500,437</td>
</tr>
<tr>
<th>6</th>
<td>Sucker Punch</td>
<td>7,200,000</td>
<td>$89,792,502</td>
</tr>
<tr>
<th>7</th>
<td>127 Hours</td>
<td>6,910,000</td>
<td>$60,738,797</td>
</tr>
<tr>
<th>8</th>
<td>Rango</td>
<td>6,480,000</td>
<td>$245,155,348</td>
</tr>
<tr>
<th>9</th>
<td>The Kings Speech</td>
<td>6,250,000</td>
<td>$414,211,549</td>
</tr>
<tr>
<th>10</th>
<td>Harry Potter and the Deathly Hallows Part 2</td>
<td>6,030,000</td>
<td>$1,328,111,219</td>
</tr>
</tbody>
</table>
</section>
<h3 id="SpecialElements">Special Elements</h3>
<p>Terminal CSS also supports a range of special elements.</p>
<h4 id="Blockquote">Blockquote</h4>
<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>
<h4 id="CodeBlocks">Code Blocks</h4>
<pre>
<code>
:root {
--global-font-size: 14px;
--global-line-height: 1.4rem;
--global-space: 10px;
--font-stack: 'Fira Code',Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
--background-color: #fff;
--page-width: 70em;
--primary-color: rgb(206, 4, 105);
--font-color: #151513;
--tertiary-color: #727680;
--grid-gap: 1em;
}
</code>
</pre>
<h4 id="Misc">Misc</h4>
<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 <acronym>the acronym tag</acronym> example<br />
I am <b>the b tag</b> example<br />
I am <big>the big tag</big> 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 <tt>the tt tag</tt> example<br />
I am <var>the var tag</var> example<br />
I am the <span class="small">small class</span> example<br />
I am the <span class="large">large class</span> example<br />
I am the <span class="quiet">quiet class</span> 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>
<h4 id="Forms">Forms</h4>
<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 text</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>
<br>
<h4 id="Progress">Progress Bar</h4>
<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>
<h4 id="Buttons">Buttons</h4>
<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 />
<h4 id="Cards">Cards</h4>
<div class="card">
<header>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 />
<h4 id="Alerts">Alerts</h4>
<div class="alert">Default message</div>
<div class="alert alert-primary">Primary message</div>
<div class="alert alert-error">Error message</div>
<hr>
<h2 id="Media">Media</h2>
<div class="terminal-media">
<div class="terminal-media-left">
<div class="terminal-avatarholder"><img width="50" height="50" src="https://picsum.photos/50/50?random&mediaLeft" alt="Picsum"></div>
</div>
<div class="terminal-media-body">
<div class="terminal-media-heading">Media Left Element</div>
<div class="terminal-media-content">This is the media content</div>
</div>
</div>
<div class="terminal-media">
<div class="terminal-media-body">
<div class="terminal-media-heading">Media Right Element</div>
<div class="terminal-media-content">This is the media content</div>
</div>
<div class="terminal-media-right">
<div class="terminal-avatarholder"><img width="50" height="50" src="https://picsum.photos/50/50?random&mediaRight" alt="Picsum"></div>
</div>
</div>
<hr>
<h2 id="ImageWithCaption">Image with caption</h2>
<figure>
<img src="https://picsum.photos/1000/600?random&imageWithCaption" alt="Image with caption" title="Image with caption">
<figcaption>
Image with caption
</figcaption>
</figure>
<hr>
<p>Version: 0.3.2 <a href="#menu">Top</a></p>
</section>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('pre code').forEach((block) => {
window.hljs.highlightBlock(block);
});
})
</script>
</body>
</html>

View File

@ -1,627 +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="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">
<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="Modern and minimalistic CSS framework for terminal lovers ❤️" />
<link rel="stylesheet" href="/terminal.min.css" />
</head>
<style>
@font-face{
font-family: 'Fira Code';
src: url('/fonts/eot/FiraCode-Light.eot');
src: url('/fonts/eot/FiraCode-Light.eot') format('embedded-opentype'),
url('/fonts/woff2/FiraCode-Light.woff2') format('woff2'),
url('/fonts/woff/FiraCode-Light.woff') format('woff'),
url('/fonts/ttf/FiraCode-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: fallback;
}
@font-face{
font-family: 'Fira Code';
src: url('/fonts/eot/FiraCode-Regular.eot');
src: url('/fonts/eot/FiraCode-Regular.eot') format('embedded-opentype'),
url('/fonts/woff2/FiraCode-Regular.woff2') format('woff2'),
url('/fonts/woff/FiraCode-Regular.woff') format('woff'),
url('/fonts/ttf/FiraCode-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: fallback;
}
@font-face{
font-family: 'Fira Code';
src: url('/fonts/eot/FiraCode-Medium.eot');
src: url('/fonts/eot/FiraCode-Medium.eot') format('embedded-opentype'),
url('/fonts/woff2/FiraCode-Medium.woff2') format('woff2'),
url('/fonts/woff/FiraCode-Medium.woff') format('woff'),
url('/fonts/ttf/FiraCode-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: fallback;
}
@font-face{
font-family: 'Fira Code';
src: url('/fonts/eot/FiraCode-Bold.eot');
src: url('/fonts/eot/FiraCode-Bold.eot') format('embedded-opentype'),
url('/fonts/woff2/FiraCode-Bold.woff2') format('woff2'),
url('/fonts/woff/FiraCode-Bold.woff') format('woff'),
url('/fonts/ttf/FiraCode-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: fallback;
}
.components-grid {
display: grid;
grid-column-gap: 1em;
grid-template-columns: auto;
grid-template-rows: auto;
}
.image-grid {
display: grid;
grid-gap: 1em;
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>
<body>
<a href="https://github.com/Gioni06/terminal.css" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
<div class="container">
<section class="terminal-header">
<header class="terminal-logo">
<div class="logo"><a href="/" class="no-style">Terminal CSS</a></div>
</header>
<nav class="terminal-menu">
<ul>
<li>
<a class="menu-item" href="/dark/">Dark Version</a>
</li>
<li>
<a class="menu-item" href="https://github.com/Gioni06/terminal.css">Github</a>
</li>
<li>
<a class="menu-item" href="https://www.npmjs.com/package/terminal.css">npm</a>
</li>
</ul>
</nav>
</section>
</div>
<div class="container">
<p>
Modern and minimalistic CSS framework for <em>terminal</em> lovers ❤️
</p>
<section>
<h2>Goal</h2>
<p>
There are so many CSS frameworks out there with great features but
most of them come at the cost of <b>bloated</b> html code.
<b>Terminal CSS</b> is here for purists who want minimal overhead and
maximal control.
</p>
</section>
<section>
<h2>Credits</h2>
<p>
This project is heavily inspired by
<a href="https://egoist.sh/" target="_blank" rel="noopener noreferer"
>@egoist's</a
>
work -
<a href="https://hackcss.egoist.moe/" rel="noopener noreferer"
>hack.css</a
>
</p>
</section>
<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="#Header">Header</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="#CodeBlocks">Code Blocks</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="#Cards">Cards</a></li>
<li><a href="#Alerts">Alerts</a></li>
<li><a href="#Media">Media</a></li>
<li><a href="#ImageWithCaption">Image with caption</a></li>
</ul>
</nav>
</aside>
<section>
<h2 id="GridSystem">Grid System</h2>
<p>
Terminal CSS doens't come with a build in grid system. It encourages
you to use your own - whether it's Flexbox or CSS Grid.
</p>
<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>
<hr />
<div>
<h2 id="Header">Header</h2>
<section class="terminal-header">
<header class="terminal-logo">
<div class="logo"><a href="#" class="no-style">Logo</a></div>
</header>
<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>
</section>
</div>
<hr>
<h2 id="Lists">Lists</h2>
<section>
<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>
</section>
<hr />
<section>
<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 5 Heading</h6>
</section>
<hr />
<section>
<h2 id="Tables">Tables</h2>
<table>
<caption>
Most Downloaded Movies on BitTorrent, 2011
</caption>
<thead>
<tr>
<th>Rank</th>
<th>Movie</th>
<th>Downloads</th>
<th>Grosses</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>
<td>$626,137,675</td>
</tr>
<tr>
<th>2</th>
<td>The Hangover II</td>
<td>8,840,000</td>
<td>$581,464,305</td>
</tr>
<tr>
<th>3</th>
<td>Thor</td>
<td>8,330,000</td>
<td>$449,326,618</td>
</tr>
<tr>
<th>4</th>
<td>Source Code</td>
<td>7,910,000</td>
<td>$123,278,618</td>
</tr>
<tr>
<th>5</th>
<td>I Am Number Four</td>
<td>7,670,000</td>
<td>$144,500,437</td>
</tr>
<tr>
<th>6</th>
<td>Sucker Punch</td>
<td>7,200,000</td>
<td>$89,792,502</td>
</tr>
<tr>
<th>7</th>
<td>127 Hours</td>
<td>6,910,000</td>
<td>$60,738,797</td>
</tr>
<tr>
<th>8</th>
<td>Rango</td>
<td>6,480,000</td>
<td>$245,155,348</td>
</tr>
<tr>
<th>9</th>
<td>The Kings Speech</td>
<td>6,250,000</td>
<td>$414,211,549</td>
</tr>
<tr>
<th>10</th>
<td>Harry Potter and the Deathly Hallows Part 2</td>
<td>6,030,000</td>
<td>$1,328,111,219</td>
</tr>
</tbody>
</table>
</section>
<h3 id="SpecialElements">Special Elements</h3>
<p>Terminal CSS also supports a range of special elements.</p>
<h4 id="Blockquote">Blockquote</h4>
<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>
<h4 id="CodeBlocks">Code Blocks</h4>
<pre>
<code>
:root {
--global-font-size: 14px;
--global-line-height: 1.4rem;
--global-space: 10px;
--font-stack: 'Fira Code',Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
--background-color: #fff;
--page-width: 70em;
--primary-color: rgb(206, 4, 105);
--font-color: #151513;
--tertiary-color: #727680;
--grid-gap: 1em;
}
</code>
</pre>
<h4 id="Misc">Misc</h4>
<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 <acronym>the acronym tag</acronym> example<br />
I am <b>the b tag</b> example<br />
I am <big>the big tag</big> 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 <tt>the tt tag</tt> example<br />
I am <var>the var tag</var> example<br />
I am the <span class="small">small class</span> example<br />
I am the <span class="large">large class</span> example<br />
I am the <span class="quiet">quiet class</span> 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>
<h4 id="Forms">Forms</h4>
<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 text</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>
<br>
<h4 id="Progress">Progress Bar</h4>
<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>
<h4 id="Buttons">Buttons</h4>
<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 />
<h4 id="Cards">Cards</h4>
<div class="card">
<header>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 />
<h4 id="Alerts">Alerts</h4>
<div class="alert">Default message</div>
<div class="alert alert-primary">Primary message</div>
<div class="alert alert-error">Error message</div>
<hr>
<h2 id="Media">Media</h2>
<div class="terminal-media">
<div class="terminal-media-left">
<div class="terminal-avatarholder"><img width="50" height="50" src="https://picsum.photos/50/50?random&mediaLeft" alt="Picsum"></div>
</div>
<div class="terminal-media-body">
<div class="terminal-media-heading">Media Left Element</div>
<div class="terminal-media-content">This is the media content</div>
</div>
</div>
<div class="terminal-media">
<div class="terminal-media-body">
<div class="terminal-media-heading">Media Right Element</div>
<div class="terminal-media-content">This is the media content</div>
</div>
<div class="terminal-media-right">
<div class="terminal-avatarholder"><img width="50" height="50" src="https://picsum.photos/50/50?random&mediaRight" alt="Picsum"></div>
</div>
</div>
<hr>
<h2 id="ImageWithCaption">Image with caption</h2>
<figure>
<img src="https://picsum.photos/1000/600?random&imageWithCaption" alt="Image with caption" title="Image with caption">
<figcaption>
Image with caption
</figcaption>
</figure>
<hr>
<p>Version: 0.3.2 <a href="#menu">Top</a></p>
</section>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('pre code').forEach((block) => {
window.hljs.highlightBlock(block);
});
})
</script>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@ -3,8 +3,9 @@
--global-line-height: 1.4em;
--global-space: 10px;
--font-stack: 'Fira Code',Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
--mono-font-stack: 'Fira Code',Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
--background-color: #fff;
--page-width: 60em;
--page-width: 65em;
--font-color: #151515;
--invert-font-color: #fff;
--secondary-color: #6a737b;
@ -13,6 +14,7 @@
--error-color: #d20962;
--progress-bar-background: #6a737b;
--progress-bar-fill: #151515;
--code-bg-color: #dce2e7;
}
* {
@ -64,6 +66,7 @@ pre code {
margin: 0;
display: inline-block;
min-width: 100%;
font-family: var(--mono-font-stack);
}
a {
@ -78,7 +81,14 @@ a:hover {
color: var(--invert-font-color);
}
blockquote, code, em, h1, h2, h3, h4, h5, h6, strong, .logo {
em {
font-size: var(--global-font-size);
font-style: italic;
font-family: var(--font-stack);
color: var(--font-color);
}
blockquote, code, h1, h2, h3, h4, h5, h6, strong, .logo {
font-size: var(--global-font-size);
font-style: normal;
font-family: var(--font-stack);
@ -194,6 +204,8 @@ pre code:after, pre code:before {
code {
font-weight: inherit;
background-color: var(--code-bg-color);
font-family: var(--mono-font-stack);
}
code:after, code:before {
@ -519,34 +531,34 @@ input::placeholder, textarea::placeholder {
margin-left: -1px;
}
.card {
.terminal-card {
border: 1px solid var(--secondary-color);
}
.card > header {
.terminal-card > header {
color: var(--font-color);
text-align: center;
background-color: var(--secondary-color);
padding: .5em 0;
}
.card > div:first-of-type {
.terminal-card > div:first-of-type {
padding: var(--global-space);
}
.alert {
.terminal-alert {
color: var(--font-color);
padding: 1em;
border: 1px solid var(--font-color);
margin-bottom: var(--global-space);
}
.alert-error {
.terminal-alert-error {
color: var(--error-color);
border-color: var(--error-color);
}
.alert-primary {
.terminal-alert-primary {
color: var(--primary-color);
border-color: var(--primary-color);
}
@ -555,7 +567,7 @@ input::placeholder, textarea::placeholder {
width: 100%;
}
.terminal-header {
.terminal-nav {
display: flex;
flex-direction: column;
}
@ -632,7 +644,7 @@ input::placeholder, textarea::placeholder {
}
@media only screen and (min-width: 30em) {
.terminal-header {
.terminal-nav {
flex-direction: row;
}
.terminal-menu ul {

616
package-lock.json generated
View File

@ -93,6 +93,15 @@
"integrity": "sha512-XxNTUzKnz1ctK3ZIcI2XUPlD96wbHP2nGqkPKpvk/HNRlPveYrXIVSTk9m3LcqOgDPg3B1nMvdV/K8wZd7PG4w==",
"dev": true
},
"argparse": {
"version": "1.0.10",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
"dev": true,
"requires": {
"sprintf-js": "~1.0.2"
}
},
"arr-diff": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@ -111,12 +120,24 @@
"integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=",
"dev": true
},
"array-find-index": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
"integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=",
"dev": true
},
"array-unique": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
"integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
"dev": true
},
"arrify": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
"integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
"dev": true
},
"assign-symbols": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
@ -302,6 +323,12 @@
"node-releases": "^1.1.3"
}
},
"builtin-modules": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
"integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=",
"dev": true
},
"bytes": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@ -331,6 +358,17 @@
"integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=",
"dev": true
},
"camelcase-keys": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-4.2.0.tgz",
"integrity": "sha1-oqpfsa9oh1glnDLBQUJteJI7m3c=",
"dev": true,
"requires": {
"camelcase": "^4.1.0",
"map-obj": "^2.0.0",
"quick-lru": "^1.0.0"
}
},
"caniuse-lite": {
"version": "1.0.30000932",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000932.tgz",
@ -407,6 +445,21 @@
"integrity": "sha1-T6kXw+WclKAEzWH47lCdplFocUM=",
"dev": true
},
"cli-cursor": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
"integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=",
"dev": true,
"requires": {
"restore-cursor": "^2.0.0"
}
},
"cli-spinners": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-1.3.1.tgz",
"integrity": "sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg==",
"dev": true
},
"clipboardy": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-1.2.3.tgz",
@ -434,6 +487,12 @@
}
}
},
"clone": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
"integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
"dev": true
},
"collection-visit": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@ -541,6 +600,18 @@
"vary": "^1"
}
},
"cp-file": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/cp-file/-/cp-file-6.0.0.tgz",
"integrity": "sha512-OtHMgPugkgwHlbph25wlMKd358lZNhX1Y2viUpPoFmlBPlEiPIRhztYWha11grbGPnlM+urp5saVmwsChCIOEg==",
"requires": {
"graceful-fs": "^4.1.2",
"make-dir": "^1.0.0",
"nested-error-stacks": "^2.0.0",
"pify": "^3.0.0",
"safe-buffer": "^5.0.1"
}
},
"cross-spawn": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
@ -552,6 +623,15 @@
"which": "^1.2.9"
}
},
"currently-unhandled": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
"integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=",
"dev": true,
"requires": {
"array-find-index": "^1.0.1"
}
},
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@ -561,6 +641,30 @@
"ms": "2.0.0"
}
},
"decamelize": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
"integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
"dev": true
},
"decamelize-keys": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz",
"integrity": "sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=",
"dev": true,
"requires": {
"decamelize": "^1.1.0",
"map-obj": "^1.0.0"
},
"dependencies": {
"map-obj": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
"integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
"dev": true
}
}
},
"decode-uri-component": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
@ -573,6 +677,15 @@
"integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
"dev": true
},
"defaults": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
"integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
"dev": true,
"requires": {
"clone": "^1.0.2"
}
},
"define-property": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
@ -638,6 +751,12 @@
"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
"dev": true
},
"ejs": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/ejs/-/ejs-2.6.1.tgz",
"integrity": "sha512-0xy4A/twfrRCnkhfk8ErDi5DqdAsAqeGxht4xkCUrsvhhbQNs7E+4jV0CN7+NKIY0aHE72+XvqtBIXzD31ZbXQ==",
"dev": true
},
"electron-to-chromium": {
"version": "1.3.108",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.108.tgz",
@ -650,6 +769,15 @@
"integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
"dev": true
},
"error-ex": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
"integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
"dev": true,
"requires": {
"is-arrayish": "^0.2.1"
}
},
"escape-html": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@ -662,6 +790,12 @@
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
"dev": true
},
"esprima": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
"dev": true
},
"etag": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
@ -895,6 +1029,15 @@
"unpipe": "~1.0.0"
}
},
"find-up": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
"integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
"dev": true,
"requires": {
"locate-path": "^2.0.0"
}
},
"for-in": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@ -922,6 +1065,32 @@
"integrity": "sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4=",
"dev": true
},
"front-matter": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/front-matter/-/front-matter-2.3.0.tgz",
"integrity": "sha1-cgOviWzjV+4E4qpFFp6pHtf2dQQ=",
"dev": true,
"requires": {
"js-yaml": "^3.10.0"
}
},
"fs-extra": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
"integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
"dev": true,
"requires": {
"graceful-fs": "^4.1.2",
"jsonfile": "^4.0.0",
"universalify": "^0.1.0"
}
},
"fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
"dev": true
},
"fsevents": {
"version": "1.2.7",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.7.tgz",
@ -1463,6 +1632,20 @@
"integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=",
"dev": true
},
"glob": {
"version": "7.1.3",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
"integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
"dev": true,
"requires": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
"inherits": "2",
"minimatch": "^3.0.4",
"once": "^1.3.0",
"path-is-absolute": "^1.0.0"
}
},
"glob-parent": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
@ -1487,8 +1670,7 @@
"graceful-fs": {
"version": "4.1.15",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
"integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==",
"dev": true
"integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA=="
},
"has-flag": {
"version": "3.0.0",
@ -1528,6 +1710,12 @@
}
}
},
"hosted-git-info": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz",
"integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==",
"dev": true
},
"http-auth": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/http-auth/-/http-auth-3.1.3.tgz",
@ -1566,6 +1754,22 @@
"integrity": "sha512-cZdEF7r4gfRIq7ezX9J0T+kQmJNOub71dWbgAXVHDct80TKP4MCETtZQ31xyv38UwgzkWPYF/Xc0ge55dW9Z9w==",
"dev": true
},
"indent-string": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
"integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=",
"dev": true
},
"inflight": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
"integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
"dev": true,
"requires": {
"once": "^1.3.0",
"wrappy": "1"
}
},
"inherits": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
@ -1598,6 +1802,12 @@
}
}
},
"is-arrayish": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
"integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
"dev": true
},
"is-binary-path": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
@ -1613,6 +1823,15 @@
"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
"dev": true
},
"is-builtin-module": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
"integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=",
"dev": true,
"requires": {
"builtin-modules": "^1.0.0"
}
},
"is-data-descriptor": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
@ -1699,6 +1918,12 @@
}
}
},
"is-plain-obj": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
"integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
"dev": true
},
"is-plain-object": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
@ -1744,12 +1969,37 @@
"integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
"dev": true
},
"js-yaml": {
"version": "3.12.1",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.1.tgz",
"integrity": "sha512-um46hB9wNOKlwkHgiuyEVAybXBjwFUV0Z/RaHJblRd9DXltue9FTYvzCr9ErQrK9Adz5MU4gHWVaNUfdmrC8qA==",
"dev": true,
"requires": {
"argparse": "^1.0.7",
"esprima": "^4.0.0"
}
},
"json-parse-better-errors": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
"integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
"dev": true
},
"json-schema-traverse": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
"dev": true
},
"jsonfile": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
"dev": true,
"requires": {
"graceful-fs": "^4.1.6"
}
},
"kind-of": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
@ -1777,12 +2027,53 @@
"serve-index": "^1.9.1"
}
},
"load-json-file": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
"integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
"dev": true,
"requires": {
"graceful-fs": "^4.1.2",
"parse-json": "^4.0.0",
"pify": "^3.0.0",
"strip-bom": "^3.0.0"
}
},
"locate-path": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
"integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
"dev": true,
"requires": {
"p-locate": "^2.0.0",
"path-exists": "^3.0.0"
}
},
"lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
"dev": true
},
"log-symbols": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
"integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
"dev": true,
"requires": {
"chalk": "^2.0.1"
}
},
"loud-rejection": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
"integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=",
"dev": true,
"requires": {
"currently-unhandled": "^0.4.1",
"signal-exit": "^3.0.0"
}
},
"lru-cache": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
@ -1793,12 +2084,26 @@
"yallist": "^2.1.2"
}
},
"make-dir": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
"integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
"requires": {
"pify": "^3.0.0"
}
},
"map-cache": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
"integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=",
"dev": true
},
"map-obj": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/map-obj/-/map-obj-2.0.0.tgz",
"integrity": "sha1-plzSkIepJZi4eRJXpSPgISIqwfk=",
"dev": true
},
"map-stream": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
@ -1814,6 +2119,29 @@
"object-visit": "^1.0.0"
}
},
"marked": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/marked/-/marked-0.5.2.tgz",
"integrity": "sha512-fdZvBa7/vSQIZCi4uuwo2N3q+7jJURpMVCcbaX0S1Mg65WZ5ilXvC67MviJAsdjqqgD+CEq4RKo5AYGgINkVAA==",
"dev": true
},
"meow": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/meow/-/meow-5.0.0.tgz",
"integrity": "sha512-CbTqYU17ABaLefO8vCU153ZZlprKYWDljcndKKDCFcYQITzWCXZAVk4QMFZPgvzrnUQ3uItnIE/LoUOwrT15Ig==",
"dev": true,
"requires": {
"camelcase-keys": "^4.0.0",
"decamelize-keys": "^1.0.0",
"loud-rejection": "^1.0.0",
"minimist-options": "^3.0.1",
"normalize-package-data": "^2.3.4",
"read-pkg-up": "^3.0.0",
"redent": "^2.0.0",
"trim-newlines": "^2.0.0",
"yargs-parser": "^10.0.0"
}
},
"micromatch": {
"version": "3.1.10",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
@ -1856,6 +2184,12 @@
"mime-db": "~1.37.0"
}
},
"mimic-fn": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
"integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
"dev": true
},
"minimatch": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@ -1871,6 +2205,16 @@
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
"dev": true
},
"minimist-options": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-3.0.2.tgz",
"integrity": "sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==",
"dev": true,
"requires": {
"arrify": "^1.0.1",
"is-plain-obj": "^1.1.0"
}
},
"mixin-deep": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz",
@ -1935,6 +2279,25 @@
"dev": true,
"optional": true
},
"nanogen": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/nanogen/-/nanogen-0.4.2.tgz",
"integrity": "sha512-UCoso7CDgAJF1H6NbQsf6NXu//HvA95aapgfwy3BCLpSRUmmDXinP7a/Iv5nzNnOSinTO1kR/UqL+DMqH6GE8w==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"chokidar": "^2.0.4",
"ejs": "^2.6.1",
"front-matter": "^2.3.0",
"fs-extra": "^7.0.0",
"glob": "^7.1.3",
"live-server": "^1.2.0",
"lodash.debounce": "^4.0.8",
"marked": "^0.5.1",
"meow": "^5.0.0",
"ora": "^3.0.0"
}
},
"nanomatch": {
"version": "1.2.13",
"resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@ -1960,6 +2323,11 @@
"integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=",
"dev": true
},
"nested-error-stacks": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/nested-error-stacks/-/nested-error-stacks-2.1.0.tgz",
"integrity": "sha512-AO81vsIO1k1sM4Zrd6Hu7regmJN1NSiAja10gc4bX3F0wd+9rQmcuHQaHVQCYIEC8iFXnE+mavh23GOt7wBgug=="
},
"node-releases": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.3.tgz",
@ -1969,6 +2337,18 @@
"semver": "^5.3.0"
}
},
"normalize-package-data": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
"integrity": "sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==",
"dev": true,
"requires": {
"hosted-git-info": "^2.1.4",
"is-builtin-module": "^1.0.0",
"semver": "2 || 3 || 4 || 5",
"validate-npm-package-license": "^3.0.1"
}
},
"normalize-path": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
@ -2069,6 +2449,24 @@
"integrity": "sha1-ko9dD0cNSTQmUepnlLCFfBAGk/c=",
"dev": true
},
"once": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
"dev": true,
"requires": {
"wrappy": "1"
}
},
"onetime": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
"integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=",
"dev": true,
"requires": {
"mimic-fn": "^1.0.0"
}
},
"opn": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/opn/-/opn-5.4.0.tgz",
@ -2078,12 +2476,60 @@
"is-wsl": "^1.1.0"
}
},
"ora": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/ora/-/ora-3.0.0.tgz",
"integrity": "sha512-LBS97LFe2RV6GJmXBi6OKcETKyklHNMV0xw7BtsVn2MlsgsydyZetSCbCANr+PFLmDyv4KV88nn0eCKza665Mg==",
"dev": true,
"requires": {
"chalk": "^2.3.1",
"cli-cursor": "^2.1.0",
"cli-spinners": "^1.1.0",
"log-symbols": "^2.2.0",
"strip-ansi": "^4.0.0",
"wcwidth": "^1.0.1"
}
},
"p-finally": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
"integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
"dev": true
},
"p-limit": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
"integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
"dev": true,
"requires": {
"p-try": "^1.0.0"
}
},
"p-locate": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
"integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
"dev": true,
"requires": {
"p-limit": "^1.1.0"
}
},
"p-try": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
"integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
"dev": true
},
"parse-json": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
"integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
"dev": true,
"requires": {
"error-ex": "^1.3.1",
"json-parse-better-errors": "^1.0.1"
}
},
"parseurl": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz",
@ -2102,6 +2548,12 @@
"integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=",
"dev": true
},
"path-exists": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
"integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
"dev": true
},
"path-is-absolute": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@ -2126,6 +2578,15 @@
"integrity": "sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==",
"dev": true
},
"path-type": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
"integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
"dev": true,
"requires": {
"pify": "^3.0.0"
}
},
"pause-stream": {
"version": "0.0.11",
"resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
@ -2135,6 +2596,11 @@
"through": "~2.3"
}
},
"pify": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
"integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
},
"posix-character-classes": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@ -2215,6 +2681,12 @@
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
"dev": true
},
"quick-lru": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-1.1.0.tgz",
"integrity": "sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=",
"dev": true
},
"range-parser": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
@ -2233,6 +2705,27 @@
"strip-json-comments": "~2.0.1"
}
},
"read-pkg": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
"integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
"dev": true,
"requires": {
"load-json-file": "^4.0.0",
"normalize-package-data": "^2.3.2",
"path-type": "^3.0.0"
}
},
"read-pkg-up": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-3.0.0.tgz",
"integrity": "sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=",
"dev": true,
"requires": {
"find-up": "^2.0.0",
"read-pkg": "^3.0.0"
}
},
"readable-stream": {
"version": "2.3.6",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
@ -2259,6 +2752,16 @@
"readable-stream": "^2.0.2"
}
},
"redent": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/redent/-/redent-2.0.0.tgz",
"integrity": "sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=",
"dev": true,
"requires": {
"indent-string": "^3.0.0",
"strip-indent": "^2.0.0"
}
},
"regex-not": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
@ -2312,6 +2815,16 @@
"integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
"dev": true
},
"restore-cursor": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",
"integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=",
"dev": true,
"requires": {
"onetime": "^2.0.0",
"signal-exit": "^3.0.2"
}
},
"ret": {
"version": "0.1.15",
"resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
@ -2321,8 +2834,7 @@
"safe-buffer": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
"dev": true
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
},
"safe-regex": {
"version": "1.1.0",
@ -2621,6 +3133,38 @@
"integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
"dev": true
},
"spdx-correct": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz",
"integrity": "sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==",
"dev": true,
"requires": {
"spdx-expression-parse": "^3.0.0",
"spdx-license-ids": "^3.0.0"
}
},
"spdx-exceptions": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz",
"integrity": "sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA==",
"dev": true
},
"spdx-expression-parse": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz",
"integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==",
"dev": true,
"requires": {
"spdx-exceptions": "^2.1.0",
"spdx-license-ids": "^3.0.0"
}
},
"spdx-license-ids": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.3.tgz",
"integrity": "sha512-uBIcIl3Ih6Phe3XHK1NqboJLdGfwr1UN3k6wSD1dZpmPsIkb8AGNbZYJ1fOBk834+Gxy8rpfDxrS6XLEMZMY2g==",
"dev": true
},
"split": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz",
@ -2639,6 +3183,12 @@
"extend-shallow": "^3.0.0"
}
},
"sprintf-js": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
"dev": true
},
"static-extend": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
@ -2703,12 +3253,24 @@
"ansi-regex": "^3.0.0"
}
},
"strip-bom": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
"integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
"dev": true
},
"strip-eof": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
"integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
"dev": true
},
"strip-indent": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-2.0.0.tgz",
"integrity": "sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=",
"dev": true
},
"strip-json-comments": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
@ -2781,6 +3343,12 @@
"repeat-string": "^1.6.1"
}
},
"trim-newlines": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-2.0.0.tgz",
"integrity": "sha1-tAPQuRvlDDMd/EuC7s6yLD3hbSA=",
"dev": true
},
"union-value": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz",
@ -2816,6 +3384,12 @@
}
}
},
"universalify": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
"dev": true
},
"unix-crypt-td-js": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/unix-crypt-td-js/-/unix-crypt-td-js-1.0.0.tgz",
@ -2923,12 +3497,31 @@
"integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
"dev": true
},
"validate-npm-package-license": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
"integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
"dev": true,
"requires": {
"spdx-correct": "^3.0.0",
"spdx-expression-parse": "^3.0.0"
}
},
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
"dev": true
},
"wcwidth": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
"integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=",
"dev": true,
"requires": {
"defaults": "^1.0.3"
}
},
"websocket-driver": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.0.tgz",
@ -2963,11 +3556,26 @@
"string-width": "^2.1.1"
}
},
"wrappy": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
"dev": true
},
"yallist": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
"dev": true
},
"yargs-parser": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-10.1.0.tgz",
"integrity": "sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ==",
"dev": true,
"requires": {
"camelcase": "^4.1.0"
}
}
}
}

View File

@ -1,15 +1,14 @@
{
"name": "terminal.css",
"version": "0.3.2",
"description": "Modern and minimalistic CSS framework for terminal enthusiasts",
"description": "Modern and minimal CSS framework for terminal lovers.",
"main": "dist/terminal.min.css",
"directories": {
"docs": "docs",
"dist": "dist"
"doc": "docs"
},
"scripts": {
"start": "node ./scripts/start.js",
"build": "node ./scripts/build.js",
"build": "node ./scripts/build.js && node ./scripts/copyFiles.js",
"test": "echo \"Error: no test specified\" && exit 1",
"prepublish": "npm run build"
},
@ -36,7 +35,11 @@
"clean-css": "^4.2.1",
"live-server": "^1.2.1",
"mkdirp": "^0.5.1",
"nanogen": "^0.4.2",
"postcss": "^7.0.14",
"serve": "^10.1.1"
},
"dependencies": {
"cp-file": "^6.0.0"
}
}

View File

@ -1,8 +1,14 @@
const build = require('./utils/build-fn')
const path = require('path')
const nanogen = require('nanogen')
const staticSiteOptions = require('../site.config');
build.run({
sourceFile: path.resolve(__dirname, '../src/terminal.css'),
distFolder: path.resolve(__dirname, '../dist'),
docsFolder: path.resolve(__dirname, '../docs'),
})
const options = {
sourceFile: path.resolve(__dirname, '../lib/terminal.css'),
distFolder: path.resolve(__dirname, '../dist'),
docsFolder: path.resolve(__dirname, '../public'),
docsSrcFolder: path.resolve(__dirname, '../src')
}
build.run(options);
nanogen.build({ site: staticSiteOptions.site })

8
scripts/copyFiles.js Normal file
View File

@ -0,0 +1,8 @@
const cpFile = require('cp-file');
const path = require('path');
(async () => {
await cpFile(path.resolve(__dirname, '../src/browserconfig.xml'), './public/browserconfig.xml');
await cpFile(path.resolve(__dirname, '../src/manifest.json'), './public/manifest.json');
console.log('browserconfig and manifest copied');
})();

View File

@ -2,6 +2,8 @@ const chokidar = require('chokidar');
const liveServer = require('live-server');
const build = require('./utils/build-fn');
const path = require('path');
const nanogen = require('nanogen')
const staticSiteOptions = require('../site.config');
function debounce(func, wait, immediate) {
var timeout;
@ -25,12 +27,14 @@ const serve = (flags) => {
console.log(`Starting local server at http://localhost:${flags.port}`);
const options = {
sourceFile: path.resolve(__dirname, '../src/terminal.css'),
sourceFile: path.resolve(__dirname, '../lib/terminal.css'),
distFolder: path.resolve(__dirname, '../dist'),
docsFolder: path.resolve(__dirname, '../docs')
docsFolder: path.resolve(__dirname, '../public'),
docsSrcFolder: path.resolve(__dirname, '../src')
}
build.run(options);
nanogen.build({ site: staticSiteOptions.site })
liveServer.start({
port: flags.port,
root: options.docsFolder,
@ -38,10 +42,11 @@ const serve = (flags) => {
logLevel: 0
});
chokidar.watch(options.sourceFile, { ignoreInitial: true }).on(
chokidar.watch([options.sourceFile, options.docsSrcFolder], { ignoreInitial: true }).on(
'all',
debounce(() => {
build.run(options);
nanogen.build({ site: staticSiteOptions.site })
console.log('Waiting for changes...');
}, 500)
);

14
site.config.js Executable file
View File

@ -0,0 +1,14 @@
const pkg = require('./package.json')
module.exports = {
build: {
srcPath: './src',
outputPath: './public'
},
site: {
title: 'Terminal CSS',
libVersion: pkg.version,
description: pkg.description,
keywords: pkg.keywords
}
};

View File

Before

Width:  |  Height:  |  Size: 1022 B

After

Width:  |  Height:  |  Size: 1022 B

View File

Before

Width:  |  Height:  |  Size: 266 B

After

Width:  |  Height:  |  Size: 266 B

View File

Before

Width:  |  Height:  |  Size: 871 B

After

Width:  |  Height:  |  Size: 871 B

View File

Before

Width:  |  Height:  |  Size: 973 B

After

Width:  |  Height:  |  Size: 973 B

View File

Before

Width:  |  Height:  |  Size: 854 B

After

Width:  |  Height:  |  Size: 854 B

View File

Before

Width:  |  Height:  |  Size: 844 B

After

Width:  |  Height:  |  Size: 844 B

View File

Before

Width:  |  Height:  |  Size: 951 B

After

Width:  |  Height:  |  Size: 951 B

View File

Before

Width:  |  Height:  |  Size: 975 B

After

Width:  |  Height:  |  Size: 975 B

View File

Before

Width:  |  Height:  |  Size: 1022 B

After

Width:  |  Height:  |  Size: 1022 B

View File

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

Before

Width:  |  Height:  |  Size: 897 B

After

Width:  |  Height:  |  Size: 897 B

View File

Before

Width:  |  Height:  |  Size: 881 B

After

Width:  |  Height:  |  Size: 881 B

View File

Before

Width:  |  Height:  |  Size: 854 B

After

Width:  |  Height:  |  Size: 854 B

View File

Before

Width:  |  Height:  |  Size: 872 B

After

Width:  |  Height:  |  Size: 872 B

View File

Before

Width:  |  Height:  |  Size: 838 B

After

Width:  |  Height:  |  Size: 838 B

View File

Before

Width:  |  Height:  |  Size: 838 B

After

Width:  |  Height:  |  Size: 838 B

View File

Before

Width:  |  Height:  |  Size: 839 B

After

Width:  |  Height:  |  Size: 839 B

View File

Before

Width:  |  Height:  |  Size: 814 B

After

Width:  |  Height:  |  Size: 814 B

View File

Before

Width:  |  Height:  |  Size: 844 B

After

Width:  |  Height:  |  Size: 844 B

View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

Before

Width:  |  Height:  |  Size: 1022 B

After

Width:  |  Height:  |  Size: 1022 B

View File

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

Before

Width:  |  Height:  |  Size: 918 B

After

Width:  |  Height:  |  Size: 918 B

View File

@ -1,16 +0,0 @@
:root {
--global-font-size: 14px;
--global-line-height: 1.4em;
--global-space: 10px;
--font-stack: 'Fira Code',Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
--background-color: #14171a;
--page-width: 70em;
--font-color: #d9e0e2;
--invert-font-color: #131719;
--secondary-color: #657786;
--tertiary-color: #14171a;
--primary-color: #1da1f2;
--error-color: rgb(224, 36, 94);
--progress-bar-background: #e1e8ed;
--progress-bar-fill: #aab8c2;
}

42
src/layouts/dark.ejs Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<%- include('partials/head') %>
<style>
:root {
--global-font-size: 14px;
--global-line-height: 1.4em;
--global-space: 10px;
--font-stack: 'Fira Code',Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
--background-color: #151515;
--page-width: 65em;
--font-color: #efefef;
--invert-font-color: #151515;
--secondary-color: #787878;
--tertiary-color: #787878;
--primary-color: #90f57e;
--error-color: #ff3c74;
--progress-bar-background: #787878;
--progress-bar-fill: #90f57e;
--code-bg-color: #787878;
}
</style>
</head>
<body>
<%- include('partials/git-corner') %>
<%- include('partials/navigation', { "page": "dark" }) %>
<div class="container">
<p>
<%- site.description %>
</p>
<%- body %>
<hr />
<div class="components components-grid">
<%- include('partials/aside') %>
<%- include('partials/components') %>
</div>
</div>
<%- include('partials/bottom-scripts') %>
</body>
</html>

23
src/layouts/default.ejs Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<%- include('partials/head') %>
</head>
<body>
<%- include('partials/git-corner') %>
<%- include('partials/navigation', { "page": "main" }) %>
<div class="container">
<p>
<%- site.description %>
</p>
<%- body %>
<hr />
<div class="components components-grid">
<%- include('partials/aside') %>
<%- include('partials/components') %>
</div>
</div>
<%- include('partials/bottom-scripts') %>
</body>
</html>

30
src/layouts/sans.ejs Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<%- include('partials/head') %>
<style>
:root {
--global-font-size: 14px;
--global-line-height: 1.4em;
--font-stack: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}
</style>
</head>
<body>
<%- include('partials/git-corner') %>
<%- include('partials/navigation', { "page": "sans" }) %>
<div class="container">
<p>
<%- site.description %>
</p>
<%- body %>
<hr />
<div class="components components-grid">
<%- include('partials/aside') %>
<%- include('partials/components') %>
</div>
</div>
<%- include('partials/bottom-scripts') %>
</body>
</html>

31
src/pages/dark.md Normal file
View File

@ -0,0 +1,31 @@
---
title: Terminal CSS - Dark
layout: dark
---
## Project Goals
Terminal CSS has no overhead and is lightweight **(<= 2.9k gzip)**.
The source is written in **pure css** to be accessible for everybody and easy to contribute.
## Markdown ❤️ Terminal CSS
It's perfect for your *personal website*, *blog*, or *side project*.
## How to use
When using something like Webpack just install with `npm i terminal.css`.
```js
import 'terminal.css'
```
Terminal CSS is also available via [CDN](https://unpkg.com/terminal.css@0.4.0/dist/terminal.min.css)
```html
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.4.0/dist/terminal.min.css" />
```
## Themes
To create your own theme just open the dev-tools and edit the CSS Variables. Copy and paste it to your website. Done!

31
src/pages/index.md Normal file
View File

@ -0,0 +1,31 @@
---
title: Terminal CSS
layout: default
---
## Project Goals
Terminal CSS has no overhead and is lightweight **(<= 2.9k gzip)**.
The source is written in **pure css** to be accessible for everybody and easy to contribute.
## Markdown ❤️ Terminal CSS
It's perfect for your *personal website*, *blog*, or *side project*.
## How to use
When using something like Webpack just install with `npm i terminal.css`.
```js
import 'terminal.css'
```
Terminal CSS is also available via [CDN](https://unpkg.com/terminal.css@0.4.0/dist/terminal.min.css)
```html
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.4.0/dist/terminal.min.css" />
```
## Themes
To create your own theme just open the dev-tools and edit the CSS Variables. Copy and paste it to your website. Done!

31
src/pages/sans-serif.md Normal file
View File

@ -0,0 +1,31 @@
---
title: Terminal CSS
layout: sans
---
## Project Goals
Terminal CSS has no overhead and is lightweight **(<= 2.9k gzip)**.
The source is written in **pure css** to be accessible for everybody and easy to contribute.
## Markdown ❤️ Terminal CSS
It's perfect for your *personal website*, *blog*, or *side project*.
## How to use
When using something like Webpack just install with `npm i terminal.css`.
```js
import 'terminal.css'
```
Terminal CSS is also available via [CDN](https://unpkg.com/terminal.css@0.4.0/dist/terminal.min.css)
```html
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.4.0/dist/terminal.min.css" />
```
## Themes
To create your own theme just open the dev-tools and edit the CSS Variables. Copy and paste it to your website. Done!

26
src/partials/aside.ejs Normal file
View File

@ -0,0 +1,26 @@
<aside id="menu">
<h2>Components</h2>
<nav>
<ul>
<li><a href="#GridSystem">Grid System</a></li>
<li><a href="#Header">Header</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="#Cards">Cards</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>
</aside>

View File

@ -0,0 +1,8 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll("pre code").forEach(block => {
window.hljs.highlightBlock(block);
});
});
</script>

View File

@ -0,0 +1,31 @@
<main>
<%- include('components/grid') %>
<hr>
<%- include('components/nav') %>
<hr>
<%- include('components/lists') %>
<hr>
<%- include('components/typography') %>
<hr>
<%- include('components/tables') %>
<hr>
<%- include('components/special-elements') %>
<hr>
<%- include('components/forms') %>
<hr>
<%- include('components/progress') %>
<hr>
<%- include('components/buttons') %>
<hr>
<%- include('components/card') %>
<hr>
<%- include('components/alerts') %>
<hr>
<%- include('components/figure') %>
<hr>
<%- include('components/highlight-js.ejs') %>
<hr>
<%- include('footer') %>
<hr>
<%- include('version') %>
</main>

View File

@ -0,0 +1,6 @@
<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>

View File

@ -0,0 +1,18 @@
<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>

View File

@ -0,0 +1,12 @@
<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>

View File

@ -0,0 +1,11 @@
<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>

View File

@ -0,0 +1,47 @@
<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 text</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>

View File

@ -0,0 +1,59 @@
<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>

View File

@ -0,0 +1,80 @@
<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>

View File

@ -0,0 +1,39 @@
<section>
<header><h2 id="Lists">Lists</h2></header>
<ul>
<li>Thisisalistitem</li>
<li>Soisthis-therecouldbemore</li>
<li>
Makesuretostylelistitemsto:
<ul>
<li>Notforgettingchildlistitems</li>
<li>Notforgettingchildlistitems</li>
<li>Notforgettingchildlistitems</li>
<li>Notforgettingchildlistitems</li>
</ul>
</li>
<li>Acouplemore</li>
<li>toplevellistitems</li>
</ul>
<p>Don'tforget<strong>Orderedlists</strong>:</p>
<ol>
<li>Loremipsumdolorsitamet,consectetueradipiscingelit.</li>
<li>
Aliquamtinciduntmauriseurisus.
<ol>
<li>Loremipsumdolorsitamet,consectetueradipiscingelit.</li>
<li>Aliquamtinciduntmauriseurisus.</li>
</ol>
</li>
<li>Loremipsumdolorsitamet,consectetueradipiscingelit.</li>
<li>Aliquamtinciduntmauriseurisus.</li>
</ol>
<p><strong>Descriptionlists</strong>arealsoincluded.</p>
<dl>
<dt>Descriptionlisttitle01</dt>
<dd>Descriptionlistdescription01</dd>
<dt>Descriptionlisttitle02</dt>
<dd>Descriptionlistdescription02</dd>
<dd>Descriptionlistdescription03</dd>
</dl>
</section>

View File

@ -0,0 +1,15 @@
<section>
<header><h2 id="Header">Navigation</h2></header>
<div class="terminal-nav">
<div class="terminal-logo">
<div class="logo"><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>

View File

@ -0,0 +1,25 @@
<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>

View File

@ -0,0 +1,48 @@
<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>
<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>

View File

@ -0,0 +1,85 @@
<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>
<th>Grosses</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>
<td>$626,137,675</td>
</tr>
<tr>
<th>2</th>
<td>The Hangover II</td>
<td>8,840,000</td>
<td>$581,464,305</td>
</tr>
<tr>
<th>3</th>
<td>Thor</td>
<td>8,330,000</td>
<td>$449,326,618</td>
</tr>
<tr>
<th>4</th>
<td>Source Code</td>
<td>7,910,000</td>
<td>$123,278,618</td>
</tr>
<tr>
<th>5</th>
<td>I Am Number Four</td>
<td>7,670,000</td>
<td>$144,500,437</td>
</tr>
<tr>
<th>6</th>
<td>Sucker Punch</td>
<td>7,200,000</td>
<td>$89,792,502</td>
</tr>
<tr>
<th>7</th>
<td>127 Hours</td>
<td>6,910,000</td>
<td>$60,738,797</td>
</tr>
<tr>
<th>8</th>
<td>Rango</td>
<td>6,480,000</td>
<td>$245,155,348</td>
</tr>
<tr>
<th>9</th>
<td>The Kings Speech</td>
<td>6,250,000</td>
<td>$414,211,549</td>
</tr>
<tr>
<th>10</th>
<td>Harry Potter and the Deathly Hallows Part 2</td>
<td>6,030,000</td>
<td>$1,328,111,219</td>
</tr>
</tbody>
</table>
</section>

View File

@ -0,0 +1,26 @@
<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 5 Heading</h6>
</header>
</section>

10
src/partials/footer.ejs Normal file
View File

@ -0,0 +1,10 @@
<footer>
<p>
This project is inspired by
<a href="https://egoist.sh/" target="_blank" rel="noopener noreferer"
>@egoist's</a
>
work -
<a href="https://hackcss.egoist.moe/" rel="noopener noreferer">hack.css</a>
</p>
</footer>

View File

@ -0,0 +1,21 @@
<a href="https://github.com/Gioni06/terminal.css" class="github-corner">
<svg
width="80"
height="80"
viewBox="0 0 250 250"
style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
>
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor"
style="transform-origin: 130px 106px;"
class="octo-arm"
></path>
<path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor"
class="octo-body"
></path>
</svg>
</a>

155
src/partials/head.ejs Normal file
View File

@ -0,0 +1,155 @@
<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><%- site.title %></title>
<meta
name="description"
content="<%- site.description %>"
/>
<link rel="stylesheet" href="/terminal.min.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>
@font-face{
font-family: 'Fira Code';
src: url('/fonts/eot/FiraCode-Light.eot');
src: url('/fonts/eot/FiraCode-Light.eot') format('embedded-opentype'),
url('/fonts/woff2/FiraCode-Light.woff2') format('woff2'),
url('/fonts/woff/FiraCode-Light.woff') format('woff'),
url('/fonts/ttf/FiraCode-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: fallback;
}
@font-face{
font-family: 'Fira Code';
src: url('/fonts/eot/FiraCode-Regular.eot');
src: url('/fonts/eot/FiraCode-Regular.eot') format('embedded-opentype'),
url('/fonts/woff2/FiraCode-Regular.woff2') format('woff2'),
url('/fonts/woff/FiraCode-Regular.woff') format('woff'),
url('/fonts/ttf/FiraCode-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: fallback;
}
@font-face{
font-family: 'Fira Code';
src: url('/fonts/eot/FiraCode-Medium.eot');
src: url('/fonts/eot/FiraCode-Medium.eot') format('embedded-opentype'),
url('/fonts/woff2/FiraCode-Medium.woff2') format('woff2'),
url('/fonts/woff/FiraCode-Medium.woff') format('woff'),
url('/fonts/ttf/FiraCode-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: fallback;
}
@font-face{
font-family: 'Fira Code';
src: url('/fonts/eot/FiraCode-Bold.eot');
src: url('/fonts/eot/FiraCode-Bold.eot') format('embedded-opentype'),
url('/fonts/woff2/FiraCode-Bold.woff2') format('woff2'),
url('/fonts/woff/FiraCode-Bold.woff') format('woff'),
url('/fonts/ttf/FiraCode-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: fallback;
}
.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>

View File

@ -0,0 +1,24 @@
<div class="container">
<div class="terminal-nav">
<header class="terminal-logo">
<div class="logo"><a href="/" class="no-style">Terminal CSS</a></div>
</header>
<nav class="terminal-menu">
<ul>
<li><a class="menu-item <% if(page === "main") { %> active <% } %>" href="/">Light</a></li>
<li><a class="menu-item <% if(page === "dark") { %> active <% } %>" href="/dark/">Dark</a></li>
<li><a class="menu-item <% if(page === "sans") { %> active <% } %>" href="/sans-serif/">Sans</a></li>
<li>
<a class="menu-item" href="https://github.com/Gioni06/terminal.css"
>Github</a
>
</li>
<li>
<a class="menu-item" href="https://www.npmjs.com/package/terminal.css"
>NPM</a
>
</li>
</ul>
</nav>
</div>
</div>

4
src/partials/version.ejs Normal file
View File

@ -0,0 +1,4 @@
<section>
<header></header>
<p>Version: <%- site.libVersion %> <a href="#menu">Top</a></p>
</section>