feat(web-server): add configurations and fonts

Onyxmoon · Oct 29, 2023 · 4de136c · 4de136c
1 parent 70cc2eb
commit 4de136c
Show file tree

Hide file tree

Showing 13 changed files with 69 additions and 17 deletions.
diff --git a/src/web-service/index.html b/src/web-service/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Price Whisper</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/js/main.js"></script>
+    </body>
+</html>
diff --git a/src/web-service/public/fonts/Manrope-Bold.ttf b/src/web-service/public/fonts/Manrope-Bold.ttf
diff --git a/src/web-service/public/fonts/Manrope-Medium.ttf b/src/web-service/public/fonts/Manrope-Medium.ttf
diff --git a/src/web-service/public/fonts/Manrope-Regular.ttf b/src/web-service/public/fonts/Manrope-Regular.ttf
diff --git a/src/web-service/public/fonts/Manrope-SemiBold.ttf b/src/web-service/public/fonts/Manrope-SemiBold.ttf
diff --git a/src/web-service/src/App.svelte b/src/web-service/src/App.svelte
@@ -1,3 +1,3 @@
 <main>
-  <p>Test</p>
+  <p class="font-manrope text-green-dark">Test</p>
 </main>
diff --git a/src/web-service/src/assets/svelte.svg b/src/web-service/src/assets/svelte.svg
diff --git a/src/web-service/src/css/fonts.css b/src/web-service/src/css/fonts.css
@@ -0,0 +1,32 @@
+/* Load fonts */
+@font-face{
+    font-family: 'Manrope';
+    src: url('/src/web-service/public/fonts/Manrope-Regular.ttf') format('ttf');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face{
+    font-family: 'Manrope';
+    src: url('/src/web-service/public/fonts/Manrope-Medium.ttf') format('ttf');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face{
+    font-family: 'Manrope';
+    src: url('/src/web-service/public/fonts/Manrope-SemiBold.ttf') format('ttf');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face{
+    font-family: 'Manrope';
+    src: url('/src/web-service/public/fonts/Manrope-Bold.ttf') format('ttf');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
diff --git a/src/web-service/src/css/styles.css b/src/web-service/src/css/styles.css
@@ -0,0 +1,4 @@
+@import "tailwindcss/base";
+@import "fonts.css";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
diff --git a/src/web-service/src/index.css b/src/web-service/src/index.css
diff --git a/src/web-service/src/main.js → src/web-service/src/js/main.js b/src/web-service/src/main.js → src/web-service/src/js/main.js
@@ -1,5 +1,5 @@
-import './index.css'
-import App from './App.svelte'
+import '../css/styles.css'
+import App from '../App.svelte'
 
 const app = new App({
   target: document.getElementById('app'),

diff --git a/src/web-service/src/lib/Counter.svelte b/src/web-service/src/lib/Counter.svelte
diff --git a/src/web-service/tailwind.config.js b/src/web-service/tailwind.config.js
@@ -3,6 +3,24 @@ export default {
       "./src/**/*.svelte",
   ],
   theme: {
+    colors: {
+      'grey': {
+        'light': '#F4F4F9',
+        'middle': '#8F8F8F',
+        'dark': '#262626',
+      },
+      'blue': {
+        'light': '#BFDAD9',
+        'dark': '#305F5D',
+      },
+      'green': {
+        'light': '#70AA67',
+        'dark': '#317050',
+      },
+      fontFamily: {
+        manrope: ['Manrope', 'sans-serif'],
+      },
+    },
     extend: {},
   },
   plugins: [],