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>