adds light mode icons and styles

assets/js/contribute-carousel.js

@@ -55,7 +55,6 @@ const events = [
 let currentIndex = 1;
 
 function updateCarousel() {
-    console.log({events,currentIndex})
     if(!!events[currentIndex - 1]) {
         document.getElementById('prev-btn').style = 'opacity:1;'
         document.getElementById('left-image').style = 'visibility:visible;'

styles/_contribute.scss

@@ -1,4 +1,37 @@
 .page-community {
+    .main-title {
+        color: var(--black-black-0, #FFF);
+        text-align: center;
+
+        /* Desktop / H1 */
+        font-family: Work Sans;
+        font-size: 62px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 70px;
+
+        @media (max-width: 768px) {
+            font-size: 42px;
+        }
+    }
+
+    .get-funding-btn {
+        width: 90%;
+        margin: 0 auto;
+    }
+
+    @media (max-width: 768px) {
+        .cd-none-sm {
+            display: none !important;
+        }
+    }
+
+    @media (min-width: 769px) {
+        .cd-none-lg {
+            display: none !important;
+        }
+    }
+
     .icon-date {
         padding-right: 4px;
         content: url(../img/events/event-date.svg);
@@ -14,7 +47,6 @@
     }
 
     @media (min-width: 768px) {
-
         .builders-wrap {
             white-space: normal;
         }
@@ -69,7 +101,7 @@
         white-space: nowrap;
         overflow: auto;
         max-width: 65vw;
-
+        padding-left: 10px;
     }
 
     #community-table img {
@@ -80,8 +112,33 @@
     .td-img {
         padding: 10px;
         width: 69px;
+
+        .discord-icon {
+            content: url(../img/community/ic_Discord.png)
+        }
+
+        .twitter-icon {
+            content: url(../img/community/ic_Twitter.png);
+        }
+
+        .youtube-icon {
+            content: url(../img/community/ic_Youtube.png);
+        }
+
+        .xrpl-icon {
+            content: url(../img/community/ic_XRPL.png);
+        }
+
+        .github-icon {
+            content: url(../img/community/ic_GitHub.png);
+        }
+
+        .stackoverflow-icon {
+            content: url(../img/community/ic_StackOverflow.png);
+        }
     }
 
+
     .text-external-link {
         display: inline-flex;
         align-items: center;
@@ -117,6 +174,23 @@
         transform: translateY(-50%);
     }
 
+    @media (max-width: 768px) {
+        #community-table td {
+            white-space: nowrap;
+            overflow: scroll;
+        }
+
+        #community-table img {
+            width: 96px;
+            height: 29px;
+        }
+
+        .td-img {
+            min-width: 60px;
+            /* Remove fixed width for mobile view */
+        }
+    }
+
     .xrpl-events-section {
         margin-top: 150px;
         padding: 50px 40px;
@@ -301,6 +375,12 @@
         display: flex;
         justify-content: space-between;
         padding: 20px;
+
+        @media (max-width: 768px) {
+            flex-direction: column;
+            align-items: start;
+            text-align: start;
+        }
     }
 
     .stacked-stats {
@@ -313,6 +393,12 @@
         align-self: center;
         text-align: center;
         margin: 0 auto;
+
+        @media (max-width: 768px) {
+            margin: 0px;
+            text-align: start;
+            align-self: start;
+        }
     }
 
     .number {
@@ -325,10 +411,6 @@
             flex-direction: column-reverse;
         }
 
-        .stacked-stats {
-            gap: 25px;
-        }
-
         .funding-section,
         .stats {
             width: 100%;
@@ -340,17 +422,29 @@
         width: 950px;
         margin: 0 auto;
         margin-top: 106px;
+        max-width: 100%; // Make the carousel responsive
 
         .flex-align {
             display: flex;
             align-items: center;
         }
+
+        @media (max-width: 768px) {
+            width: 100%; // Make the carousel full width on small screens
+        }
     }
 
     .center-image-wrapper {
         position: relative;
         width: 60%;
         margin: 0 48px;
+
+        @media (max-width: 768px) {
+            margin: 0 auto; // Remove margin on small screens
+            position: relative;
+            width: 86%;
+            right: 11px;
+        }
     }
 
     .image-container {
@@ -373,6 +467,12 @@
     #right-image {
         width: 15%;
         opacity: 0.7;
+
+        // Styles for smaller screens
+        @media (max-width: 768px) {
+            display: none;
+            margin: 0; // Adjust center image margin on small screens
+        }
     }
 
     .nav-btn {
@@ -463,8 +563,14 @@
         width: 205px;
         background-color: #232325;
         box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+
+        @media (max-width: 768px) {
+            width: 99%;
+        }
     }
 
+    // Styles for smaller screens
+
     .project-card.top-left {
         top: 0;
         left: 0;
@@ -576,7 +682,7 @@
         .com-card {
             padding: 36px;
             background: #232325;
-            width: 352px;
+            min-width: 352px;
             height: 442px;
             position: relative;
 

styles/_helpers.scss

@@ -429,6 +429,11 @@
     display: none;
   }
 }
+.d-none-lg {
+  @include media-breakpoint-up(lg) {
+    display: none;
+  }
+}
 .d-block {
   display: block;
 }

styles/light/_light-theme.scss

@@ -838,6 +838,51 @@ pre code {
 
 .page-docs-index,
 .page-community {
+  .main-title{
+    color: #111112;
+  }
+  .event-location{
+    color: #232325 !important;
+  }
+  .event-details{
+    color: #232325 !important;
+  }
+  .upcoming-event{
+    .event-name{
+      color: #111112;
+    }
+  }
+  .upcoming-label{
+    color: #232325 !important;
+  }
+  .description{
+    color: #232325;
+  }
+  .events-text{
+    color: #111112;
+  }
+  .discord-icon {
+      content: url(../img/community/ic_Discord_light.png)
+    }
+  
+    .twitter-icon {
+      content: url(../img/community/ic_Twitter_light.png);
+    }
+  
+    .youtube-icon {
+      content: url(../img/community/ic_Youtube_light.png);
+    }
+  
+    .xrpl-icon {
+      content: url(../img/community/ic_XRPL_light.png);
+    }
+    .github-icon {
+      content: url(../img/community/ic_GitHub_light.png);
+    }
+    
+    .stackoverflow-icon {
+      content: url(../img/community/ic_StackOverflow_light.png);
+    }
   #run-a-network-node .card-deck {
     .card:nth-child(4) .card-footer {
       background-image: url(../img/cards/lightmode/4col-light-green.svg);
@@ -1005,7 +1050,6 @@ $placeholder-color: $gray-600;
     filter: invert(100%) brightness(0.8);
   }
 }
-
 .page-impact {
 
   .connect-list {

template/page-community.html.jinja

@@ -124,7 +124,7 @@
 
 <div class="col-lg-6 mx-auto text-left text-md-center" style="position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);">
     <div class="d-flex flex-column-reverse">
-<h1 class="mb-0">
+<h1 class="mb-0 main-title">
     {% trans %}A Global Blockchain 
     <br class="until-sm"/>
     Community of <span class="builders-wrap">Builders</span>
@@ -141,7 +141,7 @@
     <h4 >Hot Topics Happening Now</h4>
     <table>
         <tr>
-            <td class="td-img"><img src="./assets/img/community/ic_Discord.png" alt="discord icon"></td>
+            <td class="td-img"><img class="discord-icon" alt="discord icon"></td>
             <td>Donec venenatis orci ac turpis aliquet aliquam. Etiam vehicula sem nec justo lobortis 
              </td>
              <td>
@@ -149,7 +149,7 @@
              </td>
         </tr>
         <tr>
-            <td class="td-img"><img src="./assets/img/community/ic_Twitter.png" alt="twitter icon"></td>
+            <td class="td-img"><img class="twitter-icon" alt="twitter icon"></td>
             <td>Donec venenatis orci ac turpis aliquet aliquam. Etiam vehicula sem nec justo lobortis 
              </td>
 <td>
@@ -157,14 +157,28 @@
              </td>
         </tr>
         <tr>
-            <td class="td-img"><img src="./assets/img/community/ic_Youtube.png" alt="youtube icon"></td>
+            <td class="td-img"><img class="youtube-icon" alt="youtube icon"></td>
+            <td>Donec venenatis orci ac turpis aliquet aliquam. Etiam vehicula sem nec justo lobortis </td>
+            <td>
+                <a href="YOUR_LINK_HERE" class="text-external-link"><span class="external-link-contribute"></span></a>
+             </td>
+        </tr>
+         <tr>
+            <td class="td-img"><img class="github-icon" alt="xrpl icon"></td>
+            <td>Donec venenatis orci ac turpis aliquet aliquam. Etiam vehicula sem nec justo lobortis </td>
+            <td>
+                <a href="YOUR_LINK_HERE" class="text-external-link"><span class="external-link-contribute"></span></a>
+             </td>
+        </tr>
+         <tr>
+            <td class="td-img"><img class="stackoverflow-icon" alt="xrpl icon"></td>
             <td>Donec venenatis orci ac turpis aliquet aliquam. Etiam vehicula sem nec justo lobortis </td>
             <td>
                 <a href="YOUR_LINK_HERE" class="text-external-link"><span class="external-link-contribute"></span></a>
              </td>
         </tr>
         <tr>
-            <td class="td-img"><img src="./assets/img/community/ic_XRPL.png" alt="youtube icon"></td>
+            <td class="td-img"><img class="xrpl-icon" alt="xrpl icon"></td>
             <td>Donec venenatis orci ac turpis aliquet aliquam. Etiam vehicula sem nec justo lobortis </td>
             <td>
                 <a href="YOUR_LINK_HERE" class="text-external-link"><span class="external-link-contribute"></span></a>
@@ -176,20 +190,21 @@
 <section class="xrpl-events-section">
 <div class="header-div">
     <div class="header">
-        <h6>XRPL Events</h6>
-        <h4>Check out global events hosted <br class="d-none-sm" /> by the XRPL community</h4>
+        <h6 class="events-text">XRPL Events</h6>
+        <h4 class="events-text">Check out global events hosted <br class="d-none-sm" /> by the XRPL community</h4>
     </div>
     <p class="description">Meet the XRPL community at meetups, hackathons, blockchain conferences, and more across global regions.</p>
-    <a class="btn btn-primary btn-arrow view-all-events-btn" href="events.html">{% trans %}View All Events{% endtrans %}</a>
+    <a class="cd-none-sm btn btn-primary btn-arrow view-all-events-btn" href="events.html">{% trans %}View All Events{% endtrans %}</a>
 </div>
     <div class="upcoming-event">
         <p class="upcoming-label">UPCOMING EVENT</p>
         <div class="days-count">13 days</div>
-        <h5>XRPL Warsaw Meetup 2023</h5>
+        <h5 class="event-name">XRPL Warsaw Meetup 2023</h5>
 
         <p class="event-details mb-2 d-flex icon"> <span class="icon-location"> </span>September 08-09, 2023</p>
         <p class="event-location d-flex icon"> <span class="icon-date"> </span>Warsaw, Poland</p>
     </div>
+    <a class="cd-none-lg btn btn-primary btn-arrow view-all-events-btn" href="events.html">{% trans %}View All Events{% endtrans %}</a>
 </section>
 <section class="carousel">
     <div class="image-container">
@@ -222,6 +237,7 @@
 </section>
 
 <section class="community-funding">
+    <a class="cd-none-lg btn btn-primary btn-arrow view-all-events-btn get-funding-btn" href="developer-funding.html">{% trans %}Get Funding{% endtrans %}</a>
     <div class="stats">
         <div class="stacked-stats">
             <div class="stat">
@@ -242,7 +258,7 @@
         <span class="small-text">XRPL Developer Funding</span>
         <h2>Funding Opportunities for Blockchain Businesses</h2>
         <p>If you're a software developer or team looking to build your next blockchain business on the XRP Ledger (XRPL), numerous funding opportunities like grants and hackathons await your innovation.</p>
-     <a class="btn btn-primary btn-arrow view-all-events-btn" href="developer-funding.html">{% trans %}Get Funding{% endtrans %}</a>
+     <a class="cd-none-sm btn btn-primary btn-arrow view-all-events-btn" href="developer-funding.html">{% trans %}Get Funding{% endtrans %}</a>
     </div>
 </section>