You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
6.9 KiB
159 lines
6.9 KiB
<div id="typography" class="col page-header mb-4 mt-5">
|
|
<h2>Typography</h2>
|
|
<p class="text-muted">I2P's main fonts are Nunito and Inter.</p>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-10 col-sm-10 mb-4">
|
|
<div class="border p-4 bg-white">
|
|
<div>
|
|
<div class="typo-text mr-2 mb-2">A</div>
|
|
<div class="typo-text mr-2 mb-2">B</div>
|
|
<div class="typo-text mr-2 mb-2">C</div>
|
|
<div class="typo-text mr-2 mb-2">D</div>
|
|
<div class="typo-text mr-2 mb-2">E</div>
|
|
<div class="typo-text mr-2 mb-2">F</div>
|
|
<div class="typo-text mr-2 mb-2">G</div>
|
|
<div class="typo-text mr-2 mb-2">H</div>
|
|
<div class="typo-text mr-2 mb-2">I</div>
|
|
<div class="typo-text mr-2 mb-2">J</div>
|
|
<div class="typo-text mr-2 mb-2">K</div>
|
|
<div class="typo-text mr-2 mb-2">L</div>
|
|
<div class="typo-text mr-2 mb-2">M</div>
|
|
<div class="typo-text mr-2 mb-2">N</div>
|
|
<div class="typo-text mr-2 mb-2">O</div>
|
|
<div class="typo-text mr-2 mb-2">P</div>
|
|
<div class="typo-text mr-2 mb-2">Q</div>
|
|
<div class="typo-text mr-2 mb-2">R</div>
|
|
<div class="typo-text mr-2 mb-2">S</div>
|
|
<div class="typo-text mr-2 mb-2">T</div>
|
|
<div class="typo-text mr-2 mb-2">U</div>
|
|
<div class="typo-text mr-2 mb-2">V</div>
|
|
<div class="typo-text mr-2 mb-2">X</div>
|
|
<div class="typo-text mr-2 mb-2">Y</div>
|
|
<div class="typo-text mr-2 mb-2">Z</div>
|
|
</div>
|
|
<div>
|
|
<div class="typo-text mr-2 mb-2">a</div>
|
|
<div class="typo-text mr-2 mb-2">b</div>
|
|
<div class="typo-text mr-2 mb-2">c</div>
|
|
<div class="typo-text mr-2 mb-2">d</div>
|
|
<div class="typo-text mr-2 mb-2">e</div>
|
|
<div class="typo-text mr-2 mb-2">f</div>
|
|
<div class="typo-text mr-2 mb-2">g</div>
|
|
<div class="typo-text mr-2 mb-2">h</div>
|
|
<div class="typo-text mr-2 mb-2">i</div>
|
|
<div class="typo-text mr-2 mb-2">j</div>
|
|
<div class="typo-text mr-2 mb-2">k</div>
|
|
<div class="typo-text mr-2 mb-2">l</div>
|
|
<div class="typo-text mr-2 mb-2">m</div>
|
|
<div class="typo-text mr-2 mb-2">n</div>
|
|
<div class="typo-text mr-2 mb-2">o</div>
|
|
<div class="typo-text mr-2 mb-2">p</div>
|
|
<div class="typo-text mr-2 mb-2">q</div>
|
|
<div class="typo-text mr-2 mb-2">r</div>
|
|
<div class="typo-text mr-2 mb-2">s</div>
|
|
<div class="typo-text mr-2 mb-2">t</div>
|
|
<div class="typo-text mr-2 mb-2">u</div>
|
|
<div class="typo-text mr-2 mb-2">v</div>
|
|
<div class="typo-text mr-2 mb-2">x</div>
|
|
<div class="typo-text mr-2 mb-2">y</div>
|
|
<div class="typo-text mr-2 mb-2">z</div>
|
|
</div>
|
|
<div>
|
|
<div class="typo-text mr-2">0</div>
|
|
<div class="typo-text mr-2">1</div>
|
|
<div class="typo-text mr-2">2</div>
|
|
<div class="typo-text mr-2">3</div>
|
|
<div class="typo-text mr-2">4</div>
|
|
<div class="typo-text mr-2">5</div>
|
|
<div class="typo-text mr-2">6</div>
|
|
<div class="typo-text mr-2">7</div>
|
|
<div class="typo-text mr-2">8</div>
|
|
<div class="typo-text mr-2">9</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class=row">
|
|
<h4>Font sizes</h4>
|
|
<p class="text-muted">There are 6 different font sizes for headers, ranging from H1 to H6</p>
|
|
<div class="col-10 typography__headers">
|
|
<div class="typography__headers__item mb-3">
|
|
<div class="border p-4 bg-white">
|
|
<h1>Protect communications from monitoring</h1>
|
|
<p class="text-muted">40 px - H1</p>
|
|
</div>
|
|
</div>
|
|
<div class="typography__headers__item mb-3">
|
|
<div class="border p-4 bg-white">
|
|
<h2>Protect communications from monitoring</h2>
|
|
<p class="text-muted">32 px - H2</p>
|
|
</div>
|
|
</div>
|
|
<div class="typography__headers__item mb-3">
|
|
<div class="border p-4 bg-white">
|
|
<h3>Protect communications from monitoring</h3>
|
|
<p class="text-muted">28 px - H3</p>
|
|
</div>
|
|
</div>
|
|
<div class="typography__headers__item mb-3">
|
|
<div class="border p-4 bg-white">
|
|
<h4>Protect communications from monitoring</h4>
|
|
<p class="text-muted">24 px - H4</p>
|
|
</div>
|
|
</div>
|
|
<div class="typography__headers__item mb-3">
|
|
<div class="border p-4 bg-white">
|
|
<h5>Protect communications from monitoring</h5>
|
|
<p class="text-muted">20 px - H5</p>
|
|
</div>
|
|
</div>
|
|
<div class="typography__headers__item mb-3">
|
|
<div class="border p-4 bg-white">
|
|
<h6>Protect communications from monitoring</h6>
|
|
<p class="text-muted">16 px - H6</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="typography__headers__item">
|
|
<p class="text-black small pt-5 text-muted">H1 display</p>
|
|
<h1 class="header-display color-secondary">I2P Anonymous Network</h1>
|
|
</div>
|
|
<div class="typography__headers__item">
|
|
<p class="text-black small text-muted">H2 display</p>
|
|
<h2 class="header-display color-secondary">I2P Anonymous Network</h2>
|
|
</div>
|
|
<div class="typography__headers__item">
|
|
<p class="text-black small text-muted">H3 display</p>
|
|
<h3 class="header-display color-secondary">I2P Anonymous Network</h3>
|
|
</div>
|
|
<div class="typography__headers__item">
|
|
<p class="text-black small text-muted">H4 display</p>
|
|
<h4 class="header-display color-secondary">I2P Anonymous Network</h4>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="row pt-5">
|
|
<div class="col-md-5">
|
|
<p class="text-black small">
|
|
<span class="text-left color-gray-2 rb-isBold">Paragraph</span>
|
|
<span class="text-right color-primary rb-isBold" style="float: right;">Inter</span>
|
|
</p>
|
|
<p>
|
|
I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.
|
|
</p>
|
|
</div>
|
|
<div class="col-md-1"></div>
|
|
<div class="col-md-6">
|
|
<p class="text-black small">
|
|
<span class="text-left color-gray-2 rb-isBold">Code Snippet</span>
|
|
<span class="text-right color-primary rb-isBold" style="float: right;">Source Code Pro</span>
|
|
</p>
|
|
<pre class="bg-light p-2 prettyprint rb-code" style="border: none;">
|
|
$('.i2p-sidebar').on('click', 'a',function() {
|
|
$('.i2p-sidebar a.active').removeClass('active');
|
|
$(this).addClass('active');
|
|
});
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|