feat: migrate to self-hosted @fontsource/nunito-sans font

7 files changed, 16 insertions, 15 deletions

diff --git a/src/frontend/tubo/components/items.cljs b/src/frontend/tubo/components/items.cljs
index cdc062d..79599a3 100644
--- a/src/frontend/tubo/components/items.cljs
+++ b/src/frontend/tubo/components/items.cljs
@@ -51,7 +51,7 @@
           [:div.flex.items-center.my-2
            (if uploader-url
              [:a {:href (rfe/href :tubo.routes/channel nil {:url uploader-url}) :title uploader-name}
-              [:h1.line-clamp-1.text-neutral-800.dark:text-gray-300.font-bold.pr-2.break-all
+              [:h1.line-clamp-1.text-neutral-800.dark:text-gray-300.font-semibold.pr-2.break-all
                {:class "[overflow-wrap:anywhere]"}
                uploader-name]]
              [:h1.line-clamp-1.text-neutral-800.dark:text-gray-300.font-bold.pr-2 uploader-name])
diff --git a/src/frontend/tubo/components/layout.cljs b/src/frontend/tubo/components/layout.cljs
index 0b894ec..ca1ee08 100644
--- a/src/frontend/tubo/components/layout.cljs
+++ b/src/frontend/tubo/components/layout.cljs
@@ -54,7 +54,7 @@
 (defn content-header
   [heading & children]
   [:div.flex.items-center.justify-between.mt-6
-   [:h1.text-3xl.font-nunito-semibold.line-clamp-1.mr-6
+   [:h1.text-3xl.line-clamp-1.mr-6.font-semibold
     {:title heading}
     heading]
    (map-indexed #(with-meta %2 {:key %1}) children)])
@@ -118,7 +118,7 @@
 (defn select-input
   [label key value options on-change]
   [generic-input label
-   [:select.focus:ring-transparent.bg-transparent.font-bold.font-nunito
+   [:select.focus:ring-transparent.bg-transparent.font-bold
     {:value     value
      :on-change on-change}
     (for [[i option] (map-indexed vector options)]
diff --git a/src/frontend/tubo/components/modal.cljs b/src/frontend/tubo/components/modal.cljs
index fcb8463..0624856 100644
--- a/src/frontend/tubo/components/modal.cljs
+++ b/src/frontend/tubo/components/modal.cljs
@@ -7,7 +7,7 @@
   [title body & extra-buttons]
   [:div.bg-white.max-h-full.dark:bg-neutral-900.z-20.p-5.rounded.flex.gap-y-5.flex-col.border.border-neutral-300.dark:border-stone-700.flex-auto.shrink-0
    [:div.flex.justify-between.shrink-0
-    [:h1.text-xl.font-nunito-semibold title]
+    [:h1.text-xl.font-semibold title]
     [:button {:on-click #(rf/dispatch [:tubo.events/close-modal])}
      [:i.fa-solid.fa-close]]]
    [:div.flex-auto.overflow-y-auto body]
diff --git a/src/frontend/tubo/components/navigation.cljs b/src/frontend/tubo/components/navigation.cljs
index cfa5345..f30f183 100644
--- a/src/frontend/tubo/components/navigation.cljs
+++ b/src/frontend/tubo/components/navigation.cljs
@@ -56,7 +56,7 @@
   [:div.relative.flex.flex-col.items-center-justify-center.text-white.px-2
    {:style {:background service-color}}
    [:div.w-full.box-border.z-10.lg:z-0
-    [:select.border-none.focus:ring-transparent.bg-blend-color-dodge.font-bold.font-nunito.w-full
+    [:select.border-none.focus:ring-transparent.bg-blend-color-dodge.font-bold.w-full
      {:on-change #(rf/dispatch [::events/change-service-kiosk (js/parseInt (.. % -target -value))])
       :value     service-id
       :style     {:background "transparent"}}
@@ -104,12 +104,12 @@
    [layout/focus-overlay #(rf/dispatch [::events/toggle-mobile-nav]) show-mobile-nav?]
    [:div.fixed.overflow-x-hidden.min-h-screen.w-60.top-0.ease-in-out.delay-75.bg-white.dark:bg-neutral-900.z-20
     {:class (str "transition-[right] " (if show-mobile-nav? "right-0" "right-[-245px]"))}
-     [:h3.text-3xl.font-bold.px-4.font-roboto "Tubo"]]
     [:div.flex.justify-center.py-4.items-center.text-white {:style {:background service-color}}
      [layout/logo :height 75 :width 75]
+     [:h3.text-3xl.font-bold "Tubo"]]
     [services-dropdown services service-id service-color]
     [:div.relative.py-4
-     [:ul.flex.font-roboto.flex-col
+     [:ul.flex.flex-col
       (for [kiosk available-kiosks]
         ^{:key kiosk}
         [mobile-nav-item
@@ -120,7 +120,7 @@
          :active? (kiosk-active? (assoc kiosk-args :kiosk kiosk))])]]
     [:div.relative.dark:border-neutral-800.border-gray-300.pt-4
      {:class "border-t-[1px]"}
-     [:ul.flex.flex-col.font-roboto
+     [:ul.flex.flex-col
       [mobile-nav-item (rfe/href ::routes/bookmarks) "fa-solid fa-bookmark" "Bookmarks"]
       [mobile-nav-item (rfe/href ::routes/settings) "fa-solid fa-cog" "Settings"]
       [mobile-nav-item "https://github.com/migalmoreno/tubo"
@@ -136,7 +136,7 @@
         show-mobile-nav?                         @(rf/subscribe [:show-mobile-nav])
         show-search-form?                        @(rf/subscribe [:show-search-form])
         {:keys [available-kiosks default-kiosk]} @(rf/subscribe [:kiosks])]
-    [:nav.sticky.flex.items-center.px-2.h-14.top-0.z-20.font-nunito
+    [:nav.sticky.flex.items-center.px-2.h-14.top-0.z-20
      {:style {:background service-color}}
      [:div.flex.flex-auto.items-center
       [:div.ml-2
diff --git a/src/frontend/tubo/views.cljs b/src/frontend/tubo/views.cljs
index 3abc4e2..25070da 100644
--- a/src/frontend/tubo/views.cljs
+++ b/src/frontend/tubo/views.cljs
@@ -12,10 +12,10 @@
   (let [current-match   @(rf/subscribe [:current-match])
         {:keys [theme]} @(rf/subscribe [:settings])]
     [:div {:class (when (= theme "dark") "dark")}
-     [:div.min-h-screen.flex.flex-col.h-full.dark:text-white.dark:bg-neutral-900.relative
+     [:div.min-h-screen.flex.flex-col.h-full.dark:text-white.dark:bg-neutral-900.relative.font-nunito-sans
       [navigation/navbar current-match]
-      [:div.flex.flex-col.flex-auto.justify-between.relative.font-nunito
       [notification/notifications-panel]
+      [:div.flex.flex-col.flex-auto.justify-between.relative
        (when-let [view (-> current-match :data :view)]
          [view current-match])
        [queue/queue]
diff --git a/src/frontend/tubo/views/channel.cljs b/src/frontend/tubo/views/channel.cljs
index 30eab12..6fc61fc 100644
--- a/src/frontend/tubo/views/channel.cljs
+++ b/src/frontend/tubo/views/channel.cljs
@@ -27,7 +27,7 @@
               [:div.flex.items-center.my-4.mx-2
                [layout/uploader-avatar avatar name]
                [:div.m-4
-                [:h1.text-2xl.font-nunito-semibold.line-clamp-1 name]
+                [:h1.text-2xl.line-clamp-1.font-semibold {:title name} name]
                 (when subscriber-count
                   [:div.flex.my-2.items-center
                    [:i.fa-solid.fa-users.text-xs]
diff --git a/src/frontend/tubo/views/stream.cljs b/src/frontend/tubo/views/stream.cljs
index bc0fd5e..097ff90 100644
--- a/src/frontend/tubo/views/stream.cljs
+++ b/src/frontend/tubo/views/stream.cljs
@@ -60,7 +60,7 @@
           [:div.flex.flex-col
            [:div.flex.items-center.justify-between.pt-4.my-3
             [:div.flex-auto
-             [:h1.text-lg.sm:text-2xl.font-nunito-bold.line-clamp-1 name]]
+             [:h1.text-lg.sm:text-2xl.font-bold.line-clamp-1 {:title name} name]]
             [:div.flex.flex-auto.justify-end.items-center
              [layout/popover-menu !stream-menu-active?
               [{:label    "Add to queue"
@@ -86,8 +86,9 @@
              [layout/uploader-avatar uploader-avatar uploader-name
               (rfe/href :tubo.routes/channel nil {:url uploader-url})]
              [:div.mx-3
-              [:a.line-clamp-1.font-nunito-semibold
-               {:href (rfe/href :tubo.routes/channel nil {:url uploader-url})}
+              [:a.line-clamp-1.font-semibold
+               {:href  (rfe/href :tubo.routes/channel nil {:url uploader-url})
+                :title uploader-name}
                uploader-name]
               (when subscriber-count
                 [:div.flex.my-2.items-center