From 47f367c96b1bebe38052ad290e76d6ca8c896836 Mon Sep 17 00:00:00 2001
From: Anatoly Kopyl <hi@kopyl.dev>
Date: Sat, 28 Sep 2024 23:08:52 +0300
Subject: [PATCH] Fix logo on small screens

---
 src/lib/ru.json                           |  7 +++++
 src/routes/+layout.svelte                 | 16 +++++++++++
 src/routes/+page.svelte                   |  2 ++
 src/routes/ContactForm/ContactForm.svelte | 33 +++++++++++++++++++++++
 src/routes/Hero.svelte                    |  7 ++---
 5 files changed, 62 insertions(+), 3 deletions(-)
 create mode 100644 src/routes/ContactForm/ContactForm.svelte

diff --git a/src/lib/ru.json b/src/lib/ru.json
index dc91a23..2a7a1bc 100644
--- a/src/lib/ru.json
+++ b/src/lib/ru.json
@@ -49,6 +49,13 @@
       "description": "Факты о&nbsp;сне, генератор фонового шума с&nbsp;возможностью делиться и&nbsp;выбирать звуки от&nbsp;сообщества, журнал снов."
     }
   },
+  "contact": {
+    "h": "Напишите мне",
+    "email": "Email",
+    "name": "Ваше имя",
+    "message": "Сообщение",
+    "submit": "Отправить"
+  },
   "footer": {
     "made_with": "Сделано с&nbsp;SvelteKit и&nbsp;Tailwind",
     "go_back": "Вернуться в&nbsp;прошлое"
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f32d3c0..5fdc526 100644
--- a/src/routes/+layout.svelte
+++ b/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>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2d9b232..61789b9 100644
--- a/src/routes/+page.svelte
+++ b/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>
diff --git a/src/routes/ContactForm/ContactForm.svelte b/src/routes/ContactForm/ContactForm.svelte
new file mode 100644
index 0000000..15998bc
--- /dev/null
+++ b/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>
diff --git a/src/routes/Hero.svelte b/src/routes/Hero.svelte
index a2d6051..d03e122 100644
--- a/src/routes/Hero.svelte
+++ b/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;
-    height: 256px;
+    max-width: 256px;
+    height: 25vh;
+    aspect-ratio: 1;
   }
 
   .hero__logo {