Selection colors; removed prevent-select from most of the stuff since it may be uncomfortable for the user

frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:22.5.1-alpine AS builder
+FROM node:22.6.0-alpine AS builder
 
 WORKDIR /app
 
@@ -11,7 +11,7 @@ COPY . .
 RUN npm run build --env-file=production.env
 RUN npm prune --omit=dev
 
-FROM node:22.5.1-alpine AS deployer
+FROM node:22.6.0-alpine AS deployer
 
 WORKDIR /app
 

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>
@@ -29,10 +31,22 @@
 
         gap: 5px;
         height: 36px;
+    }
+
+    .announcement__message {
+        font-size: min(2.9vw, 18px);
+        overflow: hidden; 
+
+        white-space: nowrap;
+        text-size-adjust: auto;
 
         font-size: 18px;
-
         color: white;
+        /*TODO: selection color*/
+    }
+
+    .announcement__message::selection {
+        background-color: var(--col_panel);
     }
 
     .close-button {

frontend/src/lib/components/footer.svelte

@@ -8,7 +8,7 @@
 
 </script>
 
-<footer class="footer prevent-select">
+<footer class="footer">
 
     <div class="footer__social-notice-box">
         <p class="social-row footer__social-notice-text">Me on other resources:</p>
@@ -153,7 +153,7 @@
         bottom: 0;
         left: 0;
         height: 2px;
-        width: 45%;
+        width: 100px;
 
         background-color: var(--col_text_footer);
     }
@@ -187,7 +187,7 @@
             justify-content: center;
             justify-items: center;
 
-            padding: 20px;
+            padding: 30px 20px;
             max-width: 60%;
             width: 100%;
 
@@ -199,8 +199,9 @@
         }
 
         .footer-column-title::after {
-            left: 28%;
-            margin: inherit auto;
+            left: 0;
+            width: 100%;
+            max-width: 100%;
         }
     }
 

frontend/src/lib/components/header.svelte

@@ -10,7 +10,7 @@
     
 </script>
 
-<header class="header prevent-select" data-sveltekit-preload-data="hover">
+<header class="header" data-sveltekit-preload-data="hover">
 
     <div class="container header-left">
         <Icon class="header__menu-button" image={MenuIcon} size="64px"/>

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/lib/css/colors.css

@@ -9,14 +9,16 @@
     --col_accent: #5dc98e;
 
     --col_text: #000000;
+    --col_text_select: #5dc98e;
     --col_text_query: #ffffff;
     --col_text_invalid: #cc0000;
     --col_text_hint: #dedede; 
     --col_text_panel: #ffffff;
+    --col_text_panel_select: #be4286; 
     --col_text_footer: #ffffff;
+    --col_text_footer_select: #5dc98e;
     --col_text_copyright: #ffffff;
 
-    --col_text_selection: #5dc98e;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -32,5 +34,5 @@ body {
 
 ::selection {
     color: var(--col_text_panel);
-    background: var(--col_text_selection);
+    background: var(--col_text_select);
 }

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>
@@ -24,6 +24,6 @@
 
 <style>
     main {
-    height: 100vh;
+    height: 90vh;
     }
 </style>

frontend/vite.config.js

@@ -2,5 +2,10 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
+	build: {
+		assetsInlineLimit: (file) => {
+			return !file.endsWith('.svg');
+		}
+	},
 	plugins: [sveltekit()]
 });