feat: use variable fonts from fontsources

kuuhakuDev · Sep 17, 2023 · a8c9e31 · a8c9e31
1 parent 0986fe8
commit a8c9e31
Show file tree

Hide file tree

Showing 22 changed files with 118 additions and 108 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -1,19 +1,4 @@
 import { defineConfig } from 'astro/config';
-import Unfonts from 'unplugin-fonts/astro'
 
 // https://astro.build/config
-export default defineConfig({
-  integrations: [
-    Unfonts({
-      google: {
-        families: [
-          'Cabin',
-          {
-            name: 'Open Sans',
-            styles: 'wght@300;400',
-          },
-        ],
-      },
-    })
-  ]
-});
+export default defineConfig({});
diff --git a/package.json b/package.json
@@ -36,6 +36,8 @@
     "simplebar": "6.2.5"
   },
   "devDependencies": {
+    "@fontsource-variable/cabin": "^5.0.9",
+    "@fontsource-variable/open-sans": "^5.0.13",
     "autoprefixer": "10.4.15",
     "npm-run-all": "4.1.5",
     "unplugin-fonts": "^1.0.3"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -65,7 +65,7 @@
       </div>
     </div>
     <!-- Copyright -->
-    <p class="k-copyright">© 2018-2021 | Krypton. All Rights Reserved</p>
+    <p class="k-copyright">© 2018-2023 | Krypton. All Rights Reserved</p>
     <br />
     <!-- Made by -->
     <p class="coded-by">

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -45,23 +45,23 @@
       <div class="navbar-end">
         <!-- Menu item -->
         <div class="navbar-item is-nav-link">
-          <a class="is-centered-responsive" href="token">Token</a>
+          <a class="is-centered-responsive" href="/token">Token</a>
         </div>
         <!-- Menu item -->
         <div class="navbar-item is-nav-link">
-          <a class="is-centered-responsive" href="ico">Ico</a>
+          <a class="is-centered-responsive" href="/ico">Ico</a>
         </div>
         <!-- Menu item -->
         <div class="navbar-item is-nav-link">
-          <a class="is-centered-responsive" href="roadmap">Roadmap</a>
+          <a class="is-centered-responsive" href="/roadmap">Roadmap</a>
         </div>
         <!-- Menu item -->
         <div class="navbar-item is-nav-link">
-          <a class="is-centered-responsive" href="blog">Media</a>
+          <a class="is-centered-responsive" href="/blog">Media</a>
         </div>
         <!-- Menu item -->
         <div class="navbar-item is-nav-link">
-          <a class="is-centered-responsive" href="#" target="_blank">
+          <a class="is-centered-responsive" href="#">
             <img class="telegram" src="/img/logo/telegram.svg" alt="" />
             Telegram
           </a>

diff --git a/src/components/NavbarClone.astro b/src/components/NavbarClone.astro
@@ -47,19 +47,19 @@
       <div class="navbar-end">
         <!-- Menu item -->
         <div class="navbar-item is-nav-link">
-          <a class="is-centered-responsive" href="token">Token</a>
+          <a class="is-centered-responsive" href="/token">Token</a>
         </div>
         <!-- Menu item -->
         <div class="navbar-item is-nav-link">
-          <a class="is-centered-responsive" href="ico">Ico</a>
+          <a class="is-centered-responsive" href="/ico">Ico</a>
         </div>
         <!-- Menu item -->
         <div class="navbar-item is-nav-link">
-          <a class="is-centered-responsive" href="roadmap">Roadmap</a>
+          <a class="is-centered-responsive" href="/roadmap">Roadmap</a>
         </div>
         <!-- Menu item -->
         <div class="navbar-item is-nav-link">
-          <a class="is-centered-responsive" href="blog">Media</a>
+          <a class="is-centered-responsive" href="/blog">Media</a>
         </div>
         <!-- Menu item -->
         <div class="navbar-item is-nav-link">

diff --git a/src/js/libs/components/tabs/tabs.js b/src/js/libs/components/tabs/tabs.js
@@ -8,7 +8,7 @@ export function initTabs() {
 
         setupCountdown() {
             // Set the date we're counting down to
-            var countDownDate = new Date("Oct 24, 2021 07:00:00").getTime();
+            var countDownDate = new Date().getTime() + (1000 * 60 * 60 * 24 * 7); // 7 days from now
 
             // Update the count down every 1 second
             var x = setInterval(function () {

diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
@@ -1,8 +1,11 @@
 ---
 import { ViewTransitions } from 'astro:transitions';
-import Unfont from 'unplugin-fonts/astro/component.astro';
 import Footer from '../components/Footer.astro'
 import BackToTop from '../components/BackToTop.astro'
+
+import '@fontsource-variable/cabin/index.css';
+import '@fontsource-variable/open-sans/index.css';
+
 import 'simplebar/dist/simplebar.min.css'
 import '../styles/main.scss'
 const {title} = Astro.props
@@ -12,7 +15,6 @@ const {title} = Astro.props
 <html dir="ltr" lang="en">
   <head>
     <meta charset="UTF-8" />
-    <Unfont />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Krypton {'- ' + title}</title>

diff --git a/src/layouts/Minimal.astro b/src/layouts/Minimal.astro
@@ -1,7 +1,10 @@
 ---
 import { ViewTransitions } from 'astro:transitions';
-import Unfont from 'unplugin-fonts/astro/component.astro';
 import BackToTop from '../components/BackToTop.astro'
+
+import '@fontsource-variable/cabin/index.css';
+import '@fontsource-variable/open-sans/index.css';
+
 import 'simplebar/dist/simplebar.min.css'
 import 'plyr/dist/plyr.css'
 import '../styles/main.scss'
@@ -12,7 +15,6 @@ const {title} = Astro.props
 <html dir="ltr" lang="en">
   <head>
     <meta charset="UTF-8" />
-    <Unfont />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Krypton {'- ' + title}</title>

diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -51,7 +51,7 @@ const title = "Blog";
             <div class="content-wrapper">
               <!-- Post -->
               <div class="blog-post">
-                <a href="blog-single">
+                <a href="/blog-single">
                   <!-- Featured image -->
                   <div class="featured-image">
                     <img src="/img/media/post4.svg" alt="" />
@@ -95,7 +95,7 @@ const title = "Blog";
 
               <!-- Post -->
               <div class="blog-post">
-                <a href="blog-single">
+                <a href="/blog-single">
                   <!-- Featured image -->
                   <div class="featured-image">
                     <img src="/img/media/post1.svg" alt="" />
@@ -139,7 +139,7 @@ const title = "Blog";
 
               <!-- Post -->
               <div class="blog-post">
-                <a href="blog-single">
+                <a href="/blog-single">
                   <!-- Featured image -->
                   <div class="featured-image">
                     <img src="/img/media/post5.svg" alt="" />
@@ -183,7 +183,7 @@ const title = "Blog";
 
               <!-- Post -->
               <div class="blog-post">
-                <a href="blog-single">
+                <a href="/blog-single">
                   <!-- Featured image -->
                   <div class="featured-image">
                     <img src="/img/media/post2.svg" alt="" />
@@ -227,7 +227,7 @@ const title = "Blog";
 
               <!-- Post -->
               <div class="blog-post">
-                <a href="blog-single">
+                <a href="/blog-single">
                   <!-- Featured image -->
                   <div class="featured-image">
                     <img src="/img/media/post3.svg" alt="" />

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -373,9 +373,9 @@ const title = "Home";
                   :class="{
                     'is-active': activeTab === 'tab-1',
                     '': activeTab != 'tab-1'
-                }"
+                  }"
                 >
-                  <a href="javascript:void(0);">ICO</a>
+                  <a href="#">ICO</a>
                 </div>
                 <div
                   @click="switchTabs($event)"
@@ -386,7 +386,7 @@ const title = "Home";
                     '': activeTab != 'tab-2'
                 }"
                 >
-                  <a href="javascript:void(0);">TOKEN</a>
+                  <a href="#">TOKEN</a>
                 </div>
                 <div
                   @click="switchTabs($event)"
@@ -397,7 +397,7 @@ const title = "Home";
                     '': activeTab != 'tab-3'
                 }"
                 >
-                  <a href="javascript:void(0);">PROFIT</a>
+                  <a href="#">PROFIT</a>
                 </div>
                 <div
                   @click="switchTabs($event)"
@@ -408,7 +408,7 @@ const title = "Home";
                     '': activeTab != 'tab-4'
                 }"
                 >
-                  <a href="javascript:void(0);">BOUNTY</a>
+                  <a href="#">BOUNTY</a>
                 </div>
                 <div class="slider"></div>
               </div>
@@ -438,21 +438,21 @@ const title = "Home";
                           <span>Presale</span>
                           <br />
                           <span class="item-content"
-                            >Presale starts on Apr 8 2021 (9:00am GMT)</span
+                            >Presale starts on Apr 8 2023 (9:00am GMT)</span
                           >
                         </li>
                         <li class="animated preFadeInUp fadeInUp">
                           <span>Sale</span>
                           <br />
                           <span class="item-content"
-                            >Token sales starts on Jun 8 2021 (12:00am GMT)</span
+                            >Token sales starts on Jun 8 2023 (12:00am GMT)</span
                           >
                         </li>
                         <li class="animated preFadeInUp fadeInUp">
                           <span>Bonus</span>
                           <br />
                           <span class="item-content"
-                            >Bonus starts on July 29 2021 (12:00am GMT)</span
+                            >Bonus starts on July 29 2023 (12:00am GMT)</span
                           >
                         </li>
                       </ul>

diff --git a/src/pages/roadmap.astro b/src/pages/roadmap.astro
@@ -24,7 +24,7 @@ const title = "Roadmap";
               <img src="/img/illustrations/world.svg" />
             </div>
             <h1 class="title is-2 is-light is-semibold is-spaced main-title">
-              2021 Roadmap
+              2023 Roadmap
             </h1>
             <h2 class="subtitle is-5 is-light is-thin">
               Cryptocurrency brought to the next level. Join our ICO for

diff --git a/src/pages/token.astro b/src/pages/token.astro
@@ -33,7 +33,7 @@ const title = "Token";
             <!-- CTA -->
             <p>
               <a
-                href="start"
+                href="/#start"
                 class="button k-button k-primary raised has-gradient is-fat is-bold"
               >
                 <span class="text">More details</span>
@@ -152,7 +152,7 @@ const title = "Token";
                   <div class="document-block has-text-centered">
                     <img src="/img/icons/whitepaper.svg" />
                     <a
-                      href="start"
+                      href="/#start"
                       class="button k-button k-primary raised has-gradient is-bold"
                     >
                       <span class="text">Whitepaper</span>
@@ -165,7 +165,7 @@ const title = "Token";
                   <div class="document-block has-text-centered">
                     <img src="/img/icons/techpaper.svg" />
                     <a
-                      href="start"
+                      href="/#start"
                       class="button k-button k-primary raised has-gradient is-bold"
                     >
                       <span class="text">Techpaper</span>
@@ -178,7 +178,7 @@ const title = "Token";
                   <div class="document-block has-text-centered">
                     <img src="/img/icons/livechat.svg" />
                     <a
-                      href="start"
+                      href="/#start"
                       class="button k-button k-secondary raised has-gradient is-bold"
                     >
                       <span class="text">Live Chat</span>
@@ -271,7 +271,7 @@ const title = "Token";
           <!-- CTA -->
           <div class="cta-wrapper has-text-centered">
             <a
-              href="start"
+              href="/#start"
               class="button k-button k-primary raised has-gradient is-fat is-bold"
             >
               <span class="text">Join the ICO</span>

diff --git a/src/styles/abstracts/_theme-default.scss b/src/styles/abstracts/_theme-default.scss
@@ -7,14 +7,15 @@ Default theme variables
 /***
 TABLE OF CONTENTS
 =============================================================================
-0. Variables
-1. Shadow variables
-2. Gradient mixins
+0. Colors Variables
+1. Fonts Variables
+2. Shadow variables
+3. Gradient mixins
 =============================================================================
 ***/
 
 /* ==========================================================================
-0. Color Variables
+0. Colors Variables
 ========================================================================== */
 
 $fullhd-enabled: false;
@@ -25,7 +26,14 @@ $secondary: #00ff99;
 $secondary-accent: #33ccff;
 
 /* ==========================================================================
-1. Shadow variables
+1. Fonts Variables
+========================================================================== */
+
+$font: 'Open Sans Variable', sans-serif;
+$font-heading: 'Cabin Variable', sans-serif;
+
+/* ==========================================================================
+2. Shadow variables
 ========================================================================== */
 
 //Base shadow
@@ -54,7 +62,7 @@ $secondary-box-shadow: 0 14px 26px -12px $secondary-shadow-from, 0 4px 23px 0px
 }
 
 /* ==========================================================================
-2. Gradient mixins
+3. Gradient mixins
 ========================================================================== */
 
 @mixin theme-hero-gradient {