feat: layout changes

unccd · Aug 18, 2023 · f5304af · f5304af
1 parent 92e7f13
commit f5304af
Show file tree

Hide file tree

Showing 15 changed files with 76 additions and 316 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image" href="/UNCCD-256.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Herland</title>
+    <title>HerLand</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/Homepage.jsx b/src/Homepage.jsx
@@ -70,7 +70,8 @@ function Homepage() {
         panel.className = clearPanelClassList;
         return panel;
       });
-
+      // alert(viewportWidth)
+      isPanelsTallerThanWindow = false
     }
     // Update the window
     function updateWindow() {
@@ -165,7 +166,7 @@ function Homepage() {
       <div className="panel unccd-logo-black">
         <Footer />
       </div>
-      <section class="copywright bg-gray-950 text-white py-4">
+      <section className="copywright bg-gray-950 text-white py-4">
         <p className="text-xs"> ©UNCCD 2023</p>
       </section>
       <img

diff --git a/src/assets/css/Homepage.css b/src/assets/css/Homepage.css
@@ -33,7 +33,6 @@
 section {
   padding: 0 5em;
   min-height: 100vh;
-
 }
 .panel {
   position: relative;
@@ -47,7 +46,6 @@ section {
   width: 100%;
   /* height: 100vh; */
   overflow: hidden;
-
 }
 .panel-fixed .panel-inner {
   position: fixed;
@@ -75,7 +73,9 @@ iframe {
 }
 /*  LANDING */
 .landing-background {
-  background: url('../../static/images/landing-background.jpg') no-repeat center center;
+  background: url("../../static/images/landing-background.jpg") no-repeat center
+    center;
+  background-size: cover;
 }
 
 /* PORTRAIT-CAROUSEL */
@@ -106,6 +106,7 @@ iframe {
 /*  DESERT  */
 .desert-logo {
   background: url("../../static/images/stories.jpg") no-repeat center center;
+  background-size: cover;
 }
 
 /* VideoExhibition */
@@ -137,39 +138,44 @@ iframe {
 
 /* campaign toolkit */
 .campaign-toolkit-background {
-  background: url("../../static/images/campaign-toolkit.jpg") no-repeat left center;
+  background: url("../../static/images/campaign-toolkit.jpg") no-repeat left
+    center;
+  background-size: cover;
 }
 
 /* footer */
- 
+
 .event-wrapper {
   width: 391px !important;
   transition: all 0.3s ease;
   overflow: hidden;
   border-radius: 1px;
-} 
+}
 .event-wrapper:hover {
   padding-left: 3em;
 }
 .event-1 {
   background: url("../../static/events/event-1.png") no-repeat left center;
+  background-size: cover;
 }
 .event-2 {
   background: url("../../static/events/event-2.png") no-repeat left center;
+  background-size: cover;
 }
 .event-3 {
   background: url("../../static/events/event-3.png") no-repeat left center;
+  background-size: cover;
 }
 .copywright {
-  min-height: unset;
   padding: 0 5em;
+  min-height: unset;
 }
 @media only screen and (min-width: 0px) and (max-width: 640px) {
   section {
     padding: 0 1em;
   }
   .copywright {
-    padding: 0 1em;
+    padding: 0 1em
   }
   .event-wrapper {
     width: 90vw !important;
@@ -182,43 +188,52 @@ iframe {
     transform: scale(0.75);
   }
   .contact-flex {
-    align-items: flex-start ;
+    align-items: flex-start;
     flex-direction: column !important;
     gap: 2em;
   }
 }
 /* Healv3rse */
 .healverse-background {
-  background: linear-gradient( #002257, #460057);
-  ;
+  background: linear-gradient(#002257, #460057);
 }
-.healverse-blocks-png {
-  display: block;
-  width: 100vw;
-  z-index: 1;
+.iframe-wrapper {
+  position: relative !important;
 }
 
 /* detect when the user is on mobile */
- @media (hover:none), (hover:on-demand){ 
+/* @media (hover: none), (hover: on-demand) {
   .landing-background {
-    background: url('../../static/images/landing-background-mobile.jpg')  no-repeat left bottom; 
+    background: url("../../static/images/landing-background-mobile.jpg")
+      no-repeat left bottom;
     background-size: cover;
   }
   .campaign-toolkit-background {
-    background: url("../../static/images/campaign-toolkit.jpg") no-repeat 50% top;
+    background: url("../../static/images/campaign-toolkit.jpg") no-repeat 50%
+      top;
   }
   .landing-text {
-    color:#222;
-    margin-bottom: 5Vh;
+    color: #222;
+    margin-bottom: 5vh;
     font-size: 6em !important;
   }
   .landing-text-hidden {
-    display: none
+    display: none;
   }
   .landing-down-arrow-mobile {
     filter: invert(0);
   }
   .desert-logo {
     background: url("../../static/images/stories.jpg") no-repeat 60% center;
   }
-}
+  .iframe-wrapper {
+    position: static;
+  }
+  #unccd-logo {
+    position: absolute;
+    z-index: 1000;
+    top: 0;
+    left: 1em;
+    transform: scale(0.9);
+  }
+} */
diff --git a/src/index.css b/src/index.css
@@ -19,6 +19,7 @@ body {
 }
 .wrapper-404 {
   background-image: url('./static/images/landing-background.jpg');  
+  background-size: cover;
   /* filter: grayscale(100%); Apply black and white effect    */
 }
 

diff --git a/src/overlays/VideoOverlay.jsx b/src/overlays/VideoOverlay.jsx
@@ -14,7 +14,7 @@ function VideoOverlay(props) {
           <iframe
             width="100%"
             height="100%"
-            src={`https://www.youtube.com/embed/${url}?rel=0&modestbranding=1&fs=0`}
+            src={`https://www.youtube.com/embed/${url}?rel=0&modestbranding=1`}
             allowFullScreen
             modestbranding={1}
           ></iframe>

diff --git a/src/slides/CampaignToolkit/CampaignToolkit.jsx b/src/slides/CampaignToolkit/CampaignToolkit.jsx
@@ -4,25 +4,25 @@ function CampaignToolkit() {
   return (
     <section className="full-height campaign-toolkit-background grid grid-cols-12	 content-center panel-inner">
       <div className="max-sm:col-span-12 sm:col-span-12 lg:col-span-6 text-black">
-        <h2 className="max-sm:text-2xl text-5xl font-light">
+        <h2 className="max-sm:text-base sm:text-2xl md:text-3xl lg:text-3xl xl:text-5xl font-light">
           Campaign toolkit
         </h2>
-        <p className="max-sm:text-base text-2xl font-light mt-8">
+        <p className="max-sm:text-base lg:text-base 2xl:text-2xl font-light mt-8">
           Help us spread the word about <span className="font-bold">#HerLand</span> campaign with our ready-to-use
           promotional materials. From posters and flyers to banners and
           infographics, these assets are designed to communicate the urgency and
           importance of our cause. Download and share them in your community,
           workplace, or social circles, and inspire others to join the movement.
         </p>
-        <p className="max-sm:text-base text-2xl font-light mt-4">
+        <p className="max-sm:text-base lg:text-base 2xl:text-2xl  font-light mt-4">
           Also find out how to utilize hashtags like <span className="font-bold">#HerLandHerRights</span> and
           <span className="font-bold">#LandHeroes</span>, engage with influencers, and create a social media buzz
           that echoes our call for gender equality in land rights.
         </p>
         <a href="https://trello.com/b/AuQjCPfN/unccd-herland-campaign" target="_blank">
           <div className="flex max-sm:gap-2 sm:gap-2 md:gap-5 mt-4 cursor-pointer text-blue-700	">
             <img src={ArrowRight} className="icon scale-150" />
-            <p className="max-sm:text-lg sm:text-xl md:text-2xl m-0">
+            <p className="max-sm:text-xl lg:text-xl 2xl:text-2xl  md:text-2xl m-0">
               Link to promotional materials
             </p>
           </div>

diff --git a/src/slides/CampaignVideo/CampaignVideo.jsx b/src/slides/CampaignVideo/CampaignVideo.jsx
@@ -7,14 +7,14 @@ function CampaignVideo() {
           style={{ position: "relative", height: "100%" }}
         >
           <iframe
-            src="https://www.youtube.com/embed/b_0rx56VCak?rel=0&modestbranding=1&fs=0"
+            src="https://www.youtube.com/embed/b_0rx56VCak?rel=0&modestbranding=1"
             title="YouTube Video"
             allowFullScreen
             height={"100%"}
             width={"100%"}
           />
         </div>
-        <div className="max-sm:col-span-12 sm:col-span-12 lg:col-span-6 ml-6 mb-10 font-light">
+        <div className="max-sm:col-span-12 sm:col-span-12 lg:col-span-6 lg:ml-6 max-xs:ml-6 mb-10 font-light">
           <p>
             Together with partners, activists and influencers,{" "}
             <a
@@ -47,7 +47,7 @@ function CampaignVideo() {
             discover more and join! All of us can do our part:
           </p>
           <p className="mt-6">All of us can do our part:</p>
-          <ul className="list-disc mb-10 ml-6">
+          <ul className="list-disc mb-10 ml-6 text-sm">
             <li>
               Governments can promote laws, policies and practices that end
               discrimination and secure women’s rights to land and resources.

diff --git a/src/slides/Footer/Footer.jsx b/src/slides/Footer/Footer.jsx
@@ -12,8 +12,8 @@ function Footer() {
         <p className="max-sm:text-base text-2xl font-light mt-6">
           Here are some events where you can view the HerLand Campaign:
         </p>
-        <div className="grid lg:grid-cols-12 sm:grid-cols-1 max-sm:grid-cols-1">
-          <div className="grid lg:grid-cols-2 md:grid-cols-1 max-sm:grid-cols-1 gap-4 mt-10 footer-events col-span-10">
+        <div className="grid 2xl:grid-cols-12 xsm:grid-cols-1 max-sm:grid-cols-1">
+          <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 lg:grid-cols-2 md:grid-cols-1 max-sm:grid-cols-1 gap-4 mt-10 footer-events col-span-10">
             <div className="event-wrapper event-1 max-sm:h-24 sm:h-32 flex flex-col justify-center pl-2">
               <a
                 href="https://www.unccd.int/events/desertification-drought-day/2023"
@@ -60,13 +60,12 @@ function Footer() {
       </div>
       <div className="text-black justify-self-end	">
         <h2 className="max-sm:text-2xl text-4xl font-light">
-          Contact & Support{" "}
+          Contact & Support
         </h2>
 
         <p className="mt-6">
           Contact Information:
           <a className="text-blue-700" href="mailto:[email protected]">
-            {" "}
             [email protected]
           </a>
         </p>

diff --git a/src/slides/Healverse/Healverse.jsx b/src/slides/Healverse/Healverse.jsx
@@ -6,25 +6,24 @@ function Healverse() {
   return (
     <section className="full-height panel-inner flex flex-col  justify-content-center text-white  healverse-background">
       <div>
-        <h2 className="max-sm:text-xl sm:text-3xl mt-24">
+        <h2 className="max-sm:text-xl sm:text-2xl mt-14">
           Web3/Metaverse Experience (HEALV3RSE)
         </h2>
       </div>
-      <div className="grid grid-cols-12 mt-10">
+      <div className="grid grid-cols-12 mt-10 gap-6">
         <div
-          className="max-sm:col-span-12 sm:col-span-12 lg:col-span-6 flex panel-inner relative h-3/6"
-          style={{ position: "relative", height: "100%" }}
+          className="max-sm:col-span-12 sm:col-span-12 lg:col-span-6 flex panel-inner iframe-wrapper"
         >
           <iframe
-            src="https://www.youtube.com/embed/VbMddmxlApU?rel=0&modestbranding=1&fs=0"
+            src="https://www.youtube.com/embed/VbMddmxlApU?rel=0&modestbranding=1"
             title="YouTube Video"
             allowFullScreen
             height={"100%"}
             width={"100%"}
           />
         </div>
-        <div className="max-sm:col-span-12 sm:col-span-12 lg:col-span-6 lg:ml-6 max-sm:ml- mt-6 mb-6 font-light">
-          <p>
+        <div className="max-sm:col-span-12 sm:col-span-12 lg:col-span-6 lg:ml-6 max-sm:ml-0 mb-6 font-light">
+          <p className="max-sm:text-base lg:text-base 2xl:text-2xl">
             Embark on a journey unlike any other in the world of HEALV3RSE. We
             invite you to explore, learn, and contribute to the fight against
             desertification, land degradation, and drought in a cutting-edge
@@ -37,10 +36,10 @@ function Healverse() {
               https://youtu.be/VbMddmxlApU
             </a>
           </p>
-          <h3 className="max-sm:text-base mt-6 text-lg font-bold">
+          <h3 className="max-sm:text-base lg:text-base 2xl:text-2xl mt-6 font-bold">
             How to Access & Participate
           </h3>
-          <p className="mt-6 max-sm:text-sm sm:text-base">
+          <p className="max-sm:text-base lg:text-base 2xl:text-2xl mt-6">
             Joining HEALV3RSE is simple and open to all. Whether you're a
             seasoned gamer or new to virtual worlds, we provide an accessible
             platform that thrills, educates, and empowers. Set up your virtual

diff --git a/src/slides/HerlandStories/HerlandStories.jsx b/src/slides/HerlandStories/HerlandStories.jsx
@@ -4,9 +4,9 @@ function HerlandStories() {
   return (
     <section className="full-height text-white desert-logo panel-inner grid grid-cols-12">
       <div className="max-sm:col-span-12 sm:col-span-12 md:col-span-6">
-        <p className="max-sm:text-2xl text-3xl sm:pt-40 max-sm:pt-32 ">
+        <h2 className="max-sm:text-2xl text-3xl sm:pt-40 max-sm:pt-32 ">
           #HerLand Stories
-        </p>
+        </h2>
         <p className="max-sm:text-xl text-2xl pt-10 font-light">
           Do you know an inspiring story about women, girls and land? We
           celebrate and showcase the voices, experiences, and creativity that

diff --git a/src/slides/Landing/LandingPanel.jsx b/src/slides/Landing/LandingPanel.jsx
@@ -6,11 +6,11 @@ function LandingPanel() {
     <section className="full-height text-white video-wrapper panel-inner landing-background">
       <div className="slide-content full-height flex flex-col content-end justify-end">
         <div className="flex flex-col">
-          <h2 className="max-sm:text-7xl text-9xl font-bold mb-32  landing-text ">
+          <h2 className="max-sm:text-7xl md:text-7xl xl:text-7xl 2xl:text-9xl sm:text-6xl font-bold mt-20 mb-10  landing-text ">
             HER <br></br>
             LAND
           </h2>
-          <div className="md:text-2xl lg:text-3xl mb-32 landing-text-hidden">
+          <div className="md:text-2xl 2xl:text-3xl lg:text-1xl sm:text-xl mb-32 landing-text-hidden">
             <p>For the land she provides, and in return, she's provided for.</p>
             <p>They are both nourished, intertwined, a tapestry old as time.</p>
             <p className="font-bold mt-10">

diff --git a/src/slides/PortraitCarousel/PortraitCarousel.jsx b/src/slides/PortraitCarousel/PortraitCarousel.jsx
@@ -42,11 +42,11 @@ function PortraitCarousel(props) {
   return (
     <section className="full-height bg-white flex flex-column justify-around panel-inner">
       <div className="font-light">
-        <p className="max-sm:text-2xl text-5xl font-light text-black pt-32">
+        <h2 className="max-sm:text-base sm:text-2xl md:text-3xl lg:text-3xl xl:text-4xl font-light text-black pt-32">
           #HerLand Photo Exhibition
-        </p>
+        </h2>
         <div className="grid grid-cols-12 text-black">
-          <p className="max-sm:text-base text-2xl font-light mt-8 md:col-span-8 sm:col-span-12 max-sm:col-span-12" >
+          <p className="max-sm:text-base lg:text-base 2xl:text-2xl  font-light mt-8 md:col-span-8 sm:col-span-12 max-sm:col-span-12" >
             Experience the strength and beauty of women across continents in our
             exclusive 'Women & Land' photo exhibition. Curated by{" "}
             <a

diff --git a/src/slides/VideoExhibition/VideoExhibition.jsx b/src/slides/VideoExhibition/VideoExhibition.jsx
@@ -13,15 +13,16 @@ function VideoExhibition(props) {
   };
 
   const nameClassNames =
-    "max-xs:text-xl xs:text-xl md:text-3xl font-light mt-6";
+    "max-xs:text-2xl xs:text-xl md:text-3xl font-light mt-6";
   const descriptionClassNames =
     "max-xs:text-base xs:text-base md:text-lg font-light mt-2";
+
   return (
     <section className="full-height bg-gray-950 text-white flex flex-col panel-inner">
-      <h2 className="xs:text-3xl md:text-4xl lg:text-5xl pt-40 font-light  ">
-        Video-Art Exhibition: "TransNature" #HerLand{" "}
+      <h2 className="max-sm:text-2xl sm:text-3xl lg:text-5xl pt-40 font-light  ">
+        Video-Art Exhibition: "TransNature" #HerLand
       </h2>
-      <p className="xs:text-lg md:text-xl lg:text-2xl pt-10 font-light  ">
+      <p className="max-sm:text-base lg:text-base 2xl:text-2xl  pt-10 font-light  ">
         Discover a unique fusion of nature, technology, and art in the
         'TransNature' video-art exhibition. Five short loops invite you to
         reflect on our environment's transformation, interconnectedness, and the