fonts/nerd-fonts
1
0
Fork 0
mirror of https://github.com/ryanoasis/nerd-fonts.git synced 2025-01-19 03:12:07 +02:00
Code Issues Releases Activity

More styling of downloads and WIP features section

Browse Source
This commit is contained in:
Ryan L McIntyre 2019-08-03 15:03:56 -07:00
parent a47aea7648
commit 8b980497e8
6 changed files with 376 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
_includes/css/nerd-font-tweaks.css
View File

@ -267,21 +267,36 @@ p {
margin-bottom: 20px;
}
.feature-section .faux-logo {
text-align: center;
}
.feature-section h2, .feature-section h3, .feature-section h4 {
font-weight: bold;
text-align: left;
}
.feature-section h2, .feature-section h3 {
text-align: left;
}
.feature-section h2, .feature-section h3, .feature-section h4:not(.nerd-font-button) {
padding: 10px 0px;
margin: 0px;
color: #1c1c1c;
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
.feature-section h3 {
.feature-section h3, .feature-section h4 {
font-size: 20px;
padding-top: 0px;
font-size: 20px;
padding-top: 0px;
}
.feature-section h4 img {
max-height: 100px;
}
.feature-section div p {
text-align: left;
}
.sectioninner3 {
@ -421,16 +436,33 @@ p {
font-size: 32px;
font-family: 'NerdFontsSymbols Nerd Font';
}
#downloads li {
line-height: 30px;
margin-bottom: 12px;
}
#downloads ul li ul {
list-style: initial;
font-size: 14px;
}
#downloads ul li ul li:before {
content: initial;
position: initial;
left: initial;
font-size: initial;
font-family: initial;
}
#downloads h3 span {
font-family: 'NerdFontsSymbols Nerd Font';
}
/* kramdown Rouge syntax hacks */
.lineno {
visibility: hidden;
}
/*
super tiny size (phones)

166
_posts/2017-01-02-features.md
View File

@ -34,15 +34,17 @@ fa-icon: gears
<!--</div> end inner col -->
<!-- <div class="col-sm-12 col-md-4 col-lg-4"> -->
<ul>
<li><a href="https://github.com/ryanoasis/powerline-extra-symbols">Powerline with Extra Symbols</a></li>
<li><a href="https://github.com/FortAwesome/Font-Awesome">Font Awesome</a></li>
<li><a href="https://github.com/AndreLGava/font-awesome-extension">Font Awesome Extension</a></li>
<li><a href="https://github.com/Templarian/MaterialDesign">Material Design Icons</a></li>
<li><a href="https://github.com/erikflowers/weather-icons">Weather</a></li>
<li><a href="http://vorillaz.github.io/devicons/">Devicons</a></li>
<li><a href="https://github.com/github/octicons">Octicons</a></li>
<li><a href="https://github.com/Lukas-W/font-linux">Font Linux</a></li>
<li><a href="https://github.com/gabrielelana/pomicons">Pomicons</a></li>
<li><a target="_blank" aria-label="Go to XYZ Page" rel="noreferrer" href="https://github.com/ryanoasis/powerline-extra-symbols">Powerline Extra Symbols</a></li>
<li><a target="_blank" aria-label="Go to Font Awesome Page" rel="noreferrer" href="https://github.com/FortAwesome/Font-Awesome">Font Awesome</a></li>
<li><a target="_blank" aria-label="Go to Font Awesome Extension Page" rel="noreferrer" href="https://github.com/AndreLGava/font-awesome-extension">Font Awesome Extension</a></li>
<li><a target="_blank" aria-label="Go to Material Design Icons Page" rel="noreferrer" href="https://github.com/Templarian/MaterialDesign">Material Design Icons</a></li>
<li><a target="_blank" aria-label="Go to Weather Icons Page" rel="noreferrer" href="https://github.com/erikflowers/weather-icons">Weather Icons</a></li>
<li><a target="_blank" aria-label="Go to Devicons Page" rel="noreferrer" href="http://vorillaz.github.io/devicons/">Devicons</a></li>
<li><a target="_blank" aria-label="Go to Octicons Page" rel="noreferrer" href="https://github.com/github/octicons">Octicons</a></li>
<li><a target="_blank" aria-label="Go to Font Logos Page" rel="noreferrer" href="https://github.com/Lukas-W/font-linux">Font Logos (Formerly Font Linux)</a></li>
<li><a target="_blank" aria-label="Go to Pomicons Page" rel="noreferrer" href="https://github.com/gabrielelana/pomicons">Pomicons</a></li>
<li><a target="_blank" aria-label="Go to IEC Power Symbols Page" rel="noreferrer" href="https://unicodepowersymbol.com/">IEC Power Symbols</a></li>
<li><a target="_blank" aria-label="Go to Seti-UI + Custom Source Page" rel="noreferrer" href="https://github.com/ryanoasis/nerd-fonts/blob/master/src/glyphs/original-source.otf">Seti-UI + Custom</a></li>
</ul>
<!--</div> end inner col -->
</div><!-- end inner row -->
@ -84,11 +86,40 @@ fa-icon: gears
</div><!-- end feature-section -->
</div><!-- end col -->
</div><!-- end row 1 -->
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-6">
<div class="col-xs-12 col-md-12 col-lg-12">
<div class="feature-section">
<h2>Terminal &amp; CLI Tools</h2>
<h2>Supported in major projects</h2>
<h3>Supported out of the box by many projects</h3>
<section class="row">
<div class="col-xs-12 col-md-3 col-lg-4">
<a href="https://github.com/Powerlevel9k/powerlevel9k/" target="_blank" aria-label="Go to Powerlevel9k Home Page" rel="noreferrer"><h3><img src="/assets/img/pl9k-Fully-Rendered.svg" alt="Powerlevel9k" /></h3>
<h4>Powerlevel9k</h4></a><p>The most awesome Powerline theme for ZSH around!</p>
<h3 class="faux-logo"><a href="https://github.com/athityakumar/colorls" target="_blank" aria-label="Go to colorls Github Page" rel="noreferrer">colorls</a></h3>
<!-- <h4>colorls</h4> --><p>A Ruby gem that beautifies the terminal's ls command, with color and font-awesome icons</p>
</div>
<div class="col-xs-12 col-md-3 col-lg-4">
<a href="https://github.com/ryanoasis/vim-devicons" target="_blank" aria-label="Go to The Fish Shell Framework Github Page" rel="noreferrer">
<h3><img src="/assets/img/Fish-Shell-Network.svg" alt="The Fish Shell Framework" /></h3>
<h4>The Fish Shell Framework</h4></a><p>Oh My Fish provides core infrastructure to allow you to install packages which extend or modify the look of your shell. It's fast, extensible and easy to use.</p>
</div>
<div class="col-xs-12 col-md-3 col-lg-4">
<a href="https://github.com/ryanoasis/vim-devicons" target="_blank" aria-label="Go to VimDevIcons Github Page" rel="noreferrer"><h3><img src="/assets/img/VimDevIcons.svg" alt="VimDevIcons" /></h3>
<h4>VimDevIcons</h4></a><p>Adds Icons to your Vim Plugins</p>
<h3 class="faux-logo"><a href="https://github.com/Peltoche/lsd" target="_blank" aria-label="Go to LSD (LSDeluxe) Github Page" rel="noreferrer">LSD (LSDeluxe)</a></h3>
<!-- <h4>LSD (LSDeluxe)</h4> --><p>The next gen ls command. Written in Rust and fast.</p>
... and many more on: <a href="https://github.com/search?q=nerd+fonts&type=Topics" target="_blank" aria-label="Go to Github Nerd Fonts Topic results" rel="noreferrer">Github</a> and <a href="https://gitlab.com/search?utf8=%E2%9C%93&search=%22nerd+fonts%22&group_id=&project_id=&repository_ref=" target="_blank" aria-label="Go to GitLab Nerd Fonts results" rel="noreferrer">GitLab</a></div>
</section>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-12">
<div class="feature-section">
<h2>Terminal Examples</h2>
<h3>Experiment &amp; see what's possible in the terminal</h3>
<div class="row">
<!-- <div class="col-sm-12 col-md-7 col-lg-7"> -->
<div class="subtlecircle sectiondivider faicon sectioninner sectioninner3">
@ -96,46 +127,93 @@ fa-icon: gears
</div>
<!-- </div> -->
</div><!-- end inner row -->
<div class="row">
<!-- <div class="col-sm-12 col-md-5 col-lg-5"> -->
<ul>
<li>
<a href="https://p9k.org/" target="_blank" aria-label="Go to Powerlevel9k Home Page" rel="noreferrer">Powerlevel9k</a>
<ul>
<li>The most awesome Powerline theme for ZSH around!</li>
</ul>
</li>
<li>
<a href="https://github.com/Peltoche/lsd" target="_blank" aria-label="Go to lsd Github Page" rel="noreferrer">lsd</a>
<ul>
<li>The next gen ls command</li>
</ul>
</li>
<li>
<a href="https://github.com/athityakumar/colorls" target="_blank" aria-label="Go to colorls Github Page" rel="noreferrer">colorls</a>
<ul>
<li>A Ruby gem that beautifies the terminal's ls command, with color and font-awesome icons</li>
</ul>
</li>
<li>
<a href="https://github.com/ryanoasis/vim-devicons" target="_blank" aria-label="Go to VimDevIcons Github Page" rel="noreferrer">VimDevIcons</a>
<ul>
<li>Adds Icons to your Vim Plugins</li>
</ul>
</li>
<li>... and many more on: <a href="https://github.com/search?q=nerd+fonts&type=Topics" target="_blank" aria-label="Go to Github Nerd Fonts Topic results" rel="noreferrer">Github</a> and <a href="https://gitlab.com/search?utf8=%E2%9C%93&search=%22nerd+fonts%22&group_id=&project_id=&repository_ref=" target="_blank" aria-label="Go to GitLab Nerd Fonts results" rel="noreferrer">GitLab</a></li>
</ul>
<!-- </div> -->
</div><!-- end inner row -->
</div><!-- end feature-section -->
</div><!-- end col -->
<div class="col-xs-12 col-md-6 col-lg-6 d-flex">
</div><!-- end row -->
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-12">
<div class="feature-section">
<h2>Font Patcher Script</h2>
<h3>Create your own customized patched fonts</h3>
<p>Use the provided <a href="https://github.com/ryanoasis/nerd-fonts#font-patcher">FontForge Python Script</a> to patch your own font or to generate over
<strong><code class="highlighter-rouge">1.2 million</code></strong> unique combinations/variations <small><a href="https://github.com/ryanoasis/nerd-fonts#combinations">(more details)</a></small>
<strong><code class="highlighter-rouge">1.2 million</code></strong> unique combinations/variations <small><a href="https://github.com/ryanoasis/nerd-fonts#combinations">(more details)</a></small>.<br/><br/>You can even specify a custom symbol font with the <strong><code class="highlighter-rouge">--custom</code></strong> option to include even more glyphs.
</p>
<details>
<summary>Show Font Patcher CLI</summary>
<div markdown="1">
```
./font-patcher
usage: font-patcher
[-h] [-v] [-s] [-l] [-q] [-w] [-c] [--careful]
[--removeligs] [--postprocess [POSTPROCESS]]
[--configfile [CONFIGFILE]] [--custom [CUSTOM]]
[-ext [EXTENSION]] [-out [OUTPUTDIR]]
[--progressbars | --no-progressbars] [--fontawesome]
[--fontawesomeextension] [--fontlinux] [--octicons]
[--powersymbols] [--pomicons] [--powerline]
[--powerlineextra] [--material] [--weather]
font
Nerd Fonts Font Patcher: patches a given font with programming and development related glyphs
* Website: https://www.nerdfonts.com
* Version: 2.1.0-alpha
* Development Website: https://github.com/ryanoasis/nerd-fonts
* Changelog: https://github.com/ryanoasis/nerd-fonts/blob/master/changelog.md
positional arguments:
font The path to the font to patch (e.g., Inconsolata.otf)
optional arguments:
-h, --help show this help message and exit
-v, --version show program's version number and exit
-s, --mono, --use-single-width-glyphs
Whether to generate the glyphs as single-width not double-width (default is double-width)
-l, --adjust-line-height
Whether to adjust line heights (attempt to center powerline separators more evenly)
-q, --quiet, --shutup
Do not generate verbose output
-w, --windows Limit the internal font name to 31 characters (for Windows compatibility)
-c, --complete Add all available Glyphs
--careful Do not overwrite existing glyphs if detected
--removeligs, --removeligatures
Removes ligatures specificed in JSON configuration file
--postprocess [POSTPROCESS]
Specify a Script for Post Processing
--configfile [CONFIGFILE]
Specify a file path for JSON configuration file (see sample: src/config.sample.json)
--custom [CUSTOM] Specify a custom symbol font. All new glyphs will be copied, with no scaling applied.
-ext [EXTENSION], --extension [EXTENSION]
Change font file type to create (e.g., ttf, otf)
-out [OUTPUTDIR], --outputdir [OUTPUTDIR]
The directory to output the patched font file to
--progressbars Show percentage completion progress bars per Glyph Set
--no-progressbars Don't show percentage completion progress bars per Glyph Set
Symbol Fonts:
--fontawesome Add Font Awesome Glyphs (http://fontawesome.io/)
--fontawesomeextension
Add Font Awesome Extension Glyphs (https://andrelzgava.github.io/font-awesome-extension/)
--fontlinux, --fontlogos
Add Font Linux and other open source Glyphs (https://github.com/Lukas-W/font-logos)
--octicons Add Octicons Glyphs (https://octicons.github.com)
--powersymbols Add IEC Power Symbols (https://unicodepowersymbol.com/)
--pomicons Add Pomicon Glyphs (https://github.com/gabrielelana/pomicons)
--powerline Add Powerline Glyphs
--powerlineextra Add Powerline Glyphs (https://github.com/ryanoasis/powerline-extra-symbols)
--material, --materialdesignicons, --mdi
Add Material Design Icons (https://github.com/templarian/MaterialDesign)
--weather, --weathericons
Add Weather Icons (https://github.com/erikflowers/weather-icons)
```
</div>
</details>
<br/>
<br/>
<h4 class="inlineblock bg-blue text-white nerd-font-button">
<i class="nf nf-mdi-script"></i>
<a href="https://raw.githubusercontent.com/ryanoasis/nerd-fonts/master/font-patcher" class="inlineblock">Download Patcher</a>
</h4>
</div><!-- end feature-section -->
</div><!-- end col -->
</div><!-- end row -->

3
_posts/2017-01-03-downloads.md
View File

@ -73,7 +73,8 @@ brew cask install font-<FONT NAME>-nerd-font
<h3> :// curl </h3>
<div markdown="1">
```sh
curl -fLo "<FONT NAME> Nerd Font Complete.otf" https://github.com/ryanoasis/nerd-fonts/raw/master/patched-fonts/<FONT_PATH>/complete/<FONT_NAME>%20Nerd%20Font%20Complete.otf
curl -fLo "<FONT NAME> Nerd Font Complete.otf" \
https://github.com/ryanoasis/nerd-fonts/raw/master/patched-fonts/<FONT_PATH>/complete/<FONT_NAME>%20Nerd%20Font%20Complete.otf
```
</div>
<h3> <span></span> Bash Install Script </h3>

1
assets/img/Fish-Shell-Network.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="-459 -463 1024 1024"><path d="M565 513c0 26-22 48-48 48h-928c-26 0-48-22-48-48v-928c0-26 22-48 48-48h928c26 0 48 22 48 48v928z" fill="#1E1E1E"/><path d="M408 34L290-130c-6-8-20-15-30-15H16c-10 0-23 7-29 15l-33 45L40 34c3 4 5 10 5 15s-2 11-5 15l-86 119 33 45c6 8 19 15 29 15h244c10 0 24-7 30-15L408 64c3-4 5-10 5-15s-2-11-5-15zM206-90c12 0 21 9 21 21s-9 21-21 21-21-9-21-21 9-21 21-21z" fill="#FFF"/><path d="M3 49c0 6-2 11-5 15l-119 164c-6 8-20 15-30 15h-146c-7 0-11-3-11-8 0-2 1-5 3-7l130-179-130-179-3-7c0-5 4-8 11-8h146c10 0 24 7 30 15L-2 34c3 4 5 10 5 15z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 641 B

161
assets/img/VimDevIcons.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 144 KiB

55
assets/img/pl9k-Fully-Rendered.svg Normal file
View File

@ -0,0 +1,55 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="841.8900146px" height="450.7078857px" viewBox="0 0 841.8900146 450.7078857"
style="enable-background:new 0 0 841.8900146 450.7078857;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:#FFFFFF;}
.st2{fill:#F1F1F1;}
.st3{fill:none;}
.st4{opacity:0.18;fill:#4D4D4D;}
.st5{fill:url(#SVGID_2_);}
.st6{fill:#0F324B;}
.st7{fill:url(#SVGID_3_);}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="42.8056412" y1="225.3539429" x2="799.0843506" y2="225.3539429">
<stop offset="0" style="stop-color:#60C7D0"/>
<stop offset="1" style="stop-color:#5A85C0"/>
</linearGradient>
<polygon class="st0" points="685.2388916,52.5112686 685.2388916,52.5815849 42.8519669,52.5815849 156.6512146,225.3187866
42.8056412,398.1263123 42.8056412,398.1966248 685.2388916,398.1966248 685.2388916,398.1263123 799.0843506,225.3187866 "/>
<g>
<polygon class="st1" points="561.5447388,341.3577881 623.2905273,341.3577881 559.3942261,206.712738 517.5202026,248.5867615
"/>
<polygon class="st1" points="622.9202881,109.6432114 544.0310669,109.6432114 493.482605,160.1915436 493.482605,239.0809174 "/>
<rect x="413.9806519" y="109.6432114" class="st1" width="55.7831268" height="231.7145844"/>
</g>
<path class="st2" d="M685.2388306,52.5113068l113.845459,172.807373l-113.845459,172.8076324v0.0702515H42.8057213v-0.0702515
l113.8454742-172.8076324L42.8519135,52.581543h642.3869019V52.5113068 M685.2376709,32.1793671
c-0.5670776,0-1.1363525,0.0238419-1.7058716,0.0719452H42.8519135c-7.4778595,0-14.3519058,4.1049957-17.8983345,10.6883316
c-3.5464287,6.5833282-3.1928577,14.5821457,0.9211903,20.8264236l106.4309235,161.5526428L25.8285789,386.941803
c-2.1873817,3.3200073-3.353096,7.2085571-3.353096,11.1845093v0.0702515c0,11.2280884,9.1021442,20.3302307,20.3302383,20.3302307
h642.4331055c7.5643921,0,14.1635132-4.1305542,17.664917-10.2599182l113.1577148-171.7636566
c4.4709473-6.7861938,4.4709473-15.5828552,0-22.3690491l-113.84552-172.8073883
C698.3849487,35.5115509,691.9465942,32.1793671,685.2376709,32.1793671L685.2376709,32.1793671z"/>
<g>
<polygon class="st3" points="685.2388916,52.5112686 685.2388916,52.5815849 42.8519669,52.5815849 156.6512146,225.3187866
42.8056412,398.1263123 42.8056412,398.1966248 685.2388916,398.1966248 685.2388916,398.1263123 799.0843506,225.3187866 "/>
</g>
<polygon class="st4" points="685.2390137,398.1262512 761.2462769,282.7536316 738.2677612,253.9195251 623.2905884,110.4412003
521.6287842,174.3646545 469.7637939,109.6431961 445.4653931,183.2999878 386.440033,109.6431961 283.5547485,140.08078
227.8250732,254.7182617 342.8023682,398.1965942 685.2390137,398.1965942 "/>
<g>
<path class="st1" d="M386.440094,341.2336121h-55.7295532v-86.5153046H227.8251801V109.6432114H386.440094V341.2336121z
M283.5547485,198.9880524h47.1557922v-33.6152802h-47.1557922V198.9880524z"/>
<g>
<polygon class="st1" points="556.5059814,201.4270782 514.6693115,243.2546692 561.2241821,341.3577881 622.9105835,341.3577881
"/>
<polygon class="st1" points="469.5222778,109.8656921 413.8018188,109.8656921 413.8018188,239.7911682 413.8018188,317.7799377
413.8018188,341.3577881 469.5222778,341.3577881 "/>
<polygon class="st1" points="548.2908325,184.1156311 622.5405884,109.8656921 543.7272949,109.8656921 487.5762939,166.0167084
487.5762939,244.8182983 548.2909546,184.1159058 "/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB