From 398fa7d10a74fb007399b50570bd1cbc84bebfe7 Mon Sep 17 00:00:00 2001
From: YueSteveYin <yuy045@ucsd.edu>
Date: Mon, 21 Oct 2024 00:43:23 -0700
Subject: [PATCH] merge chagne

---
 layouts/_default/home.html   | 175 +++++++++--------------------------
 layouts/_default/person.html |  12 +--
 layouts/_default/planet      | 153 ++++++++++++++++++++++++++++++
 3 files changed, 202 insertions(+), 138 deletions(-)
 create mode 100644 layouts/_default/planet

diff --git a/layouts/_default/home.html b/layouts/_default/home.html
index 2d814a1..e419cb4 100644
--- a/layouts/_default/home.html
+++ b/layouts/_default/home.html
@@ -8,7 +8,7 @@
     style="background-image: url(/img/background/titleBackground.webp); text-align: center;"
   >
     <div
-      style="display: inline-block; background-color: rgb(39, 39, 39, 0.5); padding: 20px; border-radius: 8px; "
+      style="display: inline-block; background-color: white; padding: 20px; border-radius: 8px; "
     >
       <h1>
         <span class="sr-only">{{ .Title }}</span>
@@ -29,14 +29,14 @@ <h1>
         />
       </h1>
       <h2
-        class="links-blue-darker text-center font-sans text-xl leading-tight text-white md:text-xl"
+        class="links-blue-darker text-center font-sans text-xl leading-tight text-black md:text-xl"
       >
         A Cottrell Scholars Collaborative funded by the
         <a class="font-bold" href="https://rescorp.org/"
           >Research Corporation for Science Advancement</a
         >
       </h2>
-      <div class="content-area mx-auto mt-8 max-w-prose text-white">
+      <div class="content-area mx-auto mt-8 max-w-prose text-black">
         {{ .Content }}
       </div>
     </div>
@@ -51,159 +51,70 @@ <h1>
     }
   </style>
 
-  <!-- Section with Call-to-Action Links -->
   <section
-    class="flex flex-col justify-around space-y-4 bg-gray shadow-inner sm:flex-row sm:space-x-4 sm:space-y-0"
-    x-data="{ isOpen: false, showModal: false }"
+    class="flex flex-col justify-around space-y-4 bg-g-4 p-8 shadow-inner sm:flex-row sm:space-x-4 sm:space-y-0"
   >
-    {{ $blkClass := `group relative block w-full p-2 text-center leading-tight duration-100 sm:w-64` }}
-    {{ $hedClass := `text-gray font-sans font-bold uppercase group-hover:text-white duration-100` }}
+    {{ $blkClass := `group relative block w-full border-8 border-gray bg-white p-2 text-center leading-tight shadow-md duration-100 hover:border-black sm:w-64` }}
+    {{ $svgWrapperClass := `text-blue group-hover:text-blue-darker` }}
+    {{ $hedClass := `text-blue font-sans font-bold uppercase group-hover:text-blue-darker duration-100` }}
     {{ $dekClass := `my-1 mx-auto max-w-xs font-serif text-g-7` }}
 
 
     <!-- Add an Entry Button -->
     <a
-      class="system {{ $blkClass }}"
+      class="{{ $blkClass }}"
       href="https://forms.gle/ZRopiyBevpXu9D459"
       target="_blank"
     >
-      <div class="planet">
-        <div>
-          <div class="{{ $hedClass }}">Add an entry</div>
-          or recommend someone and we will follow up
-        </div>
+      <div class="{{ $svgWrapperClass }}">
+        <svg
+          class="inline h-20 w-20"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+          />
+        </svg>
       </div>
-      <div class="orbit">
-        <div class="moon"></div>
+      <div class="{{ $hedClass }}">Add an entry</div>
+      <div class="{{ $dekClass }}">
+        Or recommend someone and we’ll follow up!
       </div>
     </a>
 
     <!-- Update Entry Button -->
     {{ $emailSubject := `About my Hidden Figures database entry` }}
     <a
-      class="system {{ $blkClass }}"
       href="mailto:hiddenfigs@googlegroups.com?subject={{ $emailSubject }}"
-      @click.prevent="showModal = true; console.log(showModal)"
+      class="{{ $blkClass }}"
     >
-      <div class="planet">
-        <div>
-          <div class="{{ $hedClass }}">Update entry.</div>
-          Let us know if your information changed
-        </div>
+      <div class="{{ $svgWrapperClass }}">
+        <svg
+          class="inline h-20 w-20"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
+          />
+        </svg>
       </div>
-      <div class="orbit">
-        <div class="moon"></div>
+      <div class="{{ $hedClass }}">Update your entry</div>
+      <div class="{{ $dekClass }}">
+        Has your information changed? Let us know.
       </div>
     </a>
-
-    <!-- Popup Modal -->
-    {{ partial "contactus-box.html" . }}
   </section>
 
-  <style>
-    .system {
-      perspective: 1000px;
-      transform-style: preserve-3d;
-      height: 300px;
-      aspect-ratio: 1;
-      rotate: 45deg;
-      position: relative; /* Make sure it can contain absolutely positioned elements */
-    }
-
-    .planet,
-    .orbit,
-    .moon {
-      position: absolute;
-      transform-style: preserve-3d;
-      inset: 0;
-      height: calc(var(--size) * 1%);
-      margin: auto;
-      aspect-ratio: 1;
-      border-radius: 50%;
-    }
-
-    .planet {
-      --size: 50;
-      background: radial-gradient(circle at 40% 40%, #1e90ff, #104e8b 70%);
-      border-radius: 50%;
-      box-shadow:
-        inset -20px -20px 30px rgba(0, 0, 0, 0.4),
-        inset 10px 10px 20px rgba(255, 255, 255, 0.2),
-        0 0 30px rgba(0, 0, 0, 0.5);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      rotate: -45deg;
-    }
-
-    .orbit {
-      --size: 80;
-      --duration: 6s;
-      box-shadow:
-        0 0 0 2cqmin #5554,
-        inset 0 0 0 2cqmin #5554; /* Orbit outline */
-      animation: orbit calc(var(--duration)) linear infinite;
-      rotate: 1 0 0 80deg;
-      animation-timing-function: linear;
-      animation-play-state: running;
-      will-change: transform;
-    }
-
-    .moon {
-      --size: 24;
-      height: calc(var(--size) * 1%);
-      margin-left: calc(var(--size) * -0.5%);
-      background: radial-gradient(circle at 30% 30%, #d3d3d3, #a9a9a9 70%);
-      border-radius: 50%;
-      position: relative;
-      box-shadow:
-        inset -10px -10px 30px rgba(0, 0, 0, 0.5),
-        inset 10px 10px 20px rgba(255, 255, 255, 0.2),
-        0 0 30px rgba(255, 255, 255, 0.1);
-      animation: moon calc(var(--duration)) linear infinite;
-      rotate: 1 0 0 90deg;
-      animation-timing-function: linear;
-      animation-play-state: running;
-      will-change: transform;
-    }
-
-    /* Orbit and Moon Animation */
-    @keyframes orbit {
-      to {
-        transform: rotate3d(0, 0, 1, 360deg);
-      }
-    }
-
-    @keyframes moon {
-      to {
-        transform: rotate3d(0, 1, 0, -360deg);
-      }
-    }
-
-    /* Hover effect for smoother speed change */
-    .group:hover .orbit,
-    .group:hover .moon {
-      animation-duration: 3s; /* Speed up the animation without resetting */
-      transition: animation-duration 0.5s ease; /* Smooth transition for speeding up */
-    }
-
-    .planet-text {
-      display: block;
-      text-align: center;
-      width: 80%;
-      font-size: 14px;
-    }
-
-    /* Additional button styling */
-    .group:hover .planet {
-      background: #005faf; /* Change planet color on hover */
-    }
-
-    a {
-      text-decoration: none;
-    }
-  </style>
-
   <!-- Search Section -->
   <section
     class="parallax relative overflow-hidden p-8 text-white"
diff --git a/layouts/_default/person.html b/layouts/_default/person.html
index ac02d92..4f2fc8e 100644
--- a/layouts/_default/person.html
+++ b/layouts/_default/person.html
@@ -24,8 +24,8 @@ <h1 class="break-word font-bold leading-tight">
 
       <!-- Basic Information Section -->
       <div
-        class="links-blue-darker enter4 mt-2 text-sm sm:flex sm:flex-wrap"
-        style="background-color: rgb(39, 39, 39, 0.5); padding: 20px; border-radius: 8px;"
+        class="links-blue-darker enter4 mt-2 text-sm text-black sm:flex sm:flex-wrap"
+        style="background-color: white; padding: 20px; border-radius: 8px;"
       >
         <!-- Institution of Ph.D. -->
         <p class="sm:w-1/2" id="college">
@@ -148,8 +148,8 @@ <h1 class="break-word font-bold leading-tight">
         x-transition:enter="transition ease-out duration-100 delay-100"
         x-transition:enter-start="transform opacity-0 scale-95"
         x-transition:enter-end="transform opacity-100 scale-100"
-        class="enter6 mt-4"
-        style=" background-color: rgb(39, 39, 39, 0.5); padding: 20px; border-radius: 8px;"
+        class="enter6 mt-4 text-black"
+        style=" background-color: white; padding: 20px; border-radius: 8px; "
       >
         <h2 class="text-lg font-bold">Scientist Biography</h2>
 
@@ -277,8 +277,8 @@ <h2 class="sr-only" data-pagefind-ignore>
         x-transition:enter-start="transform opacity-0 scale-95"
         x-transition:enter-end="transform opacity-100 scale-100"
         x-cloak
-        class="mt-4"
-        style=" background-color: rgb(39, 39, 39, 0.5); padding: 20px; border-radius: 8px;"
+        class="mt-4 text-black"
+        style=" background-color: white; padding: 20px; border-radius: 8px;"
       >
         <h2 class="text-lg font-bold">Key Contributions</h2>
         <section class="mt-2">
diff --git a/layouts/_default/planet b/layouts/_default/planet
new file mode 100644
index 0000000..ca00f5b
--- /dev/null
+++ b/layouts/_default/planet
@@ -0,0 +1,153 @@
+
+  <!-- Section with Call-to-Action Links -->
+  <section
+    class="flex flex-col justify-around space-y-4 bg-gray shadow-inner sm:flex-row sm:space-x-4 sm:space-y-0"
+    x-data="{ isOpen: false, showModal: false }"
+  >
+    {{ $blkClass := `group relative block w-full p-2 text-center leading-tight duration-100 sm:w-64` }}
+    {{ $hedClass := `text-gray font-sans font-bold uppercase group-hover:text-white duration-100` }}
+    {{ $dekClass := `my-1 mx-auto max-w-xs font-serif text-g-7` }}
+
+
+    <!-- Add an Entry Button -->
+    <a
+      class="system {{ $blkClass }}"
+      href="https://forms.gle/ZRopiyBevpXu9D459"
+      target="_blank"
+    >
+      <div class="planet">
+        <div>
+          <div class="{{ $hedClass }}">Add an entry</div>
+          or recommend someone and we will follow up
+        </div>
+      </div>
+      <div class="orbit">
+        <div class="moon"></div>
+      </div>
+    </a>
+
+    <!-- Update Entry Button -->
+    {{ $emailSubject := `About my Hidden Figures database entry` }}
+    <a
+      class="system {{ $blkClass }}"
+      href="mailto:hiddenfigs@googlegroups.com?subject={{ $emailSubject }}"
+      @click.prevent="showModal = true; console.log(showModal)"
+    >
+      <div class="planet">
+        <div>
+          <div class="{{ $hedClass }}">Update entry.</div>
+          Let us know if your information changed
+        </div>
+      </div>
+      <div class="orbit">
+        <div class="moon"></div>
+      </div>
+    </a>
+
+    <!-- Popup Modal -->
+    {{ partial "contactus-box.html" . }}
+  </section>
+
+  <style>
+    .system {
+      perspective: 1000px;
+      transform-style: preserve-3d;
+      height: 300px;
+      aspect-ratio: 1;
+      rotate: 45deg;
+      position: relative; /* Make sure it can contain absolutely positioned elements */
+    }
+
+    .planet,
+    .orbit,
+    .moon {
+      position: absolute;
+      transform-style: preserve-3d;
+      inset: 0;
+      height: calc(var(--size) * 1%);
+      margin: auto;
+      aspect-ratio: 1;
+      border-radius: 50%;
+    }
+
+    .planet {
+      --size: 50;
+      background: radial-gradient(circle at 40% 40%, #1e90ff, #104e8b 70%);
+      border-radius: 50%;
+      box-shadow:
+        inset -20px -20px 30px rgba(0, 0, 0, 0.4),
+        inset 10px 10px 20px rgba(255, 255, 255, 0.2),
+        0 0 30px rgba(0, 0, 0, 0.5);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      rotate: -45deg;
+    }
+
+    .orbit {
+      --size: 80;
+      --duration: 6s;
+      box-shadow:
+        0 0 0 2cqmin #5554,
+        inset 0 0 0 2cqmin #5554; /* Orbit outline */
+      animation: orbit calc(var(--duration)) linear infinite;
+      rotate: 1 0 0 80deg;
+      animation-timing-function: linear;
+      animation-play-state: running;
+      will-change: transform;
+    }
+
+    .moon {
+      --size: 24;
+      height: calc(var(--size) * 1%);
+      margin-left: calc(var(--size) * -0.5%);
+      background: radial-gradient(circle at 30% 30%, #d3d3d3, #a9a9a9 70%);
+      border-radius: 50%;
+      position: relative;
+      box-shadow:
+        inset -10px -10px 30px rgba(0, 0, 0, 0.5),
+        inset 10px 10px 20px rgba(255, 255, 255, 0.2),
+        0 0 30px rgba(255, 255, 255, 0.1);
+      animation: moon calc(var(--duration)) linear infinite;
+      rotate: 1 0 0 90deg;
+      animation-timing-function: linear;
+      animation-play-state: running;
+      will-change: transform;
+    }
+
+    /* Orbit and Moon Animation */
+    @keyframes orbit {
+      to {
+        transform: rotate3d(0, 0, 1, 360deg);
+      }
+    }
+
+    @keyframes moon {
+      to {
+        transform: rotate3d(0, 1, 0, -360deg);
+      }
+    }
+
+    /* Hover effect for smoother speed change */
+    .group:hover .orbit,
+    .group:hover .moon {
+      animation-duration: 3s; /* Speed up the animation without resetting */
+      transition: animation-duration 0.5s ease; /* Smooth transition for speeding up */
+    }
+
+    .planet-text {
+      display: block;
+      text-align: center;
+      width: 80%;
+      font-size: 14px;
+    }
+
+    /* Additional button styling */
+    .group:hover .planet {
+      background: #005faf; /* Change planet color on hover */
+    }
+
+    a {
+      text-decoration: none;
+    }
+  </style>
\ No newline at end of file