Updated images and styles

styles/_pages.scss

@@ -540,9 +540,6 @@
 // }
 
 
-
-
-
 }
 
 
@@ -750,6 +747,42 @@
       background-image: url(../img/cards/4col-light-green.svg);
     }
   }
+
+  #run-a-network-node .text-cards {
+    grid-gap: 40px;
+
+    h6::before {
+      margin-top: 0;
+      height: unset;
+    }
+
+    a {
+      font-size: 1.25rem;
+      line-height: 26px;
+      color: #fff;
+      font-weight: bold;
+
+      &:hover { 
+        text-decoration: none;
+        background: none !important;
+      }
+    }
+
+    .btn-arrow::after {
+      display: inline-block;
+      content: url(../img/icons/arrow-right-purple.svg);
+      vertical-align: middle;
+      padding-left: 8px;
+      -webkit-transition: transform 0.3s ease-out;
+      -moz-transition: transform 0.3s ease-out;
+      -ms-transition: transform 0.3s ease-out;
+      -o-transition: transform 0.3s ease-out;
+      transition: transform 0.3s ease-out;
+    }
+
+  }
+
+
 }
 
 .page-community {

styles/light/_light-theme.scss

@@ -656,6 +656,14 @@ pre code {
     .card:nth-child(4) .card-footer {
       background-image: url(../img/cards/lightmode/4col-light-green.svg);
     }
+    
+  }
+  #run-a-network-node .text-cards a {
+    color: $black;
+  }
+  
+  #xrpl-events .text-light {
+    color: $black !important;
   }
 }
 

styles/package.json

@@ -4,9 +4,9 @@
     "node-sass": "^7.0.0"
   },
   "scripts": {
-    "build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2022-v3.css --output-style compressed",
+    "build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2022-v4a.css --output-style compressed",
-    "build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v3.css --output-style compressed --source-map true",
+    "build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v4a.css --output-style compressed --source-map true",
-    "build-css-watch-out": "node-sass --recursive --watch  --include-path scss xrpl.scss ../out/assets/css/devportal2022-v3.css --output-style compressed --source-map true"
+    "build-css-watch-out": "node-sass --recursive --watch  --include-path scss xrpl.scss ../out/assets/css/devportal2022-v4a.css --output-style compressed --source-map true"
   },
   "dependencies": {
     "sass": "^1.26.10"

template/base.html.jinja

@@ -53,7 +53,7 @@
     {% if target.lang=="ja" %}
     <link href="{{currentpage.prefix}}assets/css/fonts-ja.css" rel="stylesheet" />
     {% endif %}
-    <link href="{{currentpage.prefix}}assets/css/devportal2022-v3.css" rel="stylesheet" />
+    <link href="{{currentpage.prefix}}assets/css/devportal2022-v4a.css" rel="stylesheet" />
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 

template/page-community.html.jinja

@@ -17,48 +17,50 @@
 
 {% block main %}
 
-
-
-<!-- TEMP -->
 <style>
 
-
+  .parallax {
-
+    position: absolute;
-  .text-cards {
+    -webkit-transition: all 0.1s ease;
-    grid-gap: 40px;
+    -moz-transition: all 0.1s ease;
-  }
+    -ms-transition: all 0.1s ease;
-  .text-card h6::before {
+    -o-transition: all 0.1s ease;
-    margin-top: 0;
+    transition: all 0.1s ease;
-    height: unset;
-  }
-  .text-card a{
-    font-size: 1.25rem;
-    line-height: 26px;
-    color: #fff;
-    font-weight: bold;
-  }
-  .text-card a:hover {
-    text-decoration: none;
-    background: none !important;
   }
 
-  .text-card .btn-arrow::after {
+  .one {
-    display: inline-block;
+    top: 160px;
-    content: url(../assets/img/icons/arrow-right-purple.svg);
+    left: 0%;
-    vertical-align: middle;
+  }
-    padding-left: 8px;
+  .two {
-    -webkit-transition: transform 0.3s ease-out;
+    top: 439px;
-    -moz-transition: transform 0.3s ease-out;
+    left: 22%;
-    -ms-transition: transform 0.3s ease-out;
+  }
-    -o-transition: transform 0.3s ease-out;
+  .three {
-    transition: transform 0.3s ease-out;
+    top: 517px;
-}
+    left: 52%;
+  }
+  .four {
+    top: 322px;
+    left: 71%;
+  }
+  .five {
+    top: 120px;
+    right: 0%;
+  }
 
 </style>
 
+<section class="py-26 pb-40 mb-40 text-center">
 
+  <div class="d-lg-block d-none">
+    <img class="parallax one" width="220px" height="160px" src="./assets/img/community/community-one@2x.png" >
+    <img class="parallax two" width="120px" height="160px" src="./assets/img/community/community-two@2x.png" >
+    <img class="parallax three" width="102px" height="102px" src="./assets/img/community/community-three@2x.png" >
+    <img class="parallax four" width="120px" height="160px" src="./assets/img/community/community-four@2x.png" >
+    <img  class="parallax five" width="216px" height="160px" src="./assets/img/community/community-five@2x.png" >
+  </div>
 
-<section class="py-26 text-center">
   <div class="col-lg-6 mx-auto text-left text-md-center">
     <div class="d-flex flex-column-reverse">
       <h1 class="mb-0">{% trans %}A Global Community of Builders and Innovators{% endtrans %}</h1>
@@ -110,11 +112,6 @@
 </section>
 
 
-
-
-<!-- order-1 order-lg-2 -->
-<!-- order-2 order-lg-1 -->
-
 <!-- Contribute -->
 <section class="container-new py-5" id="run-a-network-node">
   <div class="card-grid card-grid-2xN">
@@ -129,32 +126,29 @@
       </div>
 
       <div class="col d-lg-none d-block">
-        <!-- <img src="./assets/img/community/temp_community_xrp_ledger@2x.png" class="w-100"> -->
         <div class="mt-10" id="networkNode-small"></div>
-    </div>
+      </div>
 
-        <div class="pt-2 pt-lg-5 card-grid card-grid-2xN text-cards">
+      <div class="pt-2 pt-lg-5 card-grid card-grid-2xN text-cards">
-        
+        <div class="text-card">
-          <div class="text-card">
+          <a class="btn-arrow" href="/the-rippled-server.html">About the Server</a>
-            <a class="btn-arrow" href="/the-rippled-server.html">About the Server</a>
+          <p class="mt-3 mb-0">rippled is the core peer-to-peer server that manages the XRP Ledger.</p>
-            <p class="mt-3 mb-0">rippled is the core peer-to-peer server that manages the XRP Ledger.</p>
+        </div>
-          </div>
+    
+        <div class="text-card">
+          <a class="btn-arrow" href="/run-rippled-as-a-validator.html">Become a Validator </a>
+          <p class="mt-3 mb-0">Join the Unique Node List (UNL) to contribute to consensus on XRPL.</p>
+        </div>
       
-          <div class="text-card">
+        <div class="text-card">
-            <a class="btn-arrow" href="/run-rippled-as-a-validator.html">Become a Validator </a>
+          <a class="btn-arrow" href="/install-rippled.html">Install & Configure</a>
-            <p class="mt-3 mb-0">Join the Unique Node List (UNL) to contribute to consensus on XRPL.</p>
+          <p class="mt-3 mb-0">Install, run, and update the rippled server.</p>
-          </div>
+        </div>
-        
+      
-          <div class="text-card">
+        <div class="text-card">
-            <a class="btn-arrow" href="/install-rippled.html">Install & Configure</a>
+          <a class="btn-arrow" href="/troubleshoot-the-rippled-server.html">Troubleshooting</a>
-            <p class="mt-3 mb-0">Install, run, and update the rippled server.</p>
+          <p class="mt-3 mb-0">Troubleshoot any issues you’re having with the rippled server.</p>
-          </div>
+        </div>
-        
-          <div class="text-card">
-            <a class="btn-arrow" href="/troubleshoot-the-rippled-server.html">Troubleshooting</a>
-            <p class="mt-3 mb-0">Troubleshoot any issues you’re having with the rippled server.</p>
-          </div>
-        
       </div>
 
     </div>    
@@ -163,7 +157,7 @@
 
 
 <!-- Grants -->
-<section class="container-new pt-40 pb-26">  
+<section class="container-new pt-40 pb-26" id="xrpl-grants">  
   <div class="card-grid card-grid-2xN">
     <div class="col pr-2">
       <div class="d-flex flex-column-reverse">
@@ -173,8 +167,6 @@
       <p class="mb-lg-3 py-lg-4 pt-4 mb-0">{% trans %}The XRPL Grants program funds select open-source projects that help the growing XRP Ledger community. Wave 3 of XRPL Grants with the theme “Contributing to Open Source” is now open!{% endtrans %}</p>
       
       <div class="d-lg-block d-none">
-        <!-- <img src="./assets/img/community/temp_community_grants_logos@2x.png" class="w-100 mb-4 pb-3"> -->
-
         <div class="mb-4 pb-3" id="xrplGrantsDark"></div>
         <a class="btn btn-primary btn-arrow" target="_blank" href="https://xrplgrants.org/">{% trans %}Apply for a Grant{% endtrans %}</a> 
       </div>
@@ -183,19 +175,18 @@
     <div class="col">
       <div class="mb-4 pb-3 mb-lg-3 pb-lg-5">
         <h6 class="eyebrow mb-2">{% trans %}Awarded in single grant{% endtrans %}</h6>
-        <img src="./assets/img/community/community-grants-1.svg" class=" ">
+        <img src="./assets/img/community/community-grants-1.svg" >
       </div>
       <div class="mb-4 pb-3 mb-lg-3 pb-lg-5">
         <h6 class="eyebrow mb-2">{% trans %}Distributed to grant recipients{% endtrans %}</h6>
-        <img src="./assets/img/community/community-grants-2.svg" class="">
+        <img src="./assets/img/community/community-grants-2.svg" >
       </div>
       <div class="mb-4 pb-3 mb-lg-3 pb-lg-5">
         <h6 class="eyebrow mb-2">{% trans %}Open-source projects funded {% endtrans %}</h6>
-        <img src="./assets/img/community/community-grants-3.svg" class="">
+        <img src="./assets/img/community/community-grants-3.svg" >
       </div>
 
       <div class="d-lg-none d-block mt-4 pt-3">
-        <!-- <img src="./assets/img/community/temp_community_grants_logos@2x.png" class="w-100 mb-4 pb-3"> -->
         <div class="mb-4 pb-3" id="xrplGrantsDark-small"></div>
         <a class="btn btn-primary btn-arrow" target="_blank" href="https://xrplgrants.org/">{% trans %}Apply for a Grant{% endtrans %}</a> 
       </div>
@@ -204,15 +195,13 @@
 </section>
 
 
-
 <!-- Events -->
-<section class="container-new py-26">
+<section class="container-new py-26" id="xrpl-events">
   <div class="card-grid card-grid-2xN ">
     
-    <div class="col pr-2 d-lg-block d-none    ">
+    <div class="col pr-2 d-lg-block d-none">
       <!-- Large. 3 image in col -->
-
+      <div class="d-flex flex-row h-100">
-  <div class="d-flex flex-row h-100">
         <div class=" pr-1 mr-3 align-self-start">
           <img src="./assets/img/community/community-events-apex-small@2x.png" class="w-100">
           <p class="bold text-light mt-3">{% trans %}Welcome to Apex 2021{% endtrans %}</p>
@@ -250,12 +239,9 @@
           <img src="./assets/img/community/community-events-hackathon@2x.png" class="w-100">
           <h6 class="mt-3">{% trans %}XRPL Hackathon 2022{% endtrans %}</h6>
         </div>
-
-
-        <!-- <img src="./assets/img/community/temp_community_types_of_events@2x.png" class="w-100"> -->
     </div>
       
-      <div class="">
+      <div >
         <a class="btn btn-primary btn-arrow" target="_blank" href="/events.html">{% trans %}View All Events{% endtrans %}</a> 
       </div>
     </div>
@@ -307,9 +293,7 @@
 <section class="container-new py-26">
   <div class="card-grid card-grid-2xN">
     
-
     <div class="col pr-2 d-lg-block d-none">
-      <!-- <img src="./assets/img/community/temp_community_open_roles@2x.png" class="w-100"> -->
       <div class="mb-4 pb-3" id="careersDark"></div>
     </div>
     
@@ -321,7 +305,6 @@
       <p class="mb-3 py-4">{% trans %}Teams across the XRPL community are looking for talented individuals to help build their next innovation.{% endtrans %}</p>
       
       <div class="d-lg-none d-block">
-        <!-- <img src="./assets/img/community/temp_community_open_roles@2x.png" class="w-100"> -->
         <div class="mb-4 pb-3" id="careersDark-small"></div>
       </div>
       <div class="d-lg-block">
@@ -360,8 +343,6 @@
 
 
 
-<!-- <div class="mt-10" id="networkNode"></div> -->
-
 <script type="text/javascript">
   function networkNodeAnimation(){
     bodymovin.loadAnimation({
@@ -406,8 +387,6 @@
 
 
 
-
-
   function careersAnimation(){
     bodymovin.loadAnimation({
       container: document.getElementById('careersDark'),
@@ -428,8 +407,8 @@
     });
   };
 
-careersAnimation();
+  careersAnimation();
-careersSmallAnimation();
+  careersSmallAnimation();
 
 
   xrplGrantsAnimation();
@@ -441,8 +420,6 @@ careersSmallAnimation();
   
 </script>
 
-<!-- <div class="mt-10" id="networkNode"></div> -->
-
 {% endblock %}