Some general improvements.

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="w-full min-h-screen h-full" :class="{ dark: darkMode, reset: !darkMode }">
+    <div class="w-full min-h-screen h-full p-5 reset" :class="{ dark: darkMode }">
         <Navigation />
         <router-view v-slot="{ Component }">
             <keep-alive :max="5">
@@ -110,6 +110,7 @@ b {
 
 * {
     scrollbar-color: #15191a #444a4e;
+    @apply font-sans;
 }
 
 .video-grid {
@@ -124,6 +125,10 @@ b {
     @apply text-black bg-white;
 }
 
+.auto {
+    @apply dark:(text-white bg-dark-900);
+}
+
 .dark {
     @apply text-white bg-dark-900;
 }

src/components/Comment.vue

@@ -2,15 +2,14 @@
     <div class="comment flex">
         <img
             :src="comment.thumbnail"
-            class="comment-avatar rounded-full uk-margin-right"
+            class="comment-avatar rounded-full w-12 h-12"
             height="48"
             width="48"
-            style="width: 48px; height: 48px"
             loading="lazy"
             alt="Avatar"
         />
 
-        <div class="comment-content">
+        <div class="comment-content pl-2">
             <div class="comment-header">
                 <div v-if="comment.pinned" class="comment-pinned uk-text-meta">
                     <font-awesome-icon icon="thumbtack"></font-awesome-icon>&nbsp; {{ $t("comment.pinned_by") }}
@@ -26,14 +25,13 @@
                     {{ comment.commentedTime }}
                 </div>
             </div>
-            <div class="comment-body" style="white-space: pre-wrap">
+            <div class="whitespace-pre-wrap">
                 {{ comment.commentText }}
             </div>
             <div class="comment-footer uk-margin-small-top uk-text-meta">
-                <font-awesome-icon icon="thumbs-up" style="margin-right: 4px"></font-awesome-icon>
+                <font-awesome-icon icon="thumbs-up"></font-awesome-icon>
-                <span>{{ numberFormat(comment.likeCount) }}</span>
+                <span class="ml-1">{{ numberFormat(comment.likeCount) }}</span>
-                &nbsp;
+                <font-awesome-icon class="ml-1" v-if="comment.hearted" icon="heart"></font-awesome-icon>
-                <font-awesome-icon v-if="comment.hearted" icon="heart"></font-awesome-icon>
             </div>
             <template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)">
                 <div @click="loadReplies">
@@ -49,12 +47,8 @@
                     <font-awesome-icon icon="level-up-alt" />
                 </div>
             </template>
-            <div v-show="showingReplies" v-if="replies" class="replies uk-width-4-5@xl uk-width-3-4@s uk-width-1">
+            <div v-show="showingReplies" v-if="replies" class="replies">
-                <div
+                <div v-for="reply in replies" :key="reply.commentId" class="w-full">
-                    v-for="reply in replies"
-                    :key="reply.commentId"
-                    class="uk-tile-default uk-align-left uk-width-expand"
-                >
                     <Comment :comment="reply" :uploader="uploader" :video-id="videoId" />
                 </div>
                 <div v-if="nextpage" @click="loadReplies">

src/components/Navigation.vue

@@ -1,6 +1,6 @@
 <template>
-    <nav class="grid grid-cols-3 px-2 sm:px-4 py-2.5 w-full relative">
+    <nav class="container flex flex-wrap items-center justify-between px-2 sm:px-4 py-2.5 w-full relative">
-        <div>
+        <div class="">
             <router-link class="flex font-bold text-3xl items-center font-sans font-bold" to="/"
                 ><img
                     alt="logo"
@@ -11,10 +11,10 @@
                 />iped</router-link
             >
         </div>
-        <div class="flex justify-center items-center <md:hidden">
+        <div class="<md:hidden">
             <input
                 v-model="searchText"
-                class="input !w-72 h-10"
+                class="input !w-72 !h-10"
                 type="text"
                 role="search"
                 :title="$t('actions.search')"
@@ -25,8 +25,8 @@
                 @blur="onInputBlur"
             />
         </div>
-        <div>
+        <div class="float-right">
-            <ul class="flex float-right text-1xl children:pl-3">
+            <ul class="flex text-1xl children:pl-3">
                 <li>
                     <router-link v-t="'titles.preferences'" to="/preferences" />
                 </li>
@@ -48,7 +48,7 @@
     <div class="w-full md:hidden">
         <input
             v-model="searchText"
-            class="input"
+            class="input !h-10 !w-full"
             type="text"
             role="search"
             :title="$t('actions.search')"

src/components/WatchVideo.vue

@@ -81,7 +81,7 @@
 
             <hr />
 
-            <button class="btn" @click="showDesc = !showDesc">
+            <button class="btn mb-2" @click="showDesc = !showDesc">
                 {{ showDesc ? $t("actions.minimize_description") : $t("actions.show_description") }}
             </button>
             <!-- eslint-disable-next-line vue/no-v-html -->

src/main.js

@@ -190,6 +190,9 @@ const mixin = {
         },
     },
     computed: {
+        theme() {
+            return this.getEffectiveTheme();
+        },
         backgroundColor() {
             return this.getEffectiveTheme() === "light" ? "#fff" : "#0b0e0f";
         },

windi.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+    darkMode: "media",
+    theme: {
+        extend: {
+            fontFamily: {
+                sans: [
+                    "-apple-system",
+                    "BlinkMacSystemFont",
+                    "Segoe UI",
+                    "Roboto",
+                    "Helvetica Neue",
+                    "Arial",
+                    "Noto Sans",
+                    "sans-serif",
+                    "Apple Color Emoji",
+                    "Segoe UI Emoji",
+                    "Segoe UI Symbol",
+                    "Noto Color Emoji",
+                ],
+            },
+        },
+    },
+};