Fix logo on small screens

src/lib/ru.json

@@ -49,6 +49,13 @@
       "description": "Факты о сне, генератор фонового шума с возможностью делиться и выбирать звуки от сообщества, журнал снов."
     }
   },
+  "contact": {
+    "h": "Напишите мне",
+    "email": "Email",
+    "name": "Ваше имя",
+    "message": "Сообщение",
+    "submit": "Отправить"
+  },
   "footer": {
     "made_with": "Сделано с SvelteKit и Tailwind",
     "go_back": "Вернуться в прошлое"

src/routes/+layout.svelte

@@ -29,4 +29,20 @@
   :global(p:not(:last-of-type)) {
     @apply mb-2;
   }
+
+  :global(input, textarea) {
+    font-size: 18px;
+    transition: border .3s;
+    @apply px-3 py-3 rounded-lg bg-slate-700 text-slate-400 border border-slate-500;
+  }
+
+  :global(input:focus, textarea:focus) {
+    outline: none;
+    border: 1px solid theme(colors.blue.500);
+  }
+
+  :global(textarea) {
+    height: auto;
+    resize: none;
+  }
 </style>

src/routes/+page.svelte

@@ -4,6 +4,7 @@
   import About from "./About.svelte";
   import Projects from "./Projects/Projects.svelte";
   import Footer from "./Footer.svelte";
+  // import ContactForm from "./ContactForm/ContactForm.svelte";
 
   export let data;
 </script>
@@ -13,5 +14,6 @@
   <Hero starCount={data.starCount}></Hero>
   <About></About>
   <Projects></Projects>
+<!--  <ContactForm></ContactForm>-->
   <Footer></Footer>
 </main>

src/routes/ContactForm/ContactForm.svelte

@@ -0,0 +1,33 @@
+<script>
+import {t} from "$lib/translations";
+</script>
+
+<section class="px-2 md:px-8 mb-16 max-w-[1280px] mx-auto">
+  <h2 class="text-3xl mb-4 md:text-4xl">
+    {$t('contact.h')}
+  </h2>
+
+  <form class="grid">
+    <div>
+      <label class="flex flex-col mb-4">
+        <span class="text-slate-400">{$t('contact.message')}</span>
+        <textarea
+          rows="5"
+        ></textarea>
+      </label>
+    </div>
+    <div>
+      <label class="flex flex-col mb-4">
+        <span class="text-slate-400">{$t('contact.name')}</span>
+        <input type="text" />
+      </label>
+      <label class="flex flex-col mb-4">
+        <span class="text-slate-400">{$t('contact.email')}</span>
+        <input type="email" />
+      </label>
+    </div>
+    <button class="p-4 mt-5 bg-slate-300 rounded-lg text-lg text-slate-950 font-semibold">
+      {$t('contact.submit')}
+    </button>
+  </form>
+</section>

src/routes/Hero.svelte

@@ -6,7 +6,7 @@ import Telegram from "$lib/icons/Telegram.svelte";
 import Linkedin from "$lib/icons/Linkedin.svelte";
 import MaterialSymbolsStarRounded from '~icons/material-symbols/star-rounded';
 
-export let starCount: number;
+export let starCount: number | null;
 let logo: HTMLElement;
 
 onMount(async () => {
@@ -101,8 +101,9 @@ const goTop = () => {
   .hero__logo-wrapper {
     min-width: 64px;
     min-height: 64px;
-    width: 256px;
+    max-width: 256px;
-    height: 256px;
+    height: 25vh;
+    aspect-ratio: 1;
   }
 
   .hero__logo {