mirror of
https://github.com/ryanoasis/nerd-fonts.git
synced 2025-01-06 21:49:40 +02:00
Improves download page DOM rendering perf
* refactored and simplified DOM elements
This commit is contained in:
Ryan L McIntyre
parent
a602c0d540
commit
8f79ba5bf4
@ -15,6 +15,25 @@ p {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a.nerd-font-button {
|
||||
font-size: 21px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.nerd-font-button:before {
|
||||
font-weight: normal;
|
||||
margin-right: .25em;
|
||||
/* .nf */
|
||||
font-family: 'NerdFontsSymbols Nerd Font';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
|
||||
#main .nerd-font-badges {
|
||||
line-height: 2.3em;
|
||||
}
|
||||
@ -426,8 +445,13 @@ p {
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
// max-width: 600px;
|
||||
// min-width: 400px;
|
||||
width: 595px;
|
||||
|
||||
.download-icon {
|
||||
content: "";
|
||||
font-size: 32px;
|
||||
@ -438,20 +462,35 @@ p {
|
||||
padding-right: 10px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
>a:first-of-type {
|
||||
text-decoration: none;
|
||||
}
|
||||
img {
|
||||
vertical-align: top !important;
|
||||
}
|
||||
.font-preview {
|
||||
text-decoration: none;
|
||||
background-size: contain;
|
||||
height: 110px;
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: 34px;
|
||||
}
|
||||
.font-preview:before {
|
||||
content: "";
|
||||
font-size: 32px;
|
||||
font-family: 'NerdFontsSymbols Nerd Font';
|
||||
}
|
||||
}
|
||||
.nerd-font-buttons-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.button-empty-spacer {
|
||||
height: 42px;
|
||||
width: 100%;
|
||||
}
|
||||
.nerd-font-button {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
span {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -12,24 +12,14 @@ page: font-downloads
|
||||
<div class="d-flex flex-row flex-wrap align-items-stretch justify-content-betweeen justify-content-aroundd justify-content-center">
|
||||
{% for font in site.data.fonts.fonts %}
|
||||
<div class="item">
|
||||
<a href="https://github.com/ryanoasis/nerd-fonts/releases/download/v{{ site.current_version }}/{{ font.unpatchedName }}.zip">
|
||||
<div class="download-icon"></div>
|
||||
<img src="/assets/img/previews/{{ font.imagePreviewFont }}.svg" alt="{{ font.unpatchedName }}" title="Download {{ font.unpatchedName }}">
|
||||
<a href="https://github.com/ryanoasis/nerd-fonts/releases/download/v{{ site.current_version }}/{{ font.unpatchedName }}.zip" class="font-preview" style="background-image: url('/assets/img/previews/{{ font.imagePreviewFont }}.svg')">
|
||||
</a>
|
||||
<ul>
|
||||
{% if font.unpatchedName != font.patchedName %}<li><strong>Reserved Font Name:</strong> {{ font.unpatchedName }}</li>{% endif %}
|
||||
<li><strong>Info:</strong> {{ font.description }}</li>
|
||||
</ul>
|
||||
<div>
|
||||
<h4 class="inlineblock bg-green border-white text-white nerd-font-button">
|
||||
<i class="nf nf-fa-download"></i>
|
||||
<a href="https://github.com/ryanoasis/nerd-fonts/releases/download/v{{ site.current_version }}/{{ font.unpatchedName }}.zip" class="inlineblock">Download</a>
|
||||
</h4>
|
||||
{% if font.unpatchedName != font.patchedName %}<div><strong>• Reserved Font Name:</strong> {{ font.unpatchedName }}</div>{% endif %}
|
||||
<div><strong>• Info:</strong> {{ font.description }}</div>
|
||||
<div class="nerd-font-buttons-wrapper">
|
||||
<a href="https://github.com/ryanoasis/nerd-fonts/releases/download/v{{ site.current_version }}/{{ font.unpatchedName }}.zip" class="inlineblock bg-green border-white text-white nerd-font-button nf-fa-download">Download</a>
|
||||
{% if font.linkPreviewFont != false %}
|
||||
<h4 class="inlineblock bg-purple border-white text-white nerd-font-button">
|
||||
<i class="nf nf-oct-link_external"></i>
|
||||
<a href="https://www.programmingfonts.org/#{{ font.linkPreviewFont }}" target="_blank" alt="Full Preview of {{ font.patchedName }} on ProgrammingFonts.org" class="inlineblock">Preview <span>on ProgrammingFonts.org</span></a>
|
||||
</h4>
|
||||
<a href="https://www.programmingfonts.org/#{{ font.linkPreviewFont }}" target="_blank" alt="Full Preview of {{ font.patchedName }} on ProgrammingFonts.org" class="inlineblock bg-purple border-white text-white nerd-font-button nf-oct-link_external">Preview on ProgrammingFonts.org</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,16 +3,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr" lang="en">
|
||||
{% include header.html %}
|
||||
<body>
|
||||
<div id="main" class="section-page-wrapper">
|
||||
{% assign page = site.posts[3] %}
|
||||
{% include topnav.html %}
|
||||
{% include section.html %}
|
||||
<div id="footer" class="section text-white">
|
||||
<div class="container">
|
||||
{% capture foottext %} {% include footer.md %} {% endcapture %}
|
||||
{{ foottext | markdownify }}
|
||||
</div>
|
||||
<body id="main" class="section-page-wrapper">
|
||||
{% assign page = site.posts[3] %}
|
||||
{% include topnav.html %}
|
||||
{% include section.html %}
|
||||
<div id="footer" class="section text-white">
|
||||
<div class="container">
|
||||
{% capture foottext %} {% include footer.md %} {% endcapture %}
|
||||
{{ foottext | markdownify }}
|
||||
</div>
|
||||
</div>
|
||||
{% include analytics.html %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user