feat: tailwind, website rework

apps/website/app/assets/css/styles.css

@@ -1,3 +1,4 @@
+@import "tailwindcss";
 @import '@radix-ui/colors/blue.css';
 @import '@radix-ui/colors/bronze.css';
 @import '@radix-ui/colors/brown.css';
@@ -29,127 +30,17 @@
   --color-bg-loader: #7d66d9;
 }
 
-html {
-  -webkit-text-size-adjust: 100%;
-  font-size: 16px;
-  line-height: 1.5;
-  tab-size: 4;
-  scroll-behavior: smooth;
-}
-body {
-  min-height: 100dvh;
-  font-family: inherit;
-  line-height: inherit;
-  margin: 0;
-}
 html,
 body {
   font-family: 'Roboto Serif', 'Times New Roman', 'Georgia', serif;
   font-optical-sizing: auto;
   font-weight: 500;
   font-style: normal;
   font-variation-settings: 'wdth' 100;
-}
-
-h1,
-h2,
-h3,
-p,
-pre {
-  margin: 0;
-  font-weight: 400;
-}
-h3 {
-  font-weight: 600;
-}
-*,
-::before,
-::after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: currentColor;
-}
-h1,
-h2 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
-    'Courier New', monospace;
-}
-
-p {
-  font-size: 1rem;
-  line-height: 1.5;
-}
-
-a {
-  color: var(--green-9);
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-h1 {
-  font-size: 2rem;
-  text-align: center;
-}
-
-h2 {
-  font-size: 1.2rem;
-}
-
-pre {
-  font-size: 16px;
-  background-color: rgba(255, 255, 255, 0.45);
-  border-radius: 3px;
-  box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
-  padding: 0.5em;
-  overflow-x: auto;
-}
-
-input,
-button {
-  font-size: inherit;
-  font-family: inherit;
-}
-
-button,
-input[type='submit'],
-input[type='reset'] {
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-}
-
-button:focus:not(:focus-visible) {
-  outline: none;
-}
-
-@media (min-width: 720px) {
-  html {
-    font-size: 18px;
-  }
-
-  h1 {
-    font-size: 2.4rem;
-  }
-
-  h2 {
-    font-size: 1.5rem;
-  }
+  color: var(--color-orange-950);
+  background: var(--color-orange-100);
+  scroll-behavior: smooth;
+  scroll-padding-top: 80px;
 }
 
 .bg-paper {

apps/website/app/assets/css/website.css

@@ -1,16 +1,3 @@
-html,
-body {
-  background-color: var(--orange-2);
-  color: var(--bronze-12);
-}
-
-section {
-  text-align: center;
-  padding: 2em 1em;
-  margin: 0 auto;
-  max-width: 42em;
-}
-
 .hero {
   max-width: 64em;
   text-align: center;

apps/website/app/components/MainFeed.vue

@@ -128,17 +128,12 @@ const { data: transactions } = await useFetch('/api/transaction')
 
             &:hover {
               text-decoration: none;
-              color: var(--green-9);
             }
           }
 
           .sign-out {
             font-weight: 600;
             transition: 0.2s all;
-
-            &:hover {
-              color: var(--green-9);
-            }
           }
 
           .currency-block {

apps/website/app/components/MainFooter.vue

@@ -8,12 +8,14 @@
       </li>
     </ul>
 
-    <p class="copyright">
-      Создается с ❤️ и с 🔥 в глазах
-    </p>
-    <p class="copyright">
-      &copy; 2024, ИП Косарев Н.Н.
-    </p>
+    <div class="mt-4 space-y-2 text-amber-900 text-center">
+      <p class="text-base">
+        Создается с ❤️ и с 🔥 в глазах
+      </p>
+      <p class="text-sm">
+        &copy; 2024 - 2025, ИП Косарев Н.Н.
+      </p>
+    </div>
   </footer>
 </template>
 
@@ -22,27 +24,19 @@ const localePath = useLocalePath()
 
 const links = [
   {
-    title: 'Boosty',
-    url: 'https://boosty.to/hmbanan666',
-    isOnNewTab: true,
-  },
-  {
-    title: 'Discord',
-    url: 'https://discord.gg/B6etUajrGZ',
+    title: 'GitHub',
+    url: 'https://github.com/chat-game/space',
     isOnNewTab: true,
   },
   {
     title: 'Twitch',
-    url: 'https://www.twitch.tv/hmbanan666',
+    url: 'https://twitch.tv/hmbanan666',
     isOnNewTab: true,
   },
   {
-    title: 'Об игре',
-    url: '/about',
-  },
-  {
-    title: 'Купить Монеты',
-    url: '/shop',
+    title: 'Bluesky',
+    url: 'https://bsky.app/profile/nick.kosarev.space',
+    isOnNewTab: true,
   },
   {
     title: 'Оферта',
@@ -74,7 +68,7 @@ const links = [
     transition: 0.2s all;
 
     &:hover {
-      color: var(--green-9);
+      color: var(--color-emerald-600);
       text-decoration: none;
     }
   }
@@ -99,10 +93,4 @@ const links = [
   li {
     position: relative;
   }
-
-  .copyright {
-    color: var(--bronze-9);
-    text-align: center;
-    margin-top: 0.5em;
-  }
 </style>

apps/website/app/components/MainHeader.vue

@@ -1,76 +1,12 @@
 <template>
-  <header>
-    <div class="left">
+  <header class="z-10 fixed top-0 left-0 right-0 bg-orange-100 border-b border-orange-800/5 py-1 px-3 flex flex-row gap-2 justify-between items-center">
+    <div class="min-w-32 flex flex-row gap-1 items-center">
       <MainLogo />
       <MenuLocale />
     </div>
 
-    <MenuSmartphone v-if="width < 1040" />
-    <MenuDesktop v-else />
+    <MenuSmartphone />
+    <MenuDesktop />
+    <MenuProfile />
   </header>
 </template>
-
-<script setup lang="ts">
-const { width } = useWindowSize()
-</script>
-
-<style scoped>
-header {
-  padding: 0.5em 1em;
-  display: flex;
-  justify-content: space-between;
-  justify-items: center;
-  align-items: center;
-
-  @media (max-width: 768px) {
-    & {
-      padding: 0.5em 0.5em;
-    }
-  }
-}
-
-.left {
-  flex-grow: 1;
-  flex-basis: 0;
-  display: flex;
-  align-items: center;
-
-  a {
-    font-size: 0;
-  }
-}
-
-@keyframes skewRandom {
-  0% {
-    transform: skewX(0);
-  }
-  50% {
-    transform: skewX(-3deg);
-  }
-  75% {
-    transform: skewX(3deg);
-  }
-  100% {
-    transform: skewX(0);
-  }
-}
-
-.logo {
-  width: 64px;
-  height: 64px;
-  margin-top: -14px;
-  transition: all 0.2s;
-  background-size: contain;
-  scale: 1.2;
-
-  &:hover.shake {
-    animation-name: skewRandom;
-    animation-duration: 0.5s;
-    animation-iteration-count: infinite;
-    animation-timing-function: ease-in-out;
-    animation-direction: alternate-reverse;
-    transform-origin: 50% 50%;
-    scale: 1.1;
-  }
-}
-</style>

apps/website/app/components/MainLogo.vue

@@ -1,18 +1,11 @@
 <template>
-  <ClientOnly>
-    <div v-if="$route.path === localePath('/')" class="logo">
-      <img :src="randomCharImage" alt="" class="static-index">
-    </div>
-    <NuxtLink v-else :to="localePath('/')" class="logo">
-      <img :src="randomCharImage" alt="" class="static">
-      <img :src="randomCharAnimatedImage" alt="" class="animated">
-    </NuxtLink>
-  </ClientOnly>
+  <div class="logo -mt-6 -mb-3 -ml-3 -mr-2 w-20 h-20 overflow-hidden">
+    <img :src="`/units/${randomChar}/128.png`" alt="" class="static w-20 h-20">
+    <img :src="`/units/${randomChar}/idle.gif`" alt="" class="animated w-20 h-20">
+  </div>
 </template>
 
 <script setup lang="ts">
-const localePath = useLocalePath()
-
 const characters = [
   'shape',
   'gentleman',
@@ -26,40 +19,26 @@ const characters = [
   'telegramo',
   'santa',
 ]
-const randomChar = characters[Math.floor(Math.random() * characters.length)]
-const randomCharImage = `/units/${randomChar}/128.png`
-const randomCharAnimatedImage = `/units/${randomChar}/idle.gif`
+const randomChar = computed(() => characters[Math.floor(Math.random() * characters.length)])
 </script>
 
 <style scoped>
 .logo {
-  width: 64px;
-  height: 64px;
-  margin-top: -22px;
   transition: all 0.2s;
-  scale: 1.2;
 
   .static-index {
     display: block;
-    width: 64px;
-    height: 64px;
   }
 
   .static {
     display: block;
-    width: 64px;
-    height: 64px;
   }
 
   .animated {
     display: none;
-    width: 64px;
-    height: 64px;
   }
 
   &:hover {
-    scale: 1.3;
-
     .static {
       display: none;
     }