Move to Inter font and minimal details

src/assets/styles/base.css

@@ -15,3 +15,14 @@
 [astro-icon].icon-bold > * {
   stroke-width: 2;
 }
+
+[data-aw-toggle-menu] path {
+  @apply transition;
+}
+[data-aw-toggle-menu].expanded g > path:first-child {
+  @apply -rotate-45 translate-y-[15px] translate-x-[-3px];
+}
+
+[data-aw-toggle-menu].expanded g > path:last-child {
+  @apply rotate-45 translate-y-[-8px] translate-x-[14px];
+}

src/components/atoms/Fonts.astro

@@ -4,4 +4,4 @@
 <!-- Google Fonts -->
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet" />

src/components/core/ToggleMenu.astro

@@ -13,16 +13,3 @@ const {
 <button type="button" class={className} aria-label={label} data-aw-toggle-menu>
   <Icon name={iconName} class={iconClass} optimize={false} />
 </button>
-
-<style is:inline>
-  [data-aw-toggle-menu] path {
-    @apply transition;
-  }
-  [data-aw-toggle-menu].expanded g > path:first-child {
-    @apply -rotate-45 translate-y-[15px] translate-x-[-3px];
-  }
-
-  [data-aw-toggle-menu].expanded g > path:last-child {
-    @apply rotate-45 translate-y-[-8px] translate-x-[14px];
-  }
-</style>

src/components/widgets/CallToAction.astro

@@ -18,7 +18,7 @@ const {} = Astro.props;
 
         <div class="mt-6">
           <a
-            class="btn text-white bg-primary-600 hover:bg-primary-800 mb-4 sm:mb-0 font-bold"
+            class="btn text-white bg-primary-600 hover:bg-primary-800 mb-4 sm:mb-0"
             href="https://github.com/onwidget/astrowind"
             target="_blank"
             rel="noopener"

src/components/widgets/Features3.astro

@@ -23,7 +23,7 @@ const {} = Astro.props;
 
               <div class="w-full">
                 <a
-                  class="btn text-white bg-primary-600 hover:bg-primary-800 mb-4 sm:mb-0 font-bold"
+                  class="btn text-white bg-primary-600 hover:bg-primary-800 mb-4 sm:mb-0"
                   href="https://github.com/onwidget/astrowind"
                   target="_blank"
                   rel="noopener"

src/components/widgets/Hero.astro

@@ -20,13 +20,13 @@ const {} = Astro.props;
         <div class="max-w-3xl mx-auto">
           <p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
             AstroWind is a production ready template to start your new website using Astro + Tailwind CSS. It has been
-            designed following Best Practices, SEO, Accessibility, Dark Mode, great Page Speed, image optimization,
+            designed following Best Practices, SEO, Accessibility, <span class="inline sm:hidden">... </span><span class="hidden sm:inline">Dark Mode, Great Page Speed, image optimization,
-            sitemap generation and more.
+            sitemap generation and more.</span>
           </p>
           <div class="max-w-none px-6 flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
             <div class="flex w-full sm:w-auto">
               <a
-                class="btn text-white border border-primary-600 bg-primary-600 hover:bg-primary-800 hover:border-primary-800 sm:mb-0 font-bold w-full"
+                class="btn text-white border border-primary-600 bg-primary-600 hover:bg-primary-800 hover:border-primary-800 sm:mb-0 w-full"
                 href="https://github.com/onwidget/astrowind"
                 target="_blank"
                 rel="noopener"

tailwind.config.cjs

@@ -10,7 +10,7 @@ module.exports = {
         secondary: colors.pink,
       },
       fontFamily: {
-        sans: ["'IBM Plex Sans'", ...defaultTheme.fontFamily.sans],
+        sans: ["'Inter'", ...defaultTheme.fontFamily.sans],
       },
     },
   },