Cleanup: Remove ligatures from code elements (#3614)

- Add `font-variant-ligatures: none;` to `code`
- Update `$monoFont` to a system default monospace font stack
- Removes unused static font assets

Author: garrying

assets/scss/common/_custom.scss

@@ -14,14 +14,6 @@
     src: url("/fonts/Gellix-Bold.woff2") format("woff2");
 }
 
-@font-face {
-    font-family: "Space Mono";
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url("/fonts/space-mono-regular-normal-latin.woff2") format("woff2");
-}
-
 @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
 
 @import "resets";

assets/scss/common/_fontfamilies.scss

@@ -1,3 +1,3 @@
 $TextFont: "Gellix", "Helvetica Neue", Arial, sans-serif;
 $titleFont: "Gellix", "Helvetica Neue", Arial, sans-serif;
-$monoFont: "Space Mono", monospace;
+$monoFont: ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;

assets/scss/components/_typography-enhanced.scss

@@ -42,7 +42,7 @@ h1 {
     font-weight: $font-bold;
     line-height: 1.1;
     margin-bottom: 1.5rem;
-    
+
     @media (min-width: 768px) {
         font-size: $text-5xl;
     }
@@ -53,7 +53,7 @@ h2 {
     font-weight: $font-semibold;
     margin-top: 3rem;
     margin-bottom: 1.25rem;
-    
+
     @media (min-width: 768px) {
         font-size: $text-4xl;
     }
@@ -64,7 +64,7 @@ h3 {
     font-weight: $font-semibold;
     margin-top: 2.5rem;
     margin-bottom: 1rem;
-    
+
     @media (min-width: 768px) {
         font-size: $text-3xl;
     }
@@ -98,15 +98,15 @@ p {
     line-height: $leading-relaxed;
     margin-bottom: 1.25rem;
     color: var(--body-color);
-    
+
     &.lead {
         font-size: $text-lg;
         line-height: $leading-relaxed;
         font-weight: $font-normal;
         color: var(--body-color);
         opacity: 0.9;
     }
-    
+
     &.small {
         font-size: $text-sm;
     }
@@ -118,17 +118,17 @@ a {
     text-decoration: none;
     transition: color 0.2s ease;
     position: relative;
-    
+
     &:hover {
         color: var(--secondary-2);
         text-decoration: underline;
     }
-    
+
     &.link-underline {
         text-decoration: underline;
         text-decoration-thickness: 1px;
         text-underline-offset: 2px;
-        
+
         &:hover {
             text-decoration-thickness: 2px;
         }
@@ -142,15 +142,15 @@ ul, ol {
     line-height: $leading-relaxed;
     margin-bottom: 1.25rem;
     padding-left: 1.5rem;
-    
+
     li {
         margin-bottom: 0.5rem;
-        
+
         &:last-child {
             margin-bottom: 0;
         }
     }
-    
+
     ul, ol {
         margin-top: 0.5rem;
         margin-bottom: 0.5rem;
@@ -168,19 +168,19 @@ blockquote {
     border-left: 4px solid var(--primary-1);
     padding-left: 1.5rem;
     margin: 2rem 0;
-    
+
     p {
         margin-bottom: 0;
     }
-    
+
     cite {
         display: block;
         font-size: $text-sm;
         font-style: normal;
         font-weight: $font-medium;
         margin-top: 1rem;
         opacity: 0.8;
-        
+
         &:before {
             content: "— ";
         }
@@ -193,13 +193,14 @@ code {
     font-size: 0.85em;
     padding: 0.2em 0.4em;
     background-color: var(--code-color);
+    font-variant-ligatures: none;
 }
 
 pre {
     font-family: $monoFont;
     font-size: $text-sm;
     line-height: $leading-normal;
-    
+
     code {
         padding: 0;
         background-color: transparent;
@@ -217,7 +218,7 @@ table {
         text-transform: uppercase;
         letter-spacing: 0.05em;
     }
-    
+
     td {
         font-family: $TextFont;
         font-size: $text-base;
@@ -288,14 +289,14 @@ small, .text-sm {
     body {
         font-size: $text-base;
     }
-    
+
     p {
         font-size: $text-base;
         line-height: $leading-normal;
     }
-    
+
     blockquote {
         font-size: $text-base;
         padding-left: 1rem;
     }
-}
+}

assets/scss/components/_typography-improvements.scss

@@ -7,11 +7,11 @@
   --docs-font-size: 16px;
   --docs-small-font: 14px;
   --docs-large-font: 18px;
-  
+
   // Improve line height for documentation
   --docs-line-height: 1.7;
   --docs-heading-line-height: 1.3;
-  
+
   // Enhanced spacing
   --docs-paragraph-margin: 1.35rem;
   --docs-list-spacing: 0.45rem;
@@ -33,35 +33,34 @@ body {
     margin-bottom: var(--docs-paragraph-margin);
     font-size: var(--docs-font-size);
     line-height: var(--docs-line-height);
-  
+
   }
-  
+
   // List improvements
   ul, ol {
     margin-bottom: var(--docs-paragraph-margin);
-    
+
     li {
       margin-bottom: var(--docs-list-spacing);
       line-height: var(--docs-line-height);
       font-size: var(--docs-font-size);
-      
+
       // Nested lists
       ul, ol {
         margin-top: var(--docs-list-spacing);
         margin-bottom: var(--docs-list-spacing);
       }
     }
   }
-  
+
   // Code blocks readability
   pre {
     font-size: var(--docs-small-font);
     line-height: 1.5;
     border-radius: 4px;
-    
+
     code {
       font-size: inherit;
-      font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
     }
   }
 }
@@ -73,7 +72,7 @@ h1, h2, h3, h4, h5, h6 {
   letter-spacing: -0.02em;
   margin-top: 2rem;
   margin-bottom: 1rem;
-  
+
   // Better heading hierarchy
   + p {
     margin-top: 0.75rem;
@@ -84,7 +83,7 @@ h1 {
   font-size: 2rem;
   font-weight: 700;
   margin-top: 0;
-  
+
   @media (max-width: 768px) {
     font-size: 1.875rem;
   }
@@ -94,7 +93,7 @@ h2 {
   font-size: 1.625rem;
   margin-top: 2.5rem;
   padding-top: 0.5rem;
-  
+
   @media (max-width: 768px) {
     font-size: 1.5rem;
   }
@@ -103,15 +102,15 @@ h2 {
 h3 {
   font-size: 1.5rem;
   margin-top: 2rem;
-  
+
   @media (max-width: 768px) {
     font-size: 1.25rem;
   }
 }
 
 h4 {
   font-size: 1.25rem;
-  
+
   @media (max-width: 768px) {
     font-size: 1.125rem;
   }
@@ -121,12 +120,12 @@ h4 {
 table {
   font-size: var(--docs-small-font);
   line-height: 1.6;
-  
+
   th {
     font-weight: 600;
     padding: 0.75rem 1rem;
   }
-  
+
   td {
     padding: 0.75rem 1rem;
   }
@@ -141,10 +140,10 @@ blockquote {
   padding-left: 1.5rem;
   margin: 1.5rem 0;
   color: var(--muted-text-color);
-  
+
   p {
     margin-bottom: 0.75rem;
-    
+
     &:last-child {
       margin-bottom: 0;
     }
@@ -157,10 +156,10 @@ blockquote {
   font-size: var(--docs-font-size);
   line-height: var(--docs-line-height);
   padding: 1.25rem;
-  
+
   p {
     margin-bottom: 0.75rem;
-    
+
     &:last-child {
       margin-bottom: 0;
     }
@@ -173,11 +172,11 @@ a {
   text-decoration-thickness: 1px;
   text-underline-offset: 0.15em;
   transition: all 0.2s ease;
-  
+
   &:hover {
     text-decoration-thickness: 2px;
   }
-  
+
   // Exception for navigation links
   &.nav-link,
   &.btn {
@@ -198,14 +197,14 @@ a {
     font-size: 12pt;
     line-height: 1.5;
   }
-  
+
   h1 { font-size: 20pt; }
   h2 { font-size: 18pt; }
   h3 { font-size: 16pt; }
   h4 { font-size: 14pt; }
-  
+
   p, li {
     font-size: 12pt;
     line-height: 1.5;
   }
-}
+}