docs - wip

Sergi0Martin · Mar 30, 2024 · 0e42674 · 0e42674
1 parent a9de128
commit 0e42674
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 29 deletions.
diff --git a/docs/src/components/GetStarted/GetStarted.astro b/docs/src/components/GetStarted/GetStarted.astro
@@ -1,12 +1,85 @@
 ---
-import GetStartedCard from "./GetStartedCard.astro";
-
 ---
 
-<h1 class="dark:text-maize text-xl font-bold">Get starded</h1>
+<section class="mb-10 md:mb-20">
+   <h1 class="dark:text-maize text-xl font-bold">Get starded</h1>
+   <div class="flex flex-row justify-center text-center">
+      <div class="bg-gradient mt-5 p-0.5">
+         <div class="flex items-center code-background">
+            <svg width="22" height="13" viewBox="0 0 22 13" fill="none" xmlns="http://www.w3.org/2000/svg" 
+               class="relative ml-4 mr-2 block w-3 -rotate-90">
+               <path d="M1 1L11 11L21 1" stroke="currentColor" stroke-width="2"></path>
+            </svg>
+
+            <code id="copy-data" class="code flex-1 text-left leading-none dark:text-maize">
+               dotnet add package MeasurementsTool
+            </code>
+            <div>
+               <button id="copy-button" class="block p-4 transition hover:scale-110 active:scale-100 active:transition-none"
+                  title="Copy to clipboard">
+                  <svg class="w-5"
+                     viewBox="0 0 24 24"
+                     fill="none"
+                     stroke="currentColor"
+                     stroke-width="2"
+                     stroke-linecap="round"
+                     stroke-linejoin="round">
+                     <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                     <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                  </svg>
+               </button>
+               <!-- <p id="copied-tooltip" class="absolute whitespace-nowrap bg-black/50 p-2 text-sm">
+                  Copied!
+               </p> -->
+            </div>
+         </div>
+      </div>
+   </div>
+</section>
+
+<script>
+   let copyButton = document.getElementById("copy-button");
+   copyButton!.addEventListener("click", async () => {
+      await copyCode();
+   });
+
+   function copyCode() {
+      let copyText = document.getElementById("copy-data");
+      let tooltip = document.getElementById("copied-tooltip");
+
+      navigator.clipboard.writeText(copyText!.innerText);
+      tooltip!.classList.remove("opacity-0");
+
+      setTimeout(() => {
+         tooltip!.classList.add("opacity-0");
+      },  3500);
+   }
+</script>
+
+<style>
+   .bg-gradient {
+      position: relative;
+      overflow: hidden;
+      background-color: transparent;
+      transform: rotate(3deg);
+   }
+
+   .bg-gradient:after {
+      content: '';
+      display: block;
+      z-index: -1;
+      position: absolute;
+      top: -20rem; right: -5rem; bottom: -20rem; left: -5rem;
+      background-image: linear-gradient(45deg, #36acc3 45%, #ffe74c 55%);
+      animation: rotate-gradient linear 3s infinite;
+   }
+
+   @keyframes rotate-gradient {
+      to { transform: rotate(360deg) }
+   }
+
+   .code-background{
+      @apply bg-oxford_blue-200 dark:text-maize-500;
+   }
+</style>
 
-<div class="flex flex-row justify-center text-center ">
-   <GetStartedCard name="Quickstart"/>
-   <GetStartedCard name="Guides"/>
-   <GetStartedCard name="Examples"/>
-</div>
diff --git a/docs/src/components/GetStarted/GetStartedCard.astro b/docs/src/components/GetStarted/GetStartedCard.astro
diff --git a/docs/src/components/LatestReleases/LatestReleases.astro b/docs/src/components/LatestReleases/LatestReleases.astro
@@ -1,14 +1,14 @@
 ---
 import Release from "./Release.astro";
 ---
-
-<h1 class="dark:text-maize text-xl font-bold">Latest Releases</h1>
-<div class="flex flex-row justify-center text-center">
-    <Release version="1.1.0" />
-    <Release version="1.0.15" />
-    <Release version="1.0.14" />
-</div>
-
+<section class="mb-10 md:mb-20">
+    <h1 class="dark:text-maize text-xl font-bold">Latest Releases</h1>
+    <div class="flex flex-row justify-center text-center">
+        <Release version="1.1.0" />
+        <Release version="1.0.15" />
+        <Release version="1.0.14" />
+    </div>
+</section>
 <!-- <script>
     function addElement() {
         const newRelease = document.createElement("Release");

diff --git a/docs/src/components/LatestReleases/Release.astro b/docs/src/components/LatestReleases/Release.astro
@@ -2,7 +2,7 @@
 const { version } = Astro.props;
 ---
 
-<card class="bg-munsell bg-scroll flex flex-col justify-center text-center bg-indigo-400 rounded-xl shadow-lg size-4/12 m-1">
+<card class="bg-munsell bg-scroll flex flex-col justify-center text-center bg-indigo-400 rounded-xl shadow-lg size-4/12 m-1 py-5">
     <h3 class="text-[#FFFFFF]">
         {version}
     </h3>

diff --git a/docs/src/layouts/Layout.astro b/docs/src/layouts/Layout.astro
@@ -19,16 +19,15 @@ const { title } = Astro.props;
 		<title>{title}</title>
 	</head>
 	<body>
-		<div class="wip-watermark">WORK IN PROGRESS</div>
 		<slot />
+		<div class="wip-watermark">WORK IN PROGRESS</div>
 	</body>
 </html>
 
 <style is:global>
 	body {
 		font-family: 'Maven Pro Variable', sans-serif;
-		/* @apply bg-oxford_blue-300; */
-		background-image: linear-gradient(to bottom right, theme('colors.oxford_blue.200'), theme('colors.oxford_blue.500'));
+		background-image: linear-gradient(to bottom right, theme('colors.oxford_blue.100'), theme('colors.oxford_blue.500'));
 	}
 
 	.wip-watermark{