From 8f79ba5bf4ea54a539ec7769c62de86d54c1bcd7 Mon Sep 17 00:00:00 2001
From: Ryan L McIntyre <ryanoasis@users.noreply.github.com>
Date: Sat, 5 Dec 2020 02:25:00 -0800
Subject: [PATCH] Improves download page DOM rendering perf * refactored and
 simplified DOM elements

---
 _includes/css/nerd-font-tweaks.scss | 57 ++++++++++++++++++++++++-----
 _posts/2017-01-03-downloads.md      | 22 +++--------
 font-downloads.html                 | 18 ++++-----
 3 files changed, 62 insertions(+), 35 deletions(-)

diff --git a/_includes/css/nerd-font-tweaks.scss b/_includes/css/nerd-font-tweaks.scss
index 622f2f8c4..733f6bec2 100644
--- a/_includes/css/nerd-font-tweaks.scss
+++ b/_includes/css/nerd-font-tweaks.scss
@@ -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;
 	}
 }
 
diff --git a/_posts/2017-01-03-downloads.md b/_posts/2017-01-03-downloads.md
index d900de501..8b54a71a2 100644
--- a/_posts/2017-01-03-downloads.md
+++ b/_posts/2017-01-03-downloads.md
@@ -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>&bull; Reserved Font Name:</strong> {{ font.unpatchedName }}</div>{% endif %}
+      <div><strong>&bull; 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>
diff --git a/font-downloads.html b/font-downloads.html
index d6e5caa87..5fed67354 100755
--- a/font-downloads.html
+++ b/font-downloads.html
@@ -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 %}