small improvements

envizar · Jan 20, 2025 · 367f109 · 367f109
1 parent 3a137fe
commit 367f109
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 26 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,7 +1,8 @@
 <script setup>
 import Card from "@/components/Card.vue";
 import {ref, onMounted, computed} from 'vue';
-import {useDateFormat, useNow} from "@vueuse/core";
+import {useDateFormat} from "@vueuse/core";
+import AC from "@/components/AC.vue";
 
 const currentTime = ref();
 
@@ -31,12 +32,13 @@ const age = computed(() => {
     <span class="text-2xl font-700 color-white font-['JetBrains_Mono',_serif]">envizar</span>
   </div>
   <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 p-4 max-w-120 lg:w-200 lg:max-w-200">
+
     <Card icon="lucide:scroll-text" title="Основное">
       <ul>
-        <li>Возраст: {{ age }} лет</li>
-        <li>Пол: Мужской</li>
-        <li>Страна: Россия</li>
-        <li>Время: {{ currentTime }} (UTC+3)</li>
+        <li>Возраст: <AC>{{ age }} лет</AC></li>
+        <li>Пол: <AC>Мужской</AC></li>
+        <li>Страна: <AC>Россия</AC></li>
+        <li>Время: <AC>{{ currentTime }} (UTC+3)</AC></li>
       </ul>
     </Card>
 
@@ -52,7 +54,9 @@ const age = computed(() => {
           <span class="bull">&bull;</span>
           <a href="https://github.com/mezamc" target="_blank">@mezamc</a>
         </li>
-        <li>Проект:
+        <li>Проекты:
+          <a href="https://servers.meza.one" target="_blank">MezaServers</a>
+          <span class="bull">&bull;</span>
           <a href="https://book.meza.one" target="_blank">MezaBook</a>
         </li>
         <li>YouTube:
@@ -62,21 +66,22 @@ const age = computed(() => {
     </Card>
 
     <Card icon="lucide:box" title="Minecraft">
-      <p>Более трёх лет создаю Minecraft сервера.
-      Настраиваю и пишу плагины, делаю оформление,
+      <p>Более трёх лет создаю <AC>Minecraft сервера</AC>.
+      Настраиваю и <AC>пишу плагины</AC>, делаю оформление,
       даже немного консультирую людей по этим вопросам.</p>
       <p>Самый крупный проект - ныне закрытый
-      мистический сервер SiimpAlone.</p>
+      мистический сервер <AC>SiimpAlone</AC>.</p>
     </Card>
 
     <Card icon="lucide:list-checks" title="Скиллы">
       <ul>
-        <li>Пишу Minecraft плагины на Kotlin</li>
-        <li>Создаю сайты на Vue/Nuxt</li>
-        <li>Немного графический дизайнер (использую Adobe Illustrator)</li>
-        <li>I use NixOS btw</li>
+        <li>Пишу <AC>Minecraft</AC> плагины на <AC>Kotlin</AC></li>
+        <li>Создаю сайты на <AC>Vue/Nuxt</AC></li>
+        <li>Немного <AC>графический дизайнер</AC> (использую Adobe Illustrator)</li>
+        <li>I use <AC>NixOS</AC> btw</li>
       </ul>
     </Card>
+
   </div>
 
 </template>
@@ -86,9 +91,10 @@ const age = computed(() => {
   box-shadow: 0 0 5rem rgba(255, 0, 0, .25);
   z-index: 1;
   outline: solid transparent 0px;
-  transition: 150ms all ease-in-out;
+  transition: 100ms all ease-in-out;
+  cursor: grab;
   &:hover {
-    outline: solid #ea4c4c 2px;
+    outline: solid var(--c-brand) 2px;
     outline-offset: 4px;
     box-shadow: 0 0 5rem rgba(255, 0, 0, 0.7);
     transform: scale(1.05);
@@ -99,6 +105,7 @@ const age = computed(() => {
     outline-color: #ffc7c7;
     box-shadow: 0 0 8rem rgba(255, 53, 53, 0.75);
     outline-offset: 2px;
+    cursor: grabbing;
   }
 }
 </style>
diff --git a/src/assets/main.scss b/src/assets/main.scss
@@ -1,6 +1,6 @@
-/*@import './base.css';*/
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
+@use "theme";
 
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
 
 body {
   margin: 0;
@@ -9,8 +9,8 @@ body {
   display: flex;
   min-height: 100vh;
 
-  color: #ece2db;
-  background-color: #292525;
+  color: var(--c-text-secondary);
+  background-color: var(--c-bg-body);
 
   font-family: "Inter", serif;
   font-optical-sizing: auto;
@@ -25,12 +25,12 @@ ul {
 
   .bull {
     margin: 0 4px;
-    color: rgba(255, 255, 255, 0.35);
+    color: var(--c-sep);
   }
 }
 
 a {
-  color: #ff6363;
+  color: var(--c-brand);
   text-decoration: none;
   &:hover {
     filter: brightness(1.4);

diff --git a/src/assets/theme.scss b/src/assets/theme.scss
@@ -0,0 +1,12 @@
+:root {
+    --c-brand: #ff5050;
+    --c-brand-border: rgba(255, 74, 74, 0.5);
+
+    --c-text-primary: #e8e3e3;
+    --c-text-secondary: #c1b8b8;
+    --c-sep: #5E5E5E;
+
+    --c-bg-body: #221d1d;
+    --c-bg-card: rgba(0, 0, 0, .25);
+    --c-bg-card-hover: rgba(0, 0, 0, .35)
+}
diff --git a/src/components/AC.vue b/src/components/AC.vue
@@ -0,0 +1,5 @@
+<template>
+  <span class="text-text-primary">
+    <slot></slot>
+  </span>
+</template>
diff --git a/src/components/Card.vue b/src/components/Card.vue
@@ -9,11 +9,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="flex flex-col bg-black/20 p-6.5 p-t-5 p-b-5 rounded-lg border-solid border-1 border-transparent hover:border-red-2/30 transition gap-2.5">
-    <h2 class="m-0 p-0 flex items-center gap-2.5">
+  <div class="flex flex-col bg-bg-card hover:(bg-bg-hovercard border-brand-border) p-(6.5 t-5 b-5) rounded-lg border-(solid 1 transparent) transition gap-2.5">
+    <h2 class="m-0 p-0 flex items-center gap-2.5 text-text-primary">
       <Icon :icon v-if="icon"/> {{ title }}
     </h2>
-    <div class="color-[#DBD1D1] flex flex-col gap-2.5">
+    <div class="flex flex-col gap-2.5">
       <slot/>
     </div>
   </div>

diff --git a/uno.config.ts b/uno.config.ts
@@ -1,5 +1,27 @@
-import { defineConfig } from 'unocss'
+import {defineConfig, transformerDirectives, transformerVariantGroup} from 'unocss'
 
 export default defineConfig({
-    // ...UnoCSS options
+
+    transformers: [
+        transformerVariantGroup(),
+        transformerDirectives()
+    ],
+
+    theme: {
+        colors: {
+            'brand': 'var(--c-brand)',
+            'brand-border': 'var(--c-brand-border)',
+            'text': {
+                'primary': 'var(--c-text-primary)',
+                'secondary': 'var(--c-text-secondary)',
+            },
+            'sep': 'var(--c-sep)',
+            'bg': {
+                'body': 'var(--c-bg-body)',
+                'card': 'var(--c-bg-card)',
+                'hovercard': 'var(--c-bg-card-hover)'
+            }
+        }
+    }
+
 })