frontend: initial author block

frontend/src/lib/components/add_button.svelte

@@ -25,7 +25,6 @@
     /* Кнопка "плюс" */
     .plus {
         font-family: Arial, Helvetica, sans-serif;
-        aspect-ratio: 1 / 1;
         font-size: x-large;
         cursor: pointer;
         text-align: center;

frontend/src/lib/components/authors.svelte

@@ -0,0 +1,38 @@
+<script>
+    import Image from "./image.svelte";
+</script>
+
+<div class="authors input rounded">
+    <Image shape="round"/>
+    <div>
+        <input type="text" class="input dotted rounded" placeholder="Название">
+        <textarea class="input dotted rounded" placeholder="Описание" rows="3"></textarea>
+    </div>
+</div>
+
+<style>
+    .authors {
+        display: flex;
+    }
+
+    .authors div {
+        display: grid;
+    }
+
+    .dotted {
+        margin: 0.25rem !important;
+        border: 0.15rem dashed;
+    }
+
+    @media (prefers-color-scheme: light) {
+        .dotted {
+            border-color: #CCCCCC;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .dotted {
+            border-color: #CCCCCC;
+        }
+    }
+</style>

frontend/src/lib/components/image.svelte

@@ -1,6 +1,6 @@
 <script>
     import AddButton from "./add_button.svelte";
-    let { direction = "horisontal" } = $props();
+    let { direction = "horisontal", shape = "rounded" } = $props();
     let images = $state();
     let image = $state();
 
@@ -15,7 +15,7 @@
 	});
 </script>
 
-<div class="{direction} input img-div rounded">
+<div class="{direction} input img-div {shape}">
     <AddButton type="image" bind:files={images}/>
     <img bind:this={image} src="" alt="">
 </div>

frontend/src/lib/css/global.css

@@ -31,6 +31,7 @@ button {
 .round {
     border-radius: 100%;
     overflow: hidden;
+    aspect-ratio: 1 / 1 !important;
 }
 
 /* Закруглённый элемент */

frontend/src/routes/+layout.svelte

@@ -1,5 +1,7 @@
 <script>
 	import favicon from '$lib/assets/favicon.svg';
+
+	import Authors from '$lib/components/authors.svelte';
 	import Calendar from '$lib/components/calendar.svelte';
 	import CreateButton from '$lib/components/create_button.svelte';
 	import Image from '$lib/components/image.svelte';
@@ -38,6 +40,10 @@
 	<!-- Описание -->
 	<textarea class="input rounded" placeholder="Описание" rows="4" bind:value={page_data["description"]}></textarea>
 
+	<!-- Авторы -->
+	<p>Авторы</p>
+	<Authors />
+
 	<!-- Время на чтение -->
 	<div class="horisontal-bar">
 		<p>Время на чтение</p>