update content and improve font load times

CAG2Mark · May 6, 2024 · 8cc51b6 · 8cc51b6
1 parent 587d753
commit 8cc51b6
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 115 deletions.
diff --git a/about.html b/about.html
@@ -8,8 +8,8 @@
     <title>About - Mark Ng</title>
 
     <!-- GLOBAL CSS & FONTS -->
-    <link rel="stylesheet" href="styles/global.css?version=13">
-    <link href="content/fonts/inter.css" rel="stylesheet">
+    <link rel="stylesheet" href="styles/global.css?version=14">
+    <link href="content/fonts/inter.css?version=1" rel="stylesheet">
 
     <link rel="stylesheet" href="styles/about.css?version=6">
 

diff --git a/content/fonts/inter.css b/content/fonts/inter.css
@@ -1,54 +1,3 @@
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 100;
-  font-display: swap;
-  src: url("Inter-Thin.woff2?v=3.15") format("woff2"),
-       url("Inter-Thin.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 100;
-  font-display: swap;
-  src: url("Inter-ThinItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-ThinItalic.woff?v=3.15") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 200;
-  font-display: swap;
-  src: url("Inter-ExtraLight.woff2?v=3.15") format("woff2"),
-       url("Inter-ExtraLight.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 200;
-  font-display: swap;
-  src: url("Inter-ExtraLightItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-ExtraLightItalic.woff?v=3.15") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url("Inter-Light.woff2?v=3.15") format("woff2"),
-       url("Inter-Light.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 300;
-  font-display: swap;
-  src: url("Inter-LightItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-LightItalic.woff?v=3.15") format("woff");
-}
-
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
@@ -57,6 +6,7 @@
   src: url("Inter-Regular.woff2?v=3.15") format("woff2"),
        url("Inter-Regular.woff?v=3.15") format("woff");
 }
+
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
@@ -66,23 +16,6 @@
        url("Inter-Italic.woff?v=3.15") format("woff");
 }
 
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("Inter-Medium.woff2?v=3.15") format("woff2"),
-       url("Inter-Medium.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 500;
-  font-display: swap;
-  src: url("Inter-MediumItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-MediumItalic.woff?v=3.15") format("woff");
-}
-
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
@@ -91,14 +24,6 @@
   src: url("Inter-SemiBold.woff2?v=3.15") format("woff2"),
        url("Inter-SemiBold.woff?v=3.15") format("woff");
 }
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 600;
-  font-display: swap;
-  src: url("Inter-SemiBoldItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-SemiBoldItalic.woff?v=3.15") format("woff");
-}
 
 @font-face {
   font-family: 'Inter';
@@ -108,31 +33,6 @@
   src: url("Inter-Bold.woff2?v=3.15") format("woff2"),
        url("Inter-Bold.woff?v=3.15") format("woff");
 }
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url("Inter-BoldItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-BoldItalic.woff?v=3.15") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url("Inter-ExtraBold.woff2?v=3.15") format("woff2"),
-       url("Inter-ExtraBold.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 800;
-  font-display: swap;
-  src: url("Inter-ExtraBoldItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-ExtraBoldItalic.woff?v=3.15") format("woff");
-}
 
 @font-face {
   font-family: 'Inter';

diff --git a/flychrono2.html b/flychrono2.html
@@ -8,8 +8,8 @@
     <title>About - Mark Ng</title>
 
     <!-- GLOBAL CSS & FONTS -->
-    <link rel="stylesheet" href="styles/global.css?version=13">
-    <link rel="stylesheet" href="styles/animation-styles.css">
+    <link rel="stylesheet" href="styles/global.css?version=14">
+    <link href="content/fonts/inter.css?version=1" rel="stylesheet">
     <link href="content/fonts/inter.css" rel="stylesheet">
 
     <link rel="stylesheet" href="styles/projects.css?version=1">
@@ -83,15 +83,18 @@ <h1>FlyChrono v2</h1>
                     <p>
                         This does not sound glamorous, but before my original FlyChrono
                         project, people had to buy another piece of software for $10 to do this.
-                        FlyChrono put an end to this and made it accessible to everyone.
+                        FlyChrono put an end to this and made it accessible to everyone, and is now open source.
                     </p>
                     <p>
                         The new version of FlyChrono included new features such as an 
                         improved UI, alarms, and more. 
                     </p>
+                    <p>
+                        <a href="https://github.com/cag2mark/flychrono" target="_blank">Source code</a>
+                    </p>
                 </div>
                 <div class="info-col">
-                    <img src="content/projects/flychrono-1.png" alt="FlyLive Studio Screenshot" class="project-screenshot">
+                    <img src="content/projects/flychrono-1.png" alt="FlyChrono Screenshot" class="project-screenshot">
                 </div>
             </div>
         </div>

diff --git a/flylivestudio.html b/flylivestudio.html
@@ -8,8 +8,8 @@
     <title>About - Mark Ng</title>
 
     <!-- GLOBAL CSS & FONTS -->
-    <link rel="stylesheet" href="styles/global.css?version=13">
-    <link rel="stylesheet" href="styles/animation-styles.css">
+    <link rel="stylesheet" href="styles/global.css?version=14">
+    <link href="content/fonts/inter.css?version=1" rel="stylesheet">
     <link href="content/fonts/inter.css" rel="stylesheet">
 
     <link rel="stylesheet" href="styles/projects.css?version=1">

diff --git a/index.html b/index.html
@@ -8,8 +8,8 @@
     <title>Portfolio of Mark Ng</title>
 
     <!-- GLOBAL CSS & FONTS -->
-    <link rel="stylesheet" href="styles/global.css?version=16">
-    <link href="content/fonts/inter.css" rel="stylesheet">
+    <link rel="stylesheet" href="styles/global.css?version=14">
+    <link href="content/fonts/inter.css?version=1" rel="stylesheet">
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
@@ -229,7 +229,7 @@ <h2>FlyLive Studio</h2>
                 <a class="info-panel info-panel-link" href="flychrono2.html?from=home" target="_self">
                     <h2>FlyChrono v2</h2>
                     <p>
-                        FlyChrono v2 is a flight simulator time-syncing tool. It aims to
+                        FlyChrono v2 is an open source flight simulator time-syncing tool. It aims to
                         provide more and better features than existing paid solutions
                         for free, while improving on my FlyChrono application.
                     </p>

diff --git a/projects.html b/projects.html
@@ -8,8 +8,8 @@
     <title>Projects - Mark Ng</title>
 
     <!-- GLOBAL CSS & FONTS -->
-    <link rel="stylesheet" href="styles/global.css?version=13">
-    <link rel="stylesheet" href="styles/animation-styles.css">
+    <link rel="stylesheet" href="styles/global.css?version=14">
+    <link href="content/fonts/inter.css?version=1" rel="stylesheet">
     <link href="content/fonts/inter.css" rel="stylesheet">
 
     <link rel="stylesheet" href="styles/projects.css?version=1">
@@ -133,7 +133,7 @@ <h2>FlyLive Studio</h2>
                 <a class="info-panel info-panel-link" href="flychrono2.html" target="_self">
                     <h2>FlyChrono v2</h2>
                     <p>
-                        FlyChrono v2 is a flight simulator time-syncing tool. It aims to
+                        FlyChrono v2 is an open source flight simulator time-syncing tool. It aims to
                         provide more and better features than existing paid solutions
                         for free, while improving on my FlyChrono application.
                     </p>

diff --git a/styles/global.css b/styles/global.css
@@ -520,6 +520,41 @@ a.skip-main:focus, a.skip-main:active {
     transform: translateX(14px);
 }
 
+p > a {
+    color: white;
+    border-radius: 6px;
+    background-color: #ffffff17;
+
+    padding: 0 4px;
+    text-decoration: none;
+
+    transition: background-color 250ms ease;
+}
+
+p > a:hover {
+    background-color: #ffffff24;
+}
+
+p > a::after {
+    content: '🡕';
+    font-weight: normal;
+    font-style: normal;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    line-height: 1;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    font-feature-settings: 'liga';
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+    vertical-align: middle;
+    margin-bottom: 1px;
+    margin-left: 3px;
+    color: #aaaaaa;
+}
+
 .indented-link:hover {
     background-color: #ffffff10;
     color: rgb(231, 231, 231);