Merge pull request #36 from aminalhazwani/no-fonts

Remove custom fonts

Author: aminalhazwani

src/css/index.css

@@ -1,21 +1,3 @@
-@font-face {
-  font-family: "aldo";
-  src: url("../fonts/aldo.woff2") format("woff2"),
-       url("../fonts/aldo.woff") format("woff");
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-}
-
-@font-face {
-  font-family: "inter";
-  src: url("../fonts/inter.woff2") format("woff2"),
-       url("../fonts/inter.woff") format("woff");
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-}
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/fonts/aldo.woff

@@ -1,17 +1,17 @@
 <div class="p-4 sm:px-8 sm:py-4 md:px-16 md:py-8 lg:text-lg lg:leading-none lg:px-12 lg:py-8 xl:p-0 xl:sticky xl:top-0 xl:h-screen xl:flex xl:flex-wrap xl:w-14">
   <p class="xl:flex xl:leading-snug xl:ml-4 xl:my-5 xl:writing-mode-rl xl:transform xl:rotate-180">
     <a class="mr-4 xl:mr-0 xl:mb-8" href="https://twitter.com/aminalhazwani">
-      Twitter<span class="font-inter ml-1 xl:ml-0 xl:mt-2">↗</span>
+      Twitter<span class="ml-1 xl:ml-0 xl:mt-2">↗</span>
     </a>
     <a class="mr-4 xl:mr-0 xl:mb-8" href="https://github.com/aminalhazwani/">
-      GitHub<span class="font-inter ml-1 xl:ml-0 xl:mt-2">↗</span>
+      GitHub<span class="ml-1 xl:ml-0 xl:mt-2">↗</span>
     </a>
     <a class="mr-4 xl:mr-0" href="https://www.linkedin.com/in/aminalhazwani/">
-      LinkedIn<span class="font-inter ml-1 xl:ml-0 xl:mt-2">↗</span>
+      LinkedIn<span class="ml-1 xl:ml-0 xl:mt-2">↗</span>
     </a>
     <span class="xl:flex-grow"></span>
     <a class="hidden group lg:flex lg:flex-row-reverse lg:absolute lg:top-4 lg:right-12 xl:flex-row xl:relative xl:top-auto xl:right-auto xl:transform xl:rotate-180" href="#info">
-      Info<span class="font-inter opacity-0 transform -translate-y-2 transition ease-in-out duration-200 group-hover:opacity-100 group-hover:translate-y-0 lg:mr-2 xl:mr-0 xl:inline-block xl:mt-2 xl:-rotate-90">↓</span>
+      Info<span class="opacity-0 transform -translate-y-2 transition ease-in-out duration-200 group-hover:opacity-100 group-hover:translate-y-0 lg:mr-2 xl:mr-0 xl:inline-block xl:mt-2 xl:-rotate-90">↓</span>
     </a>
   </p>
 </div>

src/fonts/aldo.woff2

@@ -12,7 +12,7 @@
         I can provide hands-on execution knowing the appropriate level of detail and fidelity necessary at every phase of the design process.
       </p>
       <p class="hidden leading-none text-sm mb-4 uppercase text-gray-500 dark:text-gray-400 tracking-wide lg:block lg:mb-0">
-        Gates Ventures<span class="font-inter inline-block font-feature-aalt ml-2">←</span>
+        Gates Ventures<span class="inline-block font-feature-aalt ml-2">←</span>
       </p>
     </div>
     <div class="row-start-2 row-span-3 col-start-8 col-span-12">
@@ -21,7 +21,7 @@
       {% set description = "#" %}
       {% include "utils/image.njk" %}
       <p class="leading-none text-sm mb-4 uppercase text-gray-500 dark:text-gray-400 tracking-wide lg:hidden">
-        Gates Ventures<span class="font-inter inline-block font-feature-aalt ml-2">↑</span>
+        Gates Ventures<span class="inline-block font-feature-aalt ml-2">↑</span>
       </p>
     </div>
 
@@ -30,7 +30,7 @@
         Most of my design work happens through other people. I act as a mentor to fellow colleagues nurturing both soft and hard skills.
       </p>
       <p class="text-sm mb-4 uppercase tracking-wide text-gray-500 dark:text-gray-400 order-3 lg:order-2 lg:mb-2">
-        IBM Data Visualization Design Language<span class="font-inter inline-block font-feature-aalt ml-2 transform lg:rotate-180">↑</span>
+        IBM Data Visualization Design Language<span class="inline-block font-feature-aalt ml-2 transform lg:rotate-180">↑</span>
       </p>
       {% set classes = "order-2 mb-2 lg:order-1" %}
       {% set name = "accurat-design-ops-motion" %}
@@ -45,7 +45,7 @@
         {% set description = "#" %}
         {% include "utils/image.njk" %}
         <p class="text-sm uppercase mb-4 text-gray-500 tracking-wide dark:text-gray-400 lg:mb-0">
-          Adobe 2021 Digital Trends Report<span class="font-inter inline-block font-feature-aalt ml-2">↑</span>
+          Adobe 2021 Digital Trends Report<span class="inline-block font-feature-aalt ml-2">↑</span>
         </p>
       </div>
     </div>
@@ -56,7 +56,7 @@
       </p>
       <div class="flex flex-col-reverse lg:flex-col">
         <p class="leading-none text-sm uppercase text-gray-500 dark:text-gray-400 tracking-wide lg:mb-2">
-          Triennale Design Museum<span class="font-inter inline-block font-feature-aalt ml-2 transform lg:rotate-180">↑</span>
+          Triennale Design Museum<span class="inline-block font-feature-aalt ml-2 transform lg:rotate-180">↑</span>
         </p>
         {% set classes = "mb-2 lg:mb-0" %}
         {% set name = "accurat-design-ops-triennale" %}

src/fonts/inter.woff

@@ -3,6 +3,6 @@
     Amin Al Hazwani worked as a graphic designer, web designer, event organizer, front-end developer, mobile interface designer, design system designer, product designer, and today is a design ops director. He designed a wide range of things, from icons to design systems. He organized design events and designed design orgs. He worked alone, in a duo, in a small team, in a medium-sized design agency, in a big distributed company. He’s literally tried it all.
   </p>
   <p class="p-4 sm:py-4 sm:px-8 lg:px-12">
-    You can reach him at <span class="font-inter">→</span> amin at hey dot com.
+    You can reach him at <span>→</span> amin at hey dot com.
   </p>
 </div>

src/fonts/inter.woff2

@@ -4,10 +4,6 @@
   <title>{{ title or metadata.title }}</title>
   <meta name="description" content="{{ description or metadata.description }}">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
-  <link rel="preload" href="{% static "aldo.woff2" %}" as="font" type="font/woff2" crossorigin>
-  <link rel="preload" href="{% static "inter.woff2" %}" as="font" type="font/woff2" crossorigin>
-  <link rel="preload" href="{% static "aldo.woff" %}" as="font" type="font/woff" crossorigin>
-  <link rel="preload" href="{% static "inter.woff" %}" as="font" type="font/woff" crossorigin>
   <link rel="stylesheet" href="{% static "main.css" %}">
   <link rel="canonical" href="{{ metadata.url }}">
   <link rel="preconnect" href="https://d33wubrfki0l68.cloudfront.net">

src/site/_includes/blocks/aside.njk

@@ -4,7 +4,7 @@
   </div>
   <div class="col-span-1 lg:hidden">
     <p class="group text-right leading-none">
-      <span class="font-inter inline-block mr-0.5 opacity-0 transform -translate-y-2 transition ease-in-out duration-200 group-hover:opacity-100 group-hover:translate-y-0">↓</span>
+      <span class="inline-block mr-0.5 opacity-0 transform -translate-y-2 transition ease-in-out duration-200 group-hover:opacity-100 group-hover:translate-y-0">↓</span>
       <a href="#info">Info</a>
     </p>
   </div>

src/site/_includes/blocks/design-ops.njk

@@ -3,10 +3,6 @@ const colors = require('tailwindcss/colors')
 module.exports = {
   darkMode: "media",
   theme: {
-    fontFamily: {
-      "sans": ["aldo", "Helvetica Neue", "Arial", "sans-serif"],
-      "inter": ["inter", "Helvetica Neue", "Arial", "sans-serif"],
-    },
     colors: {
       black: colors.black,
       gray: colors.neutral,

src/site/_includes/blocks/footer.njk

@@ -4,16 +4,12 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const dev = process.env.NODE_ENV === "development";
 
-const baseFilename = dev ? "index" : "[contenthash]";
+const baseFilename = dev ? "index" : "index.[contenthash]";
 
 module.exports = {
   mode: dev ? "development" : "production",
   entry: [
     path.resolve(__dirname, "src", "css", "index.css"),
-    path.resolve(__dirname, "src", "fonts", "aldo.woff"),
-    path.resolve(__dirname, "src", "fonts", "aldo.woff2"),
-    path.resolve(__dirname, "src", "fonts", "inter.woff"),
-    path.resolve(__dirname, "src", "fonts", "inter.woff2"),
   ],
   output: {
     path: path.resolve(__dirname, "dist", "static"),
@@ -29,14 +25,6 @@ module.exports = {
           "postcss-loader"
         ],
       },
-      {
-        test: /\.(woff|woff2)$/i,
-        use: [
-          {
-            loader: 'file-loader',
-          },
-        ],
-      },
     ],
   },
   plugins: [