Implement Darkmode on Governance and Outreachy page (#2053)

* add background images * implement darkmode/redesign on governance page * implement darkmode on outreachy page * Update src/ocamlorg_frontend/pages/governance.eml Co-authored-by: Sayo <[email protected]> * Update src/ocamlorg_frontend/pages/governance.eml Co-authored-by: Sayo <[email protected]> * corrections * Update src/ocamlorg_frontend/pages/governance_team.eml Co-authored-by: sabine <[email protected]> * Update src/ocamlorg_frontend/pages/governance_team.eml Co-authored-by: sabine <[email protected]> * correction * more corrections * small fixes --------- Co-authored-by: Sayo <[email protected]> Co-authored-by: sabine <[email protected]>
ocaml · Feb 19, 2024 · df29fdd · df29fdd
1 parent 89dd945
commit df29fdd
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 154 deletions.
diff --git a/asset/img/governance/circle_image.png b/asset/img/governance/circle_image.png
diff --git a/asset/img/governance/dark-hero-background.png b/asset/img/governance/dark-hero-background.png
diff --git a/asset/img/governance/hero-background.png b/asset/img/governance/hero-background.png
diff --git a/src/ocamlorg_frontend/components/icons.eml b/src/ocamlorg_frontend/components/icons.eml
@@ -38,7 +38,7 @@ let beaker class_ =
 
 let book class_ =
   <svg xmlns="http://www.w3.org/2000/svg" class="<%s class_ %>" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+    <path d="M2.46875 15.1935L2.5293 4.46692H1.31836V18.1154C2.98242 17.6857 4.65234 17.4122 6.33398 17.4005C7.88672 17.3908 9.43945 17.6075 10.9961 18.1349C10.0293 17.3517 8.95117 16.7755 7.80078 16.4005C6.35156 15.9279 4.78516 15.7716 3.17969 15.9083C2.81641 15.9376 2.5 15.6681 2.46875 15.3068C2.46484 15.2677 2.46484 15.2306 2.46875 15.1935ZM20.2383 3.90638C20.2344 3.87513 20.2305 3.84192 20.2305 3.80677C20.2305 3.77356 20.2324 3.74036 20.2383 3.70716V1.53528C18.7148 1.39075 17.1445 1.55872 15.7734 2.07825C14.4922 2.56458 13.3867 3.36341 12.668 4.50794V16.879C13.7852 16.1329 14.9277 15.5197 16.1016 15.1017C17.4395 14.6251 18.8145 14.3986 20.2383 14.5118V3.90638ZM21.5566 3.14856H23.3418C23.7051 3.14856 24 3.44349 24 3.80677V18.9747C24 19.338 23.7051 19.6329 23.3418 19.6329C23.2676 19.6329 23.1953 19.6212 23.1289 19.5978C21.293 19.0724 19.4688 18.7228 17.6621 18.7111C15.9004 18.6993 14.1406 19.0099 12.373 19.7892C12.2637 19.8615 12.1328 19.9005 11.998 19.8986C11.8652 19.9005 11.7344 19.8615 11.623 19.7892C9.85742 19.0079 8.0957 18.6993 6.33398 18.7111C4.52734 18.7228 2.70508 19.0724 0.867188 19.5978C0.800781 19.6212 0.728516 19.6329 0.654297 19.6329C0.294922 19.6349 0 19.34 0 18.9767V3.80677C0 3.44349 0.294922 3.14856 0.658203 3.14856H2.53516L2.54688 0.949345C2.54883 0.632939 2.77148 0.37122 3.07031 0.30872C4.80273 -0.0526083 6.9082 0.0372355 8.75391 0.744267C10.0293 1.23255 11.1875 2.01184 12.0332 3.13685C12.8867 2.08802 14.0273 1.33411 15.3105 0.847782C17.0645 0.181767 19.0879 0.0216105 20.9922 0.300907C21.3203 0.347782 21.5547 0.630986 21.5547 0.951298V3.14856H21.5566ZM13.3066 18.0353C14.7617 17.5783 16.2148 17.3908 17.668 17.3986C19.3496 17.4083 21.0195 17.6837 22.6836 18.1134V4.46692H21.5566V15.2521C21.5566 15.6154 21.2617 15.9103 20.8984 15.9103C20.8457 15.9103 20.7949 15.9044 20.7461 15.8927C19.3047 15.6661 17.9082 15.8536 16.5449 16.34C15.4473 16.7325 14.3691 17.3185 13.3066 18.0353ZM11.3516 16.7521V4.48841C10.6621 3.27161 9.54688 2.45716 8.28711 1.97474C6.85938 1.42786 5.25586 1.30481 3.85742 1.50403L3.7832 14.5529C5.30859 14.4982 6.80078 14.6915 8.20508 15.1505C9.32227 15.5138 10.3809 16.047 11.3516 16.7521Z" fill="#D54000"/>
   </svg>
 
 let pencil_note class_ = 

diff --git a/src/ocamlorg_frontend/css/partials/bg_sections.css b/src/ocamlorg_frontend/css/partials/bg_sections.css
@@ -48,4 +48,13 @@
     background: none;
     @apply pt-16 pb-16 bg-dark-background_navigation;
   }
+ .governance-blue-gradient {
+  background: linear-gradient(45deg, #0B1229, #0F254C);
+  @apply border-none;
+ }
+
+ .dark-governance-blue-gradient {
+  background: linear-gradient(45deg, #0B1228, #0E254E);
+  @apply border-none;
+}
 }
diff --git a/src/ocamlorg_frontend/css/partials/buttons.css b/src/ocamlorg_frontend/css/partials/buttons.css
@@ -50,7 +50,9 @@
   .btn-ghost {
     @apply bg-transparent border-primary text-primary border text-base font-semibold dark:bg-transparent dark:text-dark-primary dark:hover:bg-dark-primary dark:hover:text-dark-title;
   }
-
+  .btn-transparent{
+    @apply rounded font-normal text-lg text-white whitespace-nowrap transition-colors inline-flex items-center justify-center space-x-3 dark:text-dark-white px-4 py-2 hover:border-primary dark:hover:border-dark-primary hover:text-primary dark:hover:text-dark-primary;
+  }
   .btn-ghost:hover {
     @apply text-white bg-primary border-primary;
   }

diff --git a/src/ocamlorg_frontend/pages/governance.eml b/src/ocamlorg_frontend/pages/governance.eml
@@ -3,19 +3,14 @@ module MemberSet = Set.Make (Data.Governance.Member)
 let count_members (team : Data.Governance.team) =
    MemberSet.cardinal (MemberSet.of_list (team.members @ List.concat (List.map (fun (team : Data.Governance.team) -> team.members) team.subteams)))
 
-let render_team_card (team : Data.Governance.team) member_label btn_class =
+let render_working_group (team : Data.Governance.team) member_label btn_class =
   <div class="flex-col">
-    <div class="text-2xl mb-5 font-semibold flex items-center">
+    <div class="text-2xl mb-2 font-semibold flex items-center text-white dark:text-dark-title">
       <span><%s team.name %></span>
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 ml-2" fill="none" viewBox="0 0 24 24"
-        stroke="currentColor" stroke-width="2">
-        <path stroke-linecap="round" stroke-linejoin="round"
-          d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-      </svg>
     </div>
-    <div class="opacity-70 mb-4 text-lg"><%s team.description %></div>
-    <div class="font-semibold mb-6"><%i count_members team %> <%s member_label %></div>
-    <a href="<%s Url.governance_team team.id %>" class="btn <%s btn_class %>">
+    <p class="mb-2 text-white dark:text-dark-title"><%s team.description %></p>
+    <div class="font-semibold my-6 text-white dark:text-dark-title"><%i count_members team %> <%s member_label %></div>
+    <a href="<%s Url.governance_team team.id %>" class="btn-transparent <%s btn_class %>">
       <span>Details</span>
       <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
         stroke="currentColor">
@@ -24,71 +19,60 @@ let render_team_card (team : Data.Governance.team) member_label btn_class =
     </a>
   </div>
 
+let render_team_card (team: Data.Governance.team) member_label = 
+  <div class="flex flex-col bg-white rounded-2xl border dark:bg-dark-card outline-[3px] p-5">
+    <p class="text-title dark:text-dark-title text-lg mb-5"><%s team.name %></p>
+    <p class="text-content dark:text-dark-content flex-grow text-base mb-5"><%s team.description %></p>
+    <p class="text-content dark:text-dark-content text-base font-bold mb-2"><%i count_members team %> <%s member_label %></p>
+    <a href="<%s Url.governance_team team.id %>" class="flex gap-2 items-center text-base text-primary hover:text-primary-dark hover:underline dark:text-dark-primary dark:hover:underline py-2">
+      Details
+      <%s! Icons.arrow_right_circle "h-5 w-5" %>
+    </a>
+  </div>
+
 let render ~teams ~working_groups =
 Layout.render
 ~title:"Governance"
 ~description:"OCaml is a mature, statically-typed, functional programming language. Learn more about its rich history
 and what makes it unique." @@
-<div class="intro-section-simple">
+<div class="w-full border-b intro-section-simple dark:dark-intro-section-simple md:bg-transparent dark:border-none md:bg-[length:cover] py-16 md:bg-[url('/img/governance/hero-background.png')] dark:md:bg-[url('/img/governance/dark-hero-background.png')]">
   <div class="container-fluid">
-    <div class="mx-auto px-4 sm:px-6">
-      <div class="">
-        <div class="sm:text-center lg:col-span-8 lg:text-center">
-          <h1 class="font-bold pb-6 text-[56px]">Governance</h1>
-          <div class="text-2xl text-body-400 pb-10">The projects running under OCaml and the awesome people
-            behind it
-          </div>
-          <a href="<%s Url.governance_policy %>"><button class="btn btn-lg mb-4 lg:mb-0">Read the Governance Policy</button></a>
-        </div>
+      <div class="flex md:flex-row flex-col">
+        <div class="w-full m-auto mb-4 md:mb-0">
+          <h1 class="font-bold mb-2 text-title dark:text-dark-title">Governance</h1>
+          <p class="text-title dark:text-dark-title">The projects running under OCaml and the awesome people behind it
+          </p>
+        </div> 
+        <div class="flex h-max flex-col lg:flex-row lg:space-x-6 space-y-5 lg:space-y-0 md:space-y-5 w-full lg:w-auto mt-8 md:mt-0">
+        <%s!  Hero_section.hero_button ~left_icon:(Icons.book "w-5 h-5") ~right_icon:("") ~text:("Read the Governance Policy") ~href:("https://ocaml.org/policies/governance") %>
+       </div>
       </div>
-    </div>
   </div>
 </div>
-
-<div class="governance-contrast-section">
-  <div class="py-10 lg:py-28">
-    <div class="container-fluid text-white">
-      <h2 class="font-bold gradient mb-6 text-[40px]">Teams</h2>
-      <div class="text-lg">
-        See who the maintainers of the various OCaml projects are. We present a comprehensive list structured by project / purpose.
-      </div>
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-20 mt-16">
-        <% teams |> List.iter (fun (team : Data.Governance.team) -> %>
-        <%s! render_team_card team "maintainers" "btn-legacy-tertiary" %>
-        <% );%>
-      </div>
-    </div>
+<div class="container-fluid py-10">
+  <h2 class="font-bold text-2xl mb-2 text-title dark:text-dark-title">Teams</h2>
+  <p class="text-lg text-content dark:text-dark-content">See who the maintainers of the various OCaml projects are. We present a comprehensive list structured by project / purpose</p>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-16">
+    <% teams |> List.iter (fun (team : Data.Governance.team) -> %>
+    <%s! render_team_card team "maintainers" %>
+    <% );%>
   </div>
 </div>
-<svg width="100%" height="auto" viewBox="0 0 1600 128" fill="none" class='bg-white' xmlns="http://www.w3.org/2000/svg">
-  <rect width="1600" height="121" transform="translate(0 0.000244141)" fill="white" />
-  <circle cx="268.5" cy="68.5002" r="27.5" fill="#EE6A1A" fill-opacity="0.48" />
-  <path fill-rule="evenodd" clip-rule="evenodd"
-    d="M0 106L133 87.1667C267 68.3333 533 30.6667 800 30.6667C1067 30.6667 1333 68.3333 1467 87.1667L1600 106V0H1467C1333 0 1067 0 800 0C533 0 267 0 133 0H0V106Z"
-    fill="url(#paint0_linear_2087_13206)" />
-  <circle cx="200" cy="80" r="48" fill="#CC4D00" />
-  <defs>
-    <linearGradient id="paint0_linear_2087_13206" x1="1600" y1="44.6059" x2="-2.29315e-07" y2="44.6059"
-      gradientUnits="userSpaceOnUse">
-      <stop stop-color="#0B1528" />
-      <stop offset="0.536458" stop-color="#0B1528" stop-opacity="0.958333" />
-      <stop offset="1" stop-color="#0B1528" />
-    </linearGradient>
-  </defs>
-</svg>
-
-<div class="bg-white">
-  <div class="py-10 lg:py-28">
-    <div class="container-fluid">
-      <h2 class="font-bold text-body-600 mb-6 text-[40px]">Working groups</h2>
-      <div class="text-body-400 text-lg prose">
-        Working groups are community initiatives that gather around certain topics or a shared purpose.
-        The <a href="<%s Url.governance_policy %>">OCaml Governance Policy</a> does not apply to them. Participation is welcome and encouraged.</div>
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-20 mt-16">
-        <% working_groups |> List.iter (fun (wg : Data.Governance.team) -> %>
-        <%s! render_team_card wg "organiser(s)" "btn-ghost" %>
-        <% ); %>
+<div class="w-full governance-blue-gradient dark:dark-governance-blue-gradient">
+  <div class="container-fluid flex justify-between items-center py-10 px-8">
+      <div class="flex flex-col w-full">
+        <div class="md:max-w-[80%]">
+          <h2 class="font-bold text-2xl text-white dark:text-dark-title mb-2">Working groups</h2>
+          <p class="text-white dark:text-dark-title mb-12 leading-7">Working groups are community initiatives that gather around certain topics or a shared purpose. The <a class="underline font-bold" href="<%s Url.governance_policy %>">OCaml Governance Policy</a> does not apply to them. Participation is welcome and encouraged.</p>
+        </div>
+        <div>
+          <% working_groups |> List.iter (fun (wg : Data.Governance.team) -> %>
+          <%s! render_working_group wg "organiser(s)" "bg-transparent border border-white dark:border-dark-white dark:bg-transparent text-white dark:text-dark-white;" %>
+          <% ); %>
+        </div>
+      </div>
+      <div class="hidden md:flex h-[15rem] ml-auto w-[30%]">
+          <img class="" src="<%s! Ocamlorg_static.Asset.url "img/governance/circle_image.png" %>" alt="camel head illustration">
       </div>
-    </div>
   </div>
 </div>