uracreative
/
i2p-styleguide
mirror of https://github.com/uracreative/i2p-styleguide
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Changed typography display in site

main
Anxhelo Lushka 6 years ago
parent
11822e9c6f
commit
e966d53bcc
No known key found for this signature in database GPG Key ID: 44E3E2D8647E4F61
5 changed files with 117 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 126
      _includes/design/typography.html
  2. 4
      _site/assets/styles/layout.scss
  3. 2
      _site/assets/styles/main.css
  4. 2
      _site/components/index.html
  5. 4
      assets/styles/layout.scss

126
_includes/design/typography.html
View File

@ -1,32 +1,118 @@
<div id="typography" class="page-header mb-4 mt-5">
<h2>Typography</h2>
<p class="text-muted">Our main fonts are Source Sans Pro and Source Code Pro, made by Adobe.</p>
<p class="text-muted">I2P's main fonts are Source Sans Pro and Source Code Pro, made by Adobe.</p>
</div>
<div class="row">
<div class="col-12 typography__headers">
<div class="typography__headers__item">
<p class="text-black small text-muted">H1</p>
<h1>Protect communications from monitoring</h1>
<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">
<p class="text-black small text-muted">H2</p>
<h2>Protect communications from monitoring</h2>
<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">
<p class="text-black small text-muted">H3</p>
<h3>Protect communications from monitoring</h3>
<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">
<p class="text-black small text-muted">H4</p>
<h4>Protect communications from monitoring</h4>
<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">
<p class="text-black small text-muted">H5</p>
<h5>Protect communications from monitoring</h5>
<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">
<p class="text-black small text-muted">H6</p>
<h6>Protect communications from monitoring</h6>
<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">

4
_site/assets/styles/layout.scss
View File

@ -161,3 +161,7 @@
.b-border {
border-bottom: 2px solid lightgrey !important;
}
.typo-text {
display: inline-block;
}

2
_site/assets/styles/main.css
View File

@ -55,6 +55,8 @@
.b-border { border-bottom: 2px solid lightgrey !important; }
.typo-text { display: inline-block; }
.color { height: 100px; }
.grid { height: 100px; background-color: #4661A9; border-radius: 7px; }

2
_site/components/index.html
View File

@ -340,7 +340,7 @@
<li><a href="#">data policy</a></li>
<li><a href="#">legal</a></li>
<li><a href="#">sitemap</a></li>
<li><a href="#">ipressum</a></li>
<li><a href="#">impressum</a></li>
</ul>
</div>
</div>

4
assets/styles/layout.scss
View File

@ -161,3 +161,7 @@
.b-border {
border-bottom: 2px solid lightgrey !important;
}
.typo-text {
display: inline-block;
}

Write Preview
Loading…
Cancel
Save