feat: add characters page

static/i18n/strings/ru.js

@@ -14,6 +14,7 @@ const i18n_ru = {
   BTN_ABOUT_ME: "ОБО МНЕ",
   BTN_OR: "или",
   BTN_LINKS: "ССЫЛКИ",
+  BTN_CHARACTERS: "ПЕРСОНАЖИ",
 
   // ABOUT ME
   CARD_TITLE: "ОБО МНЕ",
@@ -41,7 +42,9 @@ const i18n_ru = {
   CARD_CONTACT_TITLE: "Связаться",
   CARD_CONTACT_DESC:
     "Не стесняйтесь связаться со мной в любое время! Способы связаться со мной через мессенджеры доступны в разделе |% LINK='#links' %|ссылок!|% ENDLINK %|.",
-  LNK_TITLE: "ССЫЛКИ",
+
+  // LINKS
+    LNK_TITLE: "ССЫЛКИ",
   LNK_PHOTO_HEADER: "ФОТОГРАФИИ",
   LNK_PHOTO_PIXEY: "Смотри фото как в инстаграме",
   LNK_PHOTO_INSTAFOPS: "Более фурри фото",
@@ -62,6 +65,17 @@ const i18n_ru = {
   LNK_COLLECTION_RPI: "3000+ Фото и видео с красными пандами",
   LNK_FRIEND_BLEP: "ВК Группа классного фотографа",
   LNK_FRIEND_ITC: "GitHub профиль другого фурри-кодера",
+
+  // CHARACTERS
+  CHR_KR_GOTO: "Нажмите, чтобы перейти к описанию",
+  CHR_KR_SPECIES: "Красная Панда",
+  CHR_KB_GOTO: "Нажмите, чтобы скачать референс",
+  CHR_KB_SPECIES: "Протоген",
+
+  // CHR_KR_BIRTH: "Дата рождения",
+  // CHR_KR_HEIGHT: "Рост",
+  // CHR_KR_WEIGHT: "Вес",
+  // CHR_KR_BREED: "Порода",
 };
 
 const i18n_ru_style = {

static/tailwind.css

@@ -746,6 +746,42 @@ video {
   height: 100%;
 }
 
+.h-screen {
+  height: 100vh;
+}
+
+.h-\[99vh\] {
+  height: 99vh;
+}
+
+.h-\[98vh\] {
+  height: 98vh;
+}
+
+.h-\[95vh\] {
+  height: 95vh;
+}
+
+.h-\[90vh\] {
+  height: 90vh;
+}
+
+.h-\[80vh\] {
+  height: 80vh;
+}
+
+.h-\[85vh\] {
+  height: 85vh;
+}
+
+.h-\[87vh\] {
+  height: 87vh;
+}
+
+.h-\[89vh\] {
+  height: 89vh;
+}
+
 .max-h-\[182px\] {
   max-height: 182px;
 }
@@ -754,6 +790,10 @@ video {
   max-height: 50vh;
 }
 
+.max-h-screen {
+  max-height: 100vh;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -782,6 +822,10 @@ video {
   width: 256px;
 }
 
+.w-\[50vw\] {
+  width: 50vw;
+}
+
 .w-\[64px\] {
   width: 64px;
 }
@@ -794,6 +838,10 @@ video {
   max-width: 50vw;
 }
 
+.flex-1 {
+  flex: 1 1 0%;
+}
+
 .-translate-y-full {
   --tw-translate-y: -100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1057,6 +1105,22 @@ video {
   --tw-bg-opacity: 0.5;
 }
 
+.bg-opacity-85 {
+  --tw-bg-opacity: 0.85;
+}
+
+.bg-opacity-90 {
+  --tw-bg-opacity: 0.9;
+}
+
+.bg-opacity-5 {
+  --tw-bg-opacity: 0.05;
+}
+
+.bg-opacity-25 {
+  --tw-bg-opacity: 0.25;
+}
+
 .object-contain {
   -o-object-fit: contain;
      object-fit: contain;
@@ -1121,6 +1185,10 @@ video {
   text-align: right;
 }
 
+.align-bottom {
+  vertical-align: bottom;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -1151,6 +1219,11 @@ video {
   line-height: 1.75rem;
 }
 
+.text-6xl {
+  font-size: 3.75rem;
+  line-height: 1;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -1296,6 +1369,10 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.group:hover .group-hover\:opacity-25 {
+  opacity: 0.25;
+}
+
 @media (min-width: 370px) {
   .xs\:flex-1 {
     flex: 1 1 0%;
@@ -1327,6 +1404,10 @@ body {
     display: block;
   }
 
+  .sm\:inline-block {
+    display: inline-block;
+  }
+
   .sm\:hidden {
     display: none;
   }
@@ -1443,6 +1524,21 @@ body {
   .md\:bg-transparent {
     background-color: transparent;
   }
+
+  .md\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
+  .md\:text-6xl {
+    font-size: 3.75rem;
+    line-height: 1;
+  }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -1458,10 +1554,18 @@ body {
     width: 64px;
   }
 
+  .lg\:max-w-\[50vw\] {
+    max-width: 50vw;
+  }
+
   .lg\:scroll-mt-4 {
     scroll-margin-top: 1rem;
   }
 
+  .lg\:flex-row {
+    flex-direction: row;
+  }
+
   .lg\:text-4xl {
     font-size: 2.25rem;
     line-height: 2.5rem;