mirror of
https://github.com/Gioni06/terminal.css
synced 2025-03-09 17:19:04 -04:00
601 lines
23 KiB
HTML
601 lines
23 KiB
HTML
<html>
|
||
<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>
|
||
<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>
|
||
</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 King’s 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>
|
||
<p>Version: 0.3.0 <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>
|