Skip to content

Commit

Permalink
Make about page responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryangoree
ryangoree committed Jan 12, 2024
1 parent 98a971c commit 18fe626
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 32 deletions.
58 changes: 29 additions & 29 deletions src/pages/About.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,20 @@ export function About() {
return (
<>
{/* hero */}
<div className="flex justify-center mx-auto flex gap-5 px-20 pb-16 overflow-y-hidden relative w-full">
<div className="flex justify-center mx-auto flex gap-5 px-[5vw] pb-16 overflow-hidden relative w-full">
{/* glows */}
<div className="absolute w-[1002px] h-[1240px] rounded-[100%] bg-[#9F79FF] blur-[80px] left-1/2 -translate-x-1/2 top-[-40px]"></div>
<div className="absolute w-[1002px] h-[1100px] rounded-[100%] bg-[#10F9B1] blur-[80px] left-1/2 -translate-x-1/2 top-2"></div>
<div className="absolute w-[1190px] h-[1010px] rounded-[100%] bg-white/60 blur-xl left-1/2 -translate-x-1/2 top-[90px]"></div>
<div className="absolute w-[1002px] h-[1240px] rounded-[100%] bg-[#9F79FF] blur-[80px] max-md:blur-2xl left-1/2 -translate-x-1/2 top-[-40px] max-md:scale-75"></div>
<div className="absolute w-[1002px] h-[1100px] rounded-[100%] bg-[#10F9B1] blur-[80px] max-md:blur-2xl left-1/2 -translate-x-1/2 top-2 max-md:scale-75"></div>
<div className="absolute w-[1190px] h-[1010px] rounded-[100%] bg-white/60 blur-xl max-md:blur left-1/2 -translate-x-1/2 top-[90px] max-md:scale-75"></div>

{/* black circle */}
<div className="absolute w-[1104px] h-[1104px] rounded-full bg-black left-1/2 -translate-x-1/2 top-10"></div>
<div className="absolute bg-grid w-full h-full [clip-path:circle(552px_at_50%_592px)]"></div>
<div className="absolute w-[1104px] h-[1104px] rounded-full bg-black left-1/2 -translate-x-1/2 top-10 max-md:scale-75"></div>
<div className="absolute bg-grid w-full h-full [clip-path:circle(552px_at_50%_592px)] max-md:scale-75"></div>

{/* bottom shadow */}
<div className="absolute w-full h-[440px] bg-gradient-to-b from-transparent to-black bottom-0"></div>

<div className="w-[630px] text-center mt-72 relative">
<div className="w-[630px] text-center mt-72 max-md:mt-64 relative">
<h1 className="font-incise text-[82px] tracking-tight leading-none mb-9">
About
</h1>
Expand All @@ -28,13 +28,13 @@ export function About() {
</div>

{/* mission */}
<div className="py-56 overflow-y-hidden relative">
<div className="py-56 max-md:pt-32 max-md:pb-40 overflow-hidden relative">
{/* glows */}
<div className="absolute w-[1240px] h-[414px] rounded-[100%] bg-[#9F79FF] blur-[100px] left-1/2 -translate-x-1/2 top-full -translate-y-6 opacity-55"></div>
<div className="absolute w-[1240px] h-[482px] rounded-[100%] bg-[#10F9B1] blur-[100px] left-1/2 -translate-x-1/2 top-full translate-y-.5 opacity-55"></div>
<div className="absolute w-[1240px] h-[524px] rounded-[100%] bg-white/60 blur-xl left-1/2 -translate-x-1/2 top-full translate-y-6 opacity-55"></div>

<div className="max-w-5xl flex items-end justify-between mx-auto">
<div className="max-w-5xl px-[5vw] box-content flex max-md:flex-col items-end max-md:items-start justify-between mx-auto">
<div className="flex flex-col gap-4 justify-between max-w-72">
<p className="text-3xl leading-none bg-gradient-to-br from-[#71F8F8] to-[#c5edff] bg-clip-text text-transparent">
01
Expand All @@ -43,7 +43,7 @@ export function About() {
Mission
</h2>
</div>
<p className="max-w-[440px] font-blanka">
<p className="max-w-[440px] max-md:max-w-full max-md:mt-10 max-md:text-lg font-blanka">
Our Mission is to advance the safe adoption of decentralized
financial systems by building a suite of novel, research-backed, and
open source infrastructure.
Expand All @@ -52,9 +52,9 @@ export function About() {
</div>

{/* values */}
<div className="pt-36 overflow-y-hidden relative">
<div className="max-w-5xl flex items-start justify-between mx-auto">
<div className="flex flex-wrap items justify-between gap-16 font-blanka [&_p]:opacity-75">
<div className="pt-36 max-md:pt-28 overflow-y-hidden relative max-md:text-lg">
<div className="max-w-5xl px-[5vw] box-content flex items-start justify-between mx-auto">
<div className="flex flex-wrap mx-lg:flex-col items justify-between gap-16 max-xl:gap-12 font-blanka [&_p]:opacity-75">
<div className="flex flex-col gap-4 justify-between max-w-72">
<p className="text-3xl leading-none bg-gradient-to-br from-[#71F8F8] to-[#c5edff] bg-clip-text text-transparent !opacity-100">
02
Expand All @@ -64,21 +64,21 @@ export function About() {
</h2>
</div>

<p className="basis-[440px] mt-6">
<p className="basis-[440px] max-lg:basis-auto mt-6 max-lg:mt-0">
Core values guide our interactions with one another and the
community at large. They are deeply ingrained beliefs about who we
are as a collective and anchor our company culture. Values are the
moral code of our organization.
</p>
<div className="basis-[440px]">
<div className="basis-[440px] max-lg:basis-auto">
<h3 className="mb-2 font-incise text-4xl">Building For People</h3>
<p>
We believe in the creation, promotion, and advancement of
decentralized system for benefit of present and future
generations.
</p>
</div>
<div className="basis-[440px]">
<div className="basis-[440px] max-lg:basis-auto">
<h3 className="mb-2 font-incise text-4xl">
Principles Over Hype
</h3>
Expand All @@ -88,7 +88,7 @@ export function About() {
trends.
</p>
</div>
<div className="basis-[440px]">
<div className="basis-[440px] max-lg:basis-auto">
<h3 className="mb-2 font-incise text-4xl">
(Appropriate) Openness
</h3>
Expand All @@ -99,7 +99,7 @@ export function About() {
resource.
</p>
</div>
<div className="basis-[440px]">
<div className="basis-[440px] max-lg:basis-auto">
<h3 className="mb-2 font-incise text-4xl">Integrity</h3>
<p>
We believe in working capably, reliably, honestly, and
Expand All @@ -112,18 +112,18 @@ export function About() {
</div>

{/* glow */}
<div className="relative h-96 overflow-hidden mb-14">
<div className="relative h-96 max-md:scale-50 max-md:-translate-x-1/4 max-md:w-[200%] overflow-hidden max-md:-mt-10 mb-14 max-md:-mb-10">
<div className="absolute rounded-[100%] left-1/2 -translate-x-1/2 bg-[#10F9B1] w-[1700px] h-[933px] top-[224px] blur-[100px]"></div>
<div className="absolute rounded-[100%] left-1/2 -translate-x-1/2 bg-[#9F79FF] w-[1310px] h-[879px] top-[255px] blur-[100px]"></div>
<div className="absolute rounded-[100%] left-1/2 -translate-x-1/2 bg-white w-[1440px] h-[980px] top-[222px] blur-xl"></div>
<div className="absolute rounded-[100%] left-1/2 -translate-x-1/2 bg-black w-[2022px] h-[980px] top-[237px]"></div>
<div className="absolute bg-grid w-full h-full [clip-path:ellipse(1011px_490px_at_50%_727px)] bg-[0_86px]"></div>
<div className="absolute bg-grid w-full h-full [clip-path:ellipse(1011px_490px_at_50%_727px)] bg-[0_86px] max-md:scale-[200%] max-md:bg-[0_96px]"></div>
</div>

{/* guiding principles */}
<div className="pb-32 overflow-y-hidden relative">
<div className="max-w-5xl flex items-start justify-between mx-auto">
<div className="flex flex-wrap items justify-between gap-16 font-blanka [&_p]:opacity-75">
<div className="pb-32 overflow-y-hidden relative max-md:text-lg">
<div className="max-w-5xl px-[5vw] box-content flex items-start justify-between mx-auto">
<div className="flex flex-wrap mx-lg:flex-col items justify-between gap-16 max-xl:gap-12 font-blanka [&_p]:opacity-75">
<div className="flex flex-col gap-4 justify-between max-w-72">
<p className="text-3xl leading-none bg-gradient-to-br from-[#71F8F8] to-[#c5edff] bg-clip-text text-transparent !opacity-100">
03
Expand All @@ -132,13 +132,13 @@ export function About() {
Guiding Principles
</h2>
</div>
<p className="basis-[440px] mt-24">
<p className="basis-[440px] max-lg:basis-auto mt-24 max-lg:mt-0">
Guiding Principles are mission focused and help to steer our
priorities. They are the guideposts that ensure we stay true to
the ideals we have set out for ourselves. They underpin every
action, decision, or move the team makes.
</p>
<div className="basis-[440px]">
<div className="basis-[440px] max-lg:basis-auto">
<h3 className="mb-2 font-incise text-4xl">
Results Over Everything
</h3>
Expand All @@ -149,7 +149,7 @@ export function About() {
these results.
</p>
</div>
<div className="basis-[440px]">
<div className="basis-[440px] max-lg:basis-auto">
<h3 className="mb-2 font-incise text-4xl">Lead by Example</h3>
<p>
Our behaviors model what we expect of one other. This includes
Expand All @@ -158,7 +158,7 @@ export function About() {
uplifting our teammates.
</p>
</div>
<div className="basis-[440px]">
<div className="basis-[440px] max-lg:basis-auto">
<h3 className="mb-2 font-incise text-4xl">
Make It safe and approachable
</h3>
Expand All @@ -168,7 +168,7 @@ export function About() {
and easy as possible for everyone.
</p>
</div>
<div className="basis-[440px]">
<div className="basis-[440px] max-lg:basis-auto">
<h3 className="mb-2 font-incise text-4xl">
Cultivate Curiosity and Continuous Learning
</h3>
Expand All @@ -179,7 +179,7 @@ export function About() {
1-on-1 and in groups, for our ongoing professional development.
</p>
</div>
<div className="basis-[440px]">
<div className="basis-[440px] max-lg:basis-auto">
<h3 className="mb-2 font-incise text-4xl">
Foster Clear Communication and active Collaboration
</h3>
Expand Down
6 changes: 3 additions & 3 deletions src/pages/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export function Home() {
{/* council drawer */}
<ProjectDrawer
className="bg-[#191E31]"
insideClassName="!min-h-[800px] !max-md:min-h-full h-screen max-md:h-auto"
insideClassName="!min-h-[800px] max-md:min-h-full h-screen max-md:h-full"
isOpen={openedDrawer === "council"}
onClose={closeDrawer}
>
Expand Down Expand Up @@ -216,7 +216,7 @@ export function Home() {
<ProjectDrawer
className="bg-[#191E31]"
insideClassName="!min-h-[640px] max-md:min-h-full h-screen max-md:h-full"
closeButtonClassName="bg-[#191E31]/50 backdrop-blur-sm"
closeButtonClassName="bg-[#191E31]/75 backdrop-blur-sm"
isOpen={openedDrawer === "elfiverse"}
onClose={closeDrawer}
>
Expand Down Expand Up @@ -389,7 +389,7 @@ function ProjectDrawer({
function VisitWebsiteButton({ href }: { href: string }) {
return (
<a
className="backdrop-blur-lg bg-gradient-to-b from-white/30 to-white/15 hover:from-white/20 hover:to-white/10 rounded-full h-12 pl-6 pr-4 gap-2 inline-flex items-center transition-all max-md:w-full justify-center"
className="backdrop-blur-lg bg-gradient-to-b from-white/30 to-white/15 hover:from-white/20 hover:to-white/10 rounded-full h-12 pl-6 pr-4 gap-2 inline-flex items-center transition-all max-md:w-full justify-center max-md:h-[60px] max-md:text-xl"
href={href}
>
Visit Website
Expand Down

0 comments on commit 18fe626

Please sign in to comment.