header & menu

frontend/src/lib/assets/css/base.less

@@ -0,0 +1,64 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    color: #333 !important;
+    height: 100%;
+    background-color: #f9f9f9;
+    overflow: hidden !important;
+}
+
+ul {
+    list-style-type: none;
+}
+
+ol {
+    list-style-type: decimal;
+}
+
+/* Links */
+a {
+    text-decoration: none;
+    font-weight: 700;
+}
+
+/* Tabellen */
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 20px;
+}
+* {
+    transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease, max-height 0.5s, height 0.5s ease,
+        width 0.5s ease, flex 0.5s ease, opacity 0.5s ease, top 0.5s ease, bottom 0.5s ease, left 0.5s ease,
+        right 0.5s ease, transform 0.5s ease;
+}
+
+th,
+td {
+    padding: 10px;
+    text-align: left;
+    border: 1px solid #ccc;
+}
+
+th {
+    background-color: #f4f4f4;
+}
+button {
+    background-color: inherit;
+    border: none;
+    cursor: pointer;
+    font-size: inherit;
+    color: #333;
+}
+input,
+select {
+    color: #333;
+    width: 100%;
+}
+
+.text-container {
+}

frontend/src/lib/assets/css/main.less

@@ -2,3 +2,11 @@
 @bg-color-secondary: #000;
 @font-color: #000;
 @font-color-secondary: #fff;
+
+@desktop_large:~ "only screen and (min-width: 1200px)";
+@desktop:~ "only screen and (min-width: 1024px)";
+@tablet:~ "only screen and (min-width: 768px)";
+@mobile: ~"only screen and (min-width: 0px)";
+
+@bodyfontsize: 16px;
+@bodyfontsize_desktop: 20px;

frontend/src/lib/components/Menu/Header.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    export let active = false
+    export let opened = false
+</script>
+
+<div class="header">
+    <div class="logo">
+        <img src="/media/Logo Quer.svg" alt="Logo Quer" />
+    </div>
+    <button class="menu" on:click="{() => (active = !active)}">
+        <div>MENÜ</div>
+        {#if opened}
+            <img src="/media/ei close.svg" alt="Logo" />
+        {:else}
+            <img src="/media/BurgerMenu.svg" alt="Menu" />
+        {/if}
+    </button>
+</div>
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+    .header {
+        width: 100%;
+        padding: 10.4px 5px;
+        @media @tablet {
+            padding: 25.4px 60px;
+        }
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 25px;
+
+        .logo {
+            flex-grow: 0;
+            flex-shrink: 1;
+
+            img {
+                width: 100%;
+            }
+        }
+
+        .menu {
+            flex-grow: 0;
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            font-weight: bold;
+            @media @tablet {
+                gap: 10px;
+            }
+        }
+    }
+</style>

frontend/src/lib/components/Menu/Menu.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+    import Header from "./Header.svelte"
+    export let active = false
+</script>
+
+<div class="menu" class:active="{active}">
+    <div class="menu-container">
+        <Header bind:active="{active}" opened="{true}" />
+        <div class="menu-content">
+            <div class="container">
+                <div class="pages">
+                    {#each ["Ihre Bedürfnisse", "Unsere Lösungen", "Über uns", "Kontakt"] as page}
+                        <button class="page">
+                            {page}
+                        </button>
+                    {/each}
+                </div>
+                <div class="footer-infos"></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+    .menu {
+        position: absolute;
+        background-color: @bg-color;
+        z-index: 1000;
+        top: 110vh;
+        left: 0px;
+        right: 0px;
+        height: 100vh;
+        &.active {
+            top: 0px;
+        }
+
+        .menu-container {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            .menu-content {
+                background-color: @bg-color-secondary;
+                color: @font-color-secondary;
+                width: 100%;
+                display: flex;
+                justify-content: center;
+                flex-grow: 1;
+                .container {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: flex-end;
+                    width: 80%;
+                    margin: 10vw 0px;
+                    .footer-infos {
+                        width: 100%;
+                    }
+                    .pages {
+                        width: 100%;
+                        display: flex;
+                        align-items: flex-start;
+                        flex-direction: column;
+                        gap: 20px;
+                        .page {
+                            font-size: 1.6rem;
+                            color: @font-color-secondary;
+                        }
+                    }
+                    @media @tablet {
+                        flex-direction: row;
+                        .footer-infos {
+                            width: 50%;
+                        }
+                        .pages {
+                            align-items: flex-start;
+                            width: 50%;
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>