Merge branch 'dev'

Sergi0Martin · Mar 24, 2024 · 9e40b3a · 9e40b3a
2 parents b6f2e59 + a0c7f77
commit 9e40b3a
Show file tree

Hide file tree

Showing 12 changed files with 907 additions and 366 deletions.
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -10,10 +10,10 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/check": "^0.5.4",
+    "@astrojs/check": "^0.5.10",
     "@astrojs/tailwind": "^5.1.0",
     "@fontsource-variable/maven-pro": "^5.0.16",
-    "astro": "^4.3.7",
+    "astro": "^4.5.9",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"
   }

diff --git a/docs/public/tape2-vertical.jpg b/docs/public/tape2-vertical.jpg
diff --git a/docs/public/tape2.jpg b/docs/public/tape2.jpg
diff --git a/docs/src/components/Footer/footer.astro b/docs/src/components/Footer/footer.astro
@@ -3,16 +3,16 @@ const year = (new Date()).getFullYear();
 ---
 
 <section class="flex justify-center">
-    <button class="bg-violet-700">Api</button>
+    <button>Api</button>
     <button>GitHub</button>
     <button>About</button>
 </section>
-<section class="my-5 flex justify-center">
+<section class="my-5 flex justify-center  text-maize">
     {year} MeasurementsTool
 </section>
 
 <style>
     button {
-        @apply py-1 px-3 m-1 font-semibold rounded-full shadow-md bg-violet-700 hover:bg-violet-800;
+        @apply py-1 px-3 m-1 font-semibold rounded-full shadow-md bg-oxford_blue  text-maize hover:bg-munsell;
     }
 </style>
diff --git a/docs/src/components/GetStarted/GetStarted.astro b/docs/src/components/GetStarted/GetStarted.astro
@@ -0,0 +1,24 @@
+---
+---
+
+<h1 class="dark:text-maize text-xl font-bold">Get starded</h1>
+
+<div class="flex flex-row justify-center text-center ">
+    <card class="bg-munsell bg-scroll flex flex-col justify-center text-center  bg-indigo-400 rounded-xl shadow-lg h-44 w-44 m-1">
+        <h1 class="text-l text-[#FFFFFF]">
+            Quickstart
+        </h1>
+    </card>
+
+    <card class="bg-munsell bg-scroll flex flex-col justify-center text-center bg-indigo-400 rounded-xl shadow-lg h-44 w-44 m-1">
+        <h1 class="text-l text-[#FFFFFF]">
+            Guides
+        </h1>
+    </card>
+
+    <card class="bg-munsell bg-scroll flex flex-col justify-center text-center bg-indigo-400 rounded-xl shadow-lg h-44 w-44 m-1 ">
+        <h1 class="text-l text-[#FFFFFF]">
+            Examples
+        </h1>
+    </card>
+</div>
diff --git a/docs/src/components/Header/Header.astro b/docs/src/components/Header/Header.astro
@@ -1,16 +1,13 @@
 ---
 var darkMode = true;
 ---
-
-<nav
-    class="py-3 px-4 bg-violet-700 flex flex-row items-center align-middle justify-between"
->
-    <h1 class="font-medium">MeasurementsTool</h1>
+<nav class=" py-3 px-4 flex flex-row items-center align-middle justify-between">
+    <h1 class="text-munsell dark:text-maize-900 font-medium">MeasurementsTool</h1>
     <button theme-button>
         {
             darkMode ? (
                 <svg
-                    class="w-6 h-6 text-gray-800 dark:text-white"
+                    class="w-6 h-6 text-maize-900"
                     aria-hidden="true"
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
@@ -26,7 +23,7 @@ var darkMode = true;
                 </svg>
             ) : (
                 <svg
-                    class="w-6 h-6 text-gray-800 dark:text-white"
+                    class="w-6 h-6 text-munsell"
                     aria-hidden="true"
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
@@ -43,4 +40,18 @@ var darkMode = true;
             )
         }
     </button>
-</nav>
+</nav>
+<hr>
+
+
+<style>
+    hr{
+        border-top: 1px solid #bbb;
+        color: bg-oxford_blue-900;
+    }
+    nav {
+        /* background-image: url(/MeasurementsTool/tape2.jpg);
+        background-repeat: no-repeat;      
+        height: 39px; */
+    }
+</style>
diff --git a/docs/src/components/Index/WelcomeCard.astro b/docs/src/components/Index/WelcomeCard.astro
@@ -1,21 +1,22 @@
 ---
-
 ---
 
-<card class="bg-img bg-scroll flex flex-col justify-center text-center mx-3 my-16 py-5 md:m-5 md:p-4 bg-indigo-400 rounded-xl shadow-lg">
-    <h1 class="text-3xl font-bold">
-        Welcome to the <strong>MeasurementsTool</strong> C# library
+<card class="bg-munsell bg-scroll flex flex-col justify-center text-center mx-8 md:mx-28 my-16 py-52 md:py-44 bg-indigo-400 rounded-xl shadow-lg">
+    <h1 class="text-2xl md:text-5xl md:mx-10 font-bold text-[#FFFFFF]">
+        Welcome to <strong class="text-maize">MeasurementsTool</strong> C# library
     </h1>
-    <p class="my-5 text-lg">
+    <p class=" text-lg mt-5 text-[#FFFFFF]">
         A C# library for interacting with measures. It is designed to be easy to
+    </p> 
+    <p class=" text-lg text-[#FFFFFF]">
         use and provide a great experience for developers.
     </p> 
 </card>
 
 <style>
-    .bg-img {
-        background-image: url(public/card-bg.webp);
-        background-repeat: no-repeat;
-        background-size: cover;
+    card{
+        background-image: url(/MeasurementsTool/tape2.jpg);
+        background-repeat: no-repeat;      
+        height: 39px;
     }
-</style>
+</style>
diff --git a/docs/src/layouts/Layout.astro b/docs/src/layouts/Layout.astro
@@ -26,7 +26,7 @@ const { title } = Astro.props;
 <style is:global>
 	body {
 		font-family: 'Maven Pro Variable', sans-serif;
-		background-color: #161019;
-		color: white;
+		/* @apply bg-oxford_blue-300; */
+		background-image: linear-gradient(to bottom right, theme('colors.oxford_blue.200'), theme('colors.oxford_blue.500'));
 	}
-</style>
+</style>
diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
@@ -3,13 +3,19 @@ import Layout from '../layouts/Layout.astro';
 import Header from '../components/Header/Header.astro'
 import Footer from '../components/Footer/footer.astro'
 import WelcomeCard from '../components/Index/WelcomeCard.astro'
+import GetStarted from '../components/GetStarted/GetStarted.astro'
 ---
 
 <Layout title="Measurements Tool">
-	<main>
+	<main class="mx-3 md:mx-10 lg:mx-48">
 		<Header/>
 		<WelcomeCard/>
-		<h1 class="flex justify-center m-72">WORK IN PROGRESS</h1>
+		<GetStarted/>
+		<h1 class="flex justify-center font-bold mb-52 mt-52 text-maize">WORK IN PROGRESS</h1>
+
+		<!-- <h1 class="flex justify-center m-72 mt-96 text-maize">WORK IN PROGRESS</h1>
+
+		<h1 class="flex justify-center m-72 mt-96 text-maize">WORK IN PROGRESS</h1> -->
 		<Footer/>
 	</main>
-</Layout>
+</Layout>
diff --git a/docs/src/pages/palette-guide.astro b/docs/src/pages/palette-guide.astro
@@ -0,0 +1,64 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="Measurements Tool - Style guide">
+    <main class="mx-0 md:mx-72">
+        <div class="flex flex-row m-5">
+            <div class="flex-col m-5">
+                <div class="bg-maize-100"></div>
+                <div class="bg-maize-200"></div>
+                <div class="bg-maize-300"></div>
+                <div class="bg-maize-400"></div>
+                <div class="bg-maize-500"></div>
+                <div class="bg-maize-600"></div>
+                <div class="bg-maize-700"></div>
+                <div class="bg-maize-800"></div>
+                <div class="bg-maize-900"></div>
+            </div>
+
+            <div class="flex-col m-5">
+                <div class="bg-oxford_blue-100"></div>
+                <div class="bg-oxford_blue-200"></div>
+                <div class="bg-oxford_blue-300"></div>
+                <div class="bg-oxford_blue-400"></div>
+                <div class="bg-oxford_blue-500"></div>
+                <div class="bg-oxford_blue-600"></div>
+                <div class="bg-oxford_blue-700"></div>
+                <div class="bg-oxford_blue-800"></div>
+                <div class="bg-oxford_blue-900"></div>
+            </div>
+
+            <div class="flex-col m-5">
+                <div class="bg-gunmetal-100"></div>
+                <div class="bg-gunmetal-200"></div>
+                <div class="bg-gunmetal-300"></div>
+                <div class="bg-gunmetal-400"></div>
+                <div class="bg-gunmetal-500"></div>
+                <div class="bg-gunmetal-600"></div>
+                <div class="bg-gunmetal-700"></div>
+                <div class="bg-gunmetal-800"></div>
+                <div class="bg-gunmetal-900"></div>
+            </div>
+
+            <div class="flex-col m-5">
+                <div class="bg-munsell-100"></div>
+                <div class="bg-munsell-200"></div>
+                <div class="bg-munsell-300"></div>
+                <div class="bg-munsell-400"></div>
+                <div class="bg-munsell-500"></div>
+                <div class="bg-munsell-600"></div>
+                <div class="bg-munsell-700"></div>
+                <div class="bg-munsell-800"></div>
+                <div class="bg-munsell-900"></div>
+            </div>
+        </div>
+    </main>
+</Layout>
+
+<style>
+    div {
+        width: 50px;
+        height: 50px;
+    }
+</style>
diff --git a/docs/tailwind.config.mjs b/docs/tailwind.config.mjs
@@ -3,6 +3,7 @@ export default {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 	theme: {
 		extend: {},
+		colors: { 'maize': { DEFAULT: '#ffe74c', 100: '#423900', 200: '#857300', 300: '#c7ac00', 400: '#ffde0a', 500: '#ffe74c', 600: '#ffec70', 700: '#fff194', 800: '#fff5b8', 900: '#fffadb' }, 'oxford_blue': { DEFAULT: '#041d3a', 100: '#01060b', 200: '#020c17', 300: '#021122', 400: '#03172e', 500: '#041d3a', 600: '#0a478d', 700: '#1071e1', 800: '#57a0f3', 900: '#abd0f9' }, 'gunmetal': { DEFAULT: '#203746', 100: '#060b0e', 200: '#0d161c', 300: '#13212a', 400: '#1a2c38', 500: '#203746', 600: '#3a637e', 700: '#578eb2', 800: '#8fb3cc', 900: '#c7d9e5' }, 'munsell': { DEFAULT: '#287f90', 100: '#08191d', 200: '#10333a', 300: '#184c56', 400: '#206573', 500: '#287f90', 600: '#36acc3', 700: '#65c2d5', 800: '#99d7e3', 900: '#ccebf1' } }
 	},
 	plugins: [],
 }