feat: add FiraCode webfont

3Dtransforms/index.html

@@ -24,7 +24,7 @@
         <div id="divsection">
             <p>CSS 3D transforms allow us to rotate elements in (so perceived) third dimension<br>All that is really needed is a simple transform method such as <code class="language-css">rotate{X,Y,Z}()</code> that takes exactly one argument - the amount of wanted rotation.<br></p>
             <h3 id="FiraCode">a note about Fira Code</h3>
-            <p>The <code class="language-html">h1</code> font inside the divs below is specified as <a href="https://github.com/tonsky/FiraCode" target="_blank" rel="noopener noreferrer">Fira Code Retina</a>, so in case you don't have it installed, the glyphs won't show up nicely. I recommend you check it out.<br>I am planning on adding it to the site, though.<br>That way you don't have to have it installed on your device.</p>
+            <p>The <code class="language-html">h1</code> font inside the divs below is specified as <a href="https://github.com/tonsky/FiraCode" target="_blank" rel="noopener noreferrer">Fira Code Retina</a>, so in case you didn't have it installed, the glyphs wouldn't show up nicely. <br>I added it to the site, though.<br>That way you <i>don't</i> have to have it installed on your device.<br>To understand why <code class="language-css">"ss07", "zero"</code> was used you can read <a href="https://github.com/tonsky/FiraCode/wiki/How-to-enable-stylistic-sets" target="_blank" rel="noopener noreferer">this.</a></p>
             <div id=div3dtransformrotate-x><h1><~~ rotate X ~~></h1></div>
             <p>A div rotated along its x-axis</p>
             <div class="divcodeblock">
@@ -46,7 +46,9 @@
     opacity: 0.95;
 }
 #div3dtransformrotate-x h1 {
-    font-family: 'Fira Code Retina'
+    font-family: 'Fira Code Retina';
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "ss07", "zero";
 }</code></pre>
             </div>
             <div id=div3dtransformrotate-y><h1><~~ rotate Y ~~></h1></div>
@@ -70,7 +72,9 @@
     opacity: 0.95;
 }
 #div3dtransformrotate-y h1 {
-    font-family: 'Fira Code Retina'
+    font-family: 'Fira Code Retina';
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "ss07", "zero";
 }</code></pre>
             </div>
             <div id=div3dtransformrotate-z><h1><~~ rotate Z ~~></h1></div>
@@ -94,7 +98,9 @@
     opacity: 0.95;
 }
 #div3dtransformrotate-z h1 {
-    font-family: 'Fira Code Retina'
+    font-family: 'Fira Code Retina';
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "ss07", "zero";
 }</code></pre>
             </div>
         </div>

animations/index.html

@@ -39,7 +39,9 @@
     opacity: 0.95;
 }
 #divanimate-shrug h1 {
-    font-family: 'Fira Code Retina'
+    font-family: 'Fira Code Retina';
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "ss07", "zero";
 }
 @keyframes rotate-shrug {
   0% {
@@ -77,7 +79,9 @@
     opacity: 0.95;
 }
 #divanimate-x h1 {
-    font-family: 'Fira Code Retina'
+    font-family: 'Fira Code Retina';
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "ss07", "zero";
 }
 @keyframes rotate-x {
   0% {
@@ -110,7 +114,9 @@
     opacity: 0.95;
 }
 #divanimate-y h1 {
-    font-family: 'Fira Code Retina'
+    font-family: 'Fira Code Retina';
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "ss07", "zero";
 }
 @keyframes rotate-y {
   0% {
@@ -143,7 +149,9 @@
     opacity: 0.95;
 }
 #divanimate-z h1 {
-    font-family: 'Fira Code Retina'
+    font-family: 'Fira Code Retina';
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "ss07", "zero";
 }
 @keyframes rotate-z {
   0% {

css/fira_code.css

@@ -0,0 +1,42 @@
+@font-face {
+  font-family: 'Fira Code';
+  src: url('/fonts/woff2/FiraCode-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Code';
+  src: url('/fonts/woff2/FiraCode-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Code';
+  src: url('/fonts/woff2/FiraCode-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Code';
+  src: url('/fonts/woff2/FiraCode-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Code';
+  src: url('/fonts/woff2/FiraCode-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Code VF';
+  src: url('/fonts/woff2/FiraCode-VF.woff2') format('woff2-variations');
+  /* [> font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes <] */
+  font-weight: 300 700;
+  font-style: normal;
+}

css/style.css

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@import "fira_code.css";
 
 body {
     background: #2b2b2b;
@@ -329,7 +330,9 @@ pre {
     opacity: 0.95;
 }
 #div3dtransformrotate-x h1 {
-    font-family: 'Fira Code Retina'
+    font-family: 'Fira Code Retina';
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "ss07", "zero";
 }
 
 #div3dtransformrotate-y {
@@ -350,7 +353,9 @@ pre {
     opacity: 0.95;
 }
 #div3dtransformrotate-y h1 {
-    font-family: 'Fira Code Retina'
+    font-family: 'Fira Code Retina';
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "ss07", "zero";
 }
 
 #div3dtransformrotate-z {
@@ -371,7 +376,9 @@ pre {
     opacity: 0.95;
 }
 #div3dtransformrotate-z h1 {
-    font-family: 'Fira Code Retina'
+    font-family: 'Fira Code Retina';
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "ss07", "zero";
 }
 
 #divanimate-shrug {
@@ -387,7 +394,9 @@ pre {
     opacity: 0.95;
 }
 #divanimate-shrug h1 {
-    font-family: 'Fira Code Retina'
+    font-family: 'Fira Code Retina';
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "ss07", "zero";
 }
 @keyframes rotate-shrug {
   0% {
@@ -422,7 +431,9 @@ pre {
     opacity: 0.95;
 }
 #divanimate-x h1 {
-    font-family: 'Fira Code Retina'
+    font-family: 'Fira Code Retina';
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "ss07", "zero";
 }
 @keyframes rotate-x {
   0% {
@@ -452,7 +463,9 @@ pre {
     opacity: 0.95;
 }
 #divanimate-y h1 {
-    font-family: 'Fira Code Retina'
+    font-family: 'Fira Code Retina';
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "ss07", "zero";
 }
 @keyframes rotate-y {
   0% {
@@ -482,7 +495,9 @@ pre {
     opacity: 0.95;
 }
 #divanimate-z h1 {
-    font-family: 'Fira Code Retina'
+    font-family: 'Fira Code Retina';
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "ss07", "zero";
 }
 @keyframes rotate-z {
   0% {

deploy

@@ -7,7 +7,7 @@ PUBDIR=$HOME/tew_0x00public/
 rm -rfv ../tew_0x00/public
 mkdir -pv ../tew_0x00/public
 
-rsync -av index.html scripts css media \
+rsync -av index.html scripts css media fonts \
 roundedcorners backgroundgradient shadows \
 2Dtransforms 3Dtransforms transitions animations \
 multiplecolumns boxsizing flexbox \