Fix font rendering in Safari

Updated config to tell browsers to only sythesise style (i.e. italics but not font weight).
iaincollins · Sep 5, 2024 · 1c56eef · 1c56eef
1 parent f15ec8a
commit 1c56eef
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 36 deletions.
diff --git a/components/tab-options.js b/components/tab-options.js
@@ -0,0 +1,5 @@
+export default function TabOptions() {
+  return (
+    <div/>
+  )
+}
diff --git a/css/components/tabs.css b/css/components/tabs.css
@@ -113,4 +113,13 @@
 .react-tabs__tab-panel {
   position: relative;
   z-index: 2;
+}
+
+.tab-tab_options {
+  background: var(--color-primary);
+  color: var(--color-text-inverted);
+  padding: .25rem 0.5rem;
+  font-family: "Jura", sans-serif;  
+  font-weight: bold;
+  font-size: 1rem;
 }
diff --git a/css/index.css b/css/index.css
@@ -35,6 +35,7 @@ i[class*=" icarus-terminal-"] {
 body,
 .scrollable {
   overflow-x: hidden !important;
+  font-synthesis: style;
 }
 
 @-moz-document url-prefix() {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ardent-www",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "description": "Ardent Industry",
   "main": "index.js",
   "scripts": {

diff --git a/pages/commodity/[commodity-name]/index.js b/pages/commodity/[commodity-name]/index.js
@@ -3,10 +3,10 @@ import { useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
+import TabOptions from 'components/tab-options'
 import Layout from 'components/layout'
 import CommodityImportOrders from 'components/commodity-import-orders'
 import CommodityExportOrders from 'components/commodity-export-orders'
-// import CommodityReport from 'components/commodity-report'
 import { getAllCommodities } from 'lib/commodities'
 import animateTableEffect from 'lib/animate-table-effect'
 import { API_BASE_URL } from 'lib/consts'
@@ -198,6 +198,9 @@ export default () => {
               <TabList>
                 <Tab>Importers</Tab>
                 <Tab>Exporters</Tab>
+                <TabOptions>
+                  Some tab options
+                </TabOptions>
               </TabList>
               <TabPanel>
                 {!imports && <div className='loading-bar loading-bar--tab' />}
@@ -208,40 +211,6 @@ export default () => {
                 {exports && <CommodityExportOrders commodities={exports} />}
               </TabPanel>
             </Tabs>}
-          {/*
-          <Tabs>
-            <TabList>
-              <Tab>Live<span className='is-hidden-mobile'> Data</span></Tab>
-              <Tab>Core<span className='is-hidden-mobile'> Systems</span></Tab>
-              <Tab>Colonia<span className='is-hidden-mobile'> Region</span></Tab>
-            </TabList>
-            <div className='tab-panel__container'>
-              <TabPanel>
-                <div className='tab-panel__header'>
-                  <p>
-                    Best prices for <strong>{commodity.name}</strong> anywhere in the galaxy
-                  </p>
-                </div>
-              </TabPanel>
-              <TabPanel>
-                <div className='tab-panel__header'>
-                  <p>
-                    Best bulk trading prices for <strong>{commodity.name}</strong> in
-                    systems near the Core Worlds (aka "The Bubble")
-                  </p>
-                </div>
-                <CommodityReport commodityName={commodity.name} reportName='core-systems-1000' />
-              </TabPanel>
-              <TabPanel>
-                <div className='tab-panel__header'>
-                  <p>
-                    Best bulk trading prices for <strong>{commodity.name}</strong> in systems near Colonia
-                  </p>
-                </div>
-                <CommodityReport commodityName={commodity.name} reportName='colonia-systems-1000' />
-              </TabPanel>
-            </div>
-          </Tabs> */}
         </div>}
     </Layout>
   )