Adaptive announcement size

frontend/src/lib/components/announcement.svelte

@@ -9,13 +9,15 @@
 </script>
 
 {#if visible}
-    <div transition:slide bind:this={noderef} class="announcement prevent-select" style="background-color: {color};">
+    <div transition:slide bind:this={noderef} class="announcement" style="background-color: {color};">
         
-        {#if link}
-            <a href={link}>{message}</a>
-        {:else}
-            {message}
-        {/if}
+        <span class="announcement__message">
+            {#if link}
+                <a href={link}>{message}</a>
+            {:else}
+                {message}
+            {/if}
+        </span>
 
         <input class="close-button" type="button" value="" on:click={() => visible = false}>
     </div>
@@ -35,6 +37,14 @@
         color: white;
     }
 
+    .announcement__message {
+        font-size: min(2.9vw, 18px);
+        overflow: hidden; 
+
+        white-space: nowrap;
+        text-size-adjust: auto;
+    }
+
     .close-button {
         height: 25px;
         width: 25px;

frontend/src/lib/components/icon.svelte

@@ -11,7 +11,7 @@
 
 </script>
 
-<input class="{externalClasses} {Clickablility} icon" type="button" value="" 
+<input class="{externalClasses} {Clickablility} icon prevent-select" type="button" value="" 
 style="--icon-image: url({image}); --icon-color: {color}; --icon-size: {size};" 
 on:click={onclick ? onclick : null}>
 

frontend/src/routes/+layout.svelte

@@ -15,7 +15,7 @@
     
 </script>
 
-<Announcement message="This site is yet in development" color="var(--col_accent)"/>
+<Announcement message="Lorem ipsum dolor sit ameto, consetetur sadipscing" color="var(--col_accent)"/>
 <Header/>
 <main>
     <slot class="content"></slot>