Merge pull request #13 from Netcentric/feature/na-setup-fonts

NA- Set up Gellix fonts and structured assets folder

apps/frontend/src/App.scss

@@ -40,3 +40,34 @@
     transform: rotate(360deg);
   }
 }
+
+// Fonts
+$gellix-font-family: "Gellix";
+$gellix-fonts-path: "./stories/assets/fonts/";
+$font-weight-thin: 100;
+$font-weight-light: 300;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+$font-weight-black: 900;
+
+@font-face {
+  font-family: $gellix-font-family;
+  src: url("./stories/assets/fonts/Gellix-Light_R.woff2") format("woff2");
+  font-weight: $font-weight-light;
+}
+
+@font-face {
+  font-family: $gellix-font-family;
+  src: url("./stories/assets/fonts/Gellix-Regular_R.woff2") format("woff2");
+  font-weight: $font-weight-regular;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: $gellix-font-family;
+  src: url("./stories/assets/fonts/Gellix-SemiBold_R.woff2") format("woff2");
+  font-weight: $font-weight-semibold;
+  font-style: normal;
+}

apps/frontend/src/App.tsx

@@ -11,7 +11,7 @@ function App() {
           Edit <code>src/App.tsx</code> and save to reload.
         </p>
         <a
-          className="App-link"
+          className="App-link font-gellix"
           href="https://reactjs.org"
           target="_blank"
           rel="noopener noreferrer"

apps/frontend/src/stories/Configure.mdx

@@ -1,19 +1,19 @@
 import { Meta } from "@storybook/blocks";
 
-import Github from "./assets/github.svg";
-import Discord from "./assets/discord.svg";
-import Youtube from "./assets/youtube.svg";
-import Tutorials from "./assets/tutorials.svg";
-import Styling from "./assets/styling.png";
-import Context from "./assets/context.png";
-import Assets from "./assets/assets.png";
-import Docs from "./assets/docs.png";
-import Share from "./assets/share.png";
-import FigmaPlugin from "./assets/figma-plugin.png";
-import Testing from "./assets/testing.png";
-import Accessibility from "./assets/accessibility.png";
-import Theming from "./assets/theming.png";
-import AddonLibrary from "./assets/addon-library.png";
+import Github from "./assets/images/github.svg";
+import Discord from "./assets/images/discord.svg";
+import Youtube from "./assets/images/youtube.svg";
+import Tutorials from "./assets/images/tutorials.svg";
+import Styling from "./assets/images/styling.png";
+import Context from "./assets/images/context.png";
+import Assets from "./assets/images/assets.png";
+import Docs from "./assets/images/docs.png";
+import Share from "./assets/images/share.png";
+import FigmaPlugin from "./assets/images/figma-plugin.png";
+import Testing from "./assets/images/testing.png";
+import Accessibility from "./assets/images/accessibility.png";
+import Theming from "./assets/images/theming.png";
+import AddonLibrary from "./assets/images/addon-library.png";
 
 export const RightArrow = () => <svg 
     viewBox="0 0 14 14" 

apps/frontend/tailwind.config.js

@@ -12,6 +12,9 @@ module.exports = {
       "fluorescent-blue": "#26EFE9",
       "waterspout": "#A8F9F6",
       "midnight-blue": "#000048",
+    },
+    fontFamily:{
+      gellix: ["Gellix", "sans-serif"],
     }
   },
   plugins: [],