Skip to content

Commit

Permalink
merge chagne
Browse files Browse the repository at this point in the history
  • Loading branch information
@YueSteveYin
YueSteveYin committed Oct 21, 2024
1 parent 8fbcb17 commit 398fa7d
Show file tree
Hide file tree
Showing 3 changed files with 202 additions and 138 deletions.
175 changes: 43 additions & 132 deletions layouts/_default/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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:[email protected]?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"
Expand Down
12 changes: 6 additions & 6 deletions layouts/_default/person.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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">
Expand Down
Loading

0 comments on commit 398fa7d

Please sign in to comment.